/* ==========================================================================
   Cannis — sitio institucional (3.0)
   --------------------------------------------------------------------------
   Hoja propia del sitio público: home, páginas de público, tutoriales y
   legales. Se sirve cruda, sin build: no hay pipeline de assets en este
   proyecto.

   La paleta y la tipografía salen del manual de marca (Book of Knowledge,
   v2.0, junio 2026): fondo navy #0A1628, acento menta #52F29C, texto blanco
   con opacidades, y Agrandir como tipografía —los .otf ya estaban en
   public/fonts/—. No inventes colores: si hace falta uno nuevo, sale de un
   token de :root.

   Prefijo `w-` para todo.
   ========================================================================== */

/* ===== Tipografía de marca ===== */

@font-face {
    font-family: 'Agrandir';
    src: url('/fonts/Agrandir-Regular.otf') format('opentype');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Agrandir';
    src: url('/fonts/Agrandir-TextBold.otf') format('opentype');
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Tipografía ---
       Agrandir es la tipografía de marca y queda para los títulos y las
       cifras, que es donde la marca se reconoce. El cuerpo y la interfaz van
       en Inter: es la que el manual declara como alternativa y la que se lee
       cómoda en párrafos largos y en tamaños chicos.
       Si algún día se quiere todo en una sola, se cambia un token. */
    --w-font-titulos: 'Agrandir', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --w-font-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* --- Marca (manual, junio 2026) --- */
    --w-navy: #0a1628;          /* el fondo de marca */
    --w-navy-2: #0f2341;        /* la variante clara del fondo */
    --w-navy-3: #142c4f;        /* bordes y realces sobre navy */
    --w-menta: #52f29c;         /* el acento, uno solo */
    --w-menta-oscuro: #1fb874;  /* para degradés y hover */

    /* --- Superficies --- */
    --w-bg: var(--w-navy);
    --w-surface: rgba(255, 255, 255, 0.04);
    --w-surface-2: rgba(255, 255, 255, 0.07);
    --w-menta-suave: rgba(82, 242, 156, 0.10);
    --w-menta-suave-2: rgba(82, 242, 156, 0.06);
    --w-border: rgba(255, 255, 255, 0.10);
    --w-border-fuerte: rgba(82, 242, 156, 0.32);

    /* --- Texto: blanco con opacidad, como el manual --- */
    --w-text: #ffffff;
    --w-text-soft: rgba(255, 255, 255, 0.78);
    --w-muted: rgba(255, 255, 255, 0.55);
    --w-ink: var(--w-navy);     /* lo que va ARRIBA del acento */

    /* --- Escala de espaciado ---
       Una sola escala para todo el sitio. Los títulos y los párrafos se
       separan con estos valores y con ningún otro: el problema de la 2.0 era
       que cada bloque inventaba su margen. */
    --w-s1: 0.375rem;
    --w-s2: 0.75rem;
    --w-s3: 1.25rem;
    --w-s4: 2rem;
    --w-s5: 3rem;
    --w-s6: 4.5rem;
    --w-s7: 6.5rem;

    /* --- Medidas --- */
    --w-max: 1200px;
    --w-gutter: clamp(1.25rem, 5vw, 3rem);
    --w-radio: 20px;
    --w-radio-sm: 14px;
    --w-nav-h: 128px;    /* las DOS filas de la barra; en teléfono baja a una sola */

    --w-sombra: 0 24px 64px rgba(0, 0, 0, 0.5);
    --w-transicion: 0.16s ease;   /* corta a propósito: los efectos largos se hacen pesados */
}

/* ===== Base ===== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--w-nav-h) + var(--w-s3)); }

/* El pie va al pie, aunque la página sea corta. Sin esto, una pantalla con
   poco contenido —una cartilla vacía, un legal chico— dejaba el pie flotando a
   media altura con el fondo desnudo abajo. El `<main>` estira lo que falte.
   `.w-fondo`, `.w-saltar` y `.w-sprite` están fuera de flujo: no cuentan. */
body.w-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    background: var(--w-bg);
    color: var(--w-text);
    font-family: var(--w-font-texto);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.w-body > main { flex: 1 0 auto; }
body.w-body.sin-scroll { overflow: hidden; }

/* ⛔ TODO ESTE BLOQUE VA SIN PESO. No le saques los `:where()`.

   Es un reset de elemento: dice cómo se ve un <p> o un <ul> cuando nadie dijo
   otra cosa. Escrito como `.w-body p` pesa (0,1,1) y le gana a CUALQUIER clase
   de un solo nivel —.w-live, .w-doc__lista, .w-footer__registro—, así que
   cualquier componente que sea un <p>, un <ul> o un <ol> perdía sus márgenes
   sin que se notara en su propia regla. Eso dejaba el sello "En vivo" pegado a
   las cifras, la leyenda de marca registrada pegada al copyright y los recuadros
   `w-nota` pegados a la lista de arriba, y se venía parcheando caso por caso
   subiéndole la especificidad a cada componente.

   `:where()` aporta especificidad CERO, así que el reset conserva su alcance
   (sólo dentro de `.w-body`) pero lo gana cualquier clase. Misma razón por la
   que el reset de anclas va como `a` pelado y no como `.w-body a`: con
   `.w-body a` los enlaces se pintaban blancos aunque su clase dijera otra cosa,
   y de ahí salían los botones menta con texto blanco. */
a { color: inherit; text-decoration: none; }
:where(.w-body) :where(img) { max-width: 100%; display: block; }
:where(.w-body) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

/* El ritmo tipográfico, una sola vez y para todo el sitio. */
:where(.w-body) :where(h1, h2, h3, h4) {
    font-family: var(--w-font-titulos);
    margin: 0 0 var(--w-s3);
    line-height: 1.14;
    letter-spacing: -0.025em;
    font-weight: 700;
}
:where(.w-body) :where(h1) { margin-bottom: var(--w-s4); }
:where(.w-body) :where(h4) { margin-bottom: var(--w-s2); }
:where(.w-body) :where(p) { margin: 0 0 var(--w-s3); }
:where(.w-body) :where(p:last-child, h1:last-child, h2:last-child,
h3:last-child, h4:last-child) { margin-bottom: 0; }

.w-body :focus-visible {
    outline: 2px solid var(--w-menta);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Fondo: dos auroras mentoladas sobre el navy. Sin líneas ni texturas: la
   separación entre secciones la hace el aire, no una barra. */
.w-fondo {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(65rem 45rem at 8% -12%, rgba(82, 242, 156, 0.13), transparent 62%),
        radial-gradient(50rem 38rem at 95% 4%, rgba(82, 242, 156, 0.07), transparent 60%),
        linear-gradient(180deg, var(--w-navy-2) 0%, var(--w-navy) 42%);
}

.w-cont {
    width: 100%;
    max-width: var(--w-max);
    margin: 0 auto;
    padding-inline: var(--w-gutter);
}

.w-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: var(--w-s2) var(--w-s3);
    background: var(--w-menta);
    color: var(--w-ink);
    border-radius: 0 0 12px 0;
    font-weight: 700;
}
.w-saltar:focus { left: 0; }

/* ===== Iconos ===== */

.w-ico {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.w-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== Revelado al scroll =====
   El guard `html.js` importa: si el script no corre —bloqueado, con error, o
   un robot que no ejecuta JS—, el contenido tiene que verse igual. */
/* El revelado es un fundido y nada más: el desplazamiento de 22px hacía que
   la página entera pareciera moverse todo el tiempo. */
.js .w-reveal { opacity: 0; transition: opacity 0.3s ease; }
.js .w-reveal.visible { opacity: 1; }

/* ===== Botones =====
   El primario es menta sólida con texto navy: el contraste que manda el
   manual (::selection usa exactamente ese par). Nada de verde claro sobre
   blanco ni degradés que se laven. */

.w-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--w-s2);
    padding: 0.95rem 1.75rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    transition: transform var(--w-transicion), background var(--w-transicion),
                border-color var(--w-transicion), color var(--w-transicion);
}


.w-btn--primario {
    background: var(--w-menta);
    color: var(--w-ink);
}
.w-btn--primario:hover { background: #6cf7ad; }

.w-btn--fantasma {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--w-text);
}
.w-btn--fantasma:hover { border-color: var(--w-menta); color: var(--w-menta); }

.w-btn--chico { padding: 0.6rem 1.15rem; font-size: 0.9rem; }

/* ===== Navegación ===== */

/* La nav va limpia: transparente sobre el hero y sólida al scrollear, sin
   blur —es caro y a nadie le aporta— y sin píldoras de fondo. El activo se
   marca con un subrayado menta, como en Comunidad Cannis. */
/* La barra va en DOS filas: la marca sola y centrada arriba, y una franja con
   los destinos debajo. Ojo con `--w-nav-h`: no es decorativo. De ese token
   cuelgan el `margin-top` negativo del hero, su `padding-block` y el
   `scroll-padding-top` del documento, así que tiene que valer la altura REAL
   de las dos filas. En teléfono la segunda fila no existe —queda el burger— y
   el token vuelve a la altura de una sola (ver el responsive). */
