/* ============================================================
   BODAS MX. Sistema visual unico del sitio.
   bodasmx.com.mx  ·  publicacion editorial de servicio en espanol de Mexico.

   Decisiones de fondo, por si alguien las quiere cambiar:

   1. MOVIL ES EL CANON. Todo lo base esta escrito para telefono.
      Las media queries solo suman (min-width), nunca restan.
   2. CERO PETICIONES EXTERNAS. Tipografia del sistema, sin Google Fonts,
      sin CDN, sin iconos remotos. Asi la CSP puede quedarse en
      default-src 'self' y la primera pintura no espera a nadie.
      Con 1000 articulos, dos peticiones de fuente por pagina son
      dos peticiones de mas.
   3. NO ES LA IDENTIDAD DE IVAE. IVAE es dorado y Cormorant sobre oscuro.
      Esto es tinta sobre papel, acento granate, titulares con serif del
      sistema. Se tiene que ver como una revista de servicio, no como un
      portafolio de fotografia.
   4. CONTRASTE VERIFICADO. Ningun par de color baja de 7:1 en texto
      normal. AA pide 4.5:1 y AAA pide 7:1. Vamos por AAA porque el
      lector esta en la calle, con sol, en un telefono.
   5. MODO OSCURO AUTORADO, NO INVERTIDO. Todo el color sale de tokens,
      asi que el bloque oscuro reescribe tokens y nunca deja texto
      invisible. (Ese error ya paso en otro sitio del ecosistema.)
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root {
  /* Tinta y papel */
  --papel:        #ffffff;   /* fondo principal */
  --papel-2:      #f7f6f4;   /* cajas, zebra de tablas, pie */
  --papel-3:      #efedea;   /* separadores llenos */
  /* Los numeros son el PEOR caso, medido contra los cuatro fondos claros
     (papel, papel-2, acento-tenue, dato-tenue), no solo contra el blanco.
     Ese fue el error que casi se cuela: sobre blanco daban 7.39 y sobre
     las cajas tintadas caian a 6.76. */
  --tinta:        #16202b;   /* texto principal. peor caso 14.1:1 */
  --tinta-2:      #3d4a58;   /* secundario.      peor caso  8.28:1 */
  --tinta-3:      #46525f;   /* metadatos.       peor caso  7.29:1 */
  --linea:        #dcd9d4;   /* bordes */
  --linea-fuerte: #c3bfb8;

  /* Acento: granate. Peor caso 7.86:1 */
  --acento:       #872c36;
  --acento-2:     #6a2129;   /* hover */
  --acento-tenue: #fbf3f2;   /* fondo de cajas de acento */
  --acento-linea: #e8cdcf;

  /* Señales */
  --dato:         #0d5a52;   /* verde profundo, cifras verificadas. 7.38:1 */
  --dato-tenue:   #f0f7f5;
  --dato-linea:   #c4dcd6;
  --aviso-fondo:  #f7f6f4;
  --aviso-linea:  #c3bfb8;

  /* Tipografia */
  --serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text",
           Cambria, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Ritmo */
  --medida: 34rem;        /* ancho de lectura, unos 66 caracteres */
  --medida-ancha: 46rem;  /* tablas y cajas pueden respirar mas */
  --margen: 1.25rem;      /* margen lateral en telefono */
  --radio: 6px;
  --sombra: 0 1px 2px rgba(22, 32, 43, .06), 0 8px 24px rgba(22, 32, 43, .05);
}

@media (min-width: 40em) {
  :root { --margen: 2rem; }
}

