/* ═══════════════════════════════════════════════════════════════════
   Página de venta del sistema
   Hoja propia: no comparte nada con las landings de marca de los
   clientes, para que un cambio aquí nunca les toque su página.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --s-pri:    #2563eb;
    --s-pri-os: #1e40af;
    --s-tinta:  #0f172a;
    --s-txt:    #334155;
    --s-suave:  #64748b;
    --s-linea:  #e2e8f0;
    --s-fondo:  #f8fafc;

    /* ── El código de estado del sistema ───────────────────────────
       Estos tres colores significan lo mismo dentro del producto que
       aquí: verde algo cerrado, ámbar algo que espera, rojo algo que
       hay que atender hoy. Usarlos en la página no es decoración: es
       enseñar el idioma del sistema antes de entrar. */
    --s-ok:     #16a34a;
    --s-espera: #d97706;
    --s-hot:    #dc2626;

    --s-ok-suave:  #f0fdf4;
    --s-esp-suave: #fffbeb;
    --s-hot-suave: #fef2f2;

    /* Tipografía. Se evitan Inter, Roboto y compañía a propósito: están
       en tantos sitios que ya no dicen nada de quién eres. */
    --s-titulo: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --s-texto:  'Public Sans', 'Segoe UI', system-ui, sans-serif;

    /* Curvas. Las de serie de CSS (`ease`, `ease-out`) son demasiado
       suaves: el movimiento sale sin intención. Estas arrancan rápido,
       que es el instante que la persona está mirando. */
    --s-sal:  cubic-bezier(.23, 1, .32, 1);
    --s-pulso: cubic-bezier(.2, 0, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--s-texto);
    color: var(--s-txt);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--s-pri); text-decoration: none; }
h1, h2, h3, h4, h5 {
    font-family: var(--s-titulo);
    color: var(--s-tinta); margin: 0; line-height: 1.15;
    letter-spacing: -.015em;
}

.s-cont { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.s-cont-medio { max-width: 800px; }
.s-centro { text-align: center; }

/* ── Botones ───────────────────────────────────────────────────── */
.s-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 22px;
    border: 1.5px solid transparent; border-radius: 10px;
    font-size: 14.5px; font-weight: 700; text-decoration: none;
    cursor: pointer;
    transition: transform .12s var(--s-sal), box-shadow .18s var(--s-sal),
                background .18s var(--s-sal), border-color .18s var(--s-sal), color .18s;
    white-space: nowrap;
}
.s-btn:hover { transform: translateY(-1px); text-decoration: none; }
/* Acuse del clic. Sin esto el botón sube al pasar el ratón pero no
   reacciona al pulsarlo, que es cuando de verdad se mira. */
.s-btn:active { transform: scale(.97); }
.s-btn-pri {
    background: var(--s-pri); color: #fff;
    box-shadow: 0 4px 16px rgba(37,99,235,.28);
}
.s-btn-pri:hover { background: var(--s-pri-os); box-shadow: 0 7px 22px rgba(37,99,235,.36); color: #fff; }
.s-btn-fan { background: #fff; color: var(--s-tinta); border-color: var(--s-linea); }
.s-btn-fan:hover { border-color: var(--s-pri); color: var(--s-pri); }
.s-btn-lg { padding: 14px 28px; font-size: 15.5px; }
.s-btn-full { width: 100%; }

/* ── Barra ─────────────────────────────────────────────────────── */
/* ── Fila de arriba ────────────────────────────────────────────────
   Contacto y acceso. Se va con el scroll: es información de consulta,
   no de navegación, y no merece ocupar pantalla de forma permanente. */
.s-nav-top {
    background: var(--s-fondo);
    border-bottom: 1px solid var(--s-linea);
    font-size: 12.5px;
}
.s-nav-top-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; height: 38px;
}
.s-nav-cred { color: var(--s-suave); font-weight: 600; }
.s-nav-top-der { display: flex; align-items: center; gap: 18px; }
.s-nav-mini {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--s-txt); font-weight: 600;
    transition: color .15s;
}
.s-nav-mini svg { width: 14px; height: 14px; flex-shrink: 0; }
.s-nav-mini:hover { color: var(--s-pri); }
.s-nav-entrar { color: var(--s-tinta); font-weight: 700; }

/* ── Fila principal ────────────────────────────────────────────────
   Solo esta se queda pegada. Las dos juntas serían 120 px fijos
   comiéndose la pantalla en cada scroll. */
.s-nav-main {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
.s-nav-fija { border-bottom-color: var(--s-linea); box-shadow: 0 2px 14px rgba(15,23,42,.05); }
/* Con la fila de arriba llevándose el contacto, aquí caben un logo
   grande y el menú sin apretarse. */
.s-nav-in { display: flex; align-items: center; gap: 26px; height: 88px; }

.s-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; color: var(--s-tinta);
    flex-shrink: 0;
}
.s-logo strong { color: var(--s-pri); }
.s-logo-b {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--s-pri), var(--s-pri-os));
    color: #fff; font-size: 13px; font-weight: 800;
}
.s-logo-claro { color: #fff; }
.s-logo-claro strong { color: #93c5fd; }

/* Logo cargado desde Configuración.
   Se fija SOLO el alto y el ancho queda en `auto`: así la imagen nunca
   se deforma, dé lo mismo que sea cuadrada o muy alargada. El
   `max-width` es un tope de seguridad para un logo desproporcionado, no
   la medida de trabajo.
   `flex-shrink: 0` es lo que impide que la barra lo apriete cuando el
   menú tiene muchos enlaces: sin eso el logo encoge y se ve borroso. */
/* El alto se mide sobre la imagen entera, y esta lleva una bajada
   pequeña debajo del nombre que ocupa cerca de un cuarto del alto. Por
   eso hay que darle más de lo que parece: para que el NOMBRE se lea al
   tamaño de la competencia, la imagen tiene que ir a ~50 px. */
.s-logo-img {
    height: 60px; width: auto; max-width: 300px;
    object-fit: contain; display: block; flex-shrink: 0;
}
/* En el pie hay más sitio y el logo es lo único que hay: se le da
   algo más de cuerpo. */
.s-pie .s-logo-img { height: 54px; max-width: 280px; }
/* Sobre fondo oscuro se tiñe de blanco en vez de ponerle una placa
   detrás: la placa queda como un parche pegado. `brightness(0)` aplasta
   el logo a negro conservando la transparencia e `invert(1)` lo pasa a
   blanco, sea del color que sea. Mismo criterio que el menú del
   sistema, en assets/css/main.css. */
.s-logo-img-osc {
    filter: brightness(0) invert(1);
    opacity: .92;
}

/* Acciones dentro del desplegable. En escritorio no se muestran porque
   los mismos dos caminos ya están en la barra. */
.s-menu-cta, .s-menu-entrar { display: none; }

.s-nav-links { display: flex; gap: 22px; margin-left: auto; }
.s-nav-links a { font-size: 13.5px; font-weight: 600; color: var(--s-suave); }
.s-nav-links a:hover { color: var(--s-tinta); }
.s-nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.s-link-sec { font-size: 13.5px; font-weight: 700; color: var(--s-txt); }

/* ── Hero ──────────────────────────────────────────────────────────
   Banner oscuro. Es el único bloque oscuro de la mitad superior de la
   página, y ahí está su fuerza: si hubiera dos, ninguno destacaría.
   La profundidad se hace con degradados, no con un vídeo: pesa cero,
   no depende de un servidor ajeno y no tarda en cargar en un celular
   con datos móviles. */
.s-hero {
    position: relative; overflow: hidden;
    padding: 92px 0 100px;
    background: #0a1120;
    color: #e2e8f0;
}
.s-hero-luz {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(760px 460px at 14% 8%,  rgba(37,99,235,.38), transparent 66%),
        radial-gradient(620px 420px at 88% 78%, rgba(22,163,74,.16), transparent 70%),
        radial-gradient(900px 500px at 62% -12%, rgba(56,189,248,.14), transparent 68%);
}
.s-hero-in {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.14fr .86fr;
    gap: 52px; align-items: center;
}

/* La etiqueta, ahora sobre oscuro: cristal en vez de relleno plano */
.s-pill {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 20px;
    padding: 6px 14px 6px 11px; border-radius: 20px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    color: #cbd5e1;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
}
/* El punto no es adorno: dice "esto está encendido" con el mismo verde
   que el sistema usa para lo que está en orden. */
.s-pill i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--s-ok); flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(22,163,74,.22);
}

