/* =============================================================
   EXPERTOHOGAR.COM — SISTEMA DE DISEÑO MAESTRO
   Identidad corporativa oficial. Importar en cada página:
   <link rel="stylesheet" href="/assets/css/expertohogar.css">

   Paleta corporativa (Manual de Marca):
     Azul    #1E3A8A — Confianza y profesionalismo
     Verde   #28A745 — Crecimiento y armonía
     Amarillo#F4C20D — Energía y optimismo
     Gris    #6B7280 — Neutro
   Tipografía: Montserrat (Bold + Regular)
   ============================================================= */

/* ── Tipografía corporativa: Montserrat ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
    /* Colores corporativos */
    --ls-navy:        #1E3A8A;   /* Azul — primario, cabeceras, estructura */
    --ls-navy-700:    #15306E;
    --ls-magenta:     #28A745;   /* Verde — CTA, acentos (marca "Hogar") */
    --ls-magenta-700: #1F8C39;
    --ls-yellow:      #F4C20D;   /* Amarillo — destacados, estrellas */
    --ls-yellow-700:  #c99d0a;
    --ls-gray:        #6B7280;   /* Gris corporativo neutro */
    --ls-cyan:        #16a6e0;   /* Secundario (categoría aseo) */
    --ls-cyan-700:    #0d87ba;

    /* Neutros */
    --ls-text:    #1e293b;
    --ls-muted:   #64748b;
    --ls-line:    #e2e8f0;
    --ls-bg:      #f4f6fb;
    --ls-white:   #ffffff;
    --ls-ok:      #16a34a;
    --ls-warn:    #f59e0b;
    --ls-err:     #ef4444;

    /* Colores POR CATEGORÍA DE SERVICIO */
    --cat-aseo:         #16a6e0;  /* Aseo y limpieza  — cian */
    --cat-aseo-bg:      #e8f6fd;
    --cat-profesional:  #6d28d9;  /* Profesionales    — violeta */
    --cat-profesional-bg:#f1ebfc;
    --cat-tecnico:      #f59e0b;  /* Técnicos         — ámbar */
    --cat-tecnico-bg:   #fef3e2;
    --cat-exterior:     #16a34a;  /* Exteriores       — verde */
    --cat-exterior-bg:  #e7f6ec;

    /* Tipografía y radios */
    --ls-font-head: 'Montserrat', system-ui, sans-serif;
    --ls-font-body: 'Montserrat', system-ui, sans-serif;
    --ls-rad:    10px;
    --ls-rad-lg: 16px;
    --ls-shadow: 0 2px 14px rgba(30,58,138,.08);
    --ls-shadow-hover: 0 8px 28px rgba(30,58,138,.14);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
    font-family:var(--ls-font-body);
    background:var(--ls-bg);
    color:var(--ls-text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5 { font-family:var(--ls-font-head); color:var(--ls-navy); line-height:1.25; font-weight:700; }
a { color:var(--ls-navy); text-decoration:none; }

/* ── Barra superior / navbar ── */
.ls-nav {
    background:var(--ls-white);
    border-bottom:1px solid var(--ls-line);
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 1.5rem; gap:1rem; position:sticky; top:0; z-index:50;
}
/* Logo: Experto (azul) + Hogar (verde) + .com (verde) */
/* Logo horizontal en imagen — un solo archivo, cacheado → carga rápida */
.ls-brand {
    display:inline-block; flex-shrink:0;
    width:215px; max-width:56vw; height:54px;     /* 👈 tamaño del logo en barras claras */
    background:url('/assets/img/logo-horizontal.png') no-repeat left center;
    background-size:contain;
    font-size:0 !important; line-height:0; color:transparent;
}
.ls-brand span, .ls-brand small { font-size:0; }
.ls-nav-links { display:flex; align-items:center; gap:1.25rem; }
.ls-nav-links a { color:var(--ls-text); font-weight:500; font-size:.92rem; }
.ls-nav-links a:hover { color:var(--ls-magenta); }

/* ── Botones ── */
.ls-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-family:var(--ls-font-head); font-weight:600; font-size:.95rem;
    border:1px solid rgba(0,0,0,.55); border-radius:var(--ls-rad); padding:.7rem 1.4rem;
    cursor:pointer; transition:.18s; text-decoration:none;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.ls-btn:hover { box-shadow:0 2px 7px rgba(0,0,0,.18); }
/* Letra con sombra oscura (profundidad) en los botones de color */
.ls-btn-primary, .ls-btn-navy, .ls-btn-cyan, .ls-cta-band .ls-btn-white { text-shadow:1px 1px 2px rgba(0,0,0,.6); }
.ls-btn-primary   { background:var(--ls-magenta); color:#fff; }
.ls-btn-primary:hover { background:var(--ls-magenta-700); transform:translateY(-1px); }
.ls-btn-navy      { background:var(--ls-navy); color:#fff; }
.ls-btn-navy:hover{ background:var(--ls-navy-700); }
.ls-btn-cyan      { background:var(--ls-navy); color:#fff; }
.ls-btn-ghost     { background:transparent; border:1.5px solid var(--ls-line); color:var(--ls-text); }
.ls-btn-ghost:hover { border-color:var(--ls-magenta); color:var(--ls-magenta); }
.ls-btn-block     { width:100%; }

/* ── Toggle de idioma ── */
.ls-lang { display:inline-flex; border:1.5px solid var(--ls-line); border-radius:999px; overflow:hidden; }
.ls-lang button {
    border:none; background:transparent; padding:.3rem .8rem; font-size:.82rem; font-weight:600;
    cursor:pointer; color:var(--ls-muted); font-family:var(--ls-font-body);
}
.ls-lang button.active { background:var(--ls-navy); color:#fff; }

/* ── Tarjetas ── */
.ls-card {
    background:var(--ls-white); border:1px solid var(--ls-line);
    border-radius:var(--ls-rad-lg); padding:1.5rem; box-shadow:var(--ls-shadow);
}
.ls-card-title { font-family:var(--ls-font-head); font-weight:600; font-size:1.05rem; color:var(--ls-navy); margin-bottom:1rem; }

/* ── Pestañas / categorías de servicio ── */
.ls-tabs { display:flex; gap:.5rem; flex-wrap:wrap; }
.ls-tab {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem 1.1rem; border-radius:999px; font-weight:600; font-size:.9rem;
    cursor:pointer; border:1.5px solid var(--ls-line); background:#fff; color:var(--ls-muted);
    transition:.15s;
}
.ls-tab[data-cat="aseo"].active        { background:var(--cat-aseo);        color:#fff; border-color:var(--cat-aseo); }
.ls-tab[data-cat="profesional"].active { background:var(--cat-profesional); color:#fff; border-color:var(--cat-profesional); }
.ls-tab[data-cat="tecnico"].active     { background:var(--cat-tecnico);     color:#fff; border-color:var(--cat-tecnico); }
.ls-tab[data-cat="exterior"].active    { background:var(--cat-exterior);    color:#fff; border-color:var(--cat-exterior); }

/* ── Tarjeta de servicio con color por categoría ── */
.ls-serv {
    background:#fff; border:1px solid var(--ls-line); border-radius:var(--ls-rad);
    border-left:5px solid var(--ls-line);
    padding:1rem 1.2rem; display:flex; align-items:center; gap:.85rem;
    transition:.18s; cursor:pointer;
}
.ls-serv:hover { box-shadow:var(--ls-shadow-hover); transform:translateY(-2px); }
.ls-serv .ls-serv-ico {
    width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; flex-shrink:0;
}
.ls-serv[data-cat="aseo"]        { border-left-color:var(--cat-aseo); }
.ls-serv[data-cat="aseo"] .ls-serv-ico        { background:var(--cat-aseo-bg);        color:var(--cat-aseo); }
.ls-serv[data-cat="profesional"]{ border-left-color:var(--cat-profesional); }
.ls-serv[data-cat="profesional"] .ls-serv-ico { background:var(--cat-profesional-bg); color:var(--cat-profesional); }
.ls-serv[data-cat="tecnico"]     { border-left-color:var(--cat-tecnico); }
.ls-serv[data-cat="tecnico"] .ls-serv-ico     { background:var(--cat-tecnico-bg);     color:var(--cat-tecnico); }
.ls-serv[data-cat="exterior"]    { border-left-color:var(--cat-exterior); }
.ls-serv[data-cat="exterior"] .ls-serv-ico    { background:var(--cat-exterior-bg);    color:var(--cat-exterior); }

/* ── Badges de categoría ── */
.ls-badge { display:inline-block; padding:.2rem .65rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.ls-badge[data-cat="aseo"]        { background:var(--cat-aseo-bg);        color:var(--cat-aseo); }
.ls-badge[data-cat="profesional"]{ background:var(--cat-profesional-bg); color:var(--cat-profesional); }
.ls-badge[data-cat="tecnico"]     { background:var(--cat-tecnico-bg);     color:#a8690a; }
.ls-badge[data-cat="exterior"]    { background:var(--cat-exterior-bg);    color:var(--cat-exterior); }

/* ── Dashboard layout (sidebar + main) ── */
.ls-app { display:flex; min-height:100vh; }
.ls-sidebar {
    width:240px; flex-shrink:0; color:#fff;
    background:linear-gradient(180deg, #1E3A8A 0%, #142a63 45%, #0b1020 100%);
    display:flex; flex-direction:column; padding:1rem 0;
}
/* En la barra lateral oscura: logo BLANCO directo (sin chip) */
.ls-sidebar .ls-brand {
    background-image:url('/assets/img/logo-blanco.png');
    background-color:transparent; background-position:center; background-size:contain;
    width:auto; height:48px; border-radius:0;        /* 👈 alto del logo en la barra */
    margin:.3rem 1rem 1.1rem; padding:0; display:block;
}
.ls-side-link {
    display:flex; align-items:center; gap:.75rem; padding:.7rem 1.25rem;
    color:rgba(255,255,255,.75); font-size:.9rem; font-weight:500; border-left:3px solid transparent;
}
.ls-side-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.ls-side-link.active { background:rgba(255,255,255,.08); color:#fff; border-left-color:var(--ls-yellow); }
.ls-main { flex:1; min-width:0; padding:1.5rem 2rem; }  /* min-width:0 → permite que el contenido ancho (tablas/rejillas) se encoja y haga scroll interno en móvil en vez de empujar la página */

/* ── Métricas (stat cards) ── */
.ls-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.ls-stat { background:#fff; border:1px solid var(--ls-line); border-radius:var(--ls-rad); padding:1.1rem 1.25rem; }
.ls-stat .num { font-family:var(--ls-font-head); font-size:1.7rem; font-weight:800; color:var(--ls-navy); }
.ls-stat .lbl { font-size:.78rem; color:var(--ls-muted); font-weight:600; }

/* ── Formularios ── */
.ls-field { margin-bottom:1rem; }
.ls-field label { display:block; font-size:.82rem; font-weight:600; color:#475569; margin-bottom:.35rem; }
.ls-input, .ls-select, .ls-textarea {
    width:100%; border:1.5px solid var(--ls-line); border-radius:var(--ls-rad);
    padding:.65rem .9rem; font-size:.92rem; font-family:var(--ls-font-body); color:var(--ls-text); background:#fff;
}
.ls-input:focus, .ls-select:focus, .ls-textarea:focus {
    outline:none; border-color:var(--ls-navy); box-shadow:0 0 0 3px rgba(30,58,138,.15);
}

/* ── Responsive ── */
@media (max-width:900px) {
    .ls-sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); transition:.25s; z-index:60; }
    .ls-sidebar.open { transform:translateX(0); }
    .ls-main { padding:1rem; }
}
@media (max-width:600px) {
    /* El nav público se ENVUELVE en móvil (no se oculta): los accesos a
       Iniciar sesión / Registrarme deben verse siempre. */
    .ls-nav { padding:.55rem .9rem; flex-wrap:wrap; row-gap:.5rem; }
    /* Logo proporcionado en móvil (no ocupa media pantalla). OJO: es un fondo CSS,
       necesita un ancho explícito (con width:auto colapsaría a 0 y desaparecería). */
    .ls-brand { height:40px; width:180px; max-width:52vw; }
    .ls-nav-links { order:3; width:100%; justify-content:center; flex-wrap:wrap; gap:.55rem; }
    .ls-nav-links a, .ls-nav-links .ls-btn { font-size:.82rem; }
    /* Grupo de la derecha (idioma + accesos) compacto para no apretar el logo */
    .ls-nav > div:last-child { gap:.4rem !important; }
    .ls-nav .ls-lang button { padding:.28rem .55rem; font-size:.76rem; }
    .ls-nav .ls-btn-ghost, .ls-nav .ls-btn-primary { font-size:.78rem !important; padding:.4rem .7rem !important; }
}
@media (max-width:380px) {
    /* Pantallas muy pequeñas: logo un poco menor y accesos aún más compactos */
    .ls-brand { height:36px; max-width:46vw; }
    .ls-nav .ls-btn-ghost, .ls-nav .ls-btn-primary { font-size:.74rem !important; padding:.38rem .6rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   EXTENSIONES — Dashboard, auth, formularios, landing
   ══════════════════════════════════════════════════════════════ */

/* ── Sidebar extras ── */
.ls-sidebar-top { display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.08); }
.ls-sidebar-logo { height:2rem; width:auto; border-radius:6px; object-fit:contain; }
.ls-sidebar-avatar { width:2.2rem; height:2.2rem; border-radius:8px; flex-shrink:0; background:var(--ls-magenta); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; }
.ls-sidebar-name { font-size:.83rem; font-weight:700; color:#fff; line-height:1.2; }
.ls-sidebar-nav { flex:1; overflow-y:auto; padding:.5rem 0; }
.ls-sidebar-footer { border-top:1px solid rgba(255,255,255,.08); padding:.5rem 0; }
.ls-side-link.danger:hover { color:#f87171 !important; }

/* ── Hamburger / overlay ── */
.ls-ham { display:none; position:fixed; top:.75rem; right:.75rem; left:auto; z-index:70; background:var(--ls-navy); border:none; color:#fff; padding:.55rem .8rem; border-radius:10px; font-size:1.2rem; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.ls-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; }
.ls-overlay.open { display:block; }
@media(max-width:900px){ .ls-ham { display:block; } }

/* ── Toast ── */
.ls-toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:999; padding:.85rem 1.4rem; border-radius:var(--ls-rad); font-size:.9rem; font-weight:600; box-shadow:var(--ls-shadow-hover); transform:translateY(6rem); opacity:0; transition:.35s; pointer-events:none; }
.ls-toast.show { transform:translateY(0); opacity:1; }
.ls-toast.ok  { background:var(--ls-ok); color:#fff; }
.ls-toast.err { background:var(--ls-err); color:#fff; }
.ls-toast.warn { background:var(--ls-warn); color:var(--ls-navy); }

/* ── Alert banners ── */
.ls-alert { border-radius:var(--ls-rad); padding:.9rem 1.1rem; margin-bottom:1rem; display:flex; align-items:flex-start; gap:.75rem; font-size:.88rem; }
.ls-alert .ico { font-size:1.3rem; flex-shrink:0; margin-top:.1rem; }
.ls-alert strong { display:block; margin-bottom:.2rem; }
.ls-alert p { margin:0; font-size:.83rem; }
.ls-alert-warn { background:#fef3c7; border:1px solid #fde68a; color:#92400e; }
.ls-alert-ok   { background:#d1fae5; border:1px solid #a7f3d0; color:#065f46; }
.ls-alert-info { background:#dbeafe; border:1px solid #bfdbfe; color:#1e40af; }
.ls-alert-err  { background:#fee2e2; border:1px solid #fecaca; color:#991b1b; }

/* ── Tables ── */
.ls-table-wrap { overflow-x:auto; }
.ls-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.ls-table th { text-align:left; padding:.6rem .9rem; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ls-muted); border-bottom:2px solid var(--ls-line); white-space:nowrap; }
.ls-table td { padding:.8rem .9rem; border-bottom:1px solid var(--ls-line); }
.ls-table tr:last-child td { border-bottom:none; }
.ls-table tr:hover td { background:var(--ls-bg); }
.ls-code { font-family:monospace; font-size:.82rem; color:var(--ls-navy); background:rgba(30,58,138,.08); padding:.15rem .45rem; border-radius:4px; }

/* Badge de estados (presupuestos / solicitudes) */
.ls-badge-borrador  { background:rgba(100,116,139,.12); color:#475569; }
.ls-badge-enviado   { background:rgba(30,58,138,.1);   color:var(--ls-navy); }
.ls-badge-aprobado  { background:rgba(22,163,74,.12);   color:var(--ls-ok); }
.ls-badge-rechazado { background:rgba(239,68,68,.12);   color:var(--ls-err); }
.ls-badge-pendiente { background:rgba(245,158,11,.12);  color:#92400e; }
.ls-badge-completada{ background:rgba(22,163,74,.12);   color:var(--ls-ok); }
.ls-badge-enproceso { background:rgba(30,58,138,.1);    color:var(--ls-navy); }
.ls-badge-cancelada { background:rgba(239,68,68,.12);   color:var(--ls-err); }

/* ── Auth page ── */
.ls-auth-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; background:var(--ls-bg); }
.ls-auth-card { background:var(--ls-white); border:1px solid var(--ls-line); border-radius:var(--ls-rad-lg); padding:2.5rem 2rem; width:100%; max-width:430px; box-shadow:var(--ls-shadow-hover); }

/* ── Progress bar (upload) ── */
.ls-prog-wrap { background:var(--ls-line); border-radius:999px; height:6px; overflow:hidden; margin-top:.75rem; }
.ls-prog-bar  { height:100%; width:0; background:var(--ls-magenta); transition:width .3s; border-radius:999px; }

/* ── Welcome banner ── */
.ls-welcome { background:linear-gradient(135deg,rgba(244,194,13,.12),rgba(40,167,69,.08)); border:1px solid rgba(40,167,69,.25); border-radius:var(--ls-rad); padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }

/* ── Drop zone (upload catálogo) ── */
.ls-dropzone { border:2px dashed var(--ls-line); border-radius:var(--ls-rad); padding:2.5rem 1.5rem; text-align:center; cursor:pointer; position:relative; transition:.2s; background:#fff; }
.ls-dropzone:hover,.ls-dropzone.drag-over { border-color:var(--ls-magenta); background:rgba(40,167,69,.04); }
.ls-dropzone input[type="file"] { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }

/* ── Tipo card selector (registro prestador) ── */
.ls-tipo-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.ls-tipo-card { border:2px solid var(--ls-line); border-radius:var(--ls-rad); padding:1.25rem; cursor:pointer; text-align:center; position:relative; transition:.2s; background:#fff; }
.ls-tipo-card:hover { border-color:var(--ls-magenta); }
.ls-tipo-card.selected { border-color:var(--ls-navy); background:rgba(30,58,138,.04); }
.ls-tipo-card input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.ls-tipo-chk { position:absolute; top:.6rem; right:.6rem; width:20px; height:20px; border-radius:50%; border:2px solid var(--ls-line); display:flex; align-items:center; justify-content:center; font-size:.7rem; }
.ls-tipo-card.selected .ls-tipo-chk { background:var(--ls-navy); border-color:var(--ls-navy); color:#fff; }
.ls-tipo-card .ico { font-size:2rem; margin-bottom:.5rem; }
.ls-tipo-card .tit { font-weight:700; font-size:.95rem; color:var(--ls-text); }
.ls-tipo-card .sub { font-size:.78rem; color:var(--ls-muted); margin-top:.25rem; }

/* ── Foto / logo upload ── */
.ls-foto-zone { border:2px dashed var(--ls-line); border-radius:50%; width:120px; height:120px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; margin:0 auto .75rem; background:var(--ls-bg); transition:.2s; }
.ls-foto-zone:hover { border-color:var(--ls-magenta); }
.ls-foto-zone img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ls-logo-zone { border:2px dashed var(--ls-line); border-radius:var(--ls-rad); min-height:80px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; background:var(--ls-bg); transition:.2s; padding:.5rem; }
.ls-logo-zone:hover { border-color:var(--ls-magenta); }
.ls-foto-zone input,.ls-logo-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.ls-logo-zone img { max-height:70px; max-width:100%; object-fit:contain; }

/* ── Días disponibles (checkboxes visuales) ── */
.ls-dias-flex { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.ls-dia-btn { border:1.5px solid var(--ls-line); border-radius:6px; padding:.35rem .65rem; cursor:pointer; font-size:.78rem; font-weight:600; user-select:none; transition:.15s; background:#fff; }
.ls-dia-btn.activo { background:var(--ls-navy); color:#fff; border-color:var(--ls-navy); }

/* ── Subservicios scroll ── */
.ls-subs-wrap { border:1.5px solid var(--ls-line); border-radius:8px; padding:1rem; max-height:240px; overflow-y:auto; margin-top:.4rem; }
.ls-sub-item { display:flex; align-items:center; gap:.5rem; padding:.3rem 0; border-bottom:1px solid var(--ls-bg); font-size:.85rem; }
.ls-sub-item:last-child { border-bottom:none; }
.ls-sub-item input[type=checkbox] { width:16px; height:16px; accent-color:var(--ls-navy); flex-shrink:0; }
.ls-sub-custom-row { display:flex; gap:.5rem; margin-top:.75rem; }
.ls-sub-custom-row input { margin:0; }

/* ── Chips (tags de subservicios seleccionados) ── */
.ls-chip-list { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.ls-chip { background:rgba(30,58,138,.08); color:var(--ls-navy); border:1px solid rgba(30,58,138,.2); border-radius:20px; padding:.2rem .7rem; font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:.3rem; }
.ls-chip button { background:none; border:none; cursor:pointer; color:inherit; font-size:.9rem; padding:0; line-height:1; }

/* ── Cert list ── */
.ls-cert-list { display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem; }
.ls-cert-item { background:var(--ls-bg); border:1px solid var(--ls-line); border-radius:8px; padding:.5rem .75rem; display:flex; align-items:center; justify-content:space-between; font-size:.83rem; }
.ls-cert-item button { background:none; border:none; color:var(--ls-err); cursor:pointer; font-size:1rem; }

/* ── Grid helpers ── */
.ls-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.ls-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.75rem; }
.ls-color-row { display:flex; align-items:center; gap:.75rem; }
.ls-color-row input[type=color] { width:48px; height:40px; border:1.5px solid var(--ls-line); border-radius:8px; padding:.1rem; cursor:pointer; }

/* ── Aviso verificación (profesional) ── */
.ls-verif-aviso { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.4); border-radius:8px; padding:.85rem 1rem; font-size:.85rem; color:#92400e; display:none; margin-top:.75rem; }
.ls-verif-aviso.visible { display:block; }

/* ── Sección técnico / profesional ── */
.ls-sec-tecnico,.ls-sec-profesional { display:none; }
.ls-sec-tecnico.visible,.ls-sec-profesional.visible { display:block; }

/* ── Card-title helper ── */
.ls-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; flex-wrap:wrap; gap:.75rem; }

/* ── Hint text ── */
.ls-hint { font-size:.72rem; color:var(--ls-muted); margin-top:.3rem; }

/* ── Template hint (catálogo) ── */
.ls-template-hint { background:var(--ls-bg); border:1px solid var(--ls-line); border-radius:8px; padding:.9rem 1.1rem; margin-top:.8rem; font-size:.8rem; color:var(--ls-muted); }

/* ── Punto total chip ── */
.ls-pts-chip { background:rgba(244,194,13,.15); color:#8a6d05; border:1px solid rgba(244,194,13,.4); border-radius:999px; padding:.3rem .8rem; font-size:.82rem; font-weight:700; }

/* ── Landing hero ── */
.ls-hero { background:linear-gradient(135deg,var(--ls-navy) 0%,#15306E 60%,#102356 100%); color:#fff; padding:5rem 1.5rem 6rem; text-align:center; position:relative; overflow:hidden; }
.ls-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.ls-hero-inner { position:relative; max-width:760px; margin:0 auto; }
.ls-hero h1 { font-size:clamp(2rem,5vw,3.2rem); font-weight:800; color:#fff; margin-bottom:1rem; line-height:1.15; }
.ls-hero p { font-size:1.1rem; color:rgba(255,255,255,.8); margin-bottom:2rem; max-width:560px; margin-left:auto; margin-right:auto; }
.ls-hero-search { display:flex; gap:.5rem; max-width:540px; margin:0 auto; background:#fff; border-radius:999px; padding:.4rem .4rem .4rem 1.2rem; box-shadow:0 8px 32px rgba(0,0,0,.25); }
.ls-hero-search input { flex:1; border:none; outline:none; font-size:.98rem; background:transparent; color:var(--ls-text); font-family:var(--ls-font-body); }
.ls-hero-search button { background:var(--ls-magenta); color:#fff; border:none; border-radius:999px; padding:.65rem 1.4rem; font-weight:700; font-size:.92rem; cursor:pointer; font-family:var(--ls-font-head); transition:.18s; }
.ls-hero-search button:hover { background:var(--ls-magenta-700); }

/* ── Section wrapper ── */
.ls-section { padding:4rem 1.5rem; }
.ls-section-inner { max-width:1100px; margin:0 auto; }
.ls-section-title { text-align:center; margin-bottom:2.5rem; }
.ls-section-title h2 { font-size:1.8rem; margin-bottom:.5rem; }
.ls-section-title p { color:var(--ls-muted); font-size:1rem; max-width:560px; margin:0 auto; }

/* ── How it works cards ── */
.ls-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; }
.ls-step { text-align:center; }
.ls-step-num { width:52px; height:52px; border-radius:50%; background:var(--ls-navy); color:#fff; font-family:var(--ls-font-head); font-weight:800; font-size:1.3rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.ls-step h3 { font-size:1rem; margin-bottom:.4rem; }
.ls-step p { font-size:.88rem; color:var(--ls-muted); }

/* ── CTA band ── */
.ls-cta-band { background:var(--ls-magenta); color:#fff; padding:3.5rem 1.5rem; text-align:center; }
.ls-cta-band h2 { font-size:1.9rem; color:#fff; margin-bottom:.75rem; }
.ls-cta-band p { color:rgba(255,255,255,.85); margin-bottom:1.5rem; }
.ls-btn-white { background:#fff; color:var(--ls-magenta); border-color:rgba(0,0,0,.14); text-shadow:none; }
.ls-btn-white:hover { background:rgba(255,255,255,.9); }

/* ── Footer ── */
.ls-footer { background:var(--ls-navy); color:rgba(255,255,255,.6); padding:2rem 1.5rem; text-align:center; font-size:.85rem; }
.ls-footer a { color:rgba(255,255,255,.6); }
.ls-footer a:hover { color:#fff; }

@media(max-width:580px){ .ls-tipo-grid,.ls-grid2,.ls-grid3 { grid-template-columns:1fr; } }