/* ar-vg — CSS del sitio. Implementa el sistema de diseño de design-system/.
   Mobile-first, sin frameworks, sin dependencias externas.

   Las dos decisiones que explican casi todo lo de abajo:
   · La marca es VERDE PETRÓLEO, no azul marino. El azul institucional está
     tomado por el BCRA, Poncho, Nosis, BBVA y varios competidores: ir por ahí
     era volverse invisible en el propio nicho.
   · Verde, amarillo, naranja y rojo están RESERVADOS para el semáforo de
     situaciones, que es la respuesta que la persona vino a buscar. La situación 1
     usa el petróleo de la marca justamente para dejar el verde libre para la
     acción (botones), y para que "normal" lea como línea de base y no como premio.

   Racional completo y cards de referencia: design-system/. */

:root {
    /* ── Marca: verde petróleo ───────────────────────── */
    --brand-900: #16302E;
    --brand-800: #1F3D3A;   /* encabezado */
    --brand-700: #255450;   /* color de marca, títulos */
    --brand-600: #306D69;
    --brand-500: #3D8580;
    --brand-200: #B9D5D2;
    --brand-100: #D6E8E6;
    --brand-050: #F2F7F6;

    /* ── Acción ──────────────────────────────────────── */
    --accion-700: #116634;
    --accion-600: #15803D;  /* botón primario */
    --accion-500: #1A9950;
    --accion-100: #E3F3E8;

    /* ── Semáforo (reservado) ────────────────────────── */
    --s1: #255450;  --s1-bg: #E8F0EF;  /* normal: petróleo, no verde festivo */
    --s2: #8A6100;  --s2-bg: #FBF0D6;
    --s3: #9A4A0C;  --s3-bg: #FCEADC;
    --s4: #B3261E;  --s4-bg: #FBE4E2;
    --s5: #7C1C1C;  --s5-bg: #F4DCDC;  /* vino, nunca negro */

    /* ── Texto y superficies ─────────────────────────── */
    --text:   #1A1D1C;
    --text-2: #4A5654;
    --text-3: #64717F;
    --bg:     #FFFFFF;
    --bg-2:   #F7FAF9;
    --border: #DDE4E2;

    /* ── Avisos ──────────────────────────────────────── */
    --info-bg: #D6E8E6;   --info-bd: #B9D5D2;
    --ojo-bg:  #FFF7E3;   --ojo-bd:  #E8D49B;
    --alerta-bg: #FBE9E6; --alerta-bd: #EFBFB8;

    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --shadow:   0 1px 2px rgba(22,48,46,.06), 0 1px 3px rgba(22,48,46,.08);
    --shadow-2: 0 2px 6px rgba(22,48,46,.07), 0 8px 24px rgba(22,48,46,.08);

    /* Compatibilidad con reglas viejas que puedan quedar en alguna página. */
    --navy: var(--brand-700);
    --accent: var(--accion-600);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px; line-height: 1.65;
    color: var(--text); background: var(--bg);
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--accion-600); }
a:hover { color: var(--accion-700); }
/* Sobre cualquier superficie tintada el verde de acción se queda corto (3,95 en
   una caja .info). Ahí manda el tono oscuro, que llega a 5,5-6,7. */
.note a, .warn a, .info a, .answer a, .tool-cta a:not(.btn),
.cards a .card-d a, .vg-cargando a, .carta a:not(.btn), tr a, .entity a { color: var(--accion-700); }
:focus-visible { outline: 3px solid var(--accion-500); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 18px; }

/* Saltar al contenido: sin esto, quien navega con teclado se come la marca y los
   4 títulos del menú en cada página antes de llegar al texto. Solo se ve al
   enfocarlo, así que no cambia el diseño. */
.saltar { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accion-600);
          color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
          text-decoration: none; }