.w-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--w-nav-h);
    background: transparent;
    transition: background var(--w-transicion), box-shadow var(--w-transicion);
}
.w-nav.w-nav--pegada {
    background: var(--w-navy);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Fila 1. Grilla de tres columnas para que el logo quede en el centro real
   del ancho y no desplazado por lo que pesen las acciones de la derecha. */
.w-nav__fila {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--w-s3);
    width: 100%;
    max-width: var(--w-max);
    margin: 0 auto;
    padding-inline: var(--w-gutter);
    padding-block: var(--w-s3) var(--w-s2);
}

/* El claim de marca a la izquierda: equilibra la fila y le da cuerpo a la
   barra, que con el logo centrado y los costados vacíos se leía como una
   línea flotando. */
.w-nav__claim {
    display: inline-flex;
    align-items: center;
    gap: var(--w-s2);
    color: var(--w-menta);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.w-nav__claim .w-ico { width: 1em; height: 1em; }

/* Fila 2: los destinos, sobre una franja apenas más clara con una línea de
   pelo arriba y abajo. La franja NO se pinta al entrar: arriba de todo la
   barra tiene que dejar ver el hero, y el bloque aparece recién cuando el
   contenido empieza a pasar por debajo (`.w-nav--pegada`, que la pone el JS
   a partir de 12px de scroll). */
.w-nav__franja {
    border-block: 1px solid transparent;
    background: transparent;
    transition: background var(--w-transicion), border-color var(--w-transicion);
}
.w-nav--pegada .w-nav__franja {
    border-block-color: rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.05);
}

.w-nav__marca {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.w-nav__marca img { height: 46px; width: auto; }

.w-nav__links {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 var(--w-s1);
    width: 100%;
    max-width: var(--w-max);
    margin: 0 auto;
    padding-inline: var(--w-gutter);
}
.w-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--w-s1);
    padding: 0.85rem var(--w-s3);
    border: 0;
    background: none;
    color: var(--w-text-soft);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--w-transicion);
}
.w-nav__link:hover { color: var(--w-text); }
.w-nav__link.activo { color: var(--w-text); font-weight: 600; }
.w-nav__link.activo::after {
    content: '';
    position: absolute;
    left: var(--w-s3);
    right: var(--w-s3);
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--w-menta);
}

/* ── "Descubrí": el único destino con más de una puerta ──
   Se abre por `:hover` y `:focus-within` además del atributo, así que sigue
   siendo usable con el mouse y con el teclado aunque el JS no corra. */
.w-nav__grupo { position: relative; display: flex; }
.w-nav__chevron { width: 1em; height: 1em; transition: transform var(--w-transicion); }
.w-nav__grupo:hover .w-nav__chevron,
.w-nav__link--abre[aria-expanded="true"] .w-nav__chevron { transform: rotate(180deg); }

.w-nav__desplegable {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 10;
    display: grid;
    gap: var(--w-s1);
    width: max-content;
    min-width: 290px;
    padding: var(--w-s2);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: var(--w-navy-2);
    box-shadow: var(--w-sombra);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity var(--w-transicion), transform var(--w-transicion), visibility var(--w-transicion);
}
.w-nav__grupo:hover .w-nav__desplegable,
.w-nav__grupo:focus-within .w-nav__desplegable,
.w-nav__link--abre[aria-expanded="true"] + .w-nav__desplegable {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.w-nav__opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--w-s3);
    padding: var(--w-s2) var(--w-s3);
    border-radius: 10px;
    transition: background var(--w-transicion);
}
.w-nav__opcion:hover { background: var(--w-menta-suave); }
.w-nav__opcion .w-ico { color: var(--w-menta); margin-top: 0.15rem; }
.w-nav__opcion-titulo { display: block; font-size: 0.95rem; font-weight: 700; }
.w-nav__opcion-texto { display: block; color: var(--w-muted); font-size: 0.82rem; line-height: 1.45; }

.w-nav__acciones { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--w-s2); }

.w-nav__yo {
    display: inline-flex;
    align-items: center;
    gap: var(--w-s2);
    padding: 0.3rem 1rem 0.3rem 0.3rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    transition: border-color var(--w-transicion), background var(--w-transicion);
}
.w-nav__yo:hover { border-color: var(--w-border-fuerte); background: var(--w-surface); }

.w-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--w-menta);
    color: var(--w-ink);
    font-weight: 700;
    font-size: 0.92rem;
    overflow: hidden;
}
.w-avatar img { width: 100%; height: 100%; object-fit: cover; }
.w-avatar--grande { width: 64px; height: 64px; font-size: 1.5rem; }

/* Sin chapa ni borde: son tres líneas. El área de toque se mantiene en 48px
   por padding, que es lo que importa para el dedo, no el recuadro. */
.w-nav__burger {
    display: none;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--w-text);
    cursor: pointer;
    transition: color var(--w-transicion);
}
.w-nav__burger:hover { color: var(--w-menta); }
.w-nav__burger .w-ico { width: 1.6em; height: 1.6em; }

.w-menu {
    position: fixed;
    inset: var(--w-nav-h) 0 0;
    z-index: 99;
    display: none;
    flex-direction: column;
    padding: var(--w-s4) var(--w-gutter) var(--w-s6);
    background: var(--w-navy);
    overflow-y: auto;
}
.w-menu.abierto { display: flex; }
.w-menu__link {
    display: flex;
    align-items: center;
    gap: var(--w-s3);
    padding: var(--w-s3) var(--w-s1);
    font-size: 1.15rem;
    font-weight: 600;
}
.w-menu__link .w-ico { color: var(--w-menta); }
.w-menu .w-btn { margin-top: var(--w-s4); }
/* El grupo plegable del menú de teléfono.

   Dos cosas que hay que dejar escritas porque las dos ya rompieron:

   1. `color: inherit` en el botón NO es decorativo. Un `<button>` sin color
      declarado cae en el `buttontext` del sistema —negro— y sobre el navy del
      menú el rótulo desaparecía. `font: inherit` no arrastra el color.

   2. El plegado va con `display`, no con el truco de `grid-template-rows:
      0fr → 1fr`. Ese truco necesita UN solo hijo envuelto: con dos enlaces
      sueltos, el segundo cae en una fila implícita `auto` y queda visible
      siempre. Era exactamente el bug de "Descubrí nunca se cierra". */
.w-menu__grupo { display: flex; flex-direction: column; }
.w-menu__link--abre {
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    /* 3. `font: inherit` NO. El atajo escribe font-size, font-weight,
       line-height Y font-family de una: como esta regla va después de
       `.w-menu__link` y pesa lo mismo, le pisaba el `1.15rem`/`600` y
       "Descubrí" salía más chico y más liviano que los demás destinos del
       menú. Del <button> sólo hay que heredar la familia y el interlineado;
       el tamaño y el peso los pone `.w-menu__link`, igual que a sus hermanos. */
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
}
.w-menu__chevron { margin-left: auto; width: 1.1em; height: 1.1em; transition: transform var(--w-transicion); }
.w-menu__link--abre[aria-expanded="true"] .w-menu__chevron { transform: rotate(180deg); }

.w-menu__hijos { display: none; }
.w-menu__link--abre[aria-expanded="true"] + .w-menu__hijos { display: grid; }

.w-menu__link--hijo { padding-left: var(--w-s5); font-size: 1.05rem; color: var(--w-text-soft); }

/* ===== Secciones =====
   Separadas por aire, nunca por una línea. */

.w-seccion { position: relative; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.w-seccion--apretada { padding-block: clamp(2.5rem, 6vw, 4rem); }

.w-cabecera { max-width: 60ch; margin-bottom: var(--w-s5); }
.w-cabecera--centro { margin-inline: auto; text-align: center; }

.w-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--w-s1);
    margin-bottom: var(--w-s3);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* Cuando el eyebrow además lleva a algún lado: un borde que lo delate y la
   flecha que se corre al pasar por encima. */
.w-eyebrow--link {
    gap: var(--w-s2);
    padding-right: 0.7rem;
    border: 1px solid var(--w-border-fuerte);
    transition: background var(--w-transicion);
}
.w-eyebrow--link:hover { background: rgba(82, 242, 156, 0.18); }
.w-eyebrow--link .w-ico { width: 1.05em; height: 1.05em; transition: transform var(--w-transicion); }
.w-eyebrow--link:hover .w-ico { transform: translateX(3px); }

.w-titulo { font-size: clamp(1.85rem, 4.2vw, 3rem); }
.w-titulo--chico { font-size: clamp(1.3rem, 2.8vw, 1.7rem); }
.w-bajada { color: var(--w-text-soft); font-size: clamp(1.02rem, 1.8vw, 1.15rem); }

/* ===== Hero ===== */

/* El hero ocupa la pantalla entera —descontando la nav, que está encima— y
   adentro entran el mensaje y los números: son parte de la primera impresión,
   no una sección aparte más abajo. */
.w-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.5rem, 4vh, 3rem);
    min-height: 100vh;
    min-height: 100svh;
    padding-block: calc(var(--w-nav-h) + clamp(1.25rem, 4vh, 3rem)) clamp(1.5rem, 4vh, 3rem);
    margin-top: calc(var(--w-nav-h) * -1);
    overflow: hidden;
}
/* El video se tiene que ver: la legibilidad la sostiene el velo, no el
   apagado del video. */
