/* ==========================================================================
   GESTOR — gestor.ar
   Sistema visual v2.

   POR QUE ES CLARO Y NO OSCURO: las 21 capturas del sistema son de interfaz
   CLARA (canvas blanco, barra lateral azul marino, acento indigo en los
   graficos). La version anterior las montaba sobre un fondo casi negro y cada
   captura quedaba como una caja de luz peleando con la pagina. Aca la paleta
   sale del producto: el papel del sitio es el canvas de la app, la seccion
   oscura es el color de su barra lateral, y el acento es el mismo indigo de
   los graficos. El sitio se parece a lo que vende.

   El degrade azul->cian del logo NO se toca: es la marca. Se usa en el logo y
   en un solo momento de acento, no como color de interfaz.

   Sin dependencias externas ni fuentes remotas: se sirve tal cual desde IIS y
   anda sin internet. La unica libreria es motion, vendoreada en assets/js.
   ========================================================================== */

:root {
    /* --- La marca, del logo --- */
    --marca-azul: #1466ff;
    --marca-cian: #2fd8ff;
    --degrade: linear-gradient(115deg, #1466ff 0%, #2fd8ff 100%);

    /* MISMA PALETA QUE LA HOME.

       La portada quedo con el diseno celeste + CTA naranja, y estas paginas
       usaban indigo. Alguien que entraba y hacia click en "El sistema" cambiaba
       de paleta a mitad de camino: otro acento, otro color de boton, otro
       header. Los VALORES son ahora los de alternativa.css; los NOMBRES de los
       tokens quedan como estaban, asi ninguna regla de abajo se toca.

       Todos medidos contra el minimo de 4.5:1 antes de entrar. */

    /* --- El acento: el celeste de confianza --- */
    --acento: #0369a1;         /* 5.93:1 sobre blanco */
    --acento-fuerte: #075985;  /* 7.56:1 */
    --acento-suave: #e0f2fe;
    --acento-linea: #bae6fd;

    /* --- El CTA calido. Un solo uso: el boton primario. --- */
    --cta: #c2410c;            /* blanco encima: 5.18:1 */
    --cta-fuerte: #9a3412;

    /* --- Papel, con el mismo tinte azulado de la home --- */
    --papel: #ffffff;
    --papel-2: #f4f9ff;
    --papel-3: #e6f1fb;

    /* --- Tinta: azul petroleo, no negro --- */
    --tinta: #072b44;
    --tinta-2: #3b6180;
    --suave: #526d85;          /* 5.41:1 sobre blanco */
    --marino: #082c47;
    --marino-2: #0d3a5c;

    --linea: #dbe9f5;
    --linea-fuerte: #bcd4e8;

    /* --- Semanticos: los mismos que usa el sistema en sus indicadores --- */
    --exito: #16a34a;
    --exito-claro: #dcfce7;
    --alerta: #f59e0b;
    --error: #dc2626;

    --radio: 14px;
    --radio-chico: 9px;
    --radio-grande: 22px;

    /* Sombras de papel: cortas y suaves. En claro, una sombra larga y negra
       ensucia; lo que da relieve es el borde de 1px mas una sombra corta. */
    --sombra: 0 1px 2px rgba(26, 29, 46, .06), 0 4px 12px rgba(26, 29, 46, .05);
    --sombra-alta: 0 2px 4px rgba(26, 29, 46, .06), 0 18px 44px rgba(26, 29, 46, .11);
    --sombra-marco: 0 2px 6px rgba(26, 29, 46, .08), 0 30px 70px rgba(26, 29, 46, .16);

    --ancho: 1200px;
    --ancho-texto: 68ch;

    --tipo: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

    --salida: cubic-bezier(.16, 1, .3, 1);
}

/* EL SITIO ES CLARO SIEMPRE. NO HAY MODO OSCURO, Y ES A PROPOSITO.

   Habia uno —los mismos tokens dados vuelta— y se saco por tres motivos:

   1. Contradice el motivo del rediseno. Todo esto se hizo para que el sitio se
      parezca al producto, y el GESTOR es de interfaz clara. En oscuro las 21
      capturas vuelven a ser cajas de luz sobre fondo negro, que es exactamente
      el problema que veniamos a resolver.
   2. En oscuro esta version se parecia demasiado a la anterior, que era oscura.
      Confundio dos veces a quien la estaba revisando: "no veo ningun cambio".
   3. No lo elige el visitante: se lo impone su sistema operativo. O sea que un
      cliente podia abrir gestor.ar y ver una version del sitio que nadie del
      equipo habia mirado nunca.

   La skill de UI/UX que se consulto para el diseno tambien lo pone entre los
   anti-patrones para este tipo de producto ("dark mode by default").

   El <meta name="theme-color"> de las paginas sigue declarando los dos valores
   y no molesta: solo pinta la barra del navegador en mobile. */

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
    background: var(--papel);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta-2);
    font-family: var(--tipo);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-fuerte); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: 4px;
}