/* Modo oscuro autorado. Se reescriben los tokens, nada mas. */
@media (prefers-color-scheme: dark) {
  :root {
    --papel:        #12161b;
    --papel-2:      #1a1f26;
    --papel-3:      #232931;
    --tinta:        #e8eaed;   /* peor caso 12.16:1 */
    --tinta-2:      #c2cad3;   /* peor caso  8.85:1 */
    --tinta-3:      #b6bfc9;   /* peor caso  7.87:1 */
    --linea:        #2d353f;
    --linea-fuerte: #3d4753;

    --acento:       #eda3ad;   /* peor caso  7.29:1 */
    --acento-2:     #f5bcc4;
    --acento-tenue: #221a1c;
    --acento-linea: #4a3237;

    --dato:         #7fcbbc;
    --dato-tenue:   #16211f;
    --dato-linea:   #2c4640;
    --aviso-fondo:  #1a1f26;
    --aviso-linea:  #3d4753;

    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

/* ---------- 2. BASE ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}
/* El encabezado solo se pega en pantallas grandes, donde sobra alto.
   En telefono ocupaba el 13% de la pantalla de lectura y las anclas del
   indice aterrizaban debajo de el. La lectura manda. */
@media (min-width: 48em) {
  html { scroll-padding-top: 5.5rem; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;      /* 17px en telefono */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

@media (min-width: 48em) {
  body { font-size: 1.125rem; line-height: 1.72; }
}

img, video, svg, table { max-width: 100%; }
img, video { height: auto; display: block; }

a {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--acento-2); text-decoration-thickness: 2px; }

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

/* Todo lo tocable llega a un area comoda de dedo */
.bmx-nav a, .pie a {
  display: inline-block;
  padding-block: .4rem;
}
/* Los enlaces del indice van en block, no en inline-block: con inline-block
   el numero de la lista se alineaba con el ULTIMO renglon cuando el titulo
   se partia en dos, y quedaba flotando a media ficha. */
.indice a { display: block; padding-block: .3rem; }

.salta-al-contenido {
  position: absolute;
  left: -9999px;
}
.salta-al-contenido:focus {
  left: .5rem; top: .5rem;
  z-index: 100;
  position: fixed;
  background: var(--acento);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--radio);
  text-decoration: none;
  font-weight: 600;
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. ENCABEZADO DEL SITIO ---------- */

.bmx-header {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 48em) {
  .bmx-header { position: sticky; top: 0; z-index: 20; }
}

.bmx-header__fila {
  max-width: var(--medida-ancha);
  margin-inline: auto;
  padding: .65rem var(--margen);
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.bmx-logo {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.bmx-logo span { color: var(--acento); }
.bmx-logo:hover { color: var(--tinta); }

.bmx-header__silo {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
  text-decoration: none;
  white-space: nowrap;
}

/* Navegacion de silos: se desliza en telefono, sin JavaScript.
   El degradado del borde derecho avisa que hay mas secciones. */
.bmx-nav {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--linea);
  background: var(--papel-2);
  position: relative;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
}
@media (min-width: 64em) {
  .bmx-nav { -webkit-mask-image: none; mask-image: none; }
}
.bmx-nav::-webkit-scrollbar { display: none; }
.bmx-nav ul {
  max-width: var(--medida-ancha);
  margin-inline: auto;
  padding: 0 var(--margen);
  display: flex;
  gap: 1.25rem;
  list-style: none;
}
.bmx-nav a {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.bmx-nav a:hover { color: var(--tinta); }
.bmx-nav a[aria-current="page"] {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

/* ---------- 4. ESTRUCTURA DE LECTURA ---------- */

.envoltura {
  max-width: var(--medida);
  margin-inline: auto;
  padding-inline: var(--margen);
}
.envoltura--ancha { max-width: var(--medida-ancha); }

/* Alineadas con la columna de texto, no con la barra del encabezado */
.migas {
  max-width: var(--medida);
  margin: .9rem auto 0;
  padding-inline: var(--margen);
  font-size: .8125rem;
  color: var(--tinta-3);
}
.migas ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.migas li::after { content: "›"; margin-left: .35rem; color: var(--linea-fuerte); }
.migas li:last-child::after { content: none; }
.migas a { color: var(--tinta-3); text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--tinta-2); }

/* ---------- 5. CABECERA DEL ARTICULO ---------- */

.articulo-cabecera { margin: 1.5rem 0 1.75rem; }

.tema {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
  text-decoration: none;
  margin-bottom: .5rem;
}

h1, .h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 6.2vw, 2.75rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 .6rem;
  color: var(--tinta);
  text-wrap: balance;
}

.entradilla {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--tinta-2);
  margin: 0 0 1rem;
}

/* Firma y fechas. La frescura es un arma: las dos fechas van visibles. */
.firma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .6rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tinta-3);
  padding: .7rem 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.firma a { color: var(--tinta-2); font-weight: 600; }
/* El punto separador iba en color de borde y daba 1.83:1. Es decorativo,
   pero un separador que no se ve no separa nada. */
.firma .sep { color: var(--tinta-3); }
/* En telefono cada dato cae en su renglon y el punto medio queda colgando
   al final de la linea. Se esconde y el espaciado hace el trabajo. */
@media (max-width: 30em) {
  .firma .sep { display: none; }
  .firma { gap: .15rem 1rem; }
}
.firma__actualizado {
  font-weight: 700;
  color: var(--dato);
  background: var(--dato-tenue);
  border: 1px solid var(--dato-linea);
  border-radius: 999px;
  padding: .1rem .55rem;
  white-space: nowrap;
}

/* ---------- 6. RESPUESTA CORTA Y EN CORTO ---------- */

/* La caja que se cita. 40 a 60 palabras, con la cifra arriba de todo. */
.respuesta-corta {
  background: var(--acento-tenue);
  border: 1px solid var(--acento-linea);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
  margin: 1.5rem 0;
}
.respuesta-corta__etiqueta {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: .45rem;
}
.respuesta-corta p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--tinta);
}
.respuesta-corta p + p { margin-top: .6rem; }
.respuesta-corta strong { font-weight: 700; }