.w-hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El video es el fondo de la portada y tiene que verse: el material es
       oscuro, así que además de subirle la opacidad se le levanta el brillo.
       La legibilidad la sostiene el velo de abajo, no el apagado del video. */
    opacity: 0.9;
    filter: saturate(1.25) brightness(1.2) contrast(1.05);
}
.w-hero__velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(10, 22, 40, 0.97) 0%, rgba(10, 22, 40, 0.82) 32%, rgba(10, 22, 40, 0.28) 68%, rgba(10, 22, 40, 0.05) 100%),
        linear-gradient(180deg, rgba(10, 22, 40, 0.72) 0%, transparent 22%, transparent 68%, var(--w-navy) 100%);
}
/* Sin video —teléfono, ahorro de datos, prefers-reduced-motion— el hero no
   puede quedar en un navy plano. */
.w-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(55rem 40rem at 75% 30%, rgba(82, 242, 156, 0.12), transparent 60%),
        var(--w-navy);
}

/* La tipografía del hero responde al ANCHO y al ALTO. El `min()` es la clave:
   en una pantalla ancha pero baja —un portátil de 1366×768— el título medía
   80px y las cinco piezas del hero no entraban en `100svh`, así que el sello
   de "en vivo" quedaba abajo del pliegue. Con `vh` adentro, todo se comprime
   solo. En teléfono gana el `vw`, que es el chico, y no cambia nada. */
.w-hero__titulo {
    margin-bottom: clamp(0.75rem, 2.5vh, 2rem);
    font-size: clamp(2rem, min(7.4vw, 8vh), 5rem);
    letter-spacing: -0.04em;
    max-width: 16ch;
}
.w-hero__titulo em { font-style: normal; color: var(--w-menta); }
.w-hero__bajada {
    max-width: 56ch;
    color: var(--w-text-soft);
    font-size: clamp(0.95rem, min(2.1vw, 2.2vh), 1.25rem);
    line-height: 1.55;
    margin-bottom: clamp(1rem, 3vh, 3rem);
}
.w-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--w-s2); }

/* ===== Contadores ===== */

/* Ojo con las dos medidas: el `margin-top` es lo que separa la LÍNEA del
   bloque de texto de arriba, y el `padding-top` lo que separa los NÚMEROS de la
   línea. Sin el margen, la línea queda pegada a los botones.

   Las dos van en `vh` porque el hero mide `100svh` y ADENTRO tiene que entrar
   todo, el sello de "en vivo" incluido. En una pantalla baja se comprimen
   solas; con valores fijos, el último renglón quedaba abajo del pliegue. */
.w-contadores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 3vh, 2rem) var(--w-s3);
    margin-top: clamp(1.5rem, 4vh, 3.5rem);
    padding-top: clamp(1.25rem, 3vh, 2.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.w-contador { padding-right: var(--w-s3); }

/* El sello de "en vivo". Los conteos se recalculan cada pocos minutos, no por
   segundo: la etiqueta dice lo que el sistema hace de verdad. */
.w-live {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-s2);
    margin-top: clamp(1rem, 2.5vh, 2.25rem);
    color: var(--w-muted);
    font-size: 0.84rem;
}
.w-live__punto {
    position: relative;
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--w-menta);
}
.w-live__punto::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--w-menta);
    animation: w-latido 2.4s ease-out infinite;
}
@keyframes w-latido {
    0%   { transform: scale(1); opacity: 0.7; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
.w-live__etiqueta {
    color: var(--w-menta);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Sin esto, en teléfono se parte en "EN" / "VIVO". */
    white-space: nowrap;
}
.w-contador__valor {
    display: block;
    font-family: var(--w-font-titulos);
    margin-bottom: var(--w-s1);
    color: var(--w-menta);
    font-size: clamp(1.5rem, min(4.5vw, 4.6vh), 2.9rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}
.w-contador__etiqueta { color: var(--w-text-soft); font-size: 0.92rem; font-weight: 600; }
.w-contador__nota { display: block; margin-top: var(--w-s1); color: var(--w-muted); font-size: 0.78rem; }

/* ===== Accesos directos ===== */

.w-accesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-s3); }
.w-acceso {
    display: flex;
    align-items: center;
    gap: var(--w-s3);
    padding: var(--w-s3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: var(--w-surface);
    transition: border-color var(--w-transicion), background var(--w-transicion), transform var(--w-transicion);
}
.w-acceso:hover {
    border-color: var(--w-border-fuerte);
    background: var(--w-surface-2);
}
.w-acceso__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
}
.w-acceso__ico .w-ico { width: 1.35em; height: 1.35em; }
.w-acceso__titulo { display: block; font-weight: 700; font-size: 1rem; }
.w-acceso__texto { display: block; color: var(--w-muted); font-size: 0.85rem; }
.w-acceso__flecha { margin-left: auto; color: var(--w-muted); transition: transform var(--w-transicion), color var(--w-transicion); }
.w-acceso:hover .w-acceso__flecha { transform: translateX(4px); color: var(--w-menta); }

/* ===== Productos (bento) ===== */

.w-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--w-s3); }
.w-producto {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    transition: border-color var(--w-transicion), transform var(--w-transicion), box-shadow var(--w-transicion);
}
.w-producto:hover { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }
.w-producto--ancho { grid-column: span 3; }
.w-producto--ancho .w-producto__nombre { font-size: clamp(1.5rem, 2.8vw, 1.9rem); }

/* La fila entera del bento. La usa el producto que todavía no salió —hoy
   Cannis Pro—: ocupar el ancho completo es lo que lo separa del resto sin
   necesidad de un color distinto. */
.w-producto--entero { grid-column: 1 / -1; }
.w-producto--entero .w-producto__nombre { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.w-producto--entero .w-producto__texto { max-width: 78ch; }

/* Lo que todavía no está en la calle se anuncia, no se disfraza: el borde va
   punteado y la etiqueta lo dice. El enlace igual funciona —lleva a la página
   del producto—, así que la tarjeta sigue comportándose como las demás. */
.w-producto--pronto { border-style: dashed; }
.w-producto--pronto:hover { border-style: solid; }
.w-producto__pronto {
    display: inline-block;
    margin-left: var(--w-s2);
    padding: 0.2rem 0.6rem;
    transform: translateY(-0.15em);
    border-radius: 999px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-family: var(--w-font-texto);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: middle;
}

.w-producto__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--w-s3);
    border-radius: 15px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
}
.w-producto__ico .w-ico { width: 1.5em; height: 1.5em; }
.w-producto__nombre { font-size: 1.3rem; margin-bottom: var(--w-s1); }
.w-producto__bajada { color: var(--w-menta); font-size: 0.9rem; font-weight: 600; margin-bottom: var(--w-s3); }
.w-producto__texto { color: var(--w-text-soft); font-size: 0.95rem; }
.w-producto__pie {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    margin-top: auto;
    padding-top: var(--w-s4);
}
.w-producto__publico {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    color: var(--w-muted);
    font-size: 0.75rem;
    font-weight: 600;
}
.w-producto__ir {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--w-s1);
    color: var(--w-menta);
    font-size: 0.9rem;
    font-weight: 700;
}
.w-producto__ir .w-ico { transition: transform var(--w-transicion); }
.w-producto:hover .w-producto__ir .w-ico { transform: translateX(4px); }

/* ===== Pasos ===== */

.w-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--w-s3); counter-reset: paso; }
.w-paso { padding: var(--w-s4); border-radius: var(--w-radio); background: var(--w-surface); }
.w-paso::before {
    counter-increment: paso;
    content: counter(paso, decimal-leading-zero);
    display: block;
    margin-bottom: var(--w-s3);
    color: var(--w-menta);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
}
.w-paso__titulo { font-size: 1.1rem; }
.w-paso__texto { color: var(--w-text-soft); font-size: 0.95rem; }

/* ===== El proyecto ===== */

.w-proyecto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.w-proyecto__texto p { color: var(--w-text-soft); font-size: 1.05rem; }
.w-proyecto__texto strong { color: var(--w-text); font-weight: 700; }

.w-pilares { display: grid; gap: var(--w-s3); }
.w-pilar { padding: var(--w-s3) var(--w-s4); border-radius: var(--w-radio-sm); background: var(--w-surface); }
.w-pilar__titulo { display: flex; align-items: center; gap: var(--w-s2); font-size: 1.05rem; margin-bottom: var(--w-s2); }
.w-pilar__titulo .w-ico { color: var(--w-menta); }
.w-pilar__texto { color: var(--w-text-soft); font-size: 0.95rem; }