h1, h2, h3, h4 {
    color: var(--tinta);
    line-height: 1.12;
    margin: 0 0 .5em;
    letter-spacing: -.028em;
    font-weight: 660;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); letter-spacing: -.042em; line-height: 1.04; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); letter-spacing: -.035em; }
h3 { font-size: 1.16rem; letter-spacing: -.018em; }
h4 { font-size: .95rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

code {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--acento-suave);
    color: var(--acento-fuerte);
    padding: .12em .42em;
    border-radius: 5px;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 26px; }

.oculto-visual {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* Una palabra del titulo con el degrade de la marca. Es el unico lugar donde
   aparece el celeste: usado en mas de un lado deja de ser un acento. */
.degradado {
    background: var(--degrade);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================ Cabecera ================================= */

.cabecera {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--papel) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s;
}

.cabecera.pegada {
    border-bottom-color: var(--linea);
    box-shadow: 0 1px 14px rgba(26, 29, 46, .05);
}

.cabecera .contenedor { display: flex; align-items: center; gap: 28px; height: 72px; }

/* La barra de avance de lectura: la dibuja motion con scroll(), asi que aca
   solo va la pista. scaleX arranca en 0 y el eje de escala a la izquierda. */
.barra-progreso {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--degrade);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.logo svg { height: 31px; width: 31px; display: block; flex: 0 0 auto; }

.logo-texto {
    font-size: 1.26rem; font-weight: 700; letter-spacing: -.022em;
    color: var(--tinta); line-height: 1;
}

.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* EL :not(.btn) NO ES ADORNO.

   `.menu a` pesa (0,1,1) —una clase y un elemento— contra el (0,1,0) de
   `.btn-primario`, asi que le ganaba el color del menu y el boton "Pedir una
   demo" de la cabecera quedaba con letra gris sobre el acento: ilegible. El
   mismo boton en el heroe y en el formulario estaba bien, o sea que fallaba en
   UN solo lugar y era facil no verlo. */
.menu a:not(.btn) {
    color: var(--tinta-2);
    font-size: .93rem; font-weight: 500;
    padding: 8px 13px; border-radius: 8px;
    transition: color .2s, background .2s;
}

.menu a:not(.btn):hover { background: var(--papel-3); color: var(--tinta); text-decoration: none; }
.menu a.activo { color: var(--tinta); font-weight: 600; }

.menu-boton {
    display: none; margin-left: auto;
    background: var(--papel-2); border: 1px solid var(--linea); border-radius: 10px;
    width: 42px; height: 42px; cursor: pointer; color: var(--tinta);
    align-items: center; justify-content: center;
}

/* ============================= Botones ================================= */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 22px;
    border: 1px solid transparent; border-radius: 11px;
    font: inherit; font-size: .97rem; font-weight: 600; letter-spacing: -.01em;
    cursor: pointer; white-space: nowrap;
    transition: transform .18s var(--salida), box-shadow .2s, background .2s, border-color .2s;
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* El boton primario va en NARANJA, igual que en la home. Es el unico lugar del
   sitio donde aparece ese color: usado en dos lados deja de querer decir
   "hace click aca". */
.btn-primario {
    background: var(--cta); color: #fff;
    box-shadow: 0 2px 4px rgba(194, 65, 12, .22), 0 10px 26px rgba(194, 65, 12, .32);
}

.btn-primario:hover { background: var(--cta-fuerte); color: #fff; }

.btn-linea {
    background: var(--papel); color: var(--tinta);
    border-color: var(--linea-fuerte);
    box-shadow: var(--sombra);
}

.btn-linea:hover { border-color: var(--suave); color: var(--tinta); }

/* Sobre las secciones marino: el mismo boton pero al reves. */
.btn-claro {
    background: rgba(255, 255, 255, .1); color: #fff;
    border-color: rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}

.btn-claro:hover { background: rgba(255, 255, 255, .17); color: #fff; }

.btn-chico { padding: 9px 16px; font-size: .9rem; border-radius: 9px; }

/* ============================ Secciones ================================ */

.seccion { padding: clamp(70px, 9vw, 118px) 0; position: relative; }
.seccion-papel { background: var(--papel-2); }

.seccion-tinta {
    background: var(--marino);
    color: #b7bdd0;
}

.seccion-tinta h2, .seccion-tinta h3, .seccion-tinta h4 { color: #fff; }
.seccion-tinta .rotulo { color: #a5a5f7; }
.seccion-tinta .encabezado-seccion > p { color: #b7bdd0; }

/* El numero de seccion: motivo de "documento tecnico". Un ERP se vende como
   algo ordenado, y numerar las secciones es la forma mas barata de decirlo. */
.encabezado-seccion {
    max-width: var(--ancho-texto);
    margin-bottom: clamp(38px, 5vw, 62px);
}

.encabezado-seccion.centrado { margin-left: auto; margin-right: auto; text-align: center; }

.rotulo {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--mono);
    font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--acento);
    margin-bottom: 16px;
}

.rotulo::before {
    content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5;
}

.encabezado-seccion h2 { margin-bottom: .38em; }

.encabezado-seccion > p {
    font-size: 1.1rem; color: var(--tinta-2); margin: 0;
}

/* ============================== Heroe ================================== */

.heroe {
    position: relative;
    padding: clamp(52px, 7vw, 88px) 0 clamp(60px, 7vw, 90px);
    overflow: hidden;
}

/* La luz de fondo: un solo halo indigo muy abierto, del lado del texto. Sobre
   papel blanco tiene que ser casi imperceptible o parece un error de imprenta. */
.heroe::before {
    content: "";
    position: absolute; top: -320px; left: 50%;
    width: 1100px; height: 700px; margin-left: -820px;
    background: radial-gradient(closest-side, rgba(91, 91, 214, .13), transparent 72%);
    pointer-events: none;
}

.heroe .contenedor { position: relative; }

.chapa {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--papel);
    border: 1px solid var(--linea);
    box-shadow: var(--sombra);
    border-radius: 100px;
    padding: 7px 16px 7px 12px;
    font-size: .87rem; color: var(--tinta-2);
    margin: 0 0 26px;
}

.chapa b { color: var(--tinta); font-weight: 600; }

.punto {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--exito);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exito) 22%, transparent);
    flex: 0 0 auto;
}

