/* ============================================================================
   REDISEÑO DEL SDL II
   ----------------------------------------------------------------------------
   Se inyecta en las 49 páginas después de todas las demás hojas, así que gana
   por cascada sin `!important`.

   La idea que ordena todo lo de abajo: **el color verde significa confirmado**.
   Hoy el sitio pinta de verde institucional absolutamente todo —los importes
   que suman, los que no suman, los condicionales y las advertencias—, y al
   pintarlo todo igual no dice nada. Aquí el verde se reserva para lo que la ley
   afirma pase lo que pase; lo condicional pasa a ocre y a un peso tipográfico
   menor; lo que no se puede afirmar, a gris.

   La distinción se codifica en TRES canales a la vez (color, sello escrito y
   estilo de filete) para que siga leyéndose en blanco y negro, con daltonismo o
   con el brillo del teléfono al sol.

   Los atributos `data-certeza` sobre los que trabaja la sección 6 los pone
   `rediseno.js`, porque el HTML de hoy no los trae. Ver ese archivo.
   ============================================================================ */


/* ============================================================================
   1 · FICHAS
   ============================================================================ */

:root {
  /* --- Las variables del sitio, redefinidas ------------------------------- */
  /* El verde institucional se va. Era literalmente el del IMSS, y este producto
     necesita sentirse cercano, no oficial. El violeta no está asociado a nada
     institucional en México —ni gobierno, ni juzgado, ni IMSS— y, lo que más
     importa, NO choca con el sistema de certeza: el verde sigue significando
     confirmado y el ámbar condicional, sin que la marca se pise con ninguno.
     El precedente es Nubank, que con este mismo color hizo que un banco se
     sintiera cercano justo para quien desconfiaba de la banca. */
  --imss:      #7c4dbe;   /* marca y acción */
  --imss-dark: #6a3da8;
  --imss-deep: #4a2a78;
  /* Negro y papel cálidos: solos ya quitan media sensación institucional,
     antes de tocar el acento. */
  --ink:       #1e1b22;
  --muted:     #6b6470;
  --line:      #e6e0e2;
  --paper:     #faf7f5;
  --mint:      #f1eafb;
  --warn:      #8a5e12;
  --radius:    14px;
  --max:       1120px;
  --shadow:    0 1px 2px rgba(30,20,45,.05), 0 10px 30px -14px rgba(30,20,45,.20);

  /* --- Niveles de certeza ------------------------------------------------- */
  /* Confirmado: la ley lo dice, no depende de nada. */
  --segura-tinta:  #2f6b57;
  --segura-fondo:  #e9f2ee;
  --segura-filete: #2f6b57;

  /* Confirmado pero calculado sobre supuestos declarados. */
  --supuesta-tinta:  #1f5f6b;
  --supuesta-fondo:  #e9f2f4;
  --supuesta-filete: #2b7383;

  /* Condicional: existe, pero depende de algo que aún no está acreditado. */
  --condicional-tinta:  #8a5e12;   /* 5.3:1 sobre blanco; #a9741b daba 4.03 */
  --condicional-fondo:  #fbf3e6;
  --condicional-filete: #b5791f;

  /* No soportado: no podemos afirmarlo todavía. */
  --gris-tinta:  #4d5a56;
  --gris-fondo:  #f0f2f2;
  --gris-filete: #8b9995;

  /* --- Tipografía --------------------------------------------------------- */
  --letra: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --letra-cifras: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Escala fluida. El cuerpo arranca en 17px en el teléfono, que es donde se
     lee esto de verdad, y llega a 18px en escritorio. */
  --t-cuerpo:  clamp(1.0625rem, 1.02rem + 0.22vw, 1.125rem);
  --t-menor:   clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --t-minima:  clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --t-h3:      clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --t-h2:      clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
  --t-h1:      clamp(1.875rem, 1.45rem + 2.1vw, 3rem);
  --t-cifra:   clamp(1.75rem, 1.35rem + 1.95vw, 2.75rem);
  --t-total:   clamp(2.25rem, 1.6rem + 3.1vw, 3.5rem);

  /* --- Ritmo -------------------------------------------------------------- */
  --medida: 66ch;          /* ancho de lectura cómodo */
  --alto-header: 72px;     /* para compensar el encabezado fijo */
}


/* ============================================================================
   2 · BASE
   ============================================================================ */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}

body {
  font-family: var(--letra);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, li {
  max-width: var(--medida);
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
  /* El encabezado es fijo: sin esto tapa el título al saltar a un ancla o al
     re-renderizar la pantalla del cuestionario. */
  scroll-margin-top: calc(var(--alto-header) + 24px);
}

h1 { font-size: var(--t-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.022em; }
h3 { font-size: var(--t-h3); }

a { color: var(--imss); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--imss-dark); }

/* Foco visible y consistente en todo lo que se puede enfocar. Quien llega aquí
   puede estar navegando con teclado desde una computadora prestada. */
:focus-visible {
  outline: 3px solid var(--imss);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--mint); color: var(--imss-deep); }


/* ============================================================================
   3 · ENCABEZADO Y NAVEGACIÓN
   ============================================================================ */