.saltar:focus { left: 0; color: #fff; }
.page { padding: 10px 18px 52px; max-width: 780px; }

h1 { font-size: 1.9rem; line-height: 1.2; margin: .45em 0 .3em; color: var(--brand-800); letter-spacing: -.01em; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 1.7em 0 .5em; color: var(--brand-700); }
h3 { font-size: 1.15rem; margin: 1.35em 0 .4em; color: var(--text); }
p, ul, ol { margin: 0 0 1em; }
li { margin-bottom: .35em; }
strong { color: var(--text); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

/* ── Header ─────────────────────────────────────────────
   Barra superior, no lateral fijo: las infografías miden 760px y un lateral
   permanente se comería 240-280px de eso. El lateral que sí sirve acá es el
   índice de la propia página (.toc), que orienta dentro de textos largos. */
.site-header { background: var(--brand-800); color: #fff; position: relative; z-index: 40; }
/* ── La barra vuelve al scrollear para arriba (sólo mobile) ──────────
   En el celular la barra se iba con el scroll y para llegar al menú había que
   volver hasta arriba de todo. Ahora se esconde al bajar (no le roba pantalla a
   la lectura) y reaparece apenas se sube, que es el gesto de "quiero ir a otro
   lado". Va en `sticky` y no en `fixed` a propósito: el sticky sigue ocupando su
   lugar en el flujo, así que no hay salto de layout al aparecer ni hace falta un
   espaciador que compense su altura. El fundido lo apaga solo la regla global de
   prefers-reduced-motion. */
@media (max-width: 899px) {
    .site-header { position: sticky; top: 0; transition: transform .22s ease; }
    .site-header.oculta { transform: translateY(-100%); }
    /* Con barra pegajosa, saltar a un ancla deja el título tapado abajo de ella. */
    [id] { scroll-margin-top: 66px; }
}
.site-header .wrap { display: flex; align-items: center; gap: 22px; padding-top: 11px; padding-bottom: 11px; }

.wordmark { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; margin-right: auto; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1.12; }
.wordmark-name { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.wordmark-name em { font-style: normal; color: #7ED9A4; }
/* El bajologo no es decorativo: es la línea que nos separa de suplantar al BCRA
   o a Equifax. Va siempre, en todas las apariciones de la marca. */
.wordmark-sub { font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: #A6BAB6; font-weight: 600; }

.site-nav { display: none; gap: 2px; }
.site-nav > a, .nav-group > button {
    color: #DCE9E5; text-decoration: none; padding: 9px 13px; border-radius: var(--radius-sm);
    font-size: .93rem; font-weight: 600; font-family: inherit; background: none; border: 0;
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px; line-height: 1.4;
}
.site-nav > a:hover, .site-nav > a.active,
.nav-group > button:hover, .nav-group[data-open="true"] > button { background: rgba(255,255,255,.13); color: #fff; }
.nav-group > button .caret { transition: transform .18s ease; }
.nav-group[data-open="true"] > button .caret { transform: rotate(180deg); }
.nav-group { position: static; }

/* Desplegable: 6 grupos de contenido bajo 4 títulos. Cuatro es lo que un ojo
   abarca sin leer; las 38 URLs entran en tres columnas. */
.mega {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid var(--border); box-shadow: var(--shadow-2);
}
.nav-group[data-open="true"] .mega { display: block; }
/* `.site-header .wrap` matchea también este .wrap con la misma especificidad, y
   su align-items:center se colaba acá y escalonaba las columnas. Explícito. */
.mega .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
              padding-top: 22px; padding-bottom: 22px; align-items: start; }
.mega h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 0 0 10px; font-weight: 800; }
.mega a { display: block; text-decoration: none; padding: 7px 0; color: var(--text); font-size: .93rem; }
.mega a:hover { color: var(--accion-600); }
.mega a small { display: block; color: var(--text-3); font-size: .78rem; }
.mega-destacado { background: var(--brand-050); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }

/* ── Botones ────────────────────────────────────────── */
.btn { display: inline-block; text-decoration: none; border-radius: var(--radius-sm); font-weight: 700;
       border: 0; cursor: pointer; text-align: center; font-family: inherit; line-height: 1.4; }
.btn-primary { background: var(--accion-600); color: #fff; padding: 13px 22px; font-size: 1rem; }
.btn-primary:hover { background: var(--accion-700); color: #fff; }
.btn-sm { padding: 9px 17px; font-size: .9rem; display: none; }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Cajón mobile ───────────────────────────────────────
   Las herramientas van primero, antes que las guías: el que abre el menú en el
   celular quiere hacer algo, no leer. */
/* `visibility: hidden` cuando está cerrado NO es cosmético: sin eso el cajón
   sigue en el orden de tabulación con sus 17 enlaces, y quien navega con teclado
   se queda tabulando sobre un panel que está fuera de la pantalla, sin ver dónde
   está el foco. La transición de la visibilidad se retrasa para que la animación
   de salida se siga viendo entera. */
.drawer { position: fixed; top: 0; right: -320px; width: 310px; max-width: 88vw; height: 100dvh;
          background: #fff; z-index: 60; display: flex; flex-direction: column;
          visibility: hidden; transition: right .22s ease, visibility 0s linear .22s;
          box-shadow: -4px 0 24px rgba(22,48,46,.2); }
.drawer.open { right: 0; visibility: visible; transition: right .22s ease, visibility 0s; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(22,48,46,.55); opacity: 0;
                   pointer-events: none; transition: opacity .22s; z-index: 55; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
               font-weight: 700; background: var(--brand-800); color: #fff; }
.drawer-head .nav-toggle { color: #fff; }
.drawer-nav { display: flex; flex-direction: column; padding: 6px 8px; overflow-y: auto; }
.drawer-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--radius-sm);
                text-decoration: none; color: var(--text); font-size: .94rem; }
.drawer-nav a:hover, .drawer-nav a.active { background: var(--brand-050); color: var(--brand-800); }
.drawer-nav a svg { flex-shrink: 0; width: 26px; height: 26px; padding: 4px; border-radius: var(--radius-sm);
                    background: var(--brand-100); color: var(--brand-600); }
.drawer-sec { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
              margin: 14px 12px 4px; font-weight: 800; }
.drawer-foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--border); }
.nav-toggle { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; display: inline-flex; }

/* ── Contenido ──────────────────────────────────────── */
.crumb { font-size: .78rem; color: var(--text-3); margin: 14px 0 4px; }
.crumb a { color: var(--text-3); }
.byline { font-size: .8rem; color: var(--text-3); margin: -.1em 0 1.5em;
          padding-bottom: .9em; border-bottom: 1px solid var(--border); }
.byline a { color: var(--text-3); }
.lead { font-size: 1.15rem; color: var(--text-2); }

/* Respuesta directa (AEO): lo primero que lee un asistente y lo que Google
   levanta como fragmento destacado. Máximo 60 palabras, sin preámbulo. */
.answer { background: var(--brand-050); border-left: 4px solid var(--brand-600);
          border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 15px 18px; margin: 0 0 1.5em; }
.answer p { color: var(--text); }
.answer p:last-child { margin-bottom: 0; }

.note  { background: var(--ojo-bg);    border: 1px solid var(--ojo-bd);    border-radius: var(--radius); padding: 13px 16px; margin: 0 0 1.2em; }
.warn  { background: var(--alerta-bg); border: 1px solid var(--alerta-bd); border-radius: var(--radius); padding: 13px 16px; margin: 0 0 1.2em; }
.info  { background: var(--info-bg);   border: 1px solid var(--info-bd);   border-radius: var(--radius); padding: 13px 16px; margin: 0 0 1.2em; }
.note > :last-child, .warn > :last-child, .info > :last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 0 0 1.2em; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
th { background: var(--bg-2); color: var(--brand-700); font-weight: 700; }
tr.destacada > td { background: var(--brand-050); }

/* ── Semáforo de situaciones ────────────────────────────
   Cinco colores, no tres. Todos los competidores agrupan (2-3 naranja, 4-5 rojo)
   y borran justo la distinción que a la persona le importa: en 4 todavía negocia,
   en 5 puede haber juicio. El número escrito acompaña SIEMPRE al color, porque
   el eje rojo-verde es el que peor distingue el daltonismo. */
.situ { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px;
        color: #fff; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.situ-1 { background: var(--s1); } .situ-2 { background: var(--s2); } .situ-3 { background: var(--s3); }
.situ-4 { background: var(--s4); } .situ-5 { background: var(--s5); }

.situ-soft { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px;
             font-size: .84rem; font-weight: 700; border: 1px solid; }
.situ-soft.situ-1 { background: var(--s1-bg); color: var(--s1); border-color: var(--brand-200); }
.situ-soft.situ-2 { background: var(--s2-bg); color: var(--s2); border-color: #E8D49B; }
.situ-soft.situ-3 { background: var(--s3-bg); color: var(--s3); border-color: #EBC49B; }
.situ-soft.situ-4 { background: var(--s4-bg); color: var(--s4); border-color: #EFBFB8; }
.situ-soft.situ-5 { background: var(--s5-bg); color: var(--s5); border-color: #E0B4B4; }

/* Escala: ubica la situación dentro de las cinco. Hace el trabajo emocional que
   el número solo no hace — un 4 aislado es una sentencia, un 4 dentro de cinco
   escalones es una posición de la que se puede salir. */
.escala { display: flex; gap: 4px; margin: 0 0 1.2em; max-width: 560px; }
.escala span { flex: 1; height: 9px; border-radius: 2px; opacity: .34; }
.escala span.on { opacity: 1; }
.escala span:nth-child(1) { background: var(--s1); } .escala span:nth-child(2) { background: var(--s2); }
.escala span:nth-child(3) { background: var(--s3); } .escala span:nth-child(4) { background: var(--s4); }
.escala span:nth-child(5) { background: var(--s5); }

/* Número grande de la situación: reconocimiento inmediato. La persona viene de
   ver un "4" y tiene que saber en un parpadeo que llegó al lugar correcto. */
.situ-hero { display: flex; gap: 16px; align-items: center; margin: 0 0 1em; }
.situ-hero .n { width: 76px; height: 76px; border-radius: 12px; display: flex; align-items: center;
                justify-content: center; font-size: 2.5rem; font-weight: 800; color: #fff; flex-shrink: 0; }
.situ-hero h1 { margin: 0 0 3px; }
.situ-hero p { margin: 0; color: var(--text-2); }

/* ── FAQ ────────────────────────────────────────────── */
.faq details { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; background: #fff; }
.faq details[open] { border-color: var(--brand-200); }
.faq summary { cursor: pointer; font-weight: 600; padding: 13px 16px; color: var(--text); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
/* Chevron dibujado con bordes, no un "+" que cambia a "−": el `content` no se
   puede animar, y una flecha que gira comunica el despliegue mientras pasa. */
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 3px;
                      border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
                      transform: rotate(45deg) translate(-2px, -2px);
                      transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s; }
.faq details[open] summary { color: var(--brand-700); }
.faq details[open] summary::after { border-color: var(--brand-600); transform: rotate(-135deg) translate(-2px, -2px); }
/* El pliegue se anima con grid-template-rows (0fr → 1fr), que no necesita saber
   la altura de antemano. Lo importante es que el ESTADO EN REPOSO lo define el
   atributo [open] por CSS: si el JS falla o la animación no llega a correr, el
   contenido igual se ve. Antes esto se animaba con la Web Animations API y el
   contenido quedaba en altura 0 si la animación no terminaba, o sea invisible
   con el bloque abierto: falla en la dirección equivocada. */
.faq .faq-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .24s cubic-bezier(.2,.7,.3,1); }
.faq .faq-wrap > .faq-a { min-height: 0; overflow: hidden; }
/* Estado transitorio que pone el JS para que haya algo desde donde animar. */
.faq details.vg-plegado .faq-wrap { grid-template-rows: 0fr; }
.faq .faq-a { padding: 0 16px 13px; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .faq .faq-wrap { transition: none; } }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq .faq-a > :last-child { margin-bottom: 0; }

/* ── Tarjetas de ruteo ──────────────────────────────────
   Bifurcar por resultado ("me dio 4 o 5"), no por tema: es cómo piensa la
   persona, no cómo piensa el que escribe. */
.cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 1.5em; padding: 0; list-style: none; }
.cards a { display: flex; flex-direction: column; flex: 1; min-width: 0;
           border: 1px solid var(--border); border-radius: var(--radius);
           padding: 14px 16px; text-decoration: none; background: #fff; box-shadow: var(--shadow); }
.cards a:hover { border-color: var(--brand-600); box-shadow: var(--shadow-2); }
.cards .card-t { font-weight: 700; color: var(--brand-700); display: block; margin-bottom: 2px; }
.cards .card-d { color: var(--text-2); font-size: .9rem; }

/* ── Índice de la página ────────────────────────────────
   El lateral que sí sirve en este sitio. Solo desktop y solo en páginas largas:
   lo que la persona necesita mientras lee es saltar a su caso, no la lista de
   las otras 37 URLs. En mobile lo reemplazan las tarjetas de "elegí tu caso". */
.toc { display: none; }
.toc b { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
         color: var(--text-3); margin-bottom: 9px; font-weight: 800; }
.toc a { display: block; padding: 5px 0; text-decoration: none; color: var(--text-2); font-size: .85rem; line-height: 1.4; }
.toc a:hover { color: var(--accion-600); }
.toc a.active { color: var(--accion-600); font-weight: 700; border-left: 2px solid var(--accion-600);
                margin-left: -18px; padding-left: 16px; }

/* ── Herramienta de consulta ────────────────────────────
   Único bloque oscuro de la página: el ojo lo encuentra sin buscarlo. Va completo
   solo en las 5 URLs donde la intención es "quiero consultar"; en las otras 24 va
   la barra compacta (.tool-cta). Repetir el bloque protagónico en todas las URLs
   es lo que hacía que el buscador no supiera cuál rankear. */
.tool { background: linear-gradient(160deg, var(--brand-800), var(--brand-700));
        border-radius: var(--radius-lg); padding: 24px 22px; color: #fff; margin: 0 0 1.7em; box-shadow: var(--shadow-2); }
.tool h2, .tool h3 { color: #fff; margin-top: 0; margin-bottom: 4px; }
.tool label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 5px; color: #D6E8E6; }
.tool .row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.tool .row > div { flex: 1 1 190px; }
.tool input[type=text], .tool input[type=tel], .tool input[type=date],
.tool input[type=month], .tool input[type=number], .tool select {
    width: 100%; padding: 13px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.25);
    font-size: 1.1rem; font-family: inherit; background: #fff; color: var(--text);
}
.tool input:not([type=radio]):focus, .tool select:focus { outline: none; box-shadow: 0 0 0 3px rgba(26,153,80,.55); }
.tool .btn-primary { background: var(--accion-600); box-shadow: 0 0 0 1px rgba(255,255,255,.22), var(--shadow); }
.tool .btn-primary:hover { background: var(--accion-500); }
/* Los errores del formulario van DENTRO de la caja, pegados al botón. Antes se
   pintaban en el contenedor del resultado, que vive fuera y más abajo: quien se
   equivocaba en un dígito veía el formulario intacto y el mensaje a media
   pantalla de distancia, después de la respuesta directa y de la firma. */
.tool .tool-error { margin: 14px 0 0; background: #FFE9E6; border: 1px solid #F2B8B0;
                    border-left: 4px solid var(--s4); border-radius: var(--radius-sm);
                    padding: 11px 14px; color: #5E1712; font-size: .9rem; line-height: 1.5; }
.tool .tool-error strong { color: #4A120E; }
.tool .tool-error a { color: #7C1C1C; }
.tool .tool-error > :last-child { margin-bottom: 0; }
.tool .tool-note { font-size: .78rem; color: #BACFC9; margin: 10px 0 0; line-height: 1.55; }
.tool .tool-note strong { color: #D6E8E6; }
.tool .radio-row { display: flex; gap: 18px; align-items: center; color: #E4EFEB; font-size: .95rem; padding-top: 9px; }
.tool .radio-row label { display: inline-flex; align-items: center; gap: 8px; margin: 0;
                         font-weight: 400; color: #E4EFEB; min-height: 44px; padding: 0 4px; cursor: pointer; }
.tool .radio-row input[type=radio] { width: 20px; height: 20px; accent-color: var(--accion-500); }
.tool-sub { color: #B9D5D2; margin: 0 0 16px; font-size: .88rem; }
.tool a { color: #B9D5D2; }

/* Segmentado DNI / CUIL. El DNI va primero por defecto: nadie se sabe el CUIL
   de memoria, y la opción por defecto tiene que ser la que se completa sin
   levantarse a buscar un papel. */
/* Son radios de verdad, sólo que no parecen radios: mantienen el grupo para
   lectores de pantalla y la navegación con flechas. */
.seg { display: inline-flex; background: rgba(255,255,255,.12); border-radius: 999px; padding: 3px; margin-bottom: 16px; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: block; color: #D6E8E6; font-weight: 700; font-size: .88rem;
            padding: 8px 18px; border-radius: 999px; transition: background .15s, color .15s; }
.seg input:checked + span { background: #fff; color: var(--brand-700); }
.seg input:focus-visible + span { outline: 3px solid var(--accion-500); outline-offset: 2px; }

/* ── Resultado ──────────────────────────────────────────
   Regla de tono: el resultado malo nunca termina en el diagnóstico, siempre
   ofrece la salida. Quien llega acá está asustado; el diseño baja la ansiedad. */
.result { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 0 0 1.5em;
          background: #fff; box-shadow: var(--shadow); }
.result-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.result-big { font-size: 1.25rem; font-weight: 800; color: var(--brand-700); }
.entity { border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 10px; }
.entity-name { font-weight: 700; color: var(--brand-700); }
.entity-meta { font-size: .86rem; color: var(--text-3); }
.flags { font-size: .85rem; color: var(--s4); font-weight: 600; }
.peor { border-left: 3px solid var(--s4); }
.hist { display: flex; gap: 3px; align-items: flex-end; margin: 10px 0 4px; }
.hist span { width: 12px; border-radius: 3px 3px 0 0; display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Wizard ─────────────────────────────────────────────
   Una pregunta por pantalla, opciones grandes. Lo usa alguien que no sabe ni qué
   preguntar: darle cuatro campos a la vez lo expulsa. */
.wizard { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 0 0 1.5em;
          background: #fff; box-shadow: var(--shadow); }
.wizard h3 { margin-top: 0; }
.wizard-ops { display: flex; flex-direction: column; gap: 9px; margin-bottom: 8px; }
.wizard-op { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
             padding: 14px 16px; text-align: left; font-size: 1rem; font-family: inherit;
             color: var(--text); font-weight: 600; cursor: pointer; }
.wizard-op:hover { border-color: var(--brand-600); background: var(--brand-050); color: var(--brand-800); }
.wizard-reset { background: none; border: 0; color: var(--text-3); text-decoration: underline;
                padding: 4px 0; font-size: .88rem; font-family: inherit; cursor: pointer; }

/* ── Infografías ────────────────────────────────────── */
.ig { margin: 1.5em 0; padding: 0; }
.ig svg { display: block; margin: 0 auto; border-radius: var(--radius); }
.ig figcaption { font-size: .84rem; color: var(--text-3); margin-top: 8px; text-align: center; }

/* ── Barra compacta de herramienta ──────────────────── */
.tool-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between;
            background: var(--brand-050); border: 1px solid var(--border); border-left: 4px solid var(--accion-600);
            border-radius: var(--radius); padding: 15px 18px; margin: 0 0 1.5em; }
.tool-cta strong { display: block; color: var(--brand-700); font-size: 1rem; }
.tool-cta span { display: block; color: var(--text-2); font-size: .87rem; margin-top: 2px; }
.tool-cta .btn { flex-shrink: 0; }

.tools-strip { margin: 2.2em 0 1.5em; padding-top: 1.3em; border-top: 1px solid var(--border); }

/* ── Cartas modelo ──────────────────────────────────────
   Monoespaciada a propósito: se lee como documento, no como contenido web, y eso
   hace que se perciba usable. El botón de copiar va ARRIBA del texto: en mobile
   el final de la carta queda a dos pantallas. */
.carta { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 1.5em; overflow: hidden; }
.carta-head { background: var(--bg-2); padding: 12px 16px; border-bottom: 1px solid var(--border);
              display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.carta-head h3 { margin: 0 0 2px; font-size: 1.02rem; color: var(--brand-700); }
.carta-head p { margin: 0; font-size: .86rem; color: var(--text-2); }
.carta pre { margin: 0; padding: 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
             font-size: .82rem; line-height: 1.8; white-space: pre-wrap; word-wrap: break-word;
             background: #fff; color: var(--text-2); }
.carta-foot { padding: 11px 16px 15px; background: #fff; border-top: 1px dashed var(--border); }
.carta-foot .btn { font-size: .86rem; padding: 9px 16px; }
.carta mark { background: var(--ojo-bg); color: var(--text); padding: 1px 5px; border-radius: 3px; }

/* ── Footer ─────────────────────────────────────────────
   El disclaimer es la declaración de identidad, no letra chica: en un nicho donde
   media SERP son gestores que cobran, decir que somos no oficiales y gratuitos es
   lo que nos hace creíbles. */
.site-footer { background: var(--brand-900); color: #A6BAB6; margin-top: 48px; padding: 34px 0 24px; font-size: .9rem; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; margin-bottom: 22px; }
.foot-cols h3 { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #9DADAA; margin: 0 0 9px; font-weight: 800; }
.foot-cols a { display: block; text-decoration: none; padding: 3px 0; color: #DCE9E5; }
.foot-cols a:hover { color: #fff; }
.foot-disclaimer { color: #93A3A0; font-size: .8rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; line-height: 1.65; }
.foot-disclaimer a { color: #B9D5D2; }
.foot-copy { color: #9DADAA; font-size: .8rem; margin: 0; }

/* ── Desktop ────────────────────────────────────────── */
@media (min-width: 900px) {
    .site-nav { display: flex; }
    .btn-sm { display: inline-block; }
    .nav-toggle { display: none; }
    .drawer, .drawer-backdrop { display: none; }
    h1 { font-size: 2.35rem; }
    .cards { grid-template-columns: 1fr 1fr; }
    .page { padding-left: 0; padding-right: 0; }

    /* Índice pegajoso al costado del contenido, solo donde el JS lo activa
       (lo activa si la página tiene 4 h2 o más). */
    body.con-toc .page { max-width: 1100px; display: grid; grid-template-columns: minmax(0, 780px) 214px;
                         gap: 36px; align-items: start; }
    body.con-toc .page-main { min-width: 0; grid-column: 1; }
    body.con-toc .toc { display: block; position: sticky; top: 18px; grid-column: 2;
                        border-left: 2px solid var(--border); padding-left: 16px; }
}

/* ── Fase de procesamiento ──────────────────────────────
   Sin esto la herramienta contesta en 40 ms y se lee como un truco de
   JavaScript, no como una consulta. La espera es lo que hace que el resultado
   se perciba como algo calculado para vos. Los pasos dicen la verdad de lo que
   pasa: nunca inventamos un trámite que no existe. */
.vg-cargando { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--brand-600);
               border-radius: var(--radius); padding: 20px; margin: 0 0 1.5em; box-shadow: var(--shadow); }
.vg-c-head { display: flex; align-items: center; gap: 11px; font-size: 1.02rem; color: var(--brand-700); }
.vg-c-spin { flex: none; width: 18px; height: 18px; border: 2.5px solid var(--brand-100);
             border-top-color: var(--brand-600); border-radius: 50%; animation: vg-spin .8s linear infinite; }
@keyframes vg-spin { to { transform: rotate(360deg); } }
.vg-c-barra { height: 8px; background: var(--border); border-radius: 6px; overflow: hidden; margin-top: 16px; }
.vg-c-barra > i { display: block; height: 100%; width: 0; border-radius: 6px;
                  background: linear-gradient(90deg, var(--brand-600), var(--accion-500)); transition: width .18s linear; }
.vg-c-pct { margin-top: 6px; font-size: .78rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.vg-c-pasos { margin-top: 14px; }
.vg-c-nota { margin: 14px 0 0; font-size: .78rem; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .vg-c-spin { animation: none; } }

/* La entrada del resultado: el corte seco desperdicia la espera que acabamos de
   construir. Subir 8px y aparecer alcanza; más que eso ya distrae. */
.vg-reveal { animation: vg-entrar .34s ease both; }
@keyframes vg-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── "Y ahora, ¿qué?" ───────────────────────────────────
   El resultado es donde más sabemos de la persona en toda la visita. Quien
   acaba de ver un 5 con una entidad desconocida necesita algo muy distinto de
   quien dio 1: cada uno se lleva su continuación. */
.vg-next { margin: 1.8em 0 0; padding-top: 1.4em; border-top: 1px solid var(--border); }
.vg-next h3 { margin: 0 0 12px; font-size: 1.12rem; color: var(--brand-700); }
.cards li { margin: 0; display: flex; }
/* La destacada va en el verde de la acción, no en amarillo ni naranja: esos son
   del semáforo y acá significarían un riesgo que no existe. */
.cards li.feat a { border-color: var(--accion-600); background: var(--accion-100);
                   box-shadow: 0 0 0 1px var(--accion-600), var(--shadow); }
.cards li.feat a:hover { box-shadow: 0 0 0 1px var(--accion-600), var(--shadow-2); }
.card-badge { display: inline-block; background: var(--accion-600); color: #fff; font-size: .62rem;
              font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
              padding: 3px 9px; border-radius: 999px; margin-bottom: 6px; }

/* ── Tooltips (i) de los campos ─────────────────────────
   Explican dónde sale el dato en la vida real, que es la duda que frena a la
   gente. Dos reglas: el globo es absolute (no empuja nada al abrirse, el layout
   no se mueve) y en táctil abre por tap, porque hover no existe con el dedo. */
.f-lab { display: flex; align-items: center; gap: 6px; }
.f-info { position: relative; display: inline-flex; line-height: 0; }
.f-i { width: 19px; height: 19px; padding: 0; border: 1.5px solid var(--border); border-radius: 50%;
       background: #fff; color: var(--text-3); font: italic 700 12px/1 Georgia, "Times New Roman", serif;
       cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
       transition: border-color .15s, color .15s; }
.f-i:hover, .f-i:focus-visible, .f-i[aria-expanded="true"] { border-color: var(--brand-600); color: var(--brand-700); outline: 0; }
.f-i { position: relative; }
.f-i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
              transform: translate(-50%, -50%); }
/* ⚠️ El globo cerrado va en display:none, NO en visibility:hidden. Con
   visibility seguía ocupando su lugar en el layout: 280px colgando desde un
   ícono que está a mitad del renglón, o sea hasta 157px fuera de la pantalla en
   un celular. Eso le daba scroll horizontal a TODAS las páginas, y de rebote
   mandaba el cajón del menú fuera de la pantalla, porque un position:fixed se
   ancla al viewport de layout, que en mobile crece hasta el ancho del contenido.
   El síntoma que se ve es el botón del cajón cortado; la causa está acá.
   El desplazamiento horizontal para que entre en pantalla lo calcula
   tool-ui.js y lo pasa en --dx (la flecha se corre al revés, con clamp para no
   salirse del propio globo). */
.f-tip { position: absolute; left: -4px; top: calc(100% + 9px); z-index: 30; width: min(280px, 74vw);
         background: var(--brand-900); color: #fff; font-weight: 400; font-size: .8rem; line-height: 1.5;
         text-align: left; padding: 11px 14px; border-radius: 9px; box-shadow: 0 8px 24px rgba(22,48,46,.28);
         display: none; opacity: 0; transform: translate(var(--dx, 0px), -4px);
         transition: opacity .13s, transform .13s, display .13s allow-discrete; }
.f-tip strong { color: #fff; }
.f-tip::before { content: ""; position: absolute; top: -5px; width: 10px; height: 10px;
                 left: clamp(9px, calc(9px - var(--dx, 0px)), calc(100% - 19px));
                 background: var(--brand-900); transform: rotate(45deg); }
.f-i:hover + .f-tip, .f-i:focus-visible + .f-tip, .f-i[aria-expanded="true"] + .f-tip {
    display: block; opacity: 1; transform: translate(var(--dx, 0px), 0); }
/* El fundido de entrada con display:none necesita el estado inicial explícito.
   Donde no esté soportado simplemente aparece sin fundido: nada se rompe. */
@starting-style {
    .f-i:hover + .f-tip, .f-i:focus-visible + .f-tip, .f-i[aria-expanded="true"] + .f-tip {
        opacity: 0; transform: translate(var(--dx, 0px), -4px); }
}
/* Dentro de la herramienta oscura el círculo blanco sería un agujero. */
.tool .f-i { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #D6E8E6; }
.tool .f-i:hover, .tool .f-i:focus-visible, .tool .f-i[aria-expanded="true"] { background: #fff; border-color: #fff; color: var(--brand-700); }
.tool .f-tip { background: #fff; color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.tool .f-tip strong { color: var(--brand-700); }
.tool .f-tip::before { background: #fff; }
/* El último campo de una fila tiene el globo pegado al borde derecho: que se
   abra hacia adentro en vez de salirse de la pantalla. */
.f-info.izq .f-tip { left: auto; right: -4px; }
.f-info.izq .f-tip::before { left: auto;
                             right: clamp(9px, calc(9px + var(--dx, 0px)), calc(100% - 19px)); }

/* La cola de la firma EEAT sólo en desktop: en mobile son dos líneas de
   metadatos entre el H1 y la herramienta, y la herramienta es el gancho. */
.byline-largo { display: none; }
@media (min-width: 700px) { .byline-largo { display: inline; } }

/* ── Flujo numerado (patrón de br-cnpj: `ig-flow`) ───────
   Reemplaza a los steppers de puntitos y barritas. Un stepper fino comunica
   "cuánto falta" y nada más; estas tarjetas además dicen QUÉ pasa en cada paso,
   así que el mismo componente sirve para mostrar progreso y para explicar un
   proceso. Se lee igual quieto que en movimiento. */
.vg-flujo { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--e4, 16px); padding: 0; list-style: none; }
.vg-flujo > li { flex: 1 1 165px; background: var(--bg-2); border: 1px solid var(--border);
                 border-radius: var(--radius); padding: 14px 15px 13px; position: relative;
                 transition: background .2s, border-color .2s; }
.vg-flujo .n { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800;
               font-size: .78rem; display: flex; align-items: center; justify-content: center;
               margin-bottom: 9px; background: var(--brand-600); transition: background .2s; }
/* El semáforo se reserva para las situaciones, así que el ciclo de color va por
   la rampa de la marca y cierra en el verde de la acción. */
.vg-flujo > li:nth-child(4n+1) .n { background: var(--brand-700); }
.vg-flujo > li:nth-child(4n+2) .n { background: var(--brand-600); }
.vg-flujo > li:nth-child(4n+3) .n { background: var(--brand-500); }
.vg-flujo > li:nth-child(4n+4) .n { background: var(--accion-600); }
.vg-flujo .t { font-weight: 700; font-size: .92rem; margin-bottom: 3px; color: var(--text); display: block; }
.vg-flujo .d { font-size: .82rem; color: var(--text-2); line-height: 1.45; display: block; }

/* Estados, cuando el flujo muestra progreso en vivo */
/* Atenuar con opacity dejaba el texto del paso pendiente en 2,52 de contraste.
   La jerarquía se hace con color, que se puede mantener sobre 4,5. */
.vg-flujo > li.pendiente { background: #fff; }
.vg-flujo > li.pendiente .t { color: var(--text-2); font-weight: 600; }
.vg-flujo > li.pendiente .d { color: var(--text-3); }
.vg-flujo > li.pendiente .n { background: var(--brand-200); color: var(--brand-800); }
.vg-flujo > li.activo { background: #fff; border-color: var(--brand-600); box-shadow: var(--shadow); }
.vg-flujo > li.hecho .n { background: var(--accion-600); font-size: 0; }
.vg-flujo > li.hecho .n::after { content: "\2713"; font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .vg-flujo > li { transition: none; } }

/* El wizard lo llena el JS, así que el <div> arranca vacío y al poblarse empujaba
   todo lo de abajo: CLS de 0,328 en la página pilar, muy por encima del 0,1 que
   pide Core Web Vitals. Se agravó al subirlo arriba del contenido. Reservamos el
   alto del primer paso (medido: ~520px en mobile, ~400px en desktop) para que no
   se mueva nada. min-height y no height: si el contenido crece, crece la caja. */
.wizard:empty { min-height: 520px; }
@media (min-width: 700px) { .wizard:empty { min-height: 420px; } }