.heroe h1 { max-width: 15ch; margin-bottom: .34em; }

.heroe-bajada {
    font-size: clamp(1.06rem, 1.5vw, 1.22rem);
    max-width: 60ch;
    color: var(--tinta-2);
    margin-bottom: 30px;
}

.heroe-botones { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 18px; }

.heroe-nota { font-size: .92rem; color: var(--suave); margin: 0; }

/* Los numeros van pegados al heroe y no en una franja aparte: separados en su
   propia banda cortaban la pagina justo donde hay que seguir leyendo. */
.heroe-datos {
    display: flex; flex-wrap: wrap; gap: 0;
    margin: 40px 0 0;
    border-top: 1px solid var(--linea);
    padding-top: 26px;
}

.heroe-dato { flex: 1 1 150px; padding-right: 24px; }

.heroe-dato b {
    display: block;
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    font-weight: 680; letter-spacing: -.04em;
    color: var(--tinta); line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.heroe-dato span { display: block; font-size: .89rem; color: var(--suave); margin-top: 3px; }

/* --- El marco de las capturas --- */

.heroe-figura { margin-top: clamp(44px, 6vw, 72px); will-change: transform; }

.marco {
    border-radius: var(--radio-grande);
    background: var(--papel);
    border: 1px solid var(--linea);
    box-shadow: var(--sombra-marco);
    overflow: hidden;
}

.marco-barra {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 15px;
    background: var(--papel-2);
    border-bottom: 1px solid var(--linea);
}

.marco-barra i {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--linea-fuerte); flex: 0 0 auto;
}