.w-cita {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--w-s7);
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    border-radius: var(--w-radio);
    background: var(--w-menta-suave-2);
    text-align: center;
}
.w-cita__texto {
    max-width: 24ch;
    margin: 0 0 var(--w-s4);
    font-family: var(--w-font-titulos);
    font-size: clamp(1.7rem, 4.6vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.16;
    text-wrap: balance;
}
.w-cita__texto em { font-style: normal; color: var(--w-menta); }
.w-cita__firma { display: block; font-size: 1rem; font-weight: 700; }
.w-cita__rol { display: block; margin-top: var(--w-s1); color: var(--w-muted); font-size: 0.84rem; }

/* ===== Públicos ===== */

.w-publicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-s3); }
.w-publico {
    display: flex;
    flex-direction: column;
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    transition: border-color var(--w-transicion), transform var(--w-transicion);
}
.w-publico:hover { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }
.w-publico__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--w-s3);
    border-radius: 15px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
}
.w-publico__ico .w-ico { width: 1.5em; height: 1.5em; }
.w-publico__titulo { font-size: 1.25rem; }
.w-publico__texto { color: var(--w-text-soft); font-size: 0.97rem; }
.w-publico__links { display: flex; flex-wrap: wrap; gap: var(--w-s1); margin-top: auto; padding-top: var(--w-s4); }

.w-chip {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    transition: border-color var(--w-transicion), color var(--w-transicion), background var(--w-transicion);
}
.w-chip:hover { border-color: var(--w-menta); color: var(--w-menta); background: var(--w-menta-suave); }

/* ===== Mi cuenta ===== */

.w-cuenta {
    padding: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
}
.w-cuenta__cabecera { display: flex; align-items: center; gap: var(--w-s3); flex-wrap: wrap; margin-bottom: var(--w-s5); }
.w-cuenta__saludo { display: block; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; }
.w-cuenta__texto { color: var(--w-text-soft); font-size: 1rem; }
.w-cuenta__salir { margin-left: auto; }
.w-cuenta__salir button {
    padding: 0.6rem 1.15rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    background: transparent;
    color: var(--w-muted);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--w-transicion), border-color var(--w-transicion);
}
.w-cuenta__salir button:hover { color: #ff9b9b; border-color: rgba(255, 155, 155, 0.5); }
.w-cuenta__accesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-s2); }
.w-cuenta__invitado { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.w-cuenta__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--w-s2); margin-bottom: var(--w-s4); }
.w-cuenta__lista li { display: flex; align-items: flex-start; gap: var(--w-s2); color: var(--w-text-soft); font-size: 0.98rem; }
.w-cuenta__lista .w-ico { color: var(--w-menta); margin-top: 0.22em; }

/* ===== Marco legal ===== */

.w-legal { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.w-legal__texto p { color: var(--w-text-soft); }
.w-legal__protocolos { display: grid; gap: var(--w-s3); }
.w-protocolo {
    display: flex;
    gap: var(--w-s3);
    padding: var(--w-s3) var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: var(--w-surface);
}
.w-protocolo .w-ico { color: var(--w-menta); margin-top: 0.2rem; }
.w-protocolo__titulo { display: block; font-weight: 700; font-size: 0.98rem; margin-bottom: var(--w-s1); }
.w-protocolo__texto { display: block; color: var(--w-muted); font-size: 0.9rem; line-height: 1.55; }

/* ===== Integraciones (antes "partners") =====
   No son auspiciantes ni van en chapitas blancas: son las piezas con las que
   el sistema opera. Cada una se presenta con lo que hace, y el logo va en
   blanco puro para que conviva con el navy. */

/* Van en su propia banda, a ancho completo: apretadas en una columna al
   costado del texto legal parecían una nota al pie. */
.w-integraciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-s3); }
.w-integracion {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--w-s3);
    padding: var(--w-s4) var(--w-s4) var(--w-s5);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: var(--w-surface);
    transition: border-color var(--w-transicion), background var(--w-transicion);
}
.w-integracion:hover { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }
/* La chapa es ancha, no cuadrada: de los seis logos, dos son logotipos
   horizontales (Mercado Pago y RCTA) y cuatro son marcas cuadradas. Una caja
   cuadrada dejaba a los horizontales del tamaño de una estampilla. */
.w-integracion__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 76px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}
.w-integracion__logo img {
    /* Las marcas cuadradas se miden por ALTO; los logotipos horizontales, por
       ANCHO (ver `.w-integracion__logo--ancho`). Si no, o los cuadrados salen
       gigantes o los horizontales salen ilegibles. */
    max-height: 44px;
    max-width: 62%;
    width: auto;
    /* Los logos de terceros vienen cada uno con su paleta. En blanco puro,
       dentro de su propia chapa, conviven con el navy sin meter seis cajas de
       colores distintos que parten la página. */
    filter: brightness(0) invert(1);
}
.w-integracion__logo--ancho img { max-height: 34px; max-width: 84%; }

.w-integracion__nombre { display: block; font-size: 1rem; font-weight: 700; margin-bottom: var(--w-s1); }
.w-integracion__texto { display: block; color: var(--w-muted); font-size: 0.86rem; line-height: 1.5; }

/* ===== Banner de Repronline =====
   Repronline es marca hermana, pero el banner vive acá: usa el lenguaje de
   este sitio —superficie, borde, radio y escala de espaciado— y toma de
   Repronline sólo su acento azul, en una línea y en el logo. El de Comunidad
   Cannis (eventos/vistas/repronline.css) es otro: allá el azul manda. */

.w-repro {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.25rem);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background:
        radial-gradient(38rem 22rem at 88% 20%, rgba(51, 153, 255, 0.12), transparent 62%),
        var(--w-surface);
    overflow: hidden;
}
.w-repro::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #3399ff, var(--w-menta));
}
.w-repro__logo { height: 30px; width: auto; margin-bottom: var(--w-s3); }
.w-repro__titulo { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.w-repro__titulo span { color: var(--w-menta); }
.w-repro__texto { max-width: 46ch; color: var(--w-text-soft); }

.w-repro__cta { white-space: nowrap; }

@media (max-width: 900px) {
    .w-repro { grid-template-columns: 1fr; gap: var(--w-s4); }
    .w-repro__cta { width: 100%; justify-content: center; }
}

/* En teléfono el banner tenía el padding de escritorio y la línea de 3px
   pegada al texto: quedaba apretado y el logo perdido arriba de todo. Se
   reparte el aire, la línea pasa a ser el borde superior —que en una tarjeta
   angosta se lee mejor que una lateral— y el botón ocupa el ancho. */
@media (max-width: 640px) {
    .w-repro {
        gap: var(--w-s4);
        padding: var(--w-s5) var(--w-s4) var(--w-s4);
        border-radius: var(--w-radio-sm);
    }
    .w-repro::before {
        inset: 0 0 auto 0;
        width: auto;
        height: 3px;
        background: linear-gradient(90deg, #3399ff, var(--w-menta));
    }
    .w-repro__logo { height: 26px; margin-bottom: var(--w-s3); }
    .w-repro__titulo { font-size: 1.6rem; }
    .w-repro__texto { font-size: 0.95rem; }
}

/* ===== FAQ ===== */

/* Sin max-width propio: la página entera respira el mismo ancho. */
.w-faq { display: grid; gap: var(--w-s2); }
.w-faq details {
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: var(--w-surface);
    overflow: hidden;
    transition: border-color var(--w-transicion);
}
.w-faq details[open] { border-color: var(--w-border-fuerte); }
.w-faq summary {
    display: flex;
    align-items: center;
    gap: var(--w-s3);
    padding: var(--w-s3) var(--w-s4);
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    list-style: none;
}
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary::after {
    content: '';
    width: 11px;
    height: 11px;
    margin-left: auto;
    flex-shrink: 0;
    border-right: 2px solid var(--w-menta);
    border-bottom: 2px solid var(--w-menta);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--w-transicion);
}
.w-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.w-faq__respuesta { padding: 0 var(--w-s4) var(--w-s4); color: var(--w-text-soft); font-size: 1rem; }

/* ===== Cierre ===== */

.w-cierre {
    padding: clamp(2.75rem, 6vw, 4.5rem);
    border-radius: var(--w-radio);
    background: var(--w-menta-suave-2);
    text-align: center;
}
.w-cierre__titulo { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.w-cierre__texto { max-width: 54ch; margin: 0 auto var(--w-s5); color: var(--w-text-soft); }
.w-cierre__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--w-s2); }

/* ==========================================================================
   Páginas de contenido: portadas, tutoriales y legales
   ========================================================================== */

.w-portada { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.w-portada__titulo { font-size: clamp(2.2rem, 5.5vw, 3.5rem); max-width: 19ch; }
.w-portada__bajada { max-width: 62ch; color: var(--w-text-soft); font-size: clamp(1.05rem, 2vw, 1.2rem); }
.w-portada__acciones { display: flex; flex-wrap: wrap; gap: var(--w-s2); margin-top: var(--w-s4); }
.w-portada__dato { margin-top: var(--w-s3); color: var(--w-muted); font-size: 0.85rem; }

.w-miga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w-s1); margin-bottom: var(--w-s4); color: var(--w-muted); font-size: 0.86rem; }
.w-miga a:hover { color: var(--w-menta); }
.w-miga span { opacity: 0.45; }