.s-hero h1 {
    font-size: clamp(31px, 4.3vw, 54px);
    font-weight: 800; letter-spacing: -.032em; line-height: 1.06;
    color: #fff; text-wrap: balance;
}
/* La promesa va en claro; el remate, en el azul de la marca. Es el
   único adorno del banner. */
.s-marca { color: #60a5fa; display: block; }
.s-sub {
    margin: 24px 0 32px;
    font-size: 17.5px; line-height: 1.62;
    color: #94a3b8; max-width: 520px;
}
.s-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.s-garantias {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    margin: 26px 0 0; padding: 0; list-style: none;
    font-size: 13px; color: #94a3b8;
}
.s-garantias li { display: flex; align-items: center; gap: 7px; }
.s-garantias li::before {
    content: '✓'; color: #4ade80; font-weight: 900; font-size: 13px;
}

/* Botón de cristal, para el segundo camino sobre fondo oscuro */
.s-btn-vidrio {
    background: rgba(255,255,255,.09); color: #fff;
    border-color: rgba(255,255,255,.20);
    backdrop-filter: blur(8px);
}
.s-btn-vidrio:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.34); color: #fff;
}

/* ── El titular que rota ───────────────────────────────────────────
   El alto mínimo evita que la página pegue un salto cuando entra un
   mensaje más corto que el anterior. */
/* El alto lo fija el JavaScript midiendo los tres mensajes. Este valor
   es solo el respaldo para cuando el script no llega a ejecutarse. */
.s-rota { min-height: 240px; }
.s-rota.s-cambiando #s-tit, .s-rota.s-cambiando #s-sub {
    opacity: 0; transform: translateY(8px);
}
#s-tit, #s-sub { transition: opacity .28s var(--s-sal), transform .28s var(--s-sal); }

/* Los puntos de navegación. Son botones: se tabulan y dicen a dónde
   llevan. Los de la competencia son <div> y no se pueden usar con
   teclado. */
.s-puntos { display: flex; gap: 9px; margin-top: 26px; }
/* Sí, aquí se anima `width`. Es a propósito: el ancho ES la señal de
   cuál está activo, y son tres elementos de 4 px de alto. Mismo criterio
   que los puntos del carrusel de las tiendas. */