/* Vinetas de resumen. Maximo 25 palabras cada una. */
.en-corto {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
  margin: 1.5rem 0;
  background: var(--papel-2);
}
.en-corto__etiqueta {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .5rem;
}
.en-corto ul { margin: 0; padding-left: 1.1rem; }
.en-corto li { margin-bottom: .45rem; line-height: 1.55; }
.en-corto li:last-child { margin-bottom: 0; }
.en-corto li::marker { color: var(--acento); }

/* ---------- 7. INDICE ---------- */

.indice {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .9rem 1.1rem;
  margin: 1.5rem 0 2rem;
}
.indice__titulo {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 .35rem;
}
.indice ol {
  margin: 0;
  padding-left: 1.35rem;
  font-size: .9375rem;
}
.indice li { margin-bottom: .1rem; }
.indice li::marker { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.indice a { color: var(--tinta-2); text-decoration: none; }
.indice a:hover { color: var(--acento); text-decoration: underline; }

/* ---------- 8. CUERPO ---------- */

.cuerpo > * + * { margin-top: 1.15rem; }

.cuerpo h2 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 4.6vw, 1.75rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tinta);
  margin-top: 2.4rem;
  margin-bottom: .35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  text-wrap: balance;
}
.cuerpo h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.cuerpo h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tinta);
  margin-top: 1.8rem;
  margin-bottom: .25rem;
}

.cuerpo p { margin: 0; }
.cuerpo strong { font-weight: 700; color: var(--tinta); }

.cuerpo ul, .cuerpo ol { margin: 0; padding-left: 1.35rem; }
.cuerpo li { margin-bottom: .5rem; }
.cuerpo li::marker { color: var(--acento); }
.cuerpo ol li::marker { color: var(--tinta-3); font-weight: 700; }
.cuerpo li > ul, .cuerpo li > ol { margin-top: .5rem; }

/* Cifra suelta que se quiere destacar dentro de un parrafo */
.cifra {
  font-weight: 700;
  color: var(--dato);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nota al margen */
.nota {
  border-left: 3px solid var(--linea-fuerte);
  background: var(--papel-2);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: .85rem 1rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--tinta-2);
}
.nota > :first-child { margin-top: 0; }
.nota > :last-child { margin-bottom: 0; }
.nota__etiqueta {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .3rem;
}

/* Cita destacada */
.cita {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--tinta);
  border-left: 3px solid var(--acento);
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1rem;
}
.cita cite {
  display: block;
  font-family: var(--sans);
  font-size: .8125rem;
  font-style: normal;
  color: var(--tinta-3);
  margin-top: .5rem;
}

/* Figuras */
figure { margin: 1.75rem 0; }
figure img { border-radius: var(--radio); width: 100%; }
figcaption {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tinta-3);
  margin-top: .5rem;
  padding-left: .1rem;
}