.w-doc { display: grid; grid-template-columns: 250px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.w-doc__indice {
    position: sticky;
    top: calc(var(--w-nav-h) + var(--w-s3));
    padding: var(--w-s3);
    border-radius: var(--w-radio-sm);
    background: var(--w-surface);
}
.w-doc__indice-titulo {
    margin-bottom: var(--w-s2);
    color: var(--w-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.w-doc__indice ol { display: grid; gap: 2px; }
.w-doc__indice a {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    color: var(--w-text-soft);
    font-size: 0.9rem;
    transition: color var(--w-transicion), background var(--w-transicion);
}
.w-doc__indice a:hover { color: var(--w-menta); background: var(--w-menta-suave); }

.w-doc__cuerpo { min-width: 0; }
.w-doc__seccion { scroll-margin-top: calc(var(--w-nav-h) + var(--w-s3)); }
/* 4,5rem se leía apretado: el chip es chico y el texto de arriba es denso,
   así que ópticamente el número quedaba colgado del párrafo anterior. */
.w-doc__seccion + .w-doc__seccion { margin-top: var(--w-s7); }
/* El número va ARRIBA del título, no al lado: pegado al texto se leía como
   parte de la primera palabra. */
.w-doc__seccion-titulo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--w-s3);
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
}
.w-doc__num {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-family: var(--w-font-texto);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.w-doc__cuerpo p { color: var(--w-text-soft); }
.w-doc__cuerpo strong { color: var(--w-text); font-weight: 700; }
.w-doc__cuerpo a:not(.w-btn):not(.w-chip):not(.w-tarjeta) {
    color: var(--w-menta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* El ítem NO es flex: en una fila flex sin wrap cada <strong> y cada corrida de
   texto es un ítem aparte, y el min-content del li pasa a ser la SUMA de las
   palabras más largas de todos. Con eso, una viñeta de marco legal medía 419px
   de min-content, la pista `auto` del grid se estiraba a ese ancho y el
   documento desbordaba 49px a 390px. La viñeta va absoluta y el texto fluye
   normal. El `minmax(0, 1fr)` es el cinturón: la pista nunca puede crecer más
   que el contenedor, pase lo que pase adentro. */
.w-doc__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--w-s2); margin-bottom: var(--w-s3); }
.w-doc__lista li { position: relative; padding-left: calc(6px + var(--w-s2)); color: var(--w-text-soft); }
.w-doc__lista li::before {
    content: '';
    position: absolute;
    top: 0.68em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--w-menta);
}

/* El recuadro declara su propio aire ARRIBA y abajo: es un aparte, no el
   renglón siguiente del párrafo. Antes sólo tenía `margin-bottom` y quedaba
   pegado a la lista de arriba —a 0px, porque el reset le comía el margen al
   <ul>—. Los márgenes contiguos colapsan, así que contra una lista da 32px y no
   52. */
.w-nota {
    display: flex;
    gap: var(--w-s3);
    margin-block: var(--w-s4) var(--w-s3);
    padding: var(--w-s3) var(--w-s4);
    border-radius: var(--w-radio-sm);
    background: var(--w-menta-suave);
}
.w-nota .w-ico { color: var(--w-menta); flex-shrink: 0; margin-top: 0.2em; }
.w-nota p { color: var(--w-text-soft); font-size: 0.97rem; }

.w-tuto { display: grid; gap: var(--w-s3); counter-reset: tuto; }
.w-tuto__paso {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--w-s4);
    padding: var(--w-s4);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    scroll-margin-top: calc(var(--w-nav-h) + var(--w-s3));
}
.w-tuto__paso::before {
    counter-increment: tuto;
    content: counter(tuto);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-size: 1.4rem;
    font-weight: 700;
}
.w-tuto__titulo { font-size: 1.15rem; }
.w-tuto__texto { color: var(--w-text-soft); font-size: 0.98rem; }

/* ===== Tutoriales =====
   Las tres guías son una serie, no tres páginas sueltas: comparten cabecera
   (número de la serie + ficha de qué necesitás y cuánto lleva), el bloque
   `w-doc` del cuerpo y un pie que empuja a la siguiente. Si sumás una cuarta,
   seguí ese esqueleto y actualizá `total` en las tres. */

.w-guia__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s4) var(--w-s5);
    margin-top: var(--w-s6);
    padding-top: var(--w-s5);
    border-top: 1px solid var(--w-border);
}
.w-guia__dato { display: flex; align-items: flex-start; gap: var(--w-s2); max-width: 34ch; }
.w-guia__dato .w-ico { color: var(--w-menta); margin-top: 0.15rem; }
.w-guia__dato-rotulo {
    display: block;
    /* El rótulo verde es una etiqueta, no la primera línea del valor: con 2px
       se leían como un solo bloque pegado. */
    margin-bottom: var(--w-s2);
    color: var(--w-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.w-guia__dato-valor { display: block; color: var(--w-text-soft); font-size: 0.92rem; line-height: 1.5; }

/* La serie, en el índice: numerada y en orden, porque el orden importa. */
.w-serie { display: grid; gap: var(--w-s3); counter-reset: serie; }
.w-serie__paso {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: var(--w-s4);
    padding: var(--w-s4) clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    transition: border-color var(--w-transicion), background var(--w-transicion);
}
.w-serie__paso:hover { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }
.w-serie__paso::before {
    counter-increment: serie;
    content: counter(serie, decimal-leading-zero);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-family: var(--w-font-titulos);
    font-size: 1.3rem;
    font-weight: 700;
}
.w-serie__cuerpo { min-width: 0; }
.w-serie__titulo { font-size: 1.2rem; margin-bottom: var(--w-s1); }
.w-serie__texto { color: var(--w-muted); font-size: 0.94rem; margin: 0; }
.w-serie__ir { display: inline-flex; align-items: center; gap: var(--w-s2); color: var(--w-menta); font-size: 0.9rem; font-weight: 700; white-space: nowrap; }

/* El pie de cada guía: a dónde se sigue. */
.w-siguiente {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--w-s4);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
}
.w-siguiente__rotulo {
    display: block;
    margin-bottom: var(--w-s1);
    color: var(--w-menta);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.w-siguiente__titulo { font-size: 1.25rem; margin-bottom: var(--w-s1); }
.w-siguiente__texto { color: var(--w-muted); font-size: 0.94rem; margin: 0; }

.w-video {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--w-radio-sm);
    overflow: hidden;
    background: #000;
}
.w-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.w-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-s3); }
.w-tarjeta {
    display: flex;
    flex-direction: column;
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    transition: border-color var(--w-transicion), transform var(--w-transicion);
}
.w-tarjeta:hover { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }
.w-tarjeta__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--w-s3);
    border-radius: 14px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
}
.w-tarjeta__ico .w-ico { width: 1.4em; height: 1.4em; }
.w-tarjeta__titulo { font-size: 1.12rem; }
.w-tarjeta__texto { color: var(--w-text-soft); font-size: 0.95rem; }
.w-tarjeta__ir {
    display: inline-flex;
    align-items: center;
    gap: var(--w-s1);
    margin-top: auto;
    padding-top: var(--w-s3);
    color: var(--w-menta);
    font-size: 0.9rem;
    font-weight: 700;
}
.w-tarjeta__ir .w-ico { transition: transform var(--w-transicion); }
.w-tarjeta:hover .w-tarjeta__ir .w-ico { transform: translateX(4px); }

/* ===== Antes y después =====
   Dos columnas enfrentadas: cómo se trabaja hoy y cómo con el producto. La de
   la izquierda va apagada a propósito —es el problema, incluida su viñeta— y la
   de la derecha con el acento. En teléfono se apilan y el rótulo las separa. */

.w-antes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--w-s3); }
.w-antes__col {
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
}
.w-antes__col--pro { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }
.w-antes__rotulo {
    display: inline-block;
    margin-bottom: var(--w-s3);
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    color: var(--w-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.w-antes__rotulo--pro { border-color: transparent; background: var(--w-menta-suave); color: var(--w-menta); }
.w-antes__col--hoy .w-doc__lista li::before { background: var(--w-muted); }

/* ===== El informe semestral =====
   Aparece en tres pantallas (home, Organizaciones y Cannis Pro) desde un solo
   parcial. Es un panel, no una sección más: lleva su superficie y su borde para
   que se lea como una capacidad concreta y no como otro párrafo de venta. */

.w-informe {
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid var(--w-border-fuerte);
    border-radius: var(--w-radio);
    background:
        radial-gradient(40rem 18rem at 0% 0%, rgba(82, 242, 156, 0.07), transparent 65%),
        var(--w-surface);
}
.w-informe__texto { max-width: 68ch; }
.w-informe__piezas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--w-s3);
    margin-top: var(--w-s4);
}
.w-informe__pieza {
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: var(--w-navy);
}
.w-informe__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--w-s3);
    border-radius: 12px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
}
.w-informe__ico .w-ico { width: 1.35em; height: 1.35em; }
.w-informe__titulo { margin-bottom: var(--w-s2); font-size: 1.1rem; }
.w-informe__detalle { margin: 0; color: var(--w-text-soft); font-size: 0.95rem; }
.w-informe__aviso {
    margin: var(--w-s4) 0 0;
    padding-top: var(--w-s3);
    border-top: 1px solid var(--w-border);
    color: var(--w-muted);
    font-size: 0.86rem;
}