.marco-barra span {
    margin-left: 10px;
    font-family: var(--mono); font-size: .78rem; color: var(--suave);
}

.marco img { width: 100%; display: block; }

.marco--suelto { border-radius: var(--radio); }

/* ========================== La comparacion ============================= */

.comparacion {
    display: grid; grid-template-columns: 1fr 1.12fr; gap: 26px;
    align-items: start;
}

.caja-comparacion {
    border-radius: var(--radio-grande);
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid var(--linea);
    background: var(--papel);
}

.caja-comparacion h3 {
    display: flex; align-items: center; gap: 11px;
    font-size: 1.28rem; margin-bottom: .3em;
}

.caja-comparacion h3 svg { width: 27px; height: 27px; flex: 0 0 auto; }

.aclara { color: var(--suave); font-size: .95rem; margin-bottom: 22px; }

.caja-suelta { background: var(--papel-2); }

/* Los programas sueltos: cada uno una etiqueta desalineada. El desorden ES el
   argumento, asi que se dibuja y no se explica. */
.sueltos { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }

.sueltos li {
    background: var(--papel);
    border: 1px dashed var(--linea-fuerte);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .89rem;
    color: var(--tinta-2);
}

.cierre {
    margin: 0; padding-top: 18px; border-top: 1px solid var(--linea);
    color: var(--error); font-size: .95rem; font-weight: 500;
}

.caja-junta {
    background: var(--papel);
    border-color: var(--acento-linea);
    box-shadow: var(--sombra-alta);
    position: relative;
}

.caja-junta::before {
    content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px;
    background: var(--degrade);
    border-radius: var(--radio-grande) var(--radio-grande) 0 0;
}

.lista-tildes { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }

.lista-tildes li {
    position: relative; padding-left: 30px;
    font-size: .97rem;
}

.lista-tildes li::before {
    content: "";
    position: absolute; left: 0; top: .34em;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--exito-claro);
}

.lista-tildes li::after {
    content: "";
    position: absolute; left: 5px; top: .62em;
    width: 8px; height: 4.5px;
    border-left: 2px solid var(--exito); border-bottom: 2px solid var(--exito);
    transform: rotate(-45deg);
}

.seccion-tinta .lista-tildes li::before { background: rgba(34, 197, 94, .18); }

.remate {
    margin: 34px auto 0; max-width: 62ch; text-align: center;
    font-size: 1.14rem; color: var(--tinta-2);
}

.remate b { color: var(--tinta); }

/* ============================= Pestanas ================================ */

.pestanas { display: grid; grid-template-columns: 340px 1fr; gap: 34px; align-items: start; }

.pestanas-lista { display: flex; flex-direction: column; gap: 6px; }

.pestana {
    text-align: left; cursor: pointer;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radio);
    padding: 15px 17px;
    font: inherit; color: inherit;
    display: block; width: 100%;
    transition: background .2s, border-color .2s;
    position: relative;
}

.pestana b {
    display: block; color: var(--tinta); font-size: 1rem; font-weight: 620;
    margin-bottom: 3px;
}

.pestana span { display: block; font-size: .9rem; color: var(--suave); line-height: 1.5; }