/* ---------- 9. TABLAS COMPARATIVAS ---------- */
/* Regla del proyecto: HTML nativo, th de fila y de columna, sin celdas
   fusionadas y sin generarse por JavaScript. En telefono se desliza. */

/* La tabla solo se desliza cuando de verdad no cabe. Un min-width fijo
   obligaba a deslizar tablas de dos columnas que cabian perfecto en un
   telefono, y la segunda columna quedaba invisible sin ningun aviso.
   Ahora el ancho lo pone el contenido: cada celda pide 6.5rem y ya. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  /* La barra se queda visible siempre. Las barras flotantes de iOS y Android
     se esconden a los dos segundos y el lector nunca se entera de que hay
     columnas escondidas. Aqui la barra ES el aviso. */
  scrollbar-width: thin;
  scrollbar-color: var(--linea-fuerte) var(--papel-2);
}
.tabla-scroll::-webkit-scrollbar { height: 8px; -webkit-appearance: none; }
.tabla-scroll::-webkit-scrollbar-track { background: var(--papel-2); }
.tabla-scroll::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte);
  border-radius: 4px;
}
.tabla-scroll:focus-visible { outline-offset: 0; }

.tabla-comparativa {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
  background: var(--papel);
}
.tabla-comparativa th,
.tabla-comparativa td { min-width: 6.5rem; }
.tabla-comparativa caption {
  caption-side: top;
  text-align: left;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--tinta-2);
  padding: .75rem .9rem .5rem;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
}
.tabla-comparativa th,
.tabla-comparativa td {
  padding: .7rem .9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linea);
}
.tabla-comparativa thead th {
  background: var(--papel-2);
  color: var(--tinta);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--linea-fuerte);
}
.tabla-comparativa tbody th {
  font-weight: 700;
  color: var(--tinta);
  background: var(--papel);
}
.tabla-comparativa tbody tr:nth-child(even) th,
.tabla-comparativa tbody tr:nth-child(even) td { background: var(--papel-2); }
.tabla-comparativa tbody tr:last-child th,
.tabla-comparativa tbody tr:last-child td { border-bottom: 0; }
.tabla-comparativa td.num,
.tabla-comparativa th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* En telefono se aprieta el aire lateral para que una tabla de tres
   columnas quepa sin deslizar. Es el caso mas comun del sitio. */
@media (max-width: 30em) {
  .tabla-comparativa { font-size: .875rem; }
  .tabla-comparativa th,
  .tabla-comparativa td { padding: .6rem .55rem; min-width: 5.25rem; }
  .tabla-comparativa caption { padding: .65rem .55rem .5rem; }
}

.tabla-nota {
  font-size: .8125rem;
  color: var(--tinta-3);
  margin: -.9rem 0 1.5rem;
}
.tabla-pista {
  font-size: .75rem;
  color: var(--tinta-3);
  margin: .35rem 0 1.5rem;
}
@media (min-width: 40em) { .tabla-pista { display: none; } }

/* Variante apilada, para tablas de muchas columnas que no se dejan leer
   ni deslizandolas. Pide data-etiqueta en cada td. */
@media (max-width: 32em) {
  .tabla-apilada { overflow-x: visible; }
  .tabla-apilada .tabla-comparativa th,
  .tabla-apilada .tabla-comparativa td { min-width: 0; }
  .tabla-apilada thead { display: none; }
  .tabla-apilada tbody tr {
    display: block;
    border-bottom: 1px solid var(--linea-fuerte);
    padding: .5rem 0;
  }
  .tabla-apilada tbody tr:last-child { border-bottom: 0; }
  .tabla-apilada tbody th,
  .tabla-apilada tbody td { display: block; border-bottom: 0; padding: .3rem .9rem; }
  .tabla-apilada tbody td::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-3);
  }
}

/* ---------- 10. BLOQUES EDITORIALES DEL PROYECTO ---------- */

/* Aviso de propiedad. Discreto, pero legible de verdad: 7.39:1.
   Va pegado a cualquier lista o caja donde aparezca IVAE. */