.s-punto {
    width: 26px; height: 4px; padding: 0; border: 0; border-radius: 3px;
    background: rgba(255,255,255,.22); cursor: pointer;
    transition: background .25s var(--s-sal), width .25s var(--s-sal);
}
.s-punto:hover { background: rgba(255,255,255,.4); }
.s-punto[aria-selected="true"] { background: #60a5fa; width: 40px; }

/* ── La ventana del producto ───────────────────────────────────────
   Va en HTML y no como captura: pesa nada, se adapta al móvil y no
   queda desfasada cada vez que cambia una pantalla del sistema. Una
   captura envejece; esto no. */
.s-ventana {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 30px 64px -20px rgba(0,0,0,.6);
}
.s-ven-barra {
    display: flex; align-items: center; gap: 6px;
    padding: 11px 15px; background: #f1f5f9;
    border-bottom: 1px solid var(--s-linea);
}
.s-ven-pt { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.s-ven-url {
    margin-left: 12px; font-size: 11.5px; font-weight: 600; color: var(--s-suave);
}
.s-ven-cuerpo { padding: 20px 22px 22px; }
.s-ven-fila-sup {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.s-ven-eti {
    display: block; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--s-suave);
}
.s-ven-cifra {
    display: block; margin-top: 4px;
    font-family: var(--s-titulo); font-size: 30px; font-weight: 800;
    letter-spacing: -.03em; color: var(--s-tinta);
}
.s-ven-alza {
    padding: 4px 10px; border-radius: 20px; flex-shrink: 0;
    background: var(--s-ok-suave); color: var(--s-ok);
    font-size: 12px; font-weight: 800;
}

/* Gráfico de barras dibujado con CSS: ni imagen ni librería */
.s-ven-graf {
    display: flex; align-items: flex-end; gap: 8px;
    height: 84px; margin: 20px 0 18px;
}
.s-ven-graf i {
    flex: 1; border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #60a5fa, var(--s-pri));
}
.s-ven-graf i:last-child { background: linear-gradient(180deg, #34d399, var(--s-ok)); }

.s-ven-mini {
    display: grid; gap: 9px;
    padding-top: 15px; border-top: 1px solid var(--s-linea);
}
.s-ven-mini div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.s-ven-mini span { font-size: 12.5px; color: var(--s-suave); }
.s-ven-mini strong { font-size: 13px; font-weight: 800; color: var(--s-tinta); }
.s-ven-ojo { color: var(--s-espera) !important; }
.s-ven-ok  { color: var(--s-ok) !important; }

/* ── Franja de credenciales ────────────────────────────────────────
   El equivalente a la barra azul bajo el banner de la competencia.
   Todo lo que dice es comprobable: nada de sellos de acreditación que
   no tenemos. */
.s-hero-franja {
    display: flex; flex-wrap: wrap; gap: 10px 30px;
    margin-top: 56px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.10);
    font-size: 12.5px; color: #94a3b8;
}
.s-hero-franja span { display: flex; align-items: center; gap: 8px; }
.s-hero-franja span::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: #60a5fa; flex-shrink: 0;
}

/* ── Los cuatro pilares ────────────────────────────────────────────
   Prueban lo que el titular promete. Cada uno lleva una línea
   concreta: "almacén" no dice nada; "stock por tienda y por marca, con
   kardex" sí. Ahora viven sobre fondo claro, ya fuera del héroe. */
.s-pilares-sec { padding: 62px 0; border-bottom: 1px solid var(--s-linea); }
.s-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.s-pilar {
    padding: 24px 22px; border-radius: 14px;
    background: #fff; border: 1px solid var(--s-linea);
    transition: border-color .2s var(--s-sal), box-shadow .2s var(--s-sal),
                transform .2s var(--s-sal);
}
.s-pilar:hover {
    border-color: #c7d7f5;
    box-shadow: 0 10px 30px -14px rgba(15,23,42,.22);
    transform: translateY(-2px);
}
.s-pilar-ico {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 15px;
    border-radius: 11px;
    background: rgba(37,99,235,.09); color: var(--s-pri);
}
.s-pilar-ico svg { width: 21px; height: 21px; }
.s-pilar h3 {
    font-size: 15px; font-weight: 800; color: var(--s-tinta);
    margin: 0 0 7px; letter-spacing: -.01em;
}
.s-pilar p {
    margin: 0; font-size: 13px; line-height: 1.58; color: var(--s-suave);
}

/* ── Entrada escalonada ────────────────────────────────────────────
   Cada pieza entra un poco después que la anterior, de arriba abajo.
   Es el orden en que se lee, así que el movimiento guía en vez de
   distraer. Corre una vez, al cargar. */
@keyframes sEntra {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.s-an {
    opacity: 0;
    animation: sEntra .62s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) forwards;
}

/* Muestra del avisador: se entiende antes viéndolo que leyéndolo.
   Vive en la sección de diferenciadores, ya no en el héroe. */
.s-hero-demo {
    background: #fff; border: 1px solid var(--s-linea); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 24px 56px -16px rgba(15,23,42,.22);
    overflow: hidden;
}
.s-demo-cab {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 16px; background: var(--s-fondo);
    border-bottom: 1px solid var(--s-linea);
}
.s-demo-pt { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.s-demo-tit { margin-left: 10px; font-size: 12px; font-weight: 700; color: var(--s-suave); }
.s-demo-cuerpo { padding: 8px 0 0; }
.s-demo-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px; border-bottom: 1px solid #f1f5f9;
}
.s-demo-fila strong { display: block; font-size: 13.5px; color: var(--s-tinta); }
.s-demo-fila span { font-size: 12px; color: var(--s-suave); }
.s-hot { background: rgba(220,38,38,.045); }
.s-tag {
    flex-shrink: 0; padding: 4px 10px; border-radius: 20px;
    font-size: 11.5px; font-weight: 800;
}
.s-tag-hot { background: rgba(220,38,38,.12); color: var(--s-hot); }
.s-tag-ok  { background: rgba(22,163,74,.12);  color: var(--s-ok); }
.s-tag-no  { background: #f1f5f9;              color: #94a3b8; }
.s-demo-pie {
    padding: 14px 18px; background: var(--s-fondo);
    font-size: 12.5px; color: var(--s-suave); line-height: 1.55;
}
.s-demo-pie strong { color: var(--s-tinta); }

/* ── Barra de confianza ────────────────────────────────────────── */
.s-confianza { background: var(--s-tinta); padding: 15px 0; }
.s-confianza-in {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 38px;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.72);
}
.s-confianza-in span { display: flex; align-items: center; gap: 8px; }
.s-confianza-in span::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%; background: #60a5fa;
}

/* ── Secciones ─────────────────────────────────────────────────── */
.s-sec { padding: 96px 0; }
.s-sec-gris { background: var(--s-fondo); }
.s-sec-osc { background: var(--s-tinta); padding: 112px 0; }
.s-h2 {
    font-size: clamp(27px, 3.9vw, 44px); font-weight: 800;
    letter-spacing: -.028em; line-height: 1.08; text-align: center;
    text-wrap: balance;
}
.s-h2-claro { color: #fff; }
.s-h2sub {
    margin: 16px auto 54px; max-width: 620px;
    text-align: center; font-size: 16px; color: var(--s-suave);
}

/* ── Problema ──────────────────────────────────────────────────── */
.s-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.s-dolor {
    padding: 26px 24px; background: #fff;
    border: 1px solid var(--s-linea); border-radius: 14px;
}
.s-dolor-n {
    display: block; margin-bottom: 12px;
    font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--s-pri);
}
.s-dolor h3 { font-size: 17px; font-weight: 800; margin-bottom: 9px; }
.s-dolor p { margin: 0; font-size: 14px; color: var(--s-suave); }

/* ── Diferenciadores ───────────────────────────────────────────── */
.s-uno {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 48px; align-items: center;
    padding: 34px 0;
}
.s-uno + .s-uno { border-top: 1px solid var(--s-linea); }
.s-uno-inv .s-uno-txt { order: 2; }
.s-num {
    display: grid; place-items: center;
    width: 38px; height: 38px; margin-bottom: 15px; border-radius: 11px;
    background: var(--s-pri); color: #fff; font-size: 16px; font-weight: 900;
}
.s-uno-txt h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; margin-bottom: 13px; }
.s-uno-txt p { font-size: 15px; color: var(--s-suave); margin: 0 0 12px; }
/* El remate se marca con un signo tipográfico, no con una barra de color
   a la izquierda: ese borde grueso es el tic más reconocible de una
   interfaz generada en serie, y aquí no aporta nada que la sangría y el
   peso no hagan mejor. */
.s-remate {
    position: relative; padding-left: 22px;
    color: var(--s-txt) !important; font-weight: 500;
}
.s-remate::before {
    content: '→';
    position: absolute; left: 0; top: 0;
    color: var(--s-pri); font-weight: 800;
}