/* ===== El equipo =====
   Tarjeta HORIZONTAL: retrato a la izquierda, texto a la derecha. En cuatro
   columnas de 260px el cargo se partía en tres renglones de verde y la
   explicación quedaba en una cinta de cinco palabras por línea. A dos columnas
   el texto tiene ancho para leerse.

   La foto es OPCIONAL: si todavía no se subió, el monograma ocupa exactamente
   el mismo lugar, así que la grilla no se descompagina mientras faltan fotos. */

.w-equipo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr));
    gap: var(--w-s3);
}
.w-miembro {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: var(--w-s4);
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    transition: border-color var(--w-transicion), background var(--w-transicion);
}
.w-miembro:hover { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }

.w-miembro__retrato {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--w-radio-sm);
    background: var(--w-navy-2);
}
.w-miembro__retrato img { width: 100%; height: 100%; object-fit: cover; }
.w-miembro__iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:
        radial-gradient(14rem 9rem at 50% 0%, rgba(82, 242, 156, 0.12), transparent 72%),
        var(--w-navy-2);
    color: var(--w-menta);
    font-family: var(--w-font-titulos);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.w-miembro__cuerpo { display: flex; flex-direction: column; min-width: 0; }

/* El sello va ARRIBA DEL NOMBRE y no encima de la foto: sobre el monograma
   tapaba las iniciales, y sobre una foto real taparía la cara. */
.w-miembro__sello {
    align-self: flex-start;
    margin-bottom: var(--w-s2);
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.w-miembro__nombre { margin-bottom: var(--w-s1); font-size: 1.18rem; line-height: 1.25; }

/* El cargo corto y en menta; el producto del que es responsable, abajo y
   apagado. Antes iban en una sola línea verde de tres renglones. */
.w-miembro__cargo { margin: 0; color: var(--w-menta); font-size: 0.9rem; font-weight: 600; }
.w-miembro__foco { margin: 0.15rem 0 0; color: var(--w-muted); font-size: 0.82rem; }
.w-miembro__explica {
    margin: var(--w-s3) 0 0;
    padding-top: var(--w-s3);
    border-top: 1px solid var(--w-border);
    color: var(--w-text-soft);
    font-size: 0.92rem;
}

/* ===== Footer ===== */

/* Sin línea de corte: el pie entra por un degradé. El borde duro de un
   `background` plano se notaba sobre todo en las páginas cortas, donde el pie
   quedaba alto y el canto partía la pantalla al medio. */
.w-footer {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.14) 18%,
        rgba(0, 0, 0, 0.30) 46%,
        rgba(0, 0, 0, 0.46) 100%
    );
    padding-block: clamp(4.5rem, 9vw, 7rem) var(--w-s4);
}
.w-footer__cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); margin-bottom: var(--w-s5); }
.w-footer__marca img { height: 56px; width: auto; margin-bottom: var(--w-s3); }
.w-footer__lema { color: var(--w-muted); font-size: 0.95rem; max-width: 34ch; }
/* Los íconos, pelados: sin recuadro ni borde. El área de toque la da el
   padding y el color hace el trabajo del hover. */
.w-footer__redes { display: flex; gap: var(--w-s3); margin-top: var(--w-s4); }
.w-footer__redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--w-s2);
    margin-left: calc(var(--w-s2) * -1);
    color: var(--w-text-soft);
    transition: color var(--w-transicion);
}
.w-footer__redes a:hover { color: var(--w-menta); }
.w-footer__redes .w-ico { width: 1.4em; height: 1.4em; }

.w-footer__titulo {
    margin-bottom: var(--w-s3);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.w-footer__lista { display: grid; gap: var(--w-s2); }
.w-footer__lista a { color: var(--w-muted); font-size: 0.93rem; transition: color var(--w-transicion); }
.w-footer__lista a:hover { color: var(--w-menta); }

/* La tira de marcas del pie. No repite la banda "Con qué opera" de la home:
   allá cada una se explica, acá alcanza con verlas. */
.w-footer__marcas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-s3) var(--w-s5);
    margin-top: var(--w-s3);
    padding-block: var(--w-s5);
    border-top: 1px solid var(--w-border);
}
.w-footer__marcas-rotulo {
    color: var(--w-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.w-footer__marcas-tira {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-s3) clamp(1.5rem, 4vw, 3rem);
}
.w-footer__marcas-tira img {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    transition: opacity var(--w-transicion);
}
.w-footer__marcas-tira img.es-ancho { height: 20px; }
.w-footer__marcas-tira li:hover img { opacity: 1; }

/* Va separado de la línea de arriba y del borde de abajo: apretado contra el
   copyright se leía como una continuación de la misma frase. El `.w-footer`
   adelante era para ganarle al reset de `<p>`; ese reset ya no pesa, pero el
   selector queda porque es más claro leerlo acotado al pie. */
.w-footer .w-footer__registro {
    max-width: 92ch;
    margin: var(--w-s5) 0 0;
    padding-top: var(--w-s4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.78rem;
    line-height: 1.7;
}
.w-footer__registro strong { color: rgba(255, 255, 255, 0.6); font-weight: 700; }

.w-footer__abajo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s3) var(--w-s4);
    align-items: center;
    padding-top: var(--w-s3);
    color: var(--w-muted);
    font-size: 0.85rem;
}
.w-footer__abajo nav { display: flex; flex-wrap: wrap; gap: var(--w-s3); margin-left: auto; }
.w-footer__abajo a:hover { color: var(--w-menta); }

/* ==========================================================================
   Documentos legales
   --------------------------------------------------------------------------
   Un legal es largo y nadie lo lee de corrido. La estructura ayuda: primero un
   resumen en criollo de lo que el documento dice, después el texto completo con
   el índice marcando en qué sección estás.
   ========================================================================== */

.w-legal-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-s2) var(--w-s4);
    margin-top: var(--w-s5);
    padding-top: var(--w-s4);
    border-top: 1px solid var(--w-border);
    color: var(--w-muted);
    font-size: 0.84rem;
}
.w-legal-cab__dato { display: inline-flex; align-items: center; gap: var(--w-s2); }
.w-legal-cab__dato strong { color: var(--w-text-soft); font-weight: 600; }
.w-legal-cab .w-ico { color: var(--w-menta); width: 1.1em; height: 1.1em; }

/* El resumen: lo que el documento dice, en una frase por punto. No reemplaza
   al texto —lo aclara la propia tarjeta— pero es lo que la mayoría va a leer. */
.w-resumen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--w-s3);
    margin-block: var(--w-s4);
}
.w-resumen__item {
    display: flex;
    align-items: flex-start;
    gap: var(--w-s3);
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: var(--w-surface);
}
.w-resumen__item .w-ico { color: var(--w-menta); margin-top: 0.15rem; flex-shrink: 0; }
.w-resumen__titulo { display: block; margin-bottom: var(--w-s1); font-weight: 700; font-size: 0.98rem; }
.w-resumen__texto { display: block; color: var(--w-muted); font-size: 0.88rem; line-height: 1.55; }

/* El índice marca en qué sección estás. Lo pone el JS. */
.w-doc__indice a.activo {
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-weight: 600;
}

/* Subapartados numerados dentro de una sección legal. */
.w-legal-item { display: grid; gap: var(--w-s2); margin-top: var(--w-s4); }
.w-legal-item__titulo {
    display: flex;
    align-items: baseline;
    gap: var(--w-s2);
    font-family: var(--w-font-titulos);
    font-size: 1.02rem;
    font-weight: 700;
}
.w-legal-item__num { color: var(--w-menta); font-family: var(--w-font-texto); font-size: 0.86rem; }
.w-legal-item p { margin: 0; color: var(--w-text-soft); }

/* La cita textual de una norma o una leyenda obligatoria. */
.w-cita-legal {
    margin-block: var(--w-s3);
    padding: var(--w-s3) var(--w-s4);
    border-left: 3px solid var(--w-menta);
    border-radius: 0 var(--w-radio-sm) var(--w-radio-sm) 0;
    background: rgba(0, 0, 0, 0.22);
    color: var(--w-text-soft);
    font-size: 0.88rem;
    line-height: 1.7;
}
.w-cita-legal p { margin: 0; }
.w-cita-legal cite { display: block; margin-top: var(--w-s2); color: var(--w-muted); font-size: 0.8rem; font-style: normal; }

/* ==========================================================================
   Documentación
   --------------------------------------------------------------------------
   Piezas para explicar cómo funciona el sistema SIN capturas de pantalla: los
   componentes se parecen a lo que describen. Un flujo de request se dibuja
   como una cadena de cajas, una tabla legacy como una tabla, y un endpoint
   como un endpoint. Si el texto cambia, el dibujo cambia con él.
   ========================================================================== */

/* La cadena de un request: cada eslabón es una caja y la flecha va entre dos. */
.w-flujo {
    display: grid;
    gap: var(--w-s3);
    margin-block: var(--w-s4);
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: rgba(0, 0, 0, 0.2);
}
.w-flujo__titulo {
    color: var(--w-menta);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.w-flujo__cadena { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--w-s2); }