.pestana:hover { background: var(--papel-2); }

.pestana[aria-selected="true"] {
    background: var(--papel);
    border-color: var(--linea);
    box-shadow: var(--sombra);
}

.pestana[aria-selected="true"]::before {
    content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px;
    width: 3px; border-radius: 3px; background: var(--acento);
}

.pestanas-panel { position: relative; }

/* Los paneles se apilan: el que no esta elegido queda con opacidad 0 pero
   ocupando lugar, asi la altura no salta al cambiar de solapa. */
.pestanas-panel .marco { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.pestanas-panel .marco.visible { position: relative; opacity: 1; pointer-events: auto; }

/* ============================= Circuito ================================ */

.circuito {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
    counter-reset: paso;
}

.paso {
    position: relative;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 20px 16px 18px;
    box-shadow: var(--sombra);
}

/* La flecha entre pasos: un chevron dibujado con bordes, no un caracter, para
   que no dependa de la fuente. */
.paso:not(:last-child)::after {
    content: "";
    position: absolute; right: -10px; top: 50%; z-index: 2;
    width: 8px; height: 8px;
    border-top: 2px solid var(--linea-fuerte);
    border-right: 2px solid var(--linea-fuerte);
    transform: translateY(-50%) rotate(45deg);
}

.paso-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; border-radius: 8px;
    background: var(--acento-suave); color: var(--acento-fuerte);
    font-family: var(--mono); font-size: .82rem; font-weight: 700;
    margin-bottom: 12px;
}

.paso b { display: block; color: var(--tinta); font-size: 1rem; margin-bottom: 2px; }
.paso > span:last-child { display: block; font-size: .88rem; color: var(--suave); line-height: 1.45; }

.nota-circuito {
    margin: 28px auto 0; max-width: 74ch; text-align: center;
    font-size: .98rem; color: var(--tinta-2);
}

.nota-circuito b { color: var(--tinta); }

/* ============================= Modulos ================================= */

.rejilla-modulos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 16px;
}

.modulo {
    display: block;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 24px 22px 20px;
    color: inherit;
    position: relative;
    transition: border-color .22s, box-shadow .22s, transform .22s var(--salida);
}

.modulo:hover {
    text-decoration: none;
    border-color: var(--acento-linea);
    box-shadow: var(--sombra-alta);
    transform: translateY(-3px);
}

.modulo-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--acento-suave); color: var(--acento);
    margin-bottom: 15px;
}

.modulo-icono svg { width: 21px; height: 21px; }

.modulo h3 { font-size: 1.05rem; margin-bottom: .4em; }

.modulo p { font-size: .93rem; color: var(--tinta-2); margin-bottom: 14px; line-height: 1.55; }

.modulo-mas {
    font-size: .88rem; font-weight: 600; color: var(--acento);
    display: inline-flex; align-items: center; gap: 5px;
}

/* ============================ Destacados =============================== */

.destacado {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 64px);
    align-items: center;
}

.destacado + .destacado { margin-top: clamp(60px, 8vw, 104px); }

.destacado--invertido .destacado-texto { order: 2; }

.destacado-texto h2 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); }

.destacado-texto > p { color: var(--tinta-2); margin-bottom: 22px; }

/* ============================== Videos ================================= */

.lista-videos { display: grid; gap: 10px; }

.fila-video {
    display: grid; grid-template-columns: 156px 1fr auto; gap: 18px; align-items: center;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 12px 18px 12px 12px;
    color: inherit; text-align: left;
    width: 100%; font: inherit; cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s var(--salida);
}

.fila-video:hover {
    text-decoration: none; border-color: var(--acento-linea);
    box-shadow: var(--sombra); transform: translateX(3px);
}

.fila-video[aria-current="true"] {
    border-color: var(--acento);
    background: var(--acento-suave);
}

.fila-video-miniatura { position: relative; border-radius: 10px; overflow: hidden; display: block; }

.fila-video-miniatura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.fila-video-miniatura i {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26, 29, 46, .3); color: #fff;
    transition: background .2s;
}