.s-fig-card {
    background: #fff; border: 1px solid var(--s-linea); border-radius: 14px;
    box-shadow: 0 12px 40px rgba(15,23,42,.08); overflow: hidden;
}
.s-fig-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 20px; border-bottom: 1px solid #f1f5f9; font-size: 13.5px;
}
.s-fig-fila:last-child { border-bottom: 0; }
.s-fig-fila span { color: var(--s-suave); }
.s-fig-fila b { font-weight: 800; color: var(--s-tinta); }
.s-fig-tot { background: var(--s-fondo); }
.s-c-hot { color: var(--s-hot) !important; }
.s-c-ok  { color: var(--s-ok)  !important; }
.s-c-no  { color: #94a3b8 !important; }
.s-marca-fila {
    display: flex; align-items: center; gap: 11px;
    padding: 15px 20px; border-bottom: 1px solid #f1f5f9;
    font-size: 14px; font-weight: 700; color: var(--s-tinta);
}
.s-marca-fila:last-child { border-bottom: 0; }
.s-marca-fila i { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.s-marca-fila span { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--s-suave); }

/* ── Módulos ───────────────────────────────────────────────────── */
.s-grid-mod { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.s-mod {
    padding: 20px; border: 1px solid var(--s-linea); border-radius: 12px;
    transition: border-color .16s var(--s-sal), transform .16s var(--s-sal),
                box-shadow .16s var(--s-sal);
}
.s-mod:hover {
    border-color: var(--s-pri); transform: translateY(-2px);
    box-shadow: 0 10px 28px -14px rgba(37,99,235,.35);
}

/* ── Los iconos de los módulos ─────────────────────────────────────
   Lineales y en azul. El color se pone aquí una vez —los SVG usan
   `currentColor`—, así que cambiar el azul de los doce es cambiar esta
   línea.

   Van sin caja de fondo a propósito: doce cuadritos de color en una
   rejilla se convierten en ruido y compiten con los títulos. El trazo
   solo se lee mejor y deja respirar la tarjeta. */
.s-mod-ico {
    display: block; margin-bottom: 13px;
    color: var(--s-pri);
    transition: transform .18s var(--s-sal);
}
.s-mod-ico svg {
    width: 26px; height: 26px; display: block;
    /* `non-scaling-stroke` mantiene el grosor del trazo aunque el icono
       se escale: sin esto, al crecer en el hover el trazo engorda y el
       dibujo se ve tosco. */
    vector-effect: non-scaling-stroke;
}
.s-mod:hover .s-mod-ico { transform: scale(1.08); }

.s-mod h4 { font-size: 14.5px; font-weight: 800; margin-bottom: 7px; }
.s-mod p { margin: 0; font-size: 13px; color: var(--s-suave); line-height: 1.55; }

/* ── Pasos ─────────────────────────────────────────────────────── */
.s-pasos {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 26px; margin: 46px 0 40px;
}
.s-paso { text-align: center; }
.s-paso > span {
    display: inline-grid; place-items: center;
    width: 46px; height: 46px; margin-bottom: 15px; border-radius: 50%;
    background: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.22);
    color: #fff; font-size: 17px; font-weight: 900;
}
.s-paso h4 { color: #fff; font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.s-paso p { margin: 0; font-size: 14px; color: rgba(255,255,255,.66); }

/* ── Planes ────────────────────────────────────────────────────── */
.s-planes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 22px; align-items: start;
}
.s-plan {
    position: relative;
    padding: 30px 26px; background: #fff;
    border: 1px solid var(--s-linea); border-radius: 16px;
    display: flex; flex-direction: column;
}
/* El plan del medio destaca: sin una marca, casi todos eligen el más barato */
.s-plan-top {
    border: 2px solid var(--s-pri);
    box-shadow: 0 18px 46px rgba(37,99,235,.16);
    transform: translateY(-8px);
}
.s-plan-cinta {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    padding: 5px 15px; border-radius: 20px;
    background: var(--s-pri); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    white-space: nowrap;
}
.s-plan h3 { font-size: 19px; font-weight: 800; }
.s-plan-desc { margin: 6px 0 0; font-size: 13px; color: var(--s-suave); }
.s-plan-precio {
    margin: 18px 0 20px;
    font-size: 42px; font-weight: 900; color: var(--s-tinta); line-height: 1;
}
.s-moneda { font-size: 20px; font-weight: 800; vertical-align: super; margin-right: 3px; }
.s-plan-precio small { font-size: 14px; font-weight: 600; color: var(--s-suave); }
.s-plan-lista {
    flex: 1; margin: 0 0 22px; padding: 0; list-style: none;
    border-top: 1px solid var(--s-linea); padding-top: 18px;
}
.s-plan-lista li {
    position: relative; padding: 0 0 10px 24px;
    font-size: 13.5px; color: var(--s-txt);
}
.s-plan-lista li::before {
    content: '✓'; position: absolute; left: 0; top: -1px;
    color: var(--s-ok); font-weight: 900;
}
.s-nota { margin-top: 26px; font-size: 13px; color: var(--s-suave); }
.s-vacio { color: var(--s-suave); }

/* ── Preguntas ─────────────────────────────────────────────────── */
.s-faq { display: flex; flex-direction: column; gap: 10px; }
.s-faq-item {
    background: #fff; border: 1px solid var(--s-linea); border-radius: 12px;
    overflow: hidden;
}
.s-faq-item summary {
    padding: 17px 20px; cursor: pointer; list-style: none;
    font-size: 15px; font-weight: 700; color: var(--s-tinta);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.s-faq-item summary::-webkit-details-marker { display: none; }
.s-faq-item summary::after {
    content: '+'; flex-shrink: 0;
    font-size: 21px; font-weight: 400; color: var(--s-pri); line-height: 1;
}
.s-faq-item[open] summary::after { content: '−'; }
.s-faq-item p {
    margin: 0; padding: 0 20px 18px;
    font-size: 14.5px; color: var(--s-suave);
}

/* ── Cierre ────────────────────────────────────────────────────── */
.s-cierre {
    background:
        radial-gradient(700px 320px at 20% 0%, rgba(37,99,235,.10), transparent 60%),
        var(--s-fondo);
}
.s-cierre-in {
    display: grid; grid-template-columns: 1fr .85fr;
    gap: 52px; align-items: center;
}
.s-cierre-txt h2 {
    font-size: clamp(25px, 3.2vw, 35px); font-weight: 900;
    letter-spacing: -.02em; margin-bottom: 14px;
}
.s-cierre-txt p { font-size: 15.5px; color: var(--s-suave); margin: 0 0 24px; }
.s-cierre-wa { margin-top: 18px !important; font-size: 14px; }

.s-form-card {
    padding: 30px 28px; background: #fff;
    border: 1px solid var(--s-linea); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15,23,42,.09);
}
.s-form-card h3 { font-size: 20px; font-weight: 800; }
.s-form-sub { margin: 7px 0 20px; font-size: 13.5px; color: var(--s-suave); }
.s-form { display: flex; flex-direction: column; gap: 11px; }
.s-form input, .s-form select {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--s-linea); border-radius: 10px;
    font-family: inherit; font-size: 14.5px; color: var(--s-tinta);
    background: #fff;
}
.s-form input:focus, .s-form select:focus {
    outline: none; border-color: var(--s-pri);
    box-shadow: 0 0 0 3px rgba(37,99,235,.13);
}
.s-form-nota { margin: 4px 0 0; font-size: 12px; color: var(--s-suave); text-align: center; }
/* Campo trampa: invisible para una persona, tentador para un robot */
.s-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.s-aviso {
    padding: 13px 15px; border-radius: 10px; margin-bottom: 18px;
    font-size: 13.5px; font-weight: 600; line-height: 1.6;
}
.s-aviso-ok  { background: rgba(22,163,74,.10); color: #15803d; border: 1px solid rgba(22,163,74,.3); }
.s-aviso-err { background: rgba(220,38,38,.10); color: #b91c1c; border: 1px solid rgba(220,38,38,.3); }

/* ── Pie ───────────────────────────────────────────────────────── */
.s-pie { background: var(--s-tinta); color: rgba(255,255,255,.62); padding: 52px 0 0; }
.s-pie-in { display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; }
.s-pie-in > div > p { margin: 15px 0 0; font-size: 13.5px; max-width: 280px; }
.s-pie-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.s-pie-cols h5 {
    margin-bottom: 13px; color: #fff;
    font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.s-pie-cols a {
    display: block; margin-bottom: 9px;
    font-size: 13.5px; color: rgba(255,255,255,.62);
}
.s-pie-cols a:hover { color: #fff; text-decoration: none; }
.s-pie-legal {
    margin-top: 42px; padding: 18px 22px;
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: 12.5px; color: rgba(255,255,255,.42);
}

/* ── WhatsApp flotante ─────────────────────────────────────────── */
.s-wa {
    position: fixed; right: 20px; bottom: 20px; z-index: 300;
    display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 50%;
    background: #25d366; color: #fff;
    box-shadow: 0 8px 26px rgba(37,211,102,.42);
}
.s-wa svg { width: 27px; height: 27px; }
.s-wa:hover { transform: scale(1.06); }


/* ═══════════ MENÚ EN MÓVIL ═══════════
   Antes los enlaces simplemente desaparecían bajo 960px y no había nada
   en su lugar: quien llega desde WhatsApp se quedaba sin navegación y
   con una página larga por delante. */
/* La casilla que abre el menú. No se ve, pero existe: es la que
   guarda el estado abierto/cerrado sin JavaScript. */
.s-menu-sw { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

.s-menu-btn {
    display: none;
    width: 40px; height: 40px; padding: 0;
    background: none; border: 1px solid var(--s-linea); border-radius: 10px;
    cursor: pointer; color: var(--s-tinta);
    align-items: center; justify-content: center;
}
.s-menu-btn svg { width: 20px; height: 20px; }
.s-menu-btn:hover { border-color: var(--s-pri); color: var(--s-pri); }

/* ═══════════ MÓDULOS AGRUPADOS ═══════════
   Doce cajas idénticas no se leen, se barren. En tres grupos con nombre,
   cada uno cabe en la memoria de trabajo y además cuentan una historia:
   vender, controlar, cumplir. */
.s-mod-grupo + .s-mod-grupo { margin-top: 34px; }
.s-mod-tit {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--s-linea);
}
.s-mod-tit h3 {
    font-size: 15px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
}
.s-mod-tit span { font-size: 13.5px; color: var(--s-suave); font-family: var(--s-texto); }
.s-mod-tit i {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    align-self: center;
}
.s-g-vender   i { background: var(--s-pri); }
.s-g-controlar i { background: var(--s-espera); }
.s-g-cumplir  i { background: var(--s-ok); }

/* ═══════════ EL CONTADOR QUE SUBE ═══════════
   La demo era una captura quieta de la única cosa que este producto hace
   y nadie más. Verla moverse una vez la convierte de promesa en prueba. */
.s-tag-hot b { font-variant-numeric: tabular-nums; }
.s-demo-fila.s-hot {
    transition: background .5s ease;
}
.s-demo-fila.s-latido {
    animation: sLatido .6s ease-out;
}
@keyframes sLatido {
    0%   { background: rgba(220,38,38,.045); }
    35%  { background: rgba(220,38,38,.16); }
    100% { background: rgba(220,38,38,.045); }
}
.s-demo-pie { transition: opacity .45s ease, transform .45s ease; }
.s-demo-pie.s-oculto { opacity: 0; transform: translateY(6px); }

/* ═══════════ ERRORES DEL FORMULARIO ═══════════ */
.s-campo-mal {
    border-color: var(--s-hot) !important;
    background: var(--s-hot-suave) !important;
}
.s-form-msg {
    margin: 0 0 12px; padding: 10px 13px; border-radius: 9px;
    font-size: 13px; line-height: 1.55;
    background: var(--s-hot-suave); border: 1px solid #fecaca; color: #b91c1c;
}

/* ═══════════ RESPONSIVO ═══════════ */
@media (max-width: 960px) {
    .s-hero-in, .s-uno, .s-cierre-in { grid-template-columns: 1fr; gap: 34px; }
    .s-hero { padding: 64px 0 72px; }
    .s-hero h1 { font-size: 3.5rem; }
    .s-sub { max-width: none; }
    .s-rota { min-height: 0; }
    .s-bento { grid-template-columns: 1fr 1fr; }
    .s-uno-inv .s-uno-txt { order: 0; }
    .s-grid-mod { grid-template-columns: repeat(2, 1fr); }
    .s-nav-links { display: none; }
    .s-menu-btn { display: inline-flex; }
    /* Los dos iconos ocupan el mismo hueco y solo se ve uno */
    .s-menu-btn .s-ico-cerrar { display: none; }
    .s-menu-sw:checked ~ .s-nav-cta .s-menu-btn .s-ico-abrir { display: none; }
    .s-menu-sw:checked ~ .s-nav-cta .s-menu-btn .s-ico-cerrar { display: block; }
    /* El foco del teclado se ve, porque la casilla real está oculta */
    .s-menu-sw:focus-visible ~ .s-nav-cta .s-menu-btn {
        outline: 2px solid var(--s-pri); outline-offset: 2px;
    }
    /* Desplegado: los enlaces bajan bajo la barra, a ancho completo y con
       area de toque de sobra. */
    .s-menu-sw:checked ~ .s-nav-links,
    .s-nav-links.s-abierto {
        display: flex; flex-direction: column; gap: 0;
        position: absolute; left: 0; right: 0; top: 100%;
        background: #fff; border-bottom: 1px solid var(--s-linea);
        box-shadow: 0 14px 30px rgba(15,23,42,.10);
        padding: 6px 0; margin: 0;
    }
    .s-menu-sw:checked ~ .s-nav-links a,
    .s-nav-links.s-abierto a {
        padding: 13px 22px; font-size: 15px; color: var(--s-tinta);
    }
    .s-menu-sw:checked ~ .s-nav-links a:hover,
    .s-nav-links.s-abierto a:hover { background: var(--s-fondo); }
    /* `.s-nav` NO puede llevar `position` aquí. Quedó de cuando la barra
       era una sola fila, y era la causa de que el menú no se viera:
       `position: sticky` crea una capa propia, y como esa capa no tiene
       z-index, el héroe —que viene después en el documento— se pintaba
       encima del panel desplegado. El panel estaba ahí, con su alto y
       todo; simplemente quedaba debajo.

       Quien manda ahora es `.s-nav-main`, que sí lleva z-index. */
    .s-nav-in { position: relative; }
    .s-pie-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    /* ── La barra en móvil ────────────────────────────────────────
       El botón "Probar gratis" se llevaba más de la mitad del ancho y
       dejaba al logo aplastado contra el borde. Se va al desplegable:
       en la barra quedan el logo y la hamburguesa, que es lo que hace
       falta para orientarse. El botón no se pierde —está dos toques
       más cerca que antes, porque en la primera pantalla el héroe ya
       tiene el suyo, grande. */
    /* La fila de arriba se queda solo con lo accionable: WhatsApp y
       Entrar. El correo y la frase de SUNAT no caben sin apretar, y
       ambos vuelven a aparecer en el pie. */
    .s-nav-cred, .s-nav-mail { display: none; }
    .s-nav-top-in { height: 36px; justify-content: flex-end; gap: 16px; }
    .s-nav-in { height: 78px; gap: 12px; }
    .s-nav-cta .s-btn-pri, .s-link-sec { display: none; }
    .s-nav-cta { margin-left: auto; }

    /* Con la barra despejada el logo puede respirar */
    .s-logo-img { height: 54px; max-width: 240px; }
    .s-pie .s-logo-img { height: 48px; }

    /* Las dos acciones, dentro del desplegable */
    .s-menu-cta, .s-menu-entrar { display: block; }
    .s-menu-sw:checked ~ .s-nav-links .s-menu-cta,
    .s-nav-links.s-abierto .s-menu-cta {
        margin: 8px 18px 6px; padding: 13px 18px;
        background: var(--s-pri); color: #fff;
        border-radius: 10px; text-align: center;
        font-size: 15px; font-weight: 700;
    }
    .s-menu-sw:checked ~ .s-nav-links .s-menu-cta:hover,
    .s-nav-links.s-abierto .s-menu-cta:hover { background: var(--s-pri-os); }
    .s-menu-sw:checked ~ .s-nav-links .s-menu-entrar,
    .s-nav-links.s-abierto .s-menu-entrar {
        margin: 0 18px 10px; padding: 12px 18px;
        border: 1px solid var(--s-linea); border-radius: 10px;
        text-align: center; font-size: 14.5px; font-weight: 700;
        color: var(--s-tinta);
    }
    .s-hero { padding: 48px 0 56px; }
    /* `balance` iguala el largo de las líneas: con dos o tres queda
       bien, con cuatro deja un escalón feo. `pretty` solo evita que la
       última línea sea una palabra suelta, que es lo que hace falta
       cuando el titular ocupa media pantalla. */
    .s-hero h1 { font-size: 2.15rem; text-wrap: pretty; }
    .s-bento { grid-template-columns: 1fr; gap: 11px; }
    .s-pilar { padding: 18px 16px; }
    .s-pilar-ico { width: 34px; height: 34px; margin-bottom: 11px; }
    .s-pilares-sec { padding: 40px 0; }
    .s-hero-franja { margin-top: 36px; gap: 8px 20px; font-size: 12px; }
    .s-ven-cifra { font-size: 25px; }
    .s-ven-cuerpo { padding: 16px 17px 18px; }
    .s-sec { padding: 54px 0; }
    /* Se nombra aparte: `.s-sec-osc` va después en la hoja y con la misma
       especificidad, así que se quedaba con los 112px del escritorio. */
    .s-sec-osc { padding: 64px 0; }
    .s-hero { padding: 46px 0 54px; }
    .s-cols3, .s-pasos, .s-grid-mod { grid-template-columns: 1fr; }
    .s-pie-cols { grid-template-columns: 1fr 1fr; }
    .s-hero-btns { flex-direction: column; }
    .s-hero-btns .s-btn { width: 100%; }
    /* Sin destacar por elevación: en una columna, el que sube parece cortado */
    .s-plan-top { transform: none; }
    .s-wa { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Sin animación de entrada, pero visible: si solo se quita la
       animación, `opacity:0` deja el héroe en blanco. */
    .s-an { opacity: 1; animation: none; }
    .s-pilar:hover { transform: none; }
    /* El carrusel no gira solo: quien pide menos movimiento no quiere
       texto cambiando bajo sus ojos. Los puntos siguen funcionando. */
    #s-tit, #s-sub { transition: none; }
    .s-mod:hover .s-mod-ico { transform: none; }
    .s-btn:hover, .s-mod:hover, .s-wa:hover { transform: none; }
}

/* ═══════════ MODAL DE ENTRADA ═══════════
   Antes "Entrar" se llevaba a la persona a otra página. Quien está
   leyendo la portada y solo quiere revisar algo dentro perdía el sitio
   donde estaba, y volver costaba dos clics más. */
.s-modal {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.s-modal[hidden] { display: none; }
.s-modal-fondo {
    position: absolute; inset: 0;
    background: rgba(10,17,32,.6); backdrop-filter: blur(3px);
}
.s-modal-caja {
    position: relative; z-index: 1;
    width: 100%; max-width: 400px;
    background: #fff; border-radius: 16px; padding: 28px 26px 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 30px 70px -20px rgba(0,0,0,.55);
    /* Entra desde el centro, un punto por debajo: nada en el mundo real
       aparece de la nada, y arrancar en escala 0 lo delata. */
    animation: sModalEntra .22s cubic-bezier(.23, 1, .32, 1);
}
@keyframes sModalEntra {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.s-modal-x {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 8px;
    color: var(--s-suave); cursor: pointer;
    transition: background .15s, color .15s, transform .1s var(--s-sal);
}
.s-modal-x svg { width: 17px; height: 17px; }
.s-modal-x:hover { background: var(--s-fondo); color: var(--s-tinta); }
.s-modal-x:active { transform: scale(.92); }

.s-modal-cab {
    display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.s-modal-ini {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: var(--s-pri); color: #fff;
    font-family: var(--s-titulo); font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: -.02em;
}
.s-modal-cab h2 { font-size: 19px; font-weight: 800; margin: 0; }
.s-modal-logo {
    height: 30px; width: auto; max-width: 120px;
    object-fit: contain; display: block; flex-shrink: 0;
}

.s-modal-error {
    margin-bottom: 14px; padding: 10px 13px; border-radius: 9px;
    font-size: 13px; line-height: 1.5;
    background: var(--s-hot-suave); border: 1px solid #fecaca; color: #b91c1c;
}
.s-modal-error[hidden] { display: none; }

.s-campo { display: block; margin-bottom: 14px; }
.s-campo span {
    display: block; margin-bottom: 5px;
    font-size: 11.5px; font-weight: 600; color: #475569;
}
.s-campo input {
    width: 100%; padding: 11px 12px;
    font-family: var(--s-texto); font-size: 14.5px; color: var(--s-tinta);
    border: 1px solid var(--s-linea); border-radius: 9px;
    transition: border-color .15s, box-shadow .15s;
}
.s-campo input:focus {
    outline: none; border-color: var(--s-pri);
    box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.s-recordar {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 4px 0 18px; font-size: 12.5px; line-height: 1.4;
    color: var(--s-suave); cursor: pointer;
}
.s-recordar input {
    width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0;
    accent-color: var(--s-pri);
}
/* Mientras comprueba, el botón dice qué está haciendo y no se deja
   pulsar dos veces. */
.s-btn[aria-busy="true"] { opacity: .72; pointer-events: none; }

.s-modal-pie {
    margin: 16px 0 0; text-align: center;
    font-size: 12.5px; color: var(--s-suave);
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.s-modal-pie a { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .s-modal-caja { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   INTEGRACIONES
   Una franja discreta, no una sección con peso propio: solo tiene que
   quitar el miedo a quedarse aislado. Va en gris sobre blanco para que
   no compita con lo que hay antes y después.
   ═══════════════════════════════════════════════════════════════════ */
.s-integra-sec { padding: 54px 0; border-top: 1px solid var(--s-linea); }
.s-integra-tit {
    text-align: center; margin: 0 0 22px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--s-suave);
}
.s-integra {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
}
.s-int {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--s-linea); background: #fff;
    font-size: 13.5px; font-weight: 600; color: var(--s-tinta);
    white-space: nowrap;
}
.s-int svg { width: 17px; height: 17px; color: var(--s-suave); flex-shrink: 0; }
.s-integra-pie {
    max-width: 640px; margin: 20px auto 0; text-align: center;
    font-size: 13.5px; line-height: 1.65; color: var(--s-suave);
}

/* ═══════════════════════════════════════════════════════════════════
   COMPARATIVA DE COSTE
   Tres columnas, y la tercera gana. El orden no es casual: se lee de
   izquierda a derecha, así que el visitante pasa por lo que tiene hoy,
   por lo que le ofrecerían en otro sitio, y llega aquí.
   ═══════════════════════════════════════════════════════════════════ */
.s-comparo-sec { background: var(--s-fondo); }
.s-comparo {
    display: grid; gap: 18px; margin-top: 38px;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    align-items: stretch;
}
.s-comp {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--s-linea); border-radius: 16px;
    padding: 26px 24px 22px;
}
.s-comp h3 {
    margin: 0; font-family: var(--s-titulo);
    font-size: 18px; font-weight: 700; color: var(--s-tinta); line-height: 1.25;
}
.s-comp-como {
    margin: 7px 0 18px; font-size: 13px; line-height: 1.55; color: var(--s-suave);
}
.s-comp ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.s-comp li {
    position: relative; padding-left: 22px;
    font-size: 13.8px; line-height: 1.55; color: var(--s-txt);
}
/* Las dos primeras columnas describen un peaje; la nuestra, lo que
   incluye. El símbolo lo dice sin una palabra de más. */
.s-comp li::before {
    content: "–"; position: absolute; left: 4px; top: -1px;
    color: var(--s-suave); font-weight: 700;
}
.s-comp-top li::before {
    content: "✓"; left: 2px; color: var(--s-ok); font-size: 13px;
}
.s-comp-pie {
    margin-top: auto; padding-top: 20px;
    border-top: 1px solid var(--s-linea);
}
/* `margin-top: auto` sobre el pie es lo que alinea las tres cifras a la
   misma altura aunque las listas tengan distinto largo. Sin eso, la
   comparación se lee torcida. */
.s-comp-etq {
    display: block; margin-bottom: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--s-suave);
}
.s-comp-pie strong {
    font-family: var(--s-titulo); font-size: 22px; font-weight: 700;
    color: var(--s-tinta); line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.s-comp-pie small { font-size: 13px; font-weight: 600; color: var(--s-suave); }

.s-comp-mid { background: #fff; }
.s-comp-top {
    border-color: var(--s-pri);
    box-shadow: 0 14px 40px rgba(37, 99, 235, .14);
}
.s-comp-top .s-comp-pie strong { color: var(--s-pri); font-size: 30px; }
.s-comp-cinta {
    position: absolute; top: -11px; left: 24px;
    background: var(--s-pri); color: #fff;
    padding: 4px 13px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
@media (max-width: 720px) {
    .s-integra-sec { padding: 38px 0; }
    .s-comp { padding: 22px 20px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIBRO DE RECLAMACIONES
   El recuadro del pie usa el formato con el que la gente lo reconoce en
   cualquier local: marco, libro y dos líneas. Que se reconozca importa
   más que que combine.
   ═══════════════════════════════════════════════════════════════════ */
.s-pie-libro { padding-bottom: 18px; }
.s-libro {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 15px; border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.35);
    color: rgba(255,255,255,.9); text-decoration: none;
    font-size: 11.5px; font-weight: 700; line-height: 1.25;
    text-transform: uppercase; letter-spacing: .03em;
}
.s-libro:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.07); }
.s-libro svg { width: 24px; height: 24px; flex-shrink: 0; }

/* ── La página del libro ─────────────────────────────────────────── */
.s-lr-cab { border-bottom: 1px solid var(--s-linea); background: #fff; }
.s-lr-cab-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding-block: 15px;
}
.s-lr-volver { font-size: 13.5px; font-weight: 600; color: var(--s-suave); text-decoration: none; }
.s-lr-volver:hover { color: var(--s-pri); }
.s-lr-sello {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--s-tinta);
}
.s-lr-sello svg { width: 19px; height: 19px; color: var(--s-suave); }

.s-lr { padding-top: 46px; }
.s-lr-prov {
    display: grid; gap: 1px; margin: 26px 0 22px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    background: var(--s-linea); border: 1px solid var(--s-linea); border-radius: 12px;
    overflow: hidden;
}
.s-lr-prov > div { background: #fff; padding: 13px 16px; }
.s-lr-prov span {
    display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--s-suave); margin-bottom: 3px;
}
.s-lr-prov strong { font-size: 13.5px; color: var(--s-tinta); line-height: 1.35; }

.s-lr-h3 {
    margin: 34px 0 14px; font-family: var(--s-titulo);
    font-size: 15.5px; font-weight: 700; color: var(--s-tinta);
    padding-bottom: 8px; border-bottom: 1px solid var(--s-linea);
}
.s-lr-rej { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.s-lr-ancho { grid-column: 1 / -1; }
.s-lr-campo { display: block; }
.s-lr-campo > span {
    display: block; margin-bottom: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--s-tinta);
}
.s-lr-campo > span b { color: var(--s-hot); }
.s-lr-campo input, .s-lr-campo select, .s-lr-campo textarea {
    width: 100%; padding: 10px 13px; border-radius: 9px;
    border: 1px solid var(--s-linea); background: #fff;
    font-family: var(--s-texto); font-size: 14px; color: var(--s-tinta);
}
.s-lr-campo textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.s-lr-campo input:focus, .s-lr-campo select:focus, .s-lr-campo textarea:focus {
    outline: none; border-color: var(--s-pri); box-shadow: 0 0 0 3px rgba(37,99,235,.13);
}
.s-lr-campo small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--s-suave); }
.s-lr-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--s-txt); }
.s-lr-menor { display: flex; flex-direction: column; gap: 12px; }

.s-lr-tipo { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 20px; }
.s-lr-op {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px; border: 1px solid var(--s-linea); border-radius: 11px;
    background: #fff; cursor: pointer;
}
.s-lr-op:has(input:checked) { border-color: var(--s-pri); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.s-lr-op input { margin-top: 3px; }
.s-lr-op b { display: block; font-size: 14px; color: var(--s-tinta); }
.s-lr-op small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--s-suave); line-height: 1.45; }

.s-lr-form > .s-lr-campo { margin-top: 16px; }
.s-lr-legal {
    margin: 22px 0 18px; padding: 14px 16px; border-radius: 10px;
    background: var(--s-fondo); font-size: 13px; line-height: 1.65; color: var(--s-txt);
}
.s-lr-error {
    margin-bottom: 18px; padding: 13px 16px; border-radius: 10px;
    background: var(--s-hot-suave); border: 1px solid #fecaca;
    color: #991b1b; font-size: 14px;
}
/* La trampa para robots: fuera de la vista, pero SIN display:none —hay
   robots que se saltan lo que está oculto de esa forma. */
.s-lr-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.s-lr-ok { text-align: center; padding: 34px 0 10px; }
.s-lr-ok h1 { font-family: var(--s-titulo); font-size: 27px; color: var(--s-tinta); margin: 0 0 10px; }
.s-lr-num { font-size: 17px; color: var(--s-txt); margin: 0 0 18px; }
.s-lr-num strong { font-family: var(--s-titulo); font-size: 24px; color: var(--s-pri); letter-spacing: .02em; }
.s-lr-ok p { color: var(--s-txt); line-height: 1.7; }
.s-lr-plazo {
    max-width: 520px; margin: 20px auto 26px; padding: 14px 18px;
    border-radius: 11px; background: var(--s-esp-suave); border: 1px solid #fde68a;
    font-size: 13.5px; color: #78350f;
}

/* ═══════════════════════════════════════════════════════════════════
   PRUEBA SOCIAL
   Sobria a propósito. Las cifras ya son el argumento; adornarlas las
   hace parecer menos ciertas, que es lo contrario de lo que se busca.
   ═══════════════════════════════════════════════════════════════════ */
.s-prueba-sec { padding: 68px 0; border-top: 1px solid var(--s-linea); }
.s-prueba {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.s-pr { text-align: center; padding: 6px 8px; }
.s-pr strong {
    display: block; font-family: var(--s-titulo);
    font-size: 34px; font-weight: 700; line-height: 1;
    color: var(--s-tinta); font-variant-numeric: tabular-nums;
}
.s-pr span {
    display: block; margin-top: 8px;
    font-size: 13px; line-height: 1.45; color: var(--s-suave);
}
.s-prueba-pie { margin-top: 18px; font-size: 12.5px; color: var(--s-suave); }

.s-prueba-tit {
    text-align: center; margin: 44px 0 18px;
    font-size: 12px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--s-suave);
}
.s-marcas { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 10px; }
.s-marca-chip {
    padding: 8px 15px; border-radius: 999px;
    background: var(--s-fondo); border: 1px solid var(--s-linea);
    font-size: 13px; font-weight: 700; letter-spacing: .02em;
    color: var(--s-tinta); white-space: nowrap;
}

.s-testis {
    display: grid; gap: 16px; margin-top: 40px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.s-testi {
    margin: 0; padding: 24px 24px 20px;
    background: #fff; border: 1px solid var(--s-linea); border-radius: 15px;
    display: flex; flex-direction: column;
}
.s-testi blockquote {
    margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--s-txt);
}
/* Las comillas van en el pseudoelemento y no en el texto: así el
   testimonio se guarda tal como lo dijo la persona, sin comillas
   pegadas que luego salen dobles. */
.s-testi blockquote::before { content: "\201C"; }
.s-testi blockquote::after  { content: "\201D"; }
.s-testi figcaption { margin-top: auto; font-size: 13px; line-height: 1.45; }
.s-testi figcaption strong { display: block; color: var(--s-tinta); }
.s-testi figcaption span { color: var(--s-suave); }

/* ═══════════════════════════════════════════════════════════════════
   CAPTURAS DEL PRODUCTO
   ═══════════════════════════════════════════════════════════════════ */
.s-caps {
    display: grid; gap: 20px; margin-top: 38px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.s-cap {
    margin: 0; background: #fff;
    border: 1px solid var(--s-linea); border-radius: 15px; overflow: hidden;
    display: flex; flex-direction: column;
}
.s-cap img {
    display: block; width: 100%; height: auto;
    border-bottom: 1px solid var(--s-linea);
    /* Sin alto fijo: una captura recortada a una proporción inventada
       corta justo lo que se quería enseñar. */
}
.s-cap figcaption { padding: 16px 20px 18px; }
.s-cap figcaption strong { display: block; font-size: 14.5px; color: var(--s-tinta); margin-bottom: 4px; }
.s-cap figcaption span { font-size: 13px; line-height: 1.6; color: var(--s-suave); }

/* ═══════════════════════════════════════════════════════════════════
   CAPTACIÓN EN EL HERO
   Sobre fondo oscuro, así que va en vidrio y no en blanco: una caja
   blanca ahí arriba se comería el titular.
   ═══════════════════════════════════════════════════════════════════ */
.s-hero-cap {
    display: flex; flex-wrap: wrap; gap: 9px;
    margin-top: 18px; max-width: 520px;
}
.s-hero-cap input {
    flex: 1 1 150px; min-width: 0;
    padding: 11px 15px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.09);
    font-family: var(--s-texto); font-size: 14px; color: #fff;
}
.s-hero-cap input::placeholder { color: rgba(255,255,255,.55); }
.s-hero-cap input:focus {
    outline: none; border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.14);
}
.s-hero-cap .s-btn { flex: 0 0 auto; padding: 11px 20px; font-size: 14px; }
@media (max-width: 560px) {
    .s-hero-cap .s-btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   PLAN GRATUITO Y LO QUE NO INCLUYE
   ═══════════════════════════════════════════════════════════════════ */
.s-plan-gratis {
    font-family: var(--s-titulo); font-weight: 700;
    font-size: 34px; line-height: 1; color: var(--s-ok);
}
/* Lo que el plan NO trae se dice en la lista, no en la letra pequeña.
   Tachado y en gris: se lee como ausencia sin necesidad de leerlo. */
.s-plan-no { color: var(--s-suave); text-decoration: line-through; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════════
   FRANJA DEL ASESOR
   Para el que no encaja en ninguna caja y se iba sin decir nada.
   ═══════════════════════════════════════════════════════════════════ */
.s-asesor {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin-top: 30px; padding: 26px 28px;
    background: #fff; border: 1px solid var(--s-linea); border-radius: 16px;
}
.s-asesor-ico {
    flex: 0 0 auto; width: 50px; height: 50px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--s-fondo); color: var(--s-pri);
}
.s-asesor-ico svg { width: 26px; height: 26px; }
.s-asesor-txt { flex: 1 1 260px; min-width: 0; }
.s-asesor-txt h3 {
    margin: 0 0 5px; font-family: var(--s-titulo);
    font-size: 18px; font-weight: 700; color: var(--s-tinta);
}
.s-asesor-txt p { margin: 0; font-size: 13.8px; line-height: 1.6; color: var(--s-suave); }
.s-asesor-btns { display: flex; gap: 9px; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 700px) {
    .s-asesor { padding: 22px 20px; }
    .s-asesor-btns { width: 100%; }
    .s-asesor-btns .s-btn { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   REDES Y DATOS DEL PIE
   ═══════════════════════════════════════════════════════════════════ */
.s-redes { display: flex; gap: 9px; margin-top: 16px; }
.s-redes a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.72);
    transition: color .15s, border-color .15s, background .15s;
}
.s-redes a:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.09); }
.s-redes svg { width: 18px; height: 18px; }
/* La dirección no es un enlace: no lleva a ninguna parte, y un enlace
   que no navega desconcierta. Se pinta igual que los demás para que la
   columna no se lea torcida. */
.s-pie-dato {
    display: block; margin-top: 7px;
    font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.55);
}

/* ═══════════════════════════════════════════════════════════════════
   PÁGINAS LEGALES
   ═══════════════════════════════════════════════════════════════════ */
.s-legal { padding-top: 46px; }
.s-legal-txt { display: flex; flex-direction: column; gap: 26px; margin-top: 28px; }
.s-legal-txt h2 {
    margin: 0 0 8px; font-family: var(--s-titulo);
    font-size: 17px; font-weight: 700; color: var(--s-tinta);
}
.s-legal-txt p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--s-txt); }
.s-legal-pie {
    margin-top: 34px; padding: 16px 18px; border-radius: 11px;
    background: var(--s-fondo); font-size: 13.5px; line-height: 1.7; color: var(--s-txt);
}