.header {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

.header .nav { align-items: center; gap: 20px; }

.brand { gap: 12px; }
.brand strong, .brand b { letter-spacing: -0.02em; }

/* El botón de acción y la píldora de «Para profesionales» viven dentro de
   .nav-links pero no son enlaces de navegación: si se les aplica el color
   apagado quedan en 1.9:1 sobre su propio fondo verde. */
.nav-links a:not(.button):not(.boton):not(.nav-switch) {
  font-size: var(--t-menor);
  font-weight: 550;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:not(.button):not(.boton):not(.nav-switch):hover {
  color: var(--imss-deep);
  border-bottom-color: var(--imss);
}

.nav-switch {
  border-radius: 999px;
  font-size: var(--t-minima);
  font-weight: 600;
}


/* ============================================================================
   4 · BOTONES
   ============================================================================ */

.boton, .button {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -0.008em;
  /* 48px de alto real: objetivo táctil cómodo en el teléfono. */
  min-height: 48px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}

.boton.principal, .button {
  background: var(--imss);
  color: #fff;
  border: 1px solid var(--imss);
  box-shadow: 0 1px 2px rgba(30,20,45,.18);
}
.boton.principal:hover, .button:hover {
  background: var(--imss-dark);
  border-color: var(--imss-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(30,20,45,.35);
}
.boton.principal:active, .button:active { transform: translateY(0); }

.boton.secundario {
  background: #fff;
  color: var(--imss-deep);
  border: 1px solid var(--line);
}
.boton.secundario:hover {
  border-color: var(--imss);
  background: var(--mint);
}


/* ============================================================================
   5 · BLOQUES DE CONTENIDO
   ============================================================================ */

.bloque {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 34px);
  margin-block: clamp(16px, 3vw, 24px);
}

.bloque > h2 {
  margin-top: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

/* La cabecera del expediente no es una tarjeta más: es el rótulo del documento. */
.bloque[data-bloque="cabecera"] {
  background: linear-gradient(180deg, var(--mint), #fff 70%);
  border-color: #cfe1db;
}
.bloque[data-bloque="cabecera"] > h2 { border-bottom: 0; padding-bottom: 0; }
.bloque[data-bloque="cabecera"] p {
  color: var(--muted);
  font-size: var(--t-menor);
  font-variant-numeric: tabular-nums;
}

/* `peso-bajo` es lo que el generador ya marca como secundario. */
.bloque.peso-bajo {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
}


/* ============================================================================
   6 · EL SISTEMA DE CERTEZA  ←  el corazón del rediseño
   ----------------------------------------------------------------------------
   Tres canales simultáneos, para que la distinción no dependa del color:
     · filete izquierdo — sólido / punteado / rayado
     · sello escrito    — dice el nivel con palabras
     · color            — verde confirmado, ocre condicional, gris no afirmable
   ============================================================================ */

.concepto {
  position: relative;
  padding: 18px 0 18px 20px;
  border-left: 4px solid var(--gris-filete);
  border-bottom: 1px solid var(--line);
  margin-block: 4px;
}
.concepto:last-of-type { border-bottom: 0; }

.concepto > h3 {
  margin: 0 0 6px;
  font-size: var(--t-h3);
  font-weight: 650;
}

/* --- El sello ------------------------------------------------------------- */

.sello-certeza {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-size: var(--t-minima);
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.35;
  border: 1px solid currentColor;
  max-width: none;
}
/* El punto del sello es el cuarto canal, y es el que se ve de reojo. */
.sello-certeza::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* --- Confirmado ----------------------------------------------------------- */

.concepto[data-nivel="segura"] { border-left-color: var(--segura-filete); }
.concepto[data-nivel="segura"] .sello-certeza {
  color: var(--segura-tinta);
  background: var(--segura-fondo);
}
.concepto[data-nivel="segura"] .importe { color: var(--segura-tinta); }

/* --- Confirmado con supuestos --------------------------------------------- */

.concepto[data-nivel="supuesta"] {
  border-left-color: var(--supuesta-filete);
  border-left-style: dotted;
  border-left-width: 5px;
}
.concepto[data-nivel="supuesta"] .sello-certeza {
  color: var(--supuesta-tinta);
  background: var(--supuesta-fondo);
}
.concepto[data-nivel="supuesta"] .importe { color: var(--supuesta-tinta); }

/* --- Condicional ---------------------------------------------------------- */

.concepto[data-nivel="condicional"] {
  border-left-color: var(--condicional-filete);
  border-left-style: dashed;
  background: linear-gradient(90deg, var(--condicional-fondo), transparent 55%);
}
.concepto[data-nivel="condicional"] .sello-certeza {
  color: var(--condicional-tinta);
  background: #fff;
}
/* Un condicional NO se pinta de verde y NO compite en tamaño con lo confirmado.
   Es la regla que evita la cifra falsamente segura. */
.concepto[data-nivel="condicional"] .importe {
  color: var(--condicional-tinta);
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  opacity: .92;
}

/* --- No soportado / sin clasificar ---------------------------------------- */

.concepto[data-nivel="no-soportada"],
.concepto[data-nivel="sin-clasificar"] {
  border-left-color: var(--gris-filete);
  border-left-style: dashed;
  color: var(--gris-tinta);
}
.concepto[data-nivel="no-soportada"] .sello-certeza,
.concepto[data-nivel="sin-clasificar"] .sello-certeza {
  color: var(--gris-tinta);
  background: var(--gris-fondo);
}
.concepto[data-nivel="no-soportada"] .importe,
.concepto[data-nivel="sin-clasificar"] .importe {
  color: var(--gris-tinta);
  font-size: var(--t-h2);
}

/* --- Lo que no entra al total --------------------------------------------- */
/* Esto es ortogonal al nivel de certeza: la cuota diaria es un dato correcto y
   confirmado, y aun así no es dinero que alguien vaya a cobrar. Se dice. */

.concepto[data-suma="no"] .importe {
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
}
.concepto[data-suma="no"] .importe::after {
  content: "no entra en el total";
  display: block;
  margin-top: 4px;
  font-family: var(--letra);
  font-size: var(--t-minima);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gris-tinta);
}


/* ============================================================================
   7 · IMPORTES, FUNDAMENTOS Y LETRA CHICA
   ----------------------------------------------------------------------------
   Todo lo de aquí va prefijado con `.concepto` a propósito. El sitio ya trae
   reglas `.concepto .importe`, `.concepto .fundamento`, `.concepto .redaccion`
   y `.concepto .supuesto` con dos clases de especificidad; una regla mía de una
   sola clase perdería aunque se cargue después. Igualar el selector basta:
   a igual especificidad gana la última, y la última es esta hoja.
   ============================================================================ */

.concepto .importe {
  font-family: var(--letra);
  font-size: var(--t-cifra);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 2px 0 10px;
}

/* El fundamento es la cita legal, no el mensaje. Deja de ir en verde y en
   negrita: el verde ahora significa «confirmado», y una cita verde sobre un
   concepto condicional decía justo lo contrario de lo que pasa. */
.concepto .fundamento {
  font-size: var(--t-minima);
  color: var(--muted);
  font-weight: 500;
  margin: 8px 0 0;
  letter-spacing: 0.005em;
}
.concepto[data-nivel="condicional"] .fundamento { color: var(--condicional-tinta); }
.concepto[data-nivel="no-soportada"] .fundamento,
.concepto[data-nivel="sin-clasificar"] .fundamento { color: var(--gris-tinta); }

/* Las fórmulas son trazabilidad, no mensaje. Se conservan enteras —un abogado
   las quiere— pero dejan de competir con el resto. */
.concepto .redaccion {
  font-family: var(--letra-cifras);
  font-size: var(--t-minima);
  color: var(--gris-tinta);
  background: var(--gris-fondo);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  margin: 10px 0 0;
  overflow-x: auto;
  max-width: 100%;
  line-height: 1.5;
}

/* Un supuesto es una decisión que el sistema tomó por quien consulta. Tiene que
   verse como tal, no como una nota al pie. */
.concepto .supuesto {
  font-size: var(--t-menor);
  color: var(--ink);
  background: var(--supuesta-fondo);
  border-left: 3px solid var(--supuesta-filete);
  border-radius: 0 8px 8px 0;
  padding: 9px 13px;
  margin: 8px 0 0;
}
.concepto .supuesto::before { color: var(--supuesta-tinta); }

.concepto .advertencia {
  font-size: var(--t-menor);
  color: var(--condicional-tinta);
  background: var(--condicional-fondo);
  border-left: 3px solid var(--condicional-filete);
  border-radius: 0 8px 8px 0;
  padding: 9px 13px;
  margin: 8px 0 0;
  font-weight: 550;
}

.concepto .explicacion {
  font-size: var(--t-menor);
  color: var(--muted);
  margin: 0 0 10px;
}

.nota-total {
  font-size: var(--t-minima);
  color: var(--muted);
  margin-top: 12px;
}


/* ============================================================================
   8 · EL TOTAL
   ----------------------------------------------------------------------------
   Es la cifra que sí se puede llevar. Tiene que ganar la página, porque hoy la
   pierde: el número más grande de la pantalla es un condicional que no suma.
   ============================================================================ */

.total {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
  padding: clamp(20px, 4vw, 30px);
  background: linear-gradient(150deg, var(--imss-deep), var(--imss));
  border-radius: var(--radius);
  color: #fff;
  box-shadow: 0 14px 40px -18px rgba(30,20,45,.55);
}

.total span {
  font-size: var(--t-menor);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: .85;
}

.total strong {
  font-size: var(--t-total);
  font-weight: 750;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}


/* ============================================================================
   9 · EL CUESTIONARIO
   ============================================================================ */

.calc-main { padding-block: clamp(28px, 5vw, 56px) 80px; }

/* La columna de preguntas es angosta a propósito: una pregunta a la vez, sin
   nada alrededor. La pantalla de resultado necesita más aire —lleva fórmulas,
   supuestos y una tabla de trazabilidad—, así que se ensancha sola. */
.pantalla { max-width: 46rem; margin-inline: auto; }
.pantalla:has(.bloque) { max-width: 62rem; }

.progreso {
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 28px;
}
.progreso-barra {
  background: linear-gradient(90deg, var(--imss), #12856d);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.paso {
  font-size: var(--t-minima);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.pantalla h2 { margin-block: 4px 24px; }

.ayuda {
  font-size: var(--t-menor);
  color: var(--muted);
  margin-bottom: 18px;
}

/* Cada opción es un objetivo táctil grande. Se contesta esto con el pulgar, de
   pie, probablemente enojado. */
.opcion {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 60px;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.opcion:hover {
  border-color: var(--imss);
  background: var(--mint);
}
.opcion:has(input:checked) {
  border-color: var(--imss);
  border-width: 2px;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(124, 77, 190, .12);
}
.opcion:has(input:focus-visible) {
  outline: 3px solid var(--imss);
  outline-offset: 2px;
}
.opcion input { width: 22px; height: 22px; accent-color: var(--imss); flex: none; }
/* El sitio fija el texto de la opción en 15px; en el teléfono se queda corto. */
.opcion > span { font-size: var(--t-cuerpo); line-height: 1.45; }
.opcion small { font-size: var(--t-minima); color: var(--muted); }

/* Los campos de fecha e importe: el teclado del teléfono tiene que abrirse bien
   y el texto no puede quedar en 13px. */
.entrada input,
.entrada select,
.pantalla input[type="text"],
.pantalla input[type="number"],
.pantalla input[type="date"] {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  font-family: var(--letra);
  font-size: 1.0625rem;   /* 17px: por debajo de 16px iOS hace zoom al enfocar */
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.entrada input:focus,
.pantalla input:focus {
  border-color: var(--imss);
  box-shadow: 0 0 0 3px rgba(124, 77, 190, .14);
  outline: none;
}

.entrada label {
  display: block;
  font-size: var(--t-menor);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 7px;
}

.error {
  border-left: 4px solid #a3341f;
  background: #fcf0ee;
  color: #7d2718;
  border-radius: 0 10px 10px 0;
  padding: 12px 15px;
  font-size: var(--t-menor);
  font-weight: 550;
  margin-bottom: 16px;
}

.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.nota-omitir { margin-top: 14px; }
.nota-omitir .boton { font-size: var(--t-menor); min-height: 42px; padding: 8px 16px; }

.promesa { border-radius: var(--radius); }
.aviso-pie { font-size: var(--t-minima); color: var(--muted); margin-top: 26px; }
.calc-version { font-size: var(--t-minima); }   /* sin opacidad: con .75 el gris quedaba en 3.2:1 */


/* ============================================================================
   10 · TRAZABILIDAD  ·  la segunda audiencia
   ----------------------------------------------------------------------------
   Aquí el registro se invierte: densidad y trazabilidad, no calma.
   ============================================================================ */

.bloque details {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.bloque details summary {
  padding: 13px 16px;
  margin: 0;
  border-radius: 10px;
  font-size: var(--t-menor);
  color: var(--imss);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
}
.bloque details summary::-webkit-details-marker { display: none; }
.bloque details summary::before {
  content: "›";
  font-size: 1.3em;
  line-height: 1;
  transition: transform .18s ease;
}
.bloque details[open] summary::before { transform: rotate(90deg); }
.bloque details[open] summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.bloque details > div { padding: 0 16px 16px; }

.traza {
  font-family: var(--letra);
  font-size: var(--t-minima);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.traza th {
  background: var(--mint);
  color: var(--imss-deep);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 9px 10px;
  position: sticky;
  top: 0;
}
.traza td { padding: 9px 10px; }
.traza tr:hover td { background: var(--paper); }
.traza small { color: var(--muted); }


/* ============================================================================
   11 · PIE
   ============================================================================ */

.sdl-ft { background: var(--imss-deep); color: #cfe0da; }
.sdl-ft a { color: #fff; text-decoration: none; }
.sdl-ft a:hover { text-decoration: underline; }
.sdl-ft-col strong,
.sdl-ft-pro strong {
  font-size: var(--t-minima);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b79ade;
}
.sdl-ft-nota { font-size: var(--t-minima); opacity: .8; }


/* ============================================================================
   12 · IMPRESIÓN
   ----------------------------------------------------------------------------
   Mucha gente va a imprimir esto para llevarlo a la Junta o a PROFEDET. En
   papel no hay color garantizado, así que el sello escrito y el filete cargan
   solos con la distinción.
   ============================================================================ */

@media print {
  body { background: #fff; font-size: 11pt; }
  .bloque { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .concepto { break-inside: avoid; border-left-width: 3pt; }
  .sello-certeza { border: 1pt solid #000; background: #fff !important; color: #000 !important; }
  .total { background: #fff; color: #000; border: 2pt solid #000; }
  .total strong { color: #000; }
  .redaccion { background: #fff; }
  .bloque details { border: 0; }
  .bloque details[open] summary { display: none; }
}


/* ============================================================================
   13 · LA PORTADA  ·  los diez dominios sobre el pliegue
   ----------------------------------------------------------------------------
   Lo más fuerte de este sitio es que resuelve diez problemas distintos, y hoy
   eso no se ve: medido antes de tocar nada, en escritorio la primera tarjeta
   caía en 993 px con el pliegue en 900, y en el teléfono en 1 481 px — casi dos
   pantallas de scroll. Cero de diez visibles en ambos casos.

   Aquí no se cambia ni una palabra: sólo quién habla primero. El hero cede
   espacio y las tarjetas suben. La persona que llega no sabe cómo se llama su
   problema en derecho; lo que necesita es reconocerlo en una lista.
   ============================================================================ */

/* --- El hero cede altura --------------------------------------------------- */

.hero {
  /* Venía de 76px arriba y 54 abajo. */
  padding: clamp(28px, 4vw, 44px) 0 clamp(20px, 3vw, 30px);
}

.hero-grid { gap: clamp(24px, 4vw, 44px); align-items: start; }

.hero h1 {
  /* El titular sigue mandando, pero deja de comerse la pantalla él solo. */
  font-size: clamp(34px, 4.6vw, 54px);
  margin: 0 0 16px;
}

.hero .lead {
  font-size: var(--t-cuerpo);
  max-width: 50ch;
  margin-bottom: 4px;
}

.hero .eyebrow { margin: 0 0 12px; }
.hero .actions { margin-top: 20px; }
.hero .trust { margin-top: 16px; gap: 8px 16px; }

/* El «Ejemplo de resultado» es una demostración, no el contenido. Se queda
   entero —no se esconde nada— pero deja de ocupar media pantalla. */
.hero .result { border-radius: var(--radius); }
.hero .result-head { padding: 13px 18px; }
.hero .result-body { padding: 16px 18px; }
.hero .result .concept { padding-block: 7px; font-size: var(--t-menor); }
.hero .result .amount-label { font-size: var(--t-minima); }
.hero .result .conditional { font-size: var(--t-minima); padding: 10px 12px; }

/* --- Las tarjetas suben ---------------------------------------------------- */

/* La sección de situaciones es la única que arranca pegada al hero. */
.hero + .section { padding-top: clamp(22px, 3vw, 34px); }

#situaciones > .wrap > h2 {
  font-size: clamp(24px, 2.9vw, 36px);
  margin: 0 0 18px;
}

.cards {
  /* Tarjetas más chicas y más juntas: el mensaje es la lista completa, no cada
     tarjeta por separado. */
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
}

.card {
  padding: 15px 17px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card .tag {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.card h3 {
  font-size: 1.0625rem;
  line-height: 1.22;
  margin: 2px 0 0;
}
.card p {
  font-size: var(--t-minima);
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
  max-width: none;
}
.card:hover { border-color: var(--imss); box-shadow: var(--shadow); }

/* --- Teléfono -------------------------------------------------------------- */

@media (max-width: 760px) {
  /* Dos columnas en vez de una. Diez situaciones en una rejilla se leen como
     lo que son —todo lo que este sitio resuelve— y en una sola columna se leen
     como una lista infinita que hay que recorrer. */
  .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 12px 13px; }
  .card h3 { font-size: 0.9375rem; }
  .card p { font-size: 0.8125rem; line-height: 1.4; }
  .card .tag { font-size: 0.625rem; }

  .hero { padding-top: 22px; }
  .hero h1 { font-size: clamp(30px, 8.2vw, 40px); }
  .hero .lead { font-size: var(--t-menor); }
}


/* ============================================================================
   14 · EL HERO
   ----------------------------------------------------------------------------
   Según el boceto: los hechos salen POR ENCIMA DE LA CABEZA, como lo que la
   persona trae rondando; el rostro se monta encima del collage; y la franja
   negra con la pregunta tapa la parte baja de la cara.

   No son tres cajas apiladas: los hechos, la persona y su pregunta ocupan el
   mismo espacio y se pisan. Es lo que pasa en su cabeza.

   Blanco y negro en todo: en este sitio el color significa certeza —verde
   confirmado, ocre condicional— y el hero es lo único que todavía no afirma
   nada. Pintarlo sería mentir con la paleta.

   La estructura la monta rediseno.js.
   ============================================================================ */

.cine { position: relative; background: #0b0b0b; overflow: hidden; }

/* --- La escena: recortes sueltos + la cabeza -------------------------------- */

.cine-escena {
  position: relative;
  height: clamp(300px, 34vw, 460px);
  background: #f2f1ee;
}

.cine-trozos { position: absolute; inset: 0; }
.cine-trozos[hidden] { display: none; }

/* Cada recorte, en su sitio y con su giro. Desordenados a mano: una rejilla
   regular mataría el gesto de collage — esto es un montaje sobre una mesa, no
   una galería. */
.trozo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  transform: rotate(var(--r));
  transform-origin: 50% 50%;
  filter: grayscale(1);
  /* El fondo de papel de cada recorte se funde con el de la escena. */
  mix-blend-mode: multiply;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45);
  transition: transform .32s cubic-bezier(.2, .7, .3, 1),
              box-shadow .32s ease,
              filter .32s ease;
  will-change: transform;
}

/* Al pasar el cursor el recorte SE ENDEREZA y se levanta, como cuando tomas
   una foto de la mesa para verla de cerca. El gesto va con el montaje: no es
   un efecto de interfaz, es la mano que recoge el papel. */
.trozo:hover {
  transform: rotate(0deg) scale(1.09) translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .55);
  filter: grayscale(1) contrast(1.12);
  z-index: 4;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .trozo { transition: none; }
  .trozo:hover { transform: rotate(var(--r)); }
}

/* --- La cabeza, recortada de su fondo -------------------------------------- */

.cine-rostro {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, 54%);
  height: 94%;
  z-index: 2;
}

.cine-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Anclada al pie: con `contain` la imagen deja el aire sobrante donde se la
     ancle, y anclándola arriba quedaba un hueco entre el mentón y la franja. */
  object-position: center bottom;
  filter: grayscale(1)
    /* El contorno blanco sigue la SILUETA de la cabeza, no una caja: ocho
       sombras duras alrededor del canal alfa. Es lo que convierte la foto en
       un recorte de tijera y no en una foto con marco. */
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(2px 2px 0 #fff) drop-shadow(-2px 2px 0 #fff)
    drop-shadow(2px -2px 0 #fff) drop-shadow(-2px -2px 0 #fff)
    drop-shadow(0 12px 22px rgba(0, 0, 0, .4));
}
.cine-img[hidden] { display: none; }

/* --- La franja negra, montada sobre el rostro ------------------------------ */

.cine-franja {
  position: relative;
  z-index: 2;
  /* La franja tiene que CORTAR la cara, no apoyarse debajo. Antes se quedaba
     corta y quedaba una franja de papel entre las dos. */
  /* La franja tiene que cortar POR DEBAJO de los ojos, nunca a través. Con
     -104px caía justo encima de la mirada y la partía. */
  margin-top: clamp(-72px, -5vw, -36px);
  background: #000;
  color: #fff;
  padding: clamp(26px, 3.6vw, 44px) clamp(20px, 5vw, 56px) clamp(22px, 3vw, 34px);
}
/* Centrado: la voz, la pregunta y los puntos comparten eje con la cabeza y el
   globo, que ya estaban centrados. Alineado a la izquierda, la franja era lo
   único del hero que tiraba a un lado. */
/* Dos columnas: la pregunta a la izquierda y su respuesta con el CTA a la
   derecha. Antes la respuesta vivía debajo del hero, desconectada de la
   pregunta que contesta; el ojo tenía que cruzar media pantalla para unirlas. */
.cine-franja-in {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  /* 1.3fr es lo que hace falta para que el titular entre en dos renglones
     sin encoger la letra; la derecha se queda en 368px, de sobra. */
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}

/* --- El globo de historieta ------------------------------------------------ */
/* La voz sale de un globo de cómic western, arriba y al costado de la cabeza,
   con la cola apuntándole. El globo es una imagen; el texto sigue siendo TEXTO
   dentro de él —los tres testimonios caben en el mismo globo, se seleccionan y
   los lee un lector de pantalla—. Meter la frase en la imagen habría costado
   tres generaciones y el acento de «papá» a la suerte. */

.cine-globo {
  position: absolute;
  z-index: 3;
  /* Pegado a la cabeza y con la cola apuntándole: el globo sale de ella, no
     flota en la esquina. */
  /* Arriba y encima de la cabeza. Puede pisarla porque ahora lleva relleno
     sólido: antes iba en multiply a secas y sobre el pelo oscuro el blanco
     desaparecía, llevándose el texto con él. */
  /* Centrado sobre la cabeza, no a un lado: descentrado dejaba un hueco de
     papel justo encima de la cara, y ese hueco es lo que el globo tiene que
     ocupar. La cola cae sobre él. */
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: min(516px, 40%);
  aspect-ratio: 1280 / 832;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .2));
}

/* El relleno: una elipse opaca dentro del óvalo, para que el texto tenga fondo
   propio y no dependa de lo que haya debajo. */
.cine-globo::before {
  content: "";
  position: absolute;
  inset: 7% 17% 31% 6%;
  background: #f7f6f3;
  border-radius: 50%;
}

/* El trazo del globo, ya recortado de su fondo. Se acabaron los modos de
   fusión: `position:absolute` con z-index crea contexto de apilamiento por sí
   solo, así que el multiply nunca iba a fundirse con la página y dejaba un
   rectángulo blanco alrededor del óvalo. Un PNG con transparencia no depende
   de nada. */
.cine-globo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/diseno/assets/globo.webp) center / 100% 100% no-repeat;
}

/* El cursor de la máquina de escribir: va pegado a la última letra escrita y
   parpadea. Vive en el span y no en la cita, porque la cita es un contenedor
   flex y ahí el ::after se convertiría en otro ítem, despegándose del texto. */
.cine-globo .voz-txt::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.02em;
  margin-left: 0.14em;
  background: var(--imss);
  vertical-align: -0.16em;
  animation: cine-cursor 1.05s steps(1) infinite;
}
@keyframes cine-cursor { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  .cine-globo .voz-txt::after { animation: none; opacity: 1; }
}

.cine-globo .caso-voz {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  /* Dentro del óvalo, no en la caja: el globo es redondo y el texto tiene que
     caber en su panza. */
  /* 56% de ancho, y desplazado a la izquierda del centro de la caja: el óvalo
     no está centrado dentro de su propio rectángulo —la cola le roba sitio por
     la derecha—, así que centrar el texto en la caja lo sacaba del trazo. */
  width: 56%;
  margin-right: 9%;
  /* Altura reservada para la frase completa: sin esto el globo se encoge y se
     estira mientras se teclea, y el óvalo entero baila. */
  min-height: calc(1.38em * 3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  font-family: var(--letra-cifras);
  font-size: clamp(0.75rem, 0.53rem + 0.6vw, 0.975rem);
  line-height: 1.38;
  font-weight: 600;
  color: #0b0b0b;
  text-wrap: pretty;
  /* Sube un poco: la cola se come la parte baja del óvalo. */
  transform: translateY(-11%);
}
.cine-globo .caso-voz[hidden] { display: none; }

/* --- El titular, impreso en papel de periódico ----------------------------- */
/* La textura rellena las letras en vez de ir de fondo: el titular queda
   impreso, con su trama de puntos y su grano de papel. Y sigue siendo TEXTO
   —seleccionable, leíble por un lector de pantalla, y reflowea en el
   teléfono—, que es lo que se pierde si el titular se genera como imagen. */

.cine-pregunta h1 {
  margin: 0;
  /* Serif de titular, sin descargar nada: en Apple cae en Didot o Bodoni —altísimo
     contraste, muy de cabecera de periódico—, en Windows en Bodoni MT, y el
     respaldo es Georgia, que está en todas partes. La dramatización la pone la
     letra, no una textura de 400 KB. */
  font-family: Didot, "Bodoni 72", "Bodoni MT", "Playfair Display",
               Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 1rem + 3.2vw, 3.75rem);
  line-height: 1.04;
  /* La monoespaciada llevaba -0.05em; en una serif de titular eso pega las
     letras. Un pelo negativo basta para que no se desarme. */
  letter-spacing: -0.012em;
  font-weight: 700;
  color: #fff;
  /* El <br> del generador se sustituye por un espacio en rediseno.js, así que
     el titular fluye. 22ch es lo que necesita para caer en dos renglones: a
     18ch se quedaba en tres por más que se ensanchara la franja. */
  /* Sin versalitas. Con la serif, la caja alta ocupa un 17% más y el titular se
     iba a tres renglones: para meterlo en dos habría que bajar de 57 a 44px, o
     robarle 120px a la respuesta de la derecha. En caja baja entra en dos al
     tamaño completo y sin tocar la rejilla — y en una Didone se lee mejor. */
  max-width: 26ch;
}
.cine-pregunta h1 span { color: #c4a3f0; }

/* --- Los puntos ------------------------------------------------------------ */

.casos-tabs {
  display: flex;
  gap: 8px;
  margin-top: clamp(18px, 2.4vw, 26px);
  grid-column: 1 / -1;
}

.caso-tab {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: background-color .2s ease, width .25s ease;
  position: relative;
}
.caso-tab::after { content: ""; position: absolute; inset: -20px -4px; }
.caso-tab[aria-selected="true"] { background: #c4a3f0; width: 46px; }
.caso-tab:hover { background: rgba(255, 255, 255, .55); }
.caso-tab:focus-visible { outline: 2px solid #c4a3f0; outline-offset: 4px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- La respuesta, ya fuera del hero --------------------------------------- */

.casos-respuesta { display: grid; grid-template-areas: "cuerpo"; }

.caso-cuerpo {
  grid-area: cuerpo;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}
.caso-cuerpo[hidden] { visibility: hidden; opacity: 0; pointer-events: none; }

.cine-respuesta { text-align: left; }
.cine-respuesta .caso-cuerpo { gap: 16px; }

.caso-responde {
  margin: 0;
  font-size: var(--t-cuerpo);
  color: #ded7e6;
  line-height: 1.55;
  max-width: 40ch;
}
.caso-responde span {
  display: block;
  font-family: var(--letra-cifras);
  font-size: var(--t-minima);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4a3f0;
  margin-bottom: 6px;
}

.hero { background: var(--paper); padding-top: 0; }
.hero .wrap.hero-grid { align-items: start; }
.cine + .wrap.hero-grid { padding-top: clamp(20px, 3vw, 30px); }

@media (max-width: 760px) {
  .cine-escena { height: clamp(300px, 76vw, 380px); }
  .cine-globo { width: 80%; left: 50%; transform: translateX(-50%); top: 0; }
  /* La frase entra en tres líneas dentro del óvalo: con la caja y el cuerpo de
     escritorio se desbordaba por arriba y por los lados. */
  .cine-globo .caso-voz { width: 74%; margin-right: 6%; font-size: 0.625rem; }
  .cine-rostro { width: min(215px, 56%); }
  /* Sin cursor no hay hover: en el teléfono los recortes se quedan quietos. */
  .trozo { box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .4); }
  .cine-franja { margin-top: -20px; padding: 20px 20px 18px; }
  .cine-pregunta h1 { max-width: none; }
  .caso-responde { max-width: none; }
  .caso-cta { width: 100%; }
}

/* ============================================================================
   15 · JERARQUÍA DE ACCIÓN EN EL HERO
   ----------------------------------------------------------------------------
   Con el CTA del caso, los dos botones de abajo pasaban a ser un segundo
   primario: tres botones verdes en pantalla y ninguno mandando. Se degradan a
   enlaces. La acción que manda es la del caso que se está leyendo.
   ============================================================================ */

.hero .actions { margin-top: 22px; gap: 18px; }
.hero .actions .boton,
.hero .actions .button {
  min-height: 0;
  padding: 4px 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--imss);
  font-size: var(--t-menor);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.hero .actions .boton:hover,
.hero .actions .button:hover {
  background: none;
  color: var(--imss-dark);
  transform: none;
  box-shadow: none;
}

.caso-cta.boton.principal {
  min-height: 48px;
  padding: 12px 22px;
  background: var(--imss);
  border: 1px solid var(--imss);
  color: #fff;
  text-decoration: none;
  font-size: var(--t-menor);
}
.caso-cta.boton.principal:hover {
  background: var(--imss-dark);
  border-color: var(--imss-dark);
  text-decoration: none;
}

.hero .trust { margin-top: 14px; font-size: var(--t-minima); gap: 6px 14px; }
.hero .eyebrow { margin: 0 0 12px; }

@media (max-width: 760px) {
  .hero .actions { margin-top: 20px; }
  .hero .trust { margin-top: 10px; }
}


/* ============================================================================
   16 · LA PORTADA, SEGUNDA PASADA
   ============================================================================ */

/* --- La columna derecha de la franja, centrada ----------------------------- */

.cine-respuesta { text-align: center; }
.cine-respuesta .caso-cuerpo { align-items: center; }
.caso-responde { margin-inline: auto; }
.cine-respuesta .caso-cta { min-width: 15rem; }

/* --- La materia, en color ---------------------------------------------------
   Cada color es el que esa institución ya tiene puesto en la cabeza de la
   gente: el azul de las bolsas de trabajo, el vino de gobierno, el verde del
   IMSS, el rojo del Infonavit. No hay que aprender nada nuevo.
   ---------------------------------------------------------------------------- */

.card { border-left: 4px solid var(--line); }
.card[data-materia="trabajo"]   { border-left-color: #0a66c2; }
.card[data-materia="familia"]   { border-left-color: #8c2846; }
.card[data-materia="seguridad"] { border-left-color: #006455; }
.card[data-materia="vivienda"]  { border-left-color: #d0211c; }
.card[data-materia="deudas"]    { border-left-color: #4a4a52; }

.card[data-materia="trabajo"]:hover   { border-color: #0a66c2; }
.card[data-materia="familia"]:hover   { border-color: #8c2846; }
.card[data-materia="seguridad"]:hover { border-color: #006455; }
.card[data-materia="vivienda"]:hover  { border-color: #d0211c; }
.card[data-materia="deudas"]:hover    { border-color: #4a4a52; }

/* --- Los pasos: redondeados, sólidos y de la misma altura ------------------- */

.steps, .journey-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.step {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--mint);
  border: 0;
  border-radius: 18px;
  padding: 22px 22px 20px;
}
.step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--imss);
  color: #fff;
  font-family: var(--letra-cifras);
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.step h2 {
  font-size: var(--t-h3);
  line-height: 1.2;
  margin: 0 0 8px;
}
.step p { font-size: var(--t-menor); color: var(--muted); margin: 0; max-width: none; }
/* La nota va abajo del todo en todas, aunque el texto de arriba mida distinto:
   sin esto las líneas quedaban a alturas diferentes y el bloque se veía torcido. */
.step small {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, .09);
  font-size: var(--t-minima);
  color: var(--muted);
}

/* --- El ejemplo de resultado ------------------------------------------------ */

.result { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.ej-cab {
  background: var(--imss-deep);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ej-cab strong { font-size: var(--t-menor); letter-spacing: -0.01em; }
.ej-cab span {
  font-family: var(--letra-cifras);
  font-size: var(--t-minima);
  color: #c4a3f0;
}

.ej-cuerpo { padding: 6px 20px 18px; }

.ej-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.ej-que { display: flex; flex-direction: column; gap: 2px; }
.ej-que b { font-size: var(--t-menor); font-weight: 600; }
.ej-que em {
  font-style: normal;
  font-family: var(--letra-cifras);
  font-size: var(--t-minima);
  color: var(--muted);
}
.ej-cuanto {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Mismo criterio que en la pantalla de resultado: verde lo que se cobra sin
   pelear, ocre lo que depende de acreditar. Aquí en pequeño, pero igual. */
.ej-fila[data-suma="si"] .ej-cuanto { color: var(--segura-tinta); }
.ej-fila[data-suma="no"] .ej-cuanto { color: var(--condicional-tinta); }
.ej-fila[data-suma="no"] .ej-que b::after {
  content: " · sólo si se acredita";
  font-weight: 500;
  color: var(--condicional-tinta);
  font-size: var(--t-minima);
}

.ej-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 15px 18px;
  border-radius: 12px;
  background: var(--segura-fondo);
}
.ej-total span { font-size: var(--t-minima); font-weight: 600; color: var(--segura-tinta); }
.ej-total strong {
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--segura-tinta);
}

.ej-nota { font-size: var(--t-minima); color: var(--muted); margin: 12px 0 0; }

@media (max-width: 760px) {
  .cine-respuesta .caso-cta { width: 100%; min-width: 0; }
  .ej-fila { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* --- La frase que orienta, en grande y no en versalitas --------------------- */
/* Era un eyebrow de 12px en mayúsculas: la frase que le dice a la persona qué
   hace este sitio no puede ir del tamaño de un pie de página. */
.hero .wrap.hero-grid .eyebrow {
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-transform: none;
  font-weight: 650;
  color: var(--ink);
  max-width: 16ch;
  margin: 0 0 22px;
}

/* Los cinco pasos caben en una fila; en dos, el último quedaba suelto y de otra
   altura, y el bloque se veía torcido. */
.steps, .journey-steps { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 1100px) {
  .steps, .journey-steps { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
}


/* ============================================================================
   17 · EL EJEMPLO, LA DIFERENCIA Y EL CIERRE
   ============================================================================ */

/* --- El ejemplo, con el arte al lado ---------------------------------------
   La cifra sola es un dato; al lado de alguien que acaba de leerla y respira,
   es una promesa. Por eso el arte va aquí y no en el hero: éste es el momento
   en que la persona entiende qué gana. */

.hero-grid:has(.result) {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.hero-grid > div:first-child { position: relative; }

.hero-grid > div:first-child::after {
  content: "";
  display: block;
  margin-top: 26px;
  width: 100%;
  aspect-ratio: 1328 / 1760;
  max-height: 380px;
  background: url(/diseno/assets/alivio.webp) center 12% / cover no-repeat;
  border-radius: var(--radius);
  filter: grayscale(1);
  box-shadow: var(--shadow);
}

/* --- «Por qué es diferente» ------------------------------------------------- */

.comparison { display: block; }

.dif-intro p {
  font-size: var(--t-cuerpo);
  color: var(--ink);
  max-width: 60ch;
  margin: 0 0 26px;
}

.dif-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.dif-lista li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: none;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--mint);
}
.dif-lista b {
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.dif-lista span { font-size: var(--t-menor); color: var(--muted); line-height: 1.5; }

/* --- El cierre --------------------------------------------------------------
   No promete tiempos: el puente al abogado es manual y depende del volumen.
   Prometer «te contactamos en 24 horas» sería prometer lo que no controlamos. */

.cierre {
  max-width: var(--max);
  margin: 0 auto clamp(24px, 4vw, 40px);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 44px);
  border-radius: var(--radius);
  /* Negro, el mismo #000 de la franja del hero: la página abre y cierra igual. */
  background: #000;
  color: #fff;
  text-align: center;
}
.cierre h2 {
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2rem);
  margin: 0 0 10px;
  color: #fff;
}
.cierre p {
  font-size: var(--t-cuerpo);
  color: #ddd2f0;
  margin: 0 auto;
  max-width: 52ch;
}

@media (max-width: 860px) {
  .hero-grid:has(.result) { grid-template-columns: 1fr; }
  .hero-grid > div:first-child::after { max-height: 260px; }
}


/* ============================================================================
   18 · CORRECCIONES
   ============================================================================ */

/* --- El arte estaba descuadrado -------------------------------------------- */
/* Iba con `background-position: center 12%`, que le cortaba la cara. La persona
   es el sujeto: se encuadra por ella, no por el centro del archivo. */
.hero-grid > div:first-child::after {
  background-position: 62% 30%;
  aspect-ratio: 4 / 3;
  max-height: 420px;
}

/* --- El CTA de esta zona vuelve a ser botón --------------------------------- */
/* Lo degradé a enlace cuando competía con el CTA del caso. Aquí abajo ya no
   compite con nada: es la única acción y tiene que verse. */
.hero .wrap.hero-grid .actions .boton,
.hero .wrap.hero-grid .actions .button {
  min-height: 52px;
  padding: 14px 28px;
  background: var(--imss);
  color: #fff;
  border: 1px solid var(--imss);
  border-radius: 12px;
  font-size: var(--t-menor);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(30, 20, 45, .18);
}
.hero .wrap.hero-grid .actions .boton:hover,
.hero .wrap.hero-grid .actions .button:hover {
  background: var(--imss-dark);
  border-color: var(--imss-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* --- Las tarjetas de situación, en color sólido ----------------------------- */
/* Un filete de 4 px no es «color sólido». Así la materia se lee de un vistazo. */
.card {
  border: 1px solid transparent;
  border-left: 1px solid transparent;
  color: #fff;
  transition: transform .15s ease, box-shadow .18s ease;
}
.card h3, .card p { color: #fff; }
.card p { opacity: .88; }

.card[data-materia="trabajo"]   { background: #0a66c2; }
.card[data-materia="familia"]   { background: #8c2846; }
.card[data-materia="seguridad"] { background: #006455; }
.card[data-materia="vivienda"]  { background: #c01f1a; }
.card[data-materia="deudas"]    { background: #3f3f47; }

/* Los mismos colores sin depender del JS.
   `data-materia` lo pone `rediseno.js` leyendo la etiqueta de cada tarjeta. Pero
   el generador ya emite un `href` distinto por situación, y eso CSS sí lo puede
   seleccionar. Con estas diez reglas el color viaja aunque el JS nunca cargue:
   basta con que la hoja de estilos llegue. Se declaran DESPUÉS para que, cuando
   el JS sí corra, ambos caminos coincidan en el mismo color. */
.card[href^="/finiquito/"],
.card[href^="/prestaciones-impagas/"]  { background: #0a66c2; }   /* trabajo  */
.card[href^="/divorcio/"],
.card[href^="/pension-alimenticia/"],
.card[href^="/sucesion/"]              { background: #8c2846; }   /* familia  */
.card[href^="/pension-imss/"],
.card[href^="/alta-imss/"],
.card[href^="/incapacidad-imss/"]      { background: #006455; }   /* seguridad social */
.card[href^="/infonavit/"]             { background: #c01f1a; }   /* vivienda */
.card[href^="/deudas-cobranza/"]       { background: #3f3f47; }   /* deudas   */

/* La etiqueta de materia sobra cuando el color ya la dice. Sólo en las tarjetas
   que enlazan a una situación: /metodologia/, /como-se-prueba/ y /profesionales/
   usan la misma clase para tarjetas SIN enlace, que no reciben color y donde la
   etiqueta es la única pista de qué son. */
.card[href] .tag { display: none; }

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -16px rgba(30, 20, 45, .5);
  border-color: transparent;
}

/* El sitio pone un guion antes de cada `li` de esta zona; aquí sobra. */
.dif-lista li::before { content: none; }


/* ── 19 · Lo que el rediseño puede hacer sin una sola línea de JS ────────────
   El generador ya carga `/css/sdl2.css` en las 49 páginas. Esta sección existe
   para que lo esencial viaje por ese gancho, sin tocar la plantilla y sin que
   nadie tenga que añadir un `<script>`.

   Ojo con el alcance: ocultar no es quitar. El texto sigue en el HTML y una
   promesa de privacidad que no se cumple sigue escrita aunque no se vea. Esto
   compra tiempo; el arreglo de verdad es que la cadena salga de la plantilla
   (está en traspaso/copys.mjs). */

/* Dos acciones compitiendo donde debe haber una. «Leer las guías» sigue
   disponible en el menú de arriba. */
.hero .actions a[href="/biblioteca/"] { display: none; }

/* Prometía «Sin registro» y «Datos en tu dispositivo». Con el expediente de
   pago y el puente por WhatsApp las dos dejaron de ser ciertas. */
.hero .trust { display: none; }


/* ── 20 · LAS GUÍAS ──────────────────────────────────────────────────────────
   Hasta aquí el rediseño era casi todo portada: 119 reglas para la portada y 5
   para las guías. Las veinte guías llevaban el maquetado original con la paleta
   nueva encima, que es exactamente como se veían.

   Una guía es un texto largo que alguien lee con un problema encima, casi
   siempre desde el teléfono. Todo lo de abajo sirve a eso: medida de lectura
   corta, un solo hilo, y las fuentes a un lado sin robar protagonismo. */

/* --- La cabecera: la pregunta primero -------------------------------------- */
.guide-detail-hero {
  background: linear-gradient(168deg, var(--mint), var(--paper) 62%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(28px, 5vw, 56px) clamp(24px, 4vw, 44px);
}
.guide-detail-hero h1 {
  max-width: 20ch;          /* el título es la pregunta: cabe en dos renglones */
  margin-block: 14px 12px;
}
.guide-detail-hero .lead {
  /* La respuesta va en la primera línea, así que se lee más grande que el resto
     del cuerpo: es lo único que mucha gente va a leer. */
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink);
  max-width: 56ch;
  margin-bottom: 22px;
}
.guide-detail-hero .actions { gap: 10px; flex-wrap: wrap; }

.guide-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: var(--t-minima);
  color: var(--muted);
}
.guide-breadcrumb a { color: var(--muted); text-decoration: none; }
.guide-breadcrumb a:hover { color: var(--imss-dark); text-decoration: underline; }
.guide-breadcrumb span { opacity: .45; }
.guide-breadcrumb b { color: var(--ink); font-weight: 600; }

/* --- El cuerpo: texto a la izquierda, fuentes a la derecha ------------------ */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 300px);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}

.guide-article > .guide-topic + .guide-topic {
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: clamp(24px, 3.2vw, 36px);
  border-top: 1px solid var(--line);
}
.guide-topic h2 {
  font-size: var(--t-h3);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
/* La medida corta es lo que más ayuda a leer, y no cuesta nada. */
.guide-topic p, .guide-article p, .guide-article li { max-width: 62ch; }
.guide-topic p + p { margin-top: 0.85em; }

/* --- Las fuentes: la caja que distingue a este producto --------------------- */
/* Cada afirmación cita su artículo. Merece verse como una ficha, no como una
   nota al pie. En escritorio acompaña al texto mientras se baja. */
.article-side { position: sticky; top: calc(var(--alto-header) + 18px); }

.sidebox {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--imss);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
}
.sidebox .eyebrow { margin-bottom: 10px; }
.sidebox ul { list-style: none; margin: 0 0 14px; padding: 0; }
.sidebox li {
  /* Monoespaciada: son referencias, se comparan con la vista y se copian. */
  font-family: var(--letra-cifras);
  font-size: var(--t-minima);
  line-height: 1.45;
  color: var(--ink);
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.sidebox li:last-of-type { border-bottom: 0; }
.sidebox li::before { content: none; }
.sidebox p {
  font-size: var(--t-minima);
  color: var(--muted);
  max-width: none;
  margin-bottom: 10px;
}
.sidebox a { font-size: var(--t-minima); font-weight: 600; }

/* --- Las advertencias ------------------------------------------------------ */
/* «Criterio no cerrado» y «Versión beta» son las dos veces que la guía admite un
   límite. Van en el ámbar de lo condicional, el mismo que usan las cifras que
   no suman: es el mismo mensaje, y conviene que se reconozca. */
.article-note {
  display: grid;
  gap: 4px;
  max-width: 72ch;
  background: var(--condicional-fondo);
  border-left: 3px solid var(--condicional-filete);
  border-radius: 0 10px 10px 0;
  padding: 15px 18px;
}
.article-note strong:first-child {
  font-size: var(--t-minima);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--condicional-tinta);
}
.article-note span { font-size: var(--t-menor); max-width: none; }

/* --- Qué hace el sistema con la regla --------------------------------------- */
.guide-limit .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 28px);
}
.guide-system-flow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px;
}
.guide-system-flow span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: var(--t-minima);
  font-weight: 600;
}
.guide-system-flow i { color: var(--imss); font-style: normal; }

/* --- El siguiente paso ------------------------------------------------------ */
.guide-next { background: var(--imss-deep); color: #fff; padding-block: clamp(26px, 4vw, 44px); }
.guide-next .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
}
.guide-next small {
  text-transform: uppercase; letter-spacing: .09em;
  font-size: var(--t-minima); opacity: .72;
}
.guide-next h2 { color: #fff; margin-top: 6px; max-width: 24ch; }
.guide-next .button {
  background: #fff; color: var(--imss-deep); border-color: #fff;
}
.guide-next .button:hover { background: var(--mint); color: var(--imss-deep); }

/* --- La firma --------------------------------------------------------------- */
.notice { font-size: var(--t-minima); color: var(--muted); }

/* --- En el teléfono --------------------------------------------------------- */
@media (max-width: 860px) {
  /* Las fuentes bajan: primero se lee, después se comprueba. */
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-side { position: static; }
  .sidebox { margin-top: 4px; }
}

/* --- El ejemplo ------------------------------------------------------------- */
/* Ninguna de las veinte guías tenía uno. Es lo que más falta hacía: una regla en
   abstracto no se puede comprobar contra la propia vida. Va destacado porque es
   donde mucha gente entiende de verdad, y porque debe encontrarse ojeando. */
.guide-topic.ejemplo {
  background: var(--mint);
  border: 1px solid #e3d7f5;
  border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 26px);
}
.guide-article > .guide-topic.ejemplo + .guide-topic,
.guide-article > .guide-topic + .guide-topic.ejemplo {
  border-top: 0;          /* la caja ya separa; el filete sobraría */
  padding-top: 0;
}
.guide-topic.ejemplo h2 {
  font-size: var(--t-menor);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--imss-deep);
  margin-bottom: 12px;
}
.guide-topic.ejemplo p { max-width: 58ch; }
.guide-topic.ejemplo p:last-child {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #cdb8ea;
  font-weight: 600;       /* el remate: qué enseña el ejemplo */
}

/* La línea de fuentes al pie de cada bloque: presente, sin estorbar. */
.fuente-linea {
  margin-top: 10px;
  font-size: var(--t-minima);
  color: var(--muted);
  font-style: italic;
}


/* ── 21 · LAS PÁGINAS DE SECCIÓN ─────────────────────────────────────────────
   Dieciséis páginas que estaban al 49% sin diseñar, y que son el camino
   principal: portada → tarjeta → sección → guía. Son de tres tipos.

   1 · Índices     /biblioteca/ y las diez situaciones: listas de guías.
   2 · Explicación /metodologia/, /como-se-prueba/, /fuentes/: cómo funciona.
   3 · Legales     /privacidad/, /aviso-legal/: texto corrido.                */

/* --- La cabecera común ----------------------------------------------------- */
.page-hero, .legal-hero {
  background: linear-gradient(168deg, var(--mint), var(--paper) 62%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(30px, 5vw, 60px) clamp(26px, 4vw, 48px);
}
.page-hero h1, .legal-hero h1 { max-width: 18ch; margin-block: 10px 12px; }
.page-hero h1 span, .legal-hero h1 span { color: var(--imss-deep); }
.page-hero .lead, .legal-hero .lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  max-width: 58ch;
}

/* --- El índice de guías ---------------------------------------------------- */
.library-heading {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px 20px;
  margin-bottom: 20px;
}
.library-heading h2 { margin-top: 4px; }
.library-heading p { margin: 0; font-size: var(--t-menor); }

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

/* Cada tarjeta es una pregunta que alguien podría estar haciéndose. El número
   ordena la lectura sin jerarquizar: no hay guías más importantes que otras. */
.guide-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num cuerpo" ".   pie";
  gap: 4px 14px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease;
}
.guide-card:hover {
  transform: translateY(-2px);
  border-color: #d5c6ee;
  box-shadow: 0 14px 30px -18px rgba(30, 20, 45, .45);
}
.guide-card > .guide-number { grid-area: num; }
.guide-card > div { grid-area: cuerpo; }
.guide-card > em { grid-area: pie; }

.guide-number {
  font-family: var(--letra-cifras);
  font-size: var(--t-minima);
  font-weight: 700;
  color: var(--imss);
  background: var(--mint);
  border-radius: 8px;
  padding: 5px 8px;
  line-height: 1;
}
.guide-card small {
  text-transform: uppercase; letter-spacing: .09em;
  font-size: 11px; color: var(--muted);
}
.guide-card h3 { font-size: var(--t-menor); margin: 5px 0 6px; }
.guide-card p { font-size: var(--t-minima); color: var(--muted); margin: 0; max-width: 46ch; }
/* El <b> es el gancho: qué te llevas si la lees. */
.guide-card b {
  display: block; margin-top: 8px;
  font-size: var(--t-minima); color: var(--ink); font-weight: 600;
}
.guide-card em {
  margin-top: 10px;
  font-style: normal; font-weight: 600;
  font-size: var(--t-minima); color: var(--imss);
}
.guide-card:hover em { color: var(--imss-dark); }

/* --- Los pasos numerados de «cómo funciona» -------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 14px;
  counter-reset: paso;
}
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--imss);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
}
/* El sitio pinta este <span> como un círculo violeta de 30px. Mi regla le ponía
   el número también en violeta: violeta sobre violeta, contraste 1:1, el número
   invisible y sólo se veía el punto. Va en blanco y centrado dentro. */
.step > span {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  font-family: var(--letra-cifras);
  font-size: var(--t-minima);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin-bottom: 10px;
}
.step h2 { font-size: var(--t-h3); margin-bottom: 6px; }
.step p { font-size: var(--t-menor); color: var(--muted); margin: 0; }

/* --- El ejemplo de resultado de cada situación ------------------------------ */
/* No es el de la portada: cada una trae el suyo, y por eso no se reescribe.
   /divorcio/ enseña la vía, /pension-imss/ la ley que aplica. Sólo se ordena. */
.result {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.result-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
/* El sitio la pinta en blanco porque su cabecera era oscura. Con el fondo claro
   quedaba en 1.07:1 —invisible—. El mínimo es 4.5:1. */
.result-head strong { font-size: var(--t-menor); color: var(--ink); }
.result .badge {
  background: var(--mint); color: var(--imss-deep);
  border-radius: 999px; padding: 4px 10px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.result-body { padding: 6px 18px 16px; }
.amount-label {
  font-size: var(--t-minima); color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 12px 0 8px;
}
.result .concept {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-menor);
}
.result .concept:last-child { border-bottom: 0; }
.result .concept small { color: var(--muted); font-weight: 400; }
.result .concept b {
  font-family: var(--letra-cifras);
  font-size: var(--t-minima);
  white-space: nowrap;
}

/* --- Las páginas legales: texto corrido ------------------------------------ */
.legal-hero + .section p,
.legal-hero + .section li { max-width: 66ch; }


/* --- El arte de cierre de la portada, con el CTA dentro --------------------- */
/* La foto es vertical (679×900) y estaba metida en una caja apaisada de 538×380,
   así que `cover` se comía a la mujer y dejaba fuera los retratos de la pared:
   justo el arte que hace que la imagen signifique algo.
   Ahora la columna se estira hasta igualar la ficha de la derecha, con lo que la
   caja recupera proporción vertical y las dos columnas cierran a la misma
   altura. El recorte y la simetría eran el mismo problema. */
/* La línea 1214 dice `.hero .wrap.hero-grid { align-items: start }` y con (0,3,0)
   le ganaba a `.hero-grid:has(.result)`, que es (0,2,0). Se iguala el selector
   en vez de subir el peso a lo bruto. */
.hero .wrap.hero-grid:has(.result) { align-items: stretch; }

.hero .wrap.hero-grid:has(.result) > div:first-child {
  display: flex;
  flex-direction: column;
}

.hero-arte {
  position: relative;
  flex: 1;
  min-height: 320px;
  margin-top: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  /* El CTA, abajo y centrado. */
  display: grid;
  align-content: end;
  justify-items: center;
  padding-bottom: clamp(18px, 2.6vw, 28px);
}

/* La imagen va en su propia capa. Si el filtro se pone en el contenedor, se
   hereda a todo lo de dentro y el botón violeta sale gris. */
.hero-arte::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  filter: grayscale(1);
}

/* Un degradado que sube desde abajo: separa el botón del fondo sin apagar la
   parte de la foto que importa. */
.hero-arte::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(18, 12, 28, .68), rgba(18, 12, 28, .12) 46%, transparent 68%);
}

.hero-arte .actions { position: relative; z-index: 2; margin: 0; }

/* Ya no hace falta el pseudo-elemento del bloque: la imagen es un elemento. */
.hero-grid > div:first-child:has(.hero-arte)::after { content: none; }


/* --- El descargo, al pie --------------------------------------------------- */
/* Baja desde el final del <main>. Ahí cerraba la página con un bloque de letra
   legal justo donde hay que decidir si empezar. No se le quita una coma: es el
   descargo obligatorio. Sólo cambia de sitio y de peso visual. */
.descargo-pie {
  /* Mismo ancho y misma alineación que .sdl-ft-bar, que es lo que va justo
     debajo: si no, las dos líneas de letra pequeña arrancan en sitios distintos. */
  width: min(1180px, calc(100% - 24px));
  max-width: none;
  margin: 0 auto;
  padding: 0 0 12px;
  /* Sin rejilla, sin filete y sin sangría: es letra pequeña como la del pie, no
     un bloque aparte. */
  display: block;
  /* Del mismo cuerpo y del mismo gris que la barra del copyright que va debajo:
     son dos líneas de letra pequeña seguidas, no dos bloques distintos. */
  font-size: 11.5px;
  line-height: 1.5;
  color: #8e9a98;
  background: none;
  border: 0;
  border-radius: 0;
}
.descargo-pie strong { font-weight: 600; }
.descargo-pie a { color: inherit; text-decoration: underline; }

/* La sección propia del cierre. Va al final del <main>, antes del pie.
   Toda la sección en negro, de borde a borde: sin tarjeta flotando sobre papel. */
.cierre-seccion {
  background: #000;
  padding-block: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.cierre {
  border-radius: 0;
  margin-bottom: 0;
  padding-block: 0;
  box-shadow: none;
}


/* --- La franja del titular, en el teléfono --------------------------------- */
/* Se quedaba en dos columnas: el titular apretado a la izquierda, la respuesta
   en una tira estrecha a la derecha y un hueco negro entre las dos. En un
   teléfono no caben dos columnas de texto, y es el aparato desde el que entra
   casi todo el mundo aquí. */
@media (max-width: 760px) {
  .cine-franja-in {
    grid-template-columns: 1fr;
    gap: clamp(18px, 5vw, 26px);
    text-align: center;
  }
  .cine-pregunta h1 { max-width: none; margin-inline: auto; }
  .cine-respuesta { text-align: center; }
  .cine-respuesta p { margin-inline: auto; }
  /* Los puntos del carrusel se quedaban pegados a la izquierda mientras el resto
     de la franja iba centrado. */
  .casos-tabs { justify-content: center; }
}


/* ── 22 · LAS DOS IMÁGENES DE LA PORTADA ─────────────────────────────────────
   «Por qué es diferente» y «Confianza verificable» tenían texto a la izquierda
   y hueco (o un diagrama de métricas) a la derecha. En el hueco va una foto,
   del mismo registro que el resto: blanco y negro, casa de CDMX, gente digna.
   Mientras no exista el archivo, el hueco lleva un fondo neutro y no rompe. */
.comparison {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: stretch;
}
.dif-texto { min-width: 0; }
.dif-arte, .proof-arte {
  min-height: 320px;
  border-radius: var(--radius);
  background: var(--mint) center / cover no-repeat;
  box-shadow: var(--shadow);
  filter: grayscale(1);
}
/* «No reemplazamos a un abogado. Te decimos qué hacer y cómo pedírselo»: ella
   entrega su caso ya ordenado; del abogado sólo se ve la mano que lo recibe. */
/* Con (0,2,0): el sitio estila `.comparison > div` como tarjeta blanca, y ese
   `background: #fff` —(0,1,1)— le ganaba a `.dif-arte` y borraba la imagen. */
.comparison > .dif-arte { background: var(--mint); padding: 0; border: 0; }
/* «Cada conclusión se apoya en artículos, leyes…»: él sigue con el dedo una
   línea de su propio expediente, con el código al lado. */
.proof-arte { background: rgba(255, 255, 255, .08); }

@media (max-width: 860px) {
  .comparison { grid-template-columns: minmax(0, 1fr); }
  .dif-arte, .proof-arte { min-height: 240px; }
}


/* ── 23 · LA MARCA ───────────────────────────────────────────────────────────
   Símbolo de puerta abierta (marca.svg) y el nombre en sans geométrica, la
   familia de las señales del Metro: Avenir Next en Apple, Century Gothic en
   Windows, Futura donde la haya. Sin descargar fuentes. El escudo verde del
   IMSS se sustituye desde rediseno.js (y desde copys.mjs en el traspaso). */
.brand strong, .sdl-ft-marca strong {
  font-family: "Avenir Next", Futura, "Century Gothic", Jost, var(--letra);
  font-weight: 700;
  letter-spacing: -0.012em;
}
.brand-mark img, .sdl-ft-marca img { border-radius: 22%; }

/* Verde IMSS que sobrevivía en el pie: el «beta» bajo la marca. Pasa al violeta
   claro que ya usa el hero, para que no quede ni un resto de la paleta vieja. */
.sdl-ft-marca small { color: #c4a3f0; }

/* Los demás restos del verde en el pie: títulos de columna, la etiqueta y el
   botón de «Para despachos». Todo a la paleta violeta. */
.sdl-ft-col h2, .sdl-ft-pro span, .footer-cta span { color: #c4a3f0; }
.sdl-ft-pro .sdl-ft-cta {
  background: var(--imss);
  color: #fff;
  border-color: var(--imss);
}
.sdl-ft-pro .sdl-ft-cta:hover { background: var(--imss-dark); border-color: var(--imss-dark); color: #fff; }

/* El encabezado, sólo marca y nombre. Fuera la línea «Beta · orientación…»:
   el nombre queda centrado con el ícono y crece. */
.brand small, .sdl-ft-marca small { display: none; }
.brand { align-items: center; gap: 12px; }
.brand > span:last-child { display: flex; align-items: center; }
.brand strong {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);
  line-height: 1;
}


/* Las tres imágenes de abajo son <img loading="lazy"> dentro de su caja: llenan
   la caja como lo hacía el fondo, y no se descargan hasta que se acercan. */
.hero-arte, .dif-arte, .proof-arte { position: relative; overflow: hidden; }
.arte-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.hero-arte .arte-img { object-position: center 32%; }
.dif-arte .arte-img { object-position: 40% center; }
.proof-arte .arte-img { object-position: center 40%; }
.hero-arte::after { content: none; }   /* el fondo viejo ya no existe */


/* Contrastes del pie y de la calculadora que Lighthouse marcó por debajo de 4.5:1.
   Los grises del pie venían para un pie gris oscuro; sobre el violeta no llegaban. */
.sdl-ft-bar p, .sdl-ft-bar a, .sdl-ft-bar .sdl-ft-nota, .sdl-ft-bar #responsable,
.sdl-ft-bar #responsable strong { color: #cbbfe3; }
.sdl-ft-bar a:hover { color: #fff; }
.sdl-ft-bar em.pendiente { color: #e6ddf3; }
.calc-version { color: var(--muted); }   /* 5.4:1 sobre papel; #8f8991 daba 3.19 */

/* Segunda pasada de contraste, con el peso necesario para ganar a las hojas del
   sitio: el descargo del pie (.notice tiene su propio gris en pie.css), la línea
   de versión de las calculadoras y el «Siguiente paso» de las guías, que iba con
   opacidad .72 y no llegaba a 4.5:1. */
footer.sdl-ft .descargo-pie, footer.sdl-ft .descargo-pie div,
footer.sdl-ft .descargo-pie strong, footer.sdl-ft .descargo-pie a { color: #cbbfe3; }
body .calc-version { color: #6b6470; }
.guide-next small { opacity: 1; color: #cbbfe3; }

/* La glosa en llano bajo el nombre legal del concepto. El nombre se conserva:
   es la palabra con la que la persona lo va a pedir. */
.ej-que i {
  display: block;
  font-style: normal;
  font-size: var(--t-minima);
  color: var(--muted);
  margin: 2px 0 1px;
  max-width: 34ch;
}

/* ── «Confianza verificable»: las cuatro promesas, en una línea ──────────────
   Estaban apiladas dentro de la columna de texto: la cuarta —el descargo— caía
   a media página de la primera y nadie las leía como un conjunto. Pasan a una
   banda a lo ancho de la sección, cuatro nodos sobre una línea, que es como se
   lee una secuencia.

   Sin números: no hay que hacerlas en orden, sólo se leen de izquierda a
   derecha; la última empieza con «Y» porque cierra la lista, y por eso su nodo
   va hueco —es un descargo, no una promesa más—.

   Contraste medido en vivo sobre el fondo real de la sección —rgb(74,42,120),
   que el rediseño pone encima del verde de la hoja base—: el violeta #c4a3f0
   da 5.20:1 y el cuerpo #d7e3e0, 8.43:1. El cuerpo NO lleva `opacity`:
   Lighthouse la compone al medir contraste y un texto que pasa por color falla
   igual (la lección de .calc-version).                                       */
.promesas {
  --nodo: 11px;
  --hueco-promesa: clamp(18px, 2.6vw, 38px);
  grid-column: 1 / -1;                 /* se cuelga de .proof-grid y cruza las dos columnas */
  list-style: none;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 var(--hueco-promesa);
}
.promesas li { position: relative; max-width: none; padding-top: calc(var(--nodo) + 17px); }

/* El nodo. Reemplaza al ::before que la hoja base usaba de viñeta. */
.promesas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--nodo);
  height: var(--nodo);
  border-radius: 50%;
  background: #c4a3f0;
}
/* El tramo de línea hasta el nodo siguiente: cruza el hueco de la rejilla. */
.promesas li::after {
  content: '';
  position: absolute;
  left: var(--nodo);
  top: calc(var(--nodo) / 2);
  right: calc(-1 * var(--hueco-promesa));
  height: 1px;
  background: linear-gradient(90deg, rgba(196, 163, 240, .5), rgba(196, 163, 240, .14));
}
.promesas li:last-child::after { content: none; }
.promesas li:last-child::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(196, 163, 240, .62);
}

.promesas b { display: block; color: #c4a3f0; font-size: var(--t-menor); margin-bottom: 5px; }
.promesas span { display: block; font-size: var(--t-menor); color: #d7e3e0; }

/* El revelado. El estado oculto cuelga de `.animable`, que la pone el JS: sin
   JS no se esconde nada. La transición vive sólo en `.vista`, así que entra una
   vez y no se deshace al salir de pantalla.                                   */
.promesas.animable li { opacity: 0; transform: translateY(9px); }
.promesas.animable li::before { transform: scale(0); }
.promesas.animable li::after { transform: scaleX(0); transform-origin: left center; }

.promesas.animable.vista li {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease calc(var(--i) * 120ms),
              transform .55s ease calc(var(--i) * 120ms);
}
.promesas.animable.vista li::before {
  transform: scale(1);
  transition: transform .42s cubic-bezier(.34, 1.36, .52, 1) calc(var(--i) * 120ms);
}
.promesas.animable.vista li::after {
  transform: scaleX(1);
  transition: transform .5s ease calc(var(--i) * 120ms + 170ms);
}

/* Entre el teléfono y el escritorio, cuatro columnas dejan 179px por promesa y
   el texto cae en seis líneas. Se parte en dos filas de dos: se sigue leyendo
   en horizontal y cada columna dobla su ancho. El tramo de línea de la segunda
   cierra fila, así que se retira igual que el de la última.                   */
@media (min-width: 761px) and (max-width: 1040px) {
  .promesas {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(22px, 3vw, 34px) var(--hueco-promesa);
  }
  .promesas li:nth-child(2)::after { content: none; }
}

/* En el teléfono cuatro columnas no caben y un carrusel horizontal escondería
   tres de cada cuatro promesas. Es la misma línea, girada: baja por el margen
   con los nodos colgados de ella.                                             */
@media (max-width: 760px) {
  .promesas { grid-template-columns: 1fr; gap: 0; --hueco-promesa: 0px; }
  .promesas li { padding: 0 0 clamp(18px, 5vw, 24px) 26px; }
  .promesas li::before { top: 3px; }
  .promesas li::after {
    left: calc(var(--nodo) / 2 - .5px);
    top: calc(var(--nodo) + 5px);
    right: auto;
    bottom: 2px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(196, 163, 240, .5), rgba(196, 163, 240, .14));
    transform-origin: top center;
  }
  .promesas li:last-child { padding-bottom: 0; }
  .promesas.animable li::after { transform: scaleY(0); }
  .promesas.animable.vista li::after { transform: scaleY(1); }
}

/* Va al final a propósito: tiene que ganar también dentro del bloque móvil. */
@media (prefers-reduced-motion: reduce) {
  .promesas.animable li,
  .promesas.animable li::before,
  .promesas.animable li::after,
  .promesas.animable.vista li,
  .promesas.animable.vista li::before,
  .promesas.animable.vista li::after { opacity: 1; transform: none; transition: none; }
}

/* ── El anillo de foco de los campos de texto ────────────────────────────────
   Los <input> hacían `outline: none` y lo sustituían por
   `box-shadow: 0 0 0 3px rgba(124,77,190,.14)`. Al 14 % de opacidad sobre
   blanco eso da un halo de ~1.1:1: existe, pero no se ve. WCAG 2.4.11 pide 3:1
   para el indicador de foco, y quien navega con teclado se queda sin saber
   dónde está.

   No se inventa un tratamiento nuevo: se les pone el MISMO anillo que ya usan
   las opciones del cuestionario —`outline: 3px solid var(--imss)`, que sí pasa—
   para que el foco se vea igual en todo el formulario.

   Va con :focus-visible, no con :focus: el anillo aparece al tabular y no al
   hacer clic con el ratón, que es el comportamiento esperado. */
.entrada input:focus-visible,
.pantalla input:focus-visible,
.entrada textarea:focus-visible,
.pantalla textarea:focus-visible,
.entrada select:focus-visible,
.pantalla select:focus-visible {
  outline: 3px solid var(--imss);
  outline-offset: 2px;
}

/* ── Suelo de lectura y largo de línea ───────────────────────────────────────
   Dos correcciones de la revisión de UX/UI, y van juntas porque están
   entrelazadas.

   1 · Había texto de LECTURA por debajo de 14px: el descargo del pie y la línea
   del responsable a 11.5px, la ayuda bajo las preguntas a 12px y los enlaces
   del pie a 13.5px. Pasan contraste, pero quien usa esto llega desde el
   teléfono, con un problema legal encima y sin conocimiento jurídico. El
   descargo y el responsable además son texto con valor legal: tienen que poder
   leerse, no sólo estar.

   Las cejas y los encabezados del pie en versalitas NO se igualan al cuerpo:
   ahí lo pequeño con espaciado es la convención tipográfica, no un descuido.
   Sólo se les sube el suelo de 10.5 a 12px, que es donde dejan de costar.

   2 · Los anchos estaban en PÍXELES y los heredaban textos de tamaños muy
   distintos. Un `max-width: 720px` da 72 caracteres por línea a 18px, pero 120
   a 12px: por eso el descargo del pie salía a 116 caracteres, cuando lo cómodo
   son 45-75. Se pasan a `ch`, que es la unidad que mide exactamente eso y se
   reajusta sola cuando el tamaño cambia — incluido el cambio de arriba. */

/* El suelo de 14px para todo lo que se lee de corrido. */
.sdl-ft-nota,
.sdl-ft-bar .responsable,
.sdl-ft-bar #responsable,
#responsable,
.sdl-ft-sello,
.sdl-ft-col a,
.sdl-ft-col li,
.sdl-ft-pro p {
  font-size: .875rem;      /* 14px */
}

/* La ayuda bajo las preguntas: es donde más falta hace entender. */
main small,
.pantalla small,
.entrada small,
.opcion small {
  font-size: .875rem;
}

/* Las versalitas se quedan pequeñas, pero no tanto. */
.eyebrow,
.sdl-ft-col h2,
.sdl-ft-pro strong,
.sdl-ft-col strong {
  font-size: .75rem;       /* 12px, era 10.5 */
}

/* El largo de línea, en la unidad correcta. */
.sdl-ft-nota,
.sdl-ft-bar .responsable,
.sdl-ft-bar #responsable,
#responsable { max-width: 78ch; }

.section-intro,
.sdl-ft-pro p { max-width: 70ch; }

/* Segunda pasada: las reglas de arriba no ganaban. El tamaño del pie lo fija la
   hoja del sitio con dos clases de especificidad (.sdl-ft-bar .sdl-ft-nota),
   y un selector de una clase no la alcanza por mucho que venga después. Se
   igualan aquí, con la misma forma. Medido antes: 11.5px y 98 caracteres por
   línea en el descargo; 10px en la línea de profesionales. */
.sdl-ft-bar .sdl-ft-nota,
.sdl-ft-bar p,
.sdl-ft-bar a,
.sdl-ft-bar .responsable,
.sdl-ft-bar #responsable,
.sdl-ft-pro span,
.sdl-ft-pro p { font-size: .875rem; }

/* <small> vale 0.8em por defecto, así que hereda hacia abajo esté donde esté.
   Se le da suelo propio en vez de perseguir cada contenedor. */
body small { font-size: .875rem; }

/* Y el ancho, otra vez con la especificidad correcta. */
.sdl-ft-bar .sdl-ft-nota,
.sdl-ft-bar .responsable,
.sdl-ft-bar #responsable { max-width: 78ch; }

/* Tercera pasada, y última. Dos cosas.

   · `.step small` (línea 1341) es la ayuda que va bajo cada paso del cuestionario
     y se quedaba en 12px: es justo donde más falta hace entender, así que sube
     al mismo suelo que el resto.
   · El descargo del pie baja de 78ch a 72ch. 78 estaba dentro de lo aceptable
     pero en el borde alto; 72 cae de lleno en el rango cómodo de 45-75.

   NOTA para quien mida esto después: un `ch` en esta fuente vale 8.82px a 14px
   de cuerpo, no la mitad del tamaño. Estimar caracteres por línea como
   ancho/(font-size/2) infla la cifra un 25% y hace ver problemas que no
   existen. Mídase con el ancho real del carácter «0». */
.step small { font-size: .875rem; }

.sdl-ft-bar .sdl-ft-nota,
.sdl-ft-bar .responsable,
.sdl-ft-bar #responsable { max-width: 72ch; }

/* `.step small` no bastaba: algo con dos clases lo gana. Se sube con el tipo
   delante, que añade especificidad sin recurrir a !important. Es la ayuda que
   va bajo cada paso del cuestionario, donde más falta hace entender. */
div.step small,
.pasos .step small,
.sdl-ft-col a { font-size: .875rem; }

/* El resto del texto pequeño no lo fijaba ninguna regla: lo HEREDABA del
   contenedor. Por eso los selectores anteriores no ganaban — no competían con
   nada, simplemente el valor venía de arriba. Se pone el suelo donde vive ese
   texto, y ya.

   Las versalitas siguen en 12px porque `.sdl-ft-col strong` y `.sdl-ft-col h2`
   son selectores de clase y ganan a estos de elemento. Es lo que se quiere: lo
   que se lee sube a 14, las etiquetas se quedan donde estaban. */
footer a,
footer p,
footer li,
footer span,
footer strong,
.step small { font-size: .875rem; }

/* La regla que ganaba estaba en la hoja del sitio, no aquí:
   `.journey-steps .step small { font-size: 12px }`, especificidad (0,3,1).
   Mis intentos anteriores eran (0,1,1) y (0,1,2), y por eso perdían todos.
   Con el selector completo se iguala y la cascada hace el resto. */
.journey-steps .step small { font-size: .875rem; }

/* ── Pago pendiente en OXXO ──────────────────────────────────────────────────
   Sustituye al mensaje de error del motor cuando el pago no falló, sólo está
   esperando a que la persona vaya a la tienda. Verde, no rojo: no es un fallo.
   El enlace de vuelta va en <code> para que se vea que es algo que copiar. */
.pago-pendiente {
  margin: 18px 0;
  padding: 18px 20px;
  border-left: 4px solid var(--imss);
  background: var(--mint, #eaf5f2);
  border-radius: 0 10px 10px 0;
  font-size: .9375rem;
  line-height: 1.55;
}
.pago-pendiente > b { display: block; margin-bottom: 8px; font-size: 1.0625rem; }
.pago-pendiente p { margin: 0 0 12px; }
.pago-pendiente p:last-child { margin-bottom: 0; }
.pago-pendiente code {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, .06);
  border-radius: 6px;
  font-size: .8125rem;
  word-break: break-all;
}
.pago-pendiente-nota { color: var(--muted); font-size: .875rem; }
.pago-pendiente .boton { margin-top: 4px; }

/* ── El prediagnóstico del muro de pago ──────────────────────────────────────
   Es la frase que decide si paga. Se le da el peso de un titular, no el de una
   línea de resumen. Cuando el análisis no puede concluir, cambia de color: no
   es una oferta, es una advertencia, y no debe leerse como lo mismo. */
.prediagnostico { font-size: var(--t-cuerpo); }
.prediagnostico > b {
  display: block;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 10px;
  color: var(--imss);
}
.prediagnostico p { margin: 0; color: var(--muted); }

.prediagnostico-flojo {
  padding: 16px 18px;
  border-left: 4px solid var(--warn, #b8860b);
  background: #fdf6e7;
  border-radius: 0 10px 10px 0;
}
.prediagnostico-flojo > b { color: #7a5a06; }
.prediagnostico-flojo p { color: #4a4034; }
.prediagnostico-flojo p + p { margin-top: 10px; }
.prediagnostico-flojo a { color: inherit; font-weight: 700; }

/* El cierre de /metodologia/: la página explicaba cómo se calcula y terminaba
   sin salida, justo para quien acababa de convencerse. */
.cierre-metodologia { background: var(--mint, #eaf5f2); text-align: center; }
.cierre-metodologia h2 { margin: 0 0 14px; }
.cierre-metodologia p { max-width: 58ch; margin-inline: auto; color: var(--muted); }
.cierre-metodologia-precio { margin-top: 10px; font-size: var(--t-menor); }
.cierre-metodologia .actions { justify-content: center; margin-top: 26px; }

/* Las cuatro tarjetas de respaldo de /metodologia/. Eran etiquetas internas de
   una palabra —SemVer, CH-, VAL-, B-— y ahora dicen lo que de verdad le dan a
   quien consulta, así que el texto es mucho más largo. En dos columnas de 166px
   quedaba apretado y además desbordaba 3px. En el teléfono va en una sola. */
@media (max-width: 760px) {
  .proof-grid .metrics { grid-template-columns: 1fr; }
  .proof-grid .metric { padding: 18px 20px; }
  .proof-grid .metric b { font-size: 1.125rem; }
  .proof-grid .metric span { font-size: .875rem; }
}