.fila-video:hover .fila-video-miniatura i { background: rgba(26, 29, 46, .12); }

.fila-video-cuerpo b { display: block; color: var(--tinta); font-size: 1.02rem; margin-bottom: 2px; }
.fila-video-cuerpo p { margin: 0 0 5px; font-size: .93rem; color: var(--tinta-2); }

.fila-video-caps { display: block; font-size: .82rem; color: var(--suave); line-height: 1.45; }

.fila-video-dura {
    font-family: var(--mono); font-size: .86rem; color: var(--suave);
    padding-left: 10px; font-variant-numeric: tabular-nums;
}

/* --- El reproductor de videos.html --- */

.reproductor-caja {
    display: grid; grid-template-columns: 1fr 306px;
    background: var(--marino);
    border-radius: var(--radio-grande);
    overflow: hidden;
    box-shadow: var(--sombra-marco);
}

.reproductor-caja video { width: 100%; height: 100%; display: block; background: #000; }

.capitulos { padding: 20px 18px; max-height: 480px; overflow-y: auto; }

.capitulos-titulo {
    font-size: .78rem; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: #8b93ab; margin: 0 0 14px;
}

.capitulos-lista { display: grid; gap: 2px; }

.capitulo {
    display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: baseline;
    background: transparent; border: 0; border-radius: 8px;
    padding: 8px 10px; cursor: pointer; text-align: left;
    font: inherit; font-size: .9rem; color: #c6cbdc;
    transition: background .18s, color .18s;
}

.capitulo:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.capitulo em {
    font-family: var(--mono); font-style: normal; font-size: .82rem;
    color: #8b8bf0; font-variant-numeric: tabular-nums;
}

.reproductor-datos { margin-top: 18px; }
.reproductor-datos b { display: block; color: var(--tinta); font-size: 1.2rem; }
.reproductor-datos span { display: block; color: var(--suave); font-size: .94rem; }

/* ============================ Plataforma =============================== */

.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }

.tarjeta {
    background: var(--marino-2);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radio);
    padding: 26px 24px;
    transition: border-color .22s, transform .22s var(--salida);
}

.tarjeta:hover { border-color: rgba(255, 255, 255, .18); transform: translateY(-2px); }

.tarjeta h3 {
    display: flex; align-items: center; gap: 11px;
    font-size: 1.06rem; margin-bottom: .55em;
}

.tarjeta h3 svg { flex: 0 0 auto; color: #8b8bf0; }

.tarjeta p { font-size: .95rem; color: #a8afc4; margin: 0; line-height: 1.6; }

/* ============================ Preguntas ================================ */

.faq { max-width: 860px; margin: 0 auto; }

.faq details {
    border-bottom: 1px solid var(--linea);
    padding: 4px 0;
}

.faq details:first-child { border-top: 1px solid var(--linea); }

.faq summary {
    list-style: none; cursor: pointer;
    padding: 20px 44px 20px 0;
    position: relative;
    color: var(--tinta); font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em;
}

.faq summary::-webkit-details-marker { display: none; }

/* El mas/menos dibujado con dos barras: la vertical desaparece al abrir. */
.faq summary::before,
.faq summary::after {
    content: "";
    position: absolute; right: 8px; top: 50%;
    background: var(--suave);
    transition: transform .25s var(--salida), opacity .25s;
}

.faq summary::before { width: 15px; height: 2px; margin-top: -1px; }
.faq summary::after { width: 2px; height: 15px; margin-top: -7.5px; margin-right: 6.5px; }

.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq details[open] summary { color: var(--acento); }

.faq-cuerpo { padding: 0 44px 22px 0; color: var(--tinta-2); }
.faq-cuerpo p { margin: 0; }

/* ============================= Contacto ================================ */

.contacto { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 62px); align-items: start; }

.datos-contacto { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 16px; }

.datos-contacto li { display: flex; gap: 14px; align-items: flex-start; }

.datos-contacto svg {
    width: 20px; height: 20px; color: var(--acento); flex: 0 0 auto; margin-top: 3px;
}

.datos-contacto b { display: block; color: var(--tinta); font-size: .93rem; }
.datos-contacto span, .datos-contacto a { font-size: .97rem; }

.formulario {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio-grande);
    padding: clamp(24px, 3vw, 34px);
    box-shadow: var(--sombra-alta);
}