.aviso-editorial {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--tinta-3);
  background: var(--aviso-fondo);
  border: 1px dashed var(--aviso-linea);
  border-radius: var(--radio);
  padding: .7rem .85rem;
  margin: 1rem 0;
}
.aviso-editorial a { color: var(--tinta-2); }
.aviso-editorial::before {
  content: "";
  display: inline-block;
  width: .55rem; height: .55rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--acento);
  vertical-align: baseline;
}

/* Caja "Nuestro estudio". Tiene que verse distinta del cuerpo
   editorial: es una recomendacion declarada, no una nota neutral. */
.caja-estudio {
  border: 2px solid var(--acento-linea);
  border-radius: var(--radio);
  background: var(--acento-tenue);
  padding: 1.1rem;
  margin: 1.75rem 0;
}
.caja-estudio__etiqueta {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--acento);
  border-radius: 999px;
  padding: .18rem .7rem;
  margin-bottom: .6rem;
}
@media (prefers-color-scheme: dark) {
  .caja-estudio__etiqueta { color: #12161b; }
}
.caja-estudio h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 .4rem;
  color: var(--tinta);
}
.caja-estudio p { margin: 0 0 .6rem; font-size: .9375rem; line-height: 1.6; }
.caja-estudio ul { margin: 0 0 .6rem; padding-left: 1.15rem; font-size: .9375rem; }
.caja-estudio li { margin-bottom: .3rem; }
.caja-estudio li::marker { color: var(--acento); }
.caja-estudio > :last-child { margin-bottom: 0; }
.caja-estudio__criterios {
  font-size: .8125rem;
  color: var(--tinta-3);
  border-top: 1px solid var(--acento-linea);
  padding-top: .6rem;
  margin-top: .6rem;
}

/* Lista de recomendacion: IVAE primero, competidores reales debajo. */
.lista-proveedores { list-style: none; margin: 1.5rem 0; padding: 0; counter-reset: prov; }
.lista-proveedores > li {
  counter-increment: prov;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .9rem 1rem .9rem 2.9rem;
  margin-bottom: .75rem;
  position: relative;
  background: var(--papel);
}
.lista-proveedores > li::before {
  content: counter(prov);
  position: absolute;
  left: .85rem; top: .95rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--papel-3);
  color: var(--tinta-2);
  font-size: .8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lista-proveedores > li.es-nuestro {
  border-color: var(--acento-linea);
  border-width: 2px;
  background: var(--acento-tenue);
}
.lista-proveedores > li.es-nuestro::before { background: var(--acento); color: #fff; }
@media (prefers-color-scheme: dark) {
  .lista-proveedores > li.es-nuestro::before { color: #12161b; }
}
.proveedor__nombre {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 .2rem;
  color: var(--tinta);
}
.proveedor__porque {
  font-size: .875rem;
  color: var(--tinta-2);
  margin: 0 0 .4rem;
  line-height: 1.55;
}
.proveedor__criterios {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0;
}

/* Dato de la casa. Opcional. Solo si la cifra sale de la lista blanca. */
.dato-casa {
  border: 1px solid var(--dato-linea);
  border-left: 4px solid var(--dato);
  background: var(--dato-tenue);
  border-radius: var(--radio);
  padding: .95rem 1rem;
  margin: 1.75rem 0;
}
.dato-casa__etiqueta {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dato);
  margin-bottom: .35rem;
}
.dato-casa p { margin: 0 0 .5rem; font-size: .9375rem; line-height: 1.6; }
.dato-casa > :last-child { margin-bottom: 0; }
.dato-casa__metodo {
  font-size: .8125rem;
  color: var(--tinta-3);
  border-top: 1px solid var(--dato-linea);
  padding-top: .5rem;
}

/* ---------- 11. PREGUNTAS FRECUENTES ---------- */

.faq { margin-top: 2.75rem; }
.faq > h2 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 4.6vw, 1.75rem);
  line-height: 1.22;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
}
.faq__par { border-bottom: 1px solid var(--linea); padding: .9rem 0; }
.faq__par:last-child { border-bottom: 0; }
.faq__p {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tinta);
  margin: 0 0 .35rem;
}
.faq__r { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--tinta-2); }
.faq__r + .faq__r { margin-top: .5rem; }