.w-flujo__paso {
    flex: 1 1 150px;
    min-width: 0;
    padding: var(--w-s3);
    border: 1px solid var(--w-border);
    border-radius: 12px;
    background: var(--w-surface);
}
.w-flujo__paso--acento { border-color: var(--w-border-fuerte); background: var(--w-menta-suave-2); }
.w-flujo__rotulo {
    display: block;
    margin-bottom: var(--w-s1);
    color: var(--w-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.w-flujo__valor { display: block; font-size: 0.86rem; font-weight: 600; word-break: break-word; }
.w-flujo__valor code { font-size: 0.92em; }
.w-flujo__flecha { display: flex; align-items: center; color: var(--w-menta); flex-shrink: 0; }

/* Una tabla de la base, dibujada como tabla. Sirve para mostrar el prefijo de
   las columnas sin explicarlo dos veces. */
.w-esquema {
    margin-block: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.w-esquema__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-s2) var(--w-s3);
    padding: var(--w-s4);
    border-bottom: 1px solid var(--w-border);
    background: var(--w-surface);
}
.w-esquema__nombre { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.92rem; font-weight: 700; }
.w-esquema__cuerpo { display: grid; }
.w-esquema__fila {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 9rem) 1fr;
    gap: var(--w-s3);
    align-items: baseline;
    padding: var(--w-s3) var(--w-s4);
    font-size: 0.86rem;
}
.w-esquema__fila + .w-esquema__fila { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.w-esquema__col { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--w-menta); word-break: break-all; }
.w-esquema__tipo { color: var(--w-muted); font-size: 0.8rem; }
.w-esquema__nota { color: var(--w-text-soft); }

/* Un módulo de la plataforma: qué es, para quién y qué incluye. */
/* En la documentación los módulos van uno debajo del otro y a ancho completo,
   que es lo que corresponde cuando son seis y cada uno es un capítulo. En /pro
   son ocho y así la página se vuelve interminable: dentro de `.w-modulos` van a
   dos columnas, y el `margin-block` de cada uno lo reemplaza el `gap`. */
.w-modulos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--w-s3);
    align-items: start;
}
.w-modulos .w-modulo { margin-block: 0; }

.w-modulo {
    display: grid;
    gap: var(--w-s3);
    margin-block: var(--w-s4);
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
}
.w-modulo__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w-s3); }
.w-modulo__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
}
.w-modulo__nombre { margin: 0; font-size: 1.2rem; }
.w-modulo__publico {
    margin-left: auto;
    padding: 0.24rem 0.7rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    color: var(--w-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.w-modulo p { margin: 0; color: var(--w-text-soft); }
.w-modulo__capacidades {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--w-s3) var(--w-s4);
    margin: var(--w-s2) 0 0;
    padding-top: var(--w-s4);
    border-top: 1px solid var(--w-border);
}
.w-modulo__capacidades li {
    display: flex;
    align-items: flex-start;
    gap: var(--w-s2);
    color: var(--w-text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}
.w-modulo__capacidades li::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    margin-top: 0.6em;
    border-radius: 50%;
    background: var(--w-menta);
}

/* Bloque de código con barra de título. No hay resaltado de sintaxis: es
   texto, y el resaltado a mano se desincroniza con el contenido. */
.w-codigo {
    margin-block: var(--w-s3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: #050d1a;
    overflow: hidden;
}
.w-codigo__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s3);
    padding: var(--w-s2) var(--w-s4);
    border-bottom: 1px solid var(--w-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--w-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.w-codigo pre {
    margin: 0;
    padding: var(--w-s3);
    overflow-x: auto;
    color: var(--w-text-soft);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    tab-size: 2;
}
.w-codigo b { color: var(--w-menta); font-weight: 600; }

/* Un endpoint. */
.w-api { margin-block: var(--w-s4); border: 1px solid var(--w-border); border-radius: var(--w-radio); background: var(--w-surface); overflow: hidden; }
.w-api__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-s3);
    padding: var(--w-s4);
    border-bottom: 1px solid var(--w-border);
}
.w-api__metodo {
    padding: 0.25rem 0.65rem;
    border-radius: 7px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.w-api__metodo--get { background: var(--w-menta-suave); color: var(--w-menta); }
.w-api__metodo--post { background: rgba(51, 153, 255, 0.16); color: #6bb6ff; }
.w-api__ruta { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.92rem; font-weight: 600; word-break: break-all; }
.w-api__sello {
    margin-left: auto;
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    color: var(--w-muted);
    font-size: 0.72rem;
    font-weight: 700;
}
.w-api__sello--abierto { border-color: var(--w-border-fuerte); color: var(--w-menta); }
.w-api__cuerpo { padding: var(--w-s4); }
.w-api__cuerpo > p:first-child { margin-top: 0; }
.w-api__sub {
    margin: var(--w-s4) 0 var(--w-s2);
    color: var(--w-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.w-api__cuerpo > .w-api__sub:first-child { margin-top: 0; }

/* La tabla de parámetros. */
.w-params { display: grid; }
.w-params__fila {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 8rem) 1fr;
    gap: var(--w-s3);
    align-items: baseline;
    padding: var(--w-s3) 0;
    font-size: 0.86rem;
}
.w-params__fila + .w-params__fila { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.w-params__nombre { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--w-menta); word-break: break-all; }
.w-params__tipo { color: var(--w-muted); font-size: 0.8rem; }
.w-params__nota { color: var(--w-text-soft); line-height: 1.55; }
.w-params__req { display: inline-block; margin-left: var(--w-s1); color: #ff6b6b; font-weight: 700; }

/* ==========================================================================
   Formularios
   --------------------------------------------------------------------------
   Los dos formularios públicos del sitio —iniciar un proyecto y sumar una
   sociedad— usan esto y no las clases viejas de `paginas.css`. Los campos van
   sobre la superficie del sitio, con el foco en menta y la ayuda debajo del
   campo, no flotando.
   ========================================================================== */

.w-form {
    padding: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
}
.w-form__grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--w-s4) var(--w-s3); }
.w-campo { display: flex; flex-direction: column; gap: var(--w-s2); min-width: 0; }
.w-campo--ancho { grid-column: 1 / -1; }

.w-campo__label { font-size: 0.88rem; font-weight: 700; color: var(--w-text); }
.w-campo__label span { color: var(--w-muted); font-weight: 500; }

.w-campo input,
.w-campo select,
.w-campo textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: rgba(0, 0, 0, 0.22);
    color: var(--w-text);
    font: inherit;
    font-size: 0.98rem;
    transition: border-color var(--w-transicion), background var(--w-transicion);
}
.w-campo textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.w-campo input::placeholder,
.w-campo textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.w-campo input:hover,
.w-campo select:hover,
.w-campo textarea:hover { border-color: rgba(255, 255, 255, 0.2); }
.w-campo input:focus,
.w-campo select:focus,
.w-campo textarea:focus {
    outline: none;
    border-color: var(--w-menta);
    background: rgba(0, 0, 0, 0.34);
}
.w-campo select:disabled { opacity: 0.5; cursor: not-allowed; }

/* La flecha propia: la nativa se pinta con el color del sistema y sobre navy
   desaparece. `appearance: none` la saca y el SVG la repone en menta. */
.w-campo select {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352f29c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1em;
}
.w-campo select option { background: var(--w-navy-2); color: var(--w-text); }

.w-campo__ayuda { color: var(--w-muted); font-size: 0.82rem; line-height: 1.5; }

.w-form__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-s3);
    margin-top: var(--w-s5);
    padding-top: var(--w-s5);
    border-top: 1px solid var(--w-border);
}
.w-form__nota { color: var(--w-muted); font-size: 0.86rem; max-width: 46ch; margin: 0; }

/* Avisos del formulario. El verde es el de marca; el error usa un rojo que no
   está en la paleta de marca porque la paleta no tiene uno: va como token
   local de este bloque y no en :root. */