.formulario h3 { font-size: 1.35rem; margin-bottom: .3em; }

.campo { display: block; margin-bottom: 15px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.campo label {
    display: block; font-size: .88rem; font-weight: 600; color: var(--tinta); margin-bottom: 6px;
}

.campo input, .campo textarea {
    width: 100%;
    background: var(--papel-2);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-chico);
    padding: 12px 14px;
    font: inherit; font-size: .97rem; color: var(--tinta);
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.campo textarea { min-height: 110px; resize: vertical; }

.campo input::placeholder, .campo textarea::placeholder { color: var(--suave); }

.campo input:focus, .campo textarea:focus {
    outline: none;
    background: var(--papel);
    border-color: var(--acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 16%, transparent);
}

.ayuda { font-size: .89rem; color: var(--suave); }

/* =============================== Pie =================================== */

.pie {
    background: var(--marino);
    color: #99a1b8;
    padding: clamp(50px, 6vw, 74px) 0 30px;
}

.pie a { color: #99a1b8; }
.pie a:hover { color: #fff; }

.pie .logo-texto { color: #fff; }

.pie-rejilla {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px;
    padding-bottom: 38px;
}

.pie h4 {
    color: #fff; font-size: .82rem; font-family: var(--mono);
    letter-spacing: .09em; text-transform: uppercase; margin-bottom: 15px;
}

.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: .94rem; }

.pie-abajo {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 24px;
    font-size: .89rem;
}

.redes { display: flex; gap: 8px; }

.redes a {
    width: 36px; height: 36px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .07);
    transition: background .2s, color .2s;
}

.redes a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.redes svg { width: 17px; height: 17px; }

/* El WhatsApp flotante */
.wa-flotante {
    position: fixed; right: 20px; bottom: 20px; z-index: 70;
    width: 54px; height: 54px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 22px rgba(37, 211, 102, .42);
    transition: transform .2s var(--salida);
}

.wa-flotante:hover { transform: scale(1.07); color: #fff; }
.wa-flotante svg { width: 27px; height: 27px; }

/* ======================= Paginas interiores ============================ */

.interior {
    padding: clamp(44px, 6vw, 72px) 0 clamp(18px, 3vw, 30px);
    border-bottom: 1px solid var(--linea);
    background: var(--papel-2);
}

.miga { font-family: var(--mono); font-size: .82rem; color: var(--suave); margin-bottom: 16px; }
.miga a { color: var(--suave); }
.miga a:hover { color: var(--acento); }

.interior h1 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: .35em; }
.interior > .contenedor > p { max-width: var(--ancho-texto); font-size: 1.08rem; margin: 0; }

.doble-columna { display: grid; grid-template-columns: 236px 1fr; gap: 48px; align-items: start; }

.indice-lateral { position: sticky; top: 96px; }

.indice-lateral h4 {
    font-family: var(--mono); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--suave); margin-bottom: 13px;
}

.indice-lateral ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }

/* El :not(.btn), otra vez. Al final del indice hay un "Pedir una demo" que es
   un boton, y `.indice-lateral a` pesa mas que `.btn-primario`: le ganaba el
   color del indice y quedaba con letra gris sobre naranja, 1,26 de contraste.
   Es el MISMO bug que tenia el boton de la cabecera. Cada vez que una lista de
   enlaces se pinta con `.algo a`, hay que excluir los botones. */
.indice-lateral a:not(.btn) {
    display: block; padding: 6px 12px;
    font-size: .91rem; color: var(--tinta-2);
    border-left: 2px solid var(--linea);
    transition: color .18s, border-color .18s, background .18s;
}