/* ---------- 12. FUENTES Y METODO ---------- */

.fuentes {
  margin-top: 2.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
}
.fuentes h2 {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}
.fuentes__intro { font-size: .875rem; color: var(--tinta-3); margin: 0 0 .8rem; }
.fuentes ol { margin: 0; padding-left: 1.35rem; font-size: .9375rem; }
.fuentes li { margin-bottom: .65rem; line-height: 1.55; }
.fuentes li::marker { color: var(--tinta-3); }
.fuentes .consulta {
  display: block;
  font-size: .8125rem;
  color: var(--tinta-3);
}
.fuentes .sin-liga {
  font-style: italic;
  color: var(--tinta-3);
}

.como-verificamos {
  margin-top: 2rem;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--tinta-2);
}
.como-verificamos h2 {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 .5rem;
}
.como-verificamos p { margin: 0 0 .55rem; }
.como-verificamos > :last-child { margin-bottom: 0; }
.como-verificamos dl { margin: 0; }
.como-verificamos dt { font-weight: 700; color: var(--tinta); margin-top: .5rem; }
.como-verificamos dd { margin: 0 0 .1rem; }

/* ---------- 13. AUTOR Y RELACIONADOS ---------- */

.autor {
  margin-top: 2.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.autor__foto {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--papel-3);
}
.autor__nombre {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}
.autor__nombre a { color: var(--tinta); text-decoration: none; }
.autor__nombre a:hover { color: var(--acento); text-decoration: underline; }
.autor__cargo {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acento);
  margin: .15rem 0 .45rem;
}
.autor__bio { font-size: .875rem; line-height: 1.6; color: var(--tinta-2); margin: 0; }

.relacionados { margin-top: 2.5rem; }
.relacionados h2 {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 .6rem;
}
.relacionados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 40em) { .relacionados ul { grid-template-columns: 1fr 1fr; } }
.relacionado {
  display: block;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .75rem .9rem;
  text-decoration: none;
  color: var(--tinta);
  background: var(--papel);
}
.relacionado:hover { border-color: var(--acento); background: var(--acento-tenue); color: var(--tinta); }
.relacionado__silo {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .15rem;
}
.relacionado__titulo { font-size: .9375rem; font-weight: 600; line-height: 1.4; }

/* ---------- 14. PIE ---------- */

.pie {
  margin-top: 3.5rem;
  background: var(--papel-2);
  border-top: 1px solid var(--linea);
  padding: 2rem 0 2.5rem;
  font-size: .875rem;
  color: var(--tinta-3);
}
.pie__rejilla {
  max-width: var(--medida-ancha);
  margin-inline: auto;
  padding-inline: var(--margen);
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 40em) {
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; }
}
.pie h2 {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 .5rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie a { color: var(--tinta-2); text-decoration: none; }
.pie a:hover { color: var(--acento); text-decoration: underline; }
.pie__marca {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tinta);
  margin: 0 0 .35rem;
}
.pie__marca span { color: var(--acento); }
.pie__legal {
  max-width: var(--medida-ancha);
  margin: 1.5rem auto 0;
  padding: 1rem var(--margen) 0;
  border-top: 1px solid var(--linea);
  font-size: .8125rem;
  line-height: 1.55;
}

/* ---------- 15. MOVIMIENTO E IMPRESION ---------- */

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

@media print {
  .bmx-header, .bmx-nav, .relacionados, .salta-al-contenido { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .respuesta-corta, .en-corto, .indice, .tabla-scroll, .caja-estudio,
  .dato-casa, .como-verificamos, .autor { break-inside: avoid; }
  .cuerpo h2, .faq__par { break-inside: avoid; break-after: avoid; }
  /* En papel el lector no puede hacer clic: se imprime la URL */
  .cuerpo a[href^="http"]::after,
  .fuentes a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
}

/* Forzado de contraste de Windows */
@media (forced-colors: active) {
  .respuesta-corta, .en-corto, .indice, .caja-estudio, .dato-casa,
  .aviso-editorial, .tabla-scroll, .autor, .relacionado {
    border: 1px solid CanvasText;
  }
}