.w-aviso {
    --w-aviso-color: var(--w-menta);
    display: flex;
    align-items: flex-start;
    gap: var(--w-s3);
    margin-bottom: var(--w-s4);
    padding: var(--w-s3) var(--w-s4);
    border: 1px solid var(--w-aviso-color);
    border-radius: var(--w-radio-sm);
    background: color-mix(in srgb, var(--w-aviso-color) 10%, transparent);
    color: var(--w-text);
    font-size: 0.94rem;
}
.w-aviso--error { --w-aviso-color: #ff6b6b; }
.w-aviso .w-ico { color: var(--w-aviso-color); margin-top: 0.15rem; }
.w-aviso ul { display: grid; gap: var(--w-s1); margin: var(--w-s2) 0 0; }
.w-aviso li { color: var(--w-text-soft); font-size: 0.9rem; }
.w-aviso p { margin: 0; }

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

@media (max-width: 1100px) {
    .w-bento { grid-template-columns: repeat(4, 1fr); }
    .w-producto--ancho { grid-column: span 2; }
    .w-pasos { grid-template-columns: repeat(2, 1fr); }
    .w-publicos { grid-template-columns: repeat(2, 1fr); }
    .w-tarjetas { grid-template-columns: repeat(2, 1fr); }
    .w-accesos { grid-template-columns: repeat(2, 1fr); }
    .w-cuenta__accesos { grid-template-columns: repeat(2, 1fr); }
    .w-contadores { grid-template-columns: repeat(2, 1fr); }
    .w-footer__cols { grid-template-columns: 1fr 1fr; }
    .w-doc { grid-template-columns: 1fr; }
    .w-doc__indice { position: static; }
}

@media (max-width: 900px) {
    /* Sin segunda fila: queda el burger, así que el token vuelve a la altura
       de una barra sola. Si no, el hero se metería 128px bajo una nav de 72. */
    :root { --w-nav-h: 76px; }
    .w-nav__franja { display: none; }
    .w-nav__claim { display: none; }
    .w-nav__fila { padding-block: var(--w-s2); }
    .w-nav__burger { display: inline-flex; }
    .w-nav__yo .w-nav__nombre { display: none; }
    .w-nav__yo { padding: 0.3rem; }
    .w-nav__marca img { height: 40px; }

    /* "Ingresar" entraba a los empujones entre el logo y el burger, y en
       pantallas angostas le comía el aire a la marca. Vive adentro del menú,
       donde es un botón de ancho completo. */
    .w-nav__ingresar { display: none; }

    .w-proyecto { grid-template-columns: 1fr; }
    .w-legal { grid-template-columns: 1fr; }
    .w-cuenta__invitado { grid-template-columns: 1fr; }
    .w-antes { grid-template-columns: 1fr; }
    .w-modulos { grid-template-columns: 1fr; }
    /* En teléfono el retrato pasa arriba y a 96px: a 128px al costado dejaba
       una columna de texto de dos palabras. */
    .w-miembro { grid-template-columns: 1fr; gap: var(--w-s3); }
    .w-miembro__retrato { width: 96px; }
    .w-informe__piezas { grid-template-columns: 1fr; }
    .w-integraciones { grid-template-columns: repeat(2, 1fr); }
    .w-hero { min-height: 100svh; gap: var(--w-s4); }
    .w-form__grilla { grid-template-columns: 1fr; }
    .w-modulo__capacidades { grid-template-columns: 1fr; }
    .w-resumen { grid-template-columns: 1fr; }
    .w-modulo__publico { margin-left: 0; }
    .w-flujo__flecha { transform: rotate(90deg); width: 100%; justify-content: center; }
    .w-flujo__paso { flex: 1 1 100%; }
    .w-esquema__fila,
    .w-params__fila { grid-template-columns: 1fr; gap: var(--w-s1); }
    .w-api__sello { margin-left: 0; }
}

@media (max-width: 640px) {
    body.w-body { font-size: 16px; }

    /* El sello de "en vivo" pasa a ser un chip de ancho completo: en línea, a
       390px, la etiqueta se partía en "EN" / "VIVO" y la frase quedaba
       encajada contra el borde. */
    .w-live {
        display: flex;
        width: 100%;
        align-items: center;
        gap: var(--w-s2);
        margin-top: var(--w-s4);
        padding: var(--w-s2) var(--w-s3);
        border: 1px solid var(--w-border);
        border-radius: var(--w-radio-sm);
        background: var(--w-surface);
        font-size: 0.8rem;
        line-height: 1.45;
    }
    .w-bento, .w-pasos, .w-publicos, .w-tarjetas,
    .w-accesos, .w-cuenta__accesos, .w-footer__cols { grid-template-columns: 1fr; }
    /* Las integraciones se quedan en dos: son logos, no textos largos, y una
       sola columna las estira sin necesidad. */
    .w-integraciones { grid-template-columns: repeat(2, 1fr); }
    .w-integracion { padding: var(--w-s3) var(--w-s3) var(--w-s4); }
    .w-integracion__logo { height: 60px; }
    /* Los contadores no bajan a una columna: cuatro renglones sueltos no se
       leen como un panel de cifras. Dos y dos. */
    .w-contadores { grid-template-columns: repeat(2, 1fr); gap: var(--w-s4) var(--w-s3); }
    .w-hero { min-height: auto; padding-block: calc(var(--w-nav-h) + var(--w-s5)) var(--w-s6); }
    .w-producto, .w-producto--ancho { grid-column: span 1; }
    .w-footer__abajo nav { margin-left: 0; }
    .w-hero__acciones .w-btn,
    .w-cierre__acciones .w-btn,
    .w-portada__acciones .w-btn { width: 100%; }
    .w-cuenta__salir { margin-left: 0; width: 100%; }
    .w-cuenta__salir button { width: 100%; }
    .w-tuto__paso { grid-template-columns: 1fr; gap: var(--w-s3); }
    .w-serie__paso { grid-template-columns: 48px 1fr; gap: var(--w-s3); }
    .w-serie__paso::before { width: 48px; height: 48px; border-radius: 14px; font-size: 1.05rem; }
    .w-serie__ir { grid-column: 1 / -1; }
    .w-siguiente { grid-template-columns: 1fr; }
    .w-siguiente .w-btn { width: 100%; }
    .w-nav__acciones .w-btn--chico { padding: 0.5rem 0.9rem; font-size: 0.84rem; }
    .w-form__pie .w-btn { width: 100%; }
}

/* En teléfono el hero no mide `100svh` (queda en `auto`, más arriba): con
   cinco piezas apiladas, forzarlo a la altura de la pantalla lo recortaba. Lo
   que sí se hace es comprimirlo para que el sello de "en vivo" caiga lo más
   cerca posible del borde inferior — en un teléfono alto entra entero; en uno
   bajo queda a un dedo de scroll, no a media pantalla. Las cifras son lo que
   más ocupa, así que ahí se recorta primero. */
@media (max-width: 900px) {
    .w-hero { gap: var(--w-s3); padding-block: calc(var(--w-nav-h) + var(--w-s4)) var(--w-s4); }
    .w-hero .w-eyebrow { padding-block: 0.3rem; font-size: 0.7rem; }
    .w-hero__titulo { font-size: clamp(1.6rem, min(7.6vw, 5.2vh), 2.2rem); }
    .w-hero__bajada { font-size: 0.92rem; }
    .w-hero__acciones .w-btn { padding-block: 0.72rem; }
    .w-contadores { margin-top: var(--w-s3); padding-top: var(--w-s3); gap: var(--w-s3) var(--w-s3); }
    .w-contador__valor { font-size: clamp(1.3rem, min(6.4vw, 3.2vh), 1.7rem); margin-bottom: 0; }
    /* El `padding-right` de cada cifra tiene sentido cuando son cuatro en
       línea; a dos columnas de 165px se come el ancho y parte rótulos como
       "gestiones REPROCANN" en dos renglones. El `gap` de la grilla ya separa. */
    .w-contador { padding-right: 0; }
    .w-contador__etiqueta { font-size: 0.8rem; }
    .w-contador__nota { margin-top: 1px; font-size: 0.72rem; }
    /* El sello es un aparte, no el pie de las cifras: 32px de aire propio. El
       `gap` del hero NO cuenta acá —las piezas del hero viven en un wrapper,
       así que lo único que separa es este margen—. */
    .w-live { margin-top: var(--w-s4); font-size: 0.78rem; }
}

/* Teléfonos angostos: los últimos 30px que faltaban para que el sello de "en
   vivo" entre en una pantalla de 844px de alto. No se saca contenido —las
   notas de cada cifra siguen ahí—: se recorta el pie del hero y baja medio
   punto la bajada, que a este ancho gana o pierde un renglón entero. */
@media (max-width: 480px) {
    .w-hero { padding-bottom: var(--w-s3); }
    .w-hero__bajada { font-size: 0.88rem; }
    .w-contadores { margin-top: var(--w-s2); }
}

/* Pantallas anchas pero bajas —un portátil de 1366×768— son el caso difícil:
   el hero mide `100svh` y adentro tienen que entrar cinco piezas, el sello de
   "en vivo" incluido. Acá pelea por cada píxel.

   El ahorro grande NO es achicar márgenes: es que el título deje de tener
   cuatro renglones. Por eso se ensancha `max-width` a la vez que se baja el
   cuerpo — más caracteres por línea, menos líneas. Lo mismo con la bajada. */
@media (min-width: 901px) and (max-height: 1020px) {
    .w-hero {
        gap: 0.75rem;
        padding-block: calc(var(--w-nav-h) + 0.75rem) 1rem;
    }
    .w-hero .w-eyebrow { margin-bottom: var(--w-s2); padding-block: 0.28rem; font-size: 0.68rem; }
    .w-hero__titulo {
        max-width: 26ch;
        margin-bottom: 0.85rem;
        font-size: clamp(1.8rem, min(5vw, 6.2vh), 3.2rem);
    }
    .w-hero__bajada {
        max-width: 72ch;
        margin-bottom: 0.9rem;
        font-size: 0.92rem;
    }
    .w-hero__acciones .w-btn { padding-block: 0.65rem; font-size: 0.92rem; }
    .w-contadores { margin-top: 1.1rem; padding-top: 0.9rem; gap: 0.75rem var(--w-s3); }
    .w-contador__valor { font-size: 1.55rem; margin-bottom: 0; }
    .w-contador__etiqueta { font-size: 0.8rem; }
    .w-contador__nota { font-size: 0.7rem; margin-top: 1px; }
    .w-live { margin-top: 0.85rem; font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .w-reveal { opacity: 1; transform: none; transition: none; }
    .w-body *, .w-body *::before, .w-body *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}