.indice-lateral a:not(.btn):hover { color: var(--tinta); background: var(--papel-2); text-decoration: none; }

.indice-lateral a.activo {
    color: var(--acento); border-left-color: var(--acento); font-weight: 600;
}

/* Los bloques de modulo los ESCRIBE scripts/generar-sistema.js. Las clases
   bloque-modulo / modulo-icono / temas / animar son un contrato con ese
   generador: si se renombran hay que tocarlo tambien. */
.bloque-modulo { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--linea); }
.bloque-modulo:last-child { border-bottom: 0; }

.bloque-modulo h2 {
    display: flex; align-items: center; gap: 14px;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    scroll-margin-top: 96px;
}

.bloque-modulo > p { color: var(--tinta-2); max-width: var(--ancho-texto); }

.temas {
    list-style: none; padding: 0; margin: 22px 0 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 20px;
}

.temas li {
    position: relative; padding: 6px 0 6px 20px;
    font-size: .94rem; color: var(--tinta-2);
    border-bottom: 1px solid transparent;
}

.temas li::before {
    content: ""; position: absolute; left: 4px; top: .95em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--acento-linea);
}

/* ======================== Aparecer al entrar =========================== */

/* El estado inicial lo pone el CSS y SOLO si hay JS (la clase .js la agrega un
   script en el <head>). Sin JS nunca se aplica el opacity:0, asi que la pagina
   se lee entera igual. La animacion la corre motion desde sitio.js. */
.js .animar { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .animar { opacity: 1; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================ Responsive =============================== */

@media (max-width: 1020px) {
    .pestanas { grid-template-columns: 1fr; }
    .pestanas-panel .marco { position: relative; inset: auto; }
    .pestanas-panel .marco:not(.visible) { display: none; }
    .circuito { grid-template-columns: repeat(3, 1fr); }
    .paso:nth-child(3)::after { display: none; }
    .doble-columna { grid-template-columns: 1fr; gap: 26px; }
    .indice-lateral { position: static; }
    .indice-lateral ul { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .pie-rejilla { grid-template-columns: 1fr 1fr; }
    .reproductor-caja { grid-template-columns: 1fr; }
    .capitulos { max-height: 260px; }
}

@media (max-width: 860px) {
    .menu-boton { display: flex; }

    .menu {
        display: none;
        position: absolute; top: 72px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 3px;
        background: var(--papel);
        border-bottom: 1px solid var(--linea);
        box-shadow: var(--sombra-alta);
        padding: 14px 22px 20px;
    }

    .menu.abierto { display: flex; }
    .menu a { padding: 11px 12px; }
    .menu .btn { margin-top: 8px; justify-content: center; }

    .comparacion { grid-template-columns: 1fr; }
    .destacado { grid-template-columns: 1fr; gap: 28px; }
    .destacado--invertido .destacado-texto { order: 0; }
    .contacto { grid-template-columns: 1fr; }
    .heroe h1 { max-width: none; }
}

@media (max-width: 620px) {
    body { font-size: 16.5px; }
    .circuito { grid-template-columns: repeat(2, 1fr); }
    .paso::after { display: none !important; }
    .campo-doble { grid-template-columns: 1fr; }
    .pie-rejilla { grid-template-columns: 1fr; gap: 26px; }
    .fila-video { grid-template-columns: 108px 1fr; padding: 10px; gap: 13px; }
    .fila-video-dura { display: none; }
    .heroe-dato { flex-basis: 45%; margin-bottom: 14px; }
    .temas { grid-template-columns: 1fr; }
}

/* ============================ Impresion ================================ */

@media print {
    .cabecera, .wa-flotante, .pie, .menu-boton { display: none; }
    .js .animar { opacity: 1 !important; transform: none !important; }
    body { background: #fff; color: #000; }
}

/* El <picture> que envuelve a cada imagen (ver scripts/usar-webp.js) no tiene
   que existir para el layout: sin esto se rompen las grillas donde el <img>
   era hijo directo de un contenedor flex o grid. */
picture { display: contents; }