/* =============================================================================
   Componentes de la web. REGLA: aquí no hay ni un color, tamaño, radio ni
   espaciado literal: todo sale de /assets/tokens.css (var(--...)).
   Los únicos literales permitidos son palabras clave (0, auto, 100%, 1fr) y los
   puntos de corte de @media (48rem = tablet, 64rem = escritorio).
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto);
  font-size: var(--tam-m);
  line-height: var(--interlineado);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
  margin: 0 0 var(--e-3);
}
h1 { font-size: var(--tam-h1); }
h2 { font-size: var(--tam-h2); }
h3 { font-size: var(--tam-h3); margin-top: var(--e-5); }
p { margin: 0 0 var(--e-4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--e-4); padding-left: var(--e-5); }
li + li { margin-top: var(--e-2); }
strong { font-weight: var(--peso-fuerte); }

a {
  color: var(--c-acento);
  text-decoration-thickness: var(--grosor-subrayado);
  text-underline-offset: var(--separacion-subrayado);
  transition: color var(--transicion);
}
a:hover { color: var(--c-acento-hover); }
a:focus-visible, summary:focus-visible {
  outline: var(--borde-medio) solid var(--c-foco);
  outline-offset: var(--borde-medio);
  border-radius: var(--radio-s);
}

.saltar {
  position: absolute;
  left: var(--e-2);
  top: var(--e-2);
  padding: var(--e-2) var(--e-3);
  background: var(--c-acento);
  color: var(--c-sobre-acento);
  border-radius: var(--radio-m);
  transform: translateY(-200%);
}
.saltar:focus { transform: none; color: var(--c-sobre-acento); }

/* ---------- Cabecera ---------- */
.cabecera {
  border-bottom: var(--borde-fino) solid var(--c-linea);
  background: var(--c-fondo);
}
.cabecera__dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e-3) var(--margen-lateral);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--c-texto);
  text-decoration: none;
  font-weight: var(--peso-titulo);
  font-size: var(--tam-m);
  line-height: var(--interlineado-titulo);
}
.marca:hover { color: var(--c-texto); }
.marca img { width: var(--ancho-logo); height: var(--ancho-logo); flex: none; }
.marca__nota {
  display: block;
  font-size: var(--tam-xs);
  font-weight: var(--peso-texto);
  color: var(--c-texto-suave);
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  font-size: var(--tam-s);
}
.nav li + li { margin-top: 0; }
.nav a {
  display: inline-block;
  padding: var(--e-1) 0;
  color: var(--c-texto-suave);
  text-decoration: none;
  border-bottom: var(--borde-medio) solid transparent;
}
.nav a:hover { color: var(--c-texto); }
.nav a[aria-current="page"] {
  color: var(--c-texto);
  border-bottom-color: var(--c-acento);
  font-weight: var(--peso-medio);
}
@media (min-width: 64rem) {
  .cabecera__dentro { flex-wrap: nowrap; justify-content: space-between; }
}

/* ---------- Estructura ---------- */
main { display: block; }
.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
}
.portada { padding: var(--e-7) 0 var(--e-6); }
.intro { padding: var(--e-6) 0 var(--e-5); }
.lead {
  font-size: var(--tam-l);
  color: var(--c-texto-suave);
  max-width: var(--medida);
}
.bloque {
  padding: var(--e-6) 0;
  border-top: var(--borde-fino) solid var(--c-linea);
}
.prosa { max-width: var(--medida); }
.nota-pequena, .fuente { font-size: var(--tam-s); color: var(--c-texto-suave); }
.fuente { margin-top: var(--e-2); max-width: var(--medida); }

.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }
.boton {
  display: inline-block;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--radio-m);
  background: var(--c-acento);
  color: var(--c-sobre-acento);
  font-weight: var(--peso-medio);
  text-decoration: none;
  border: var(--borde-medio) solid var(--c-acento);
  transition: background-color var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.boton:hover { background: var(--c-acento-hover); border-color: var(--c-acento-hover); color: var(--c-sobre-acento); }
.boton:active { transform: translateY(var(--borde-fino)); }
.boton--secundario { background: transparent; color: var(--c-acento); }
.boton--secundario:hover { background: var(--c-acento-tinte); color: var(--c-acento-hover); }

/* ---------- Etiquetas de evidencia ---------- */
.etq {
  display: inline-block;
  padding: 0 var(--e-2);
  border-radius: var(--radio-pastilla);
  font-size: var(--tam-xs);
  font-weight: var(--peso-medio);
  line-height: var(--interlineado);
  white-space: nowrap;
}
.etq--hecho { background: var(--c-hecho-fondo); color: var(--c-hecho-texto); }
.etq--indicio { background: var(--c-indicio-fondo); color: var(--c-indicio-texto); }
.etq--hipotesis { background: var(--c-hipotesis-fondo); color: var(--c-hipotesis-texto); }
.etq--testimonio { background: var(--c-testimonio-fondo); color: var(--c-testimonio-texto); }
.tabla .etq { white-space: normal; }

.leyenda { list-style: none; padding: 0; display: grid; gap: var(--e-2); max-width: var(--medida); }
.leyenda li + li { margin-top: 0; }

/* ---------- Avisos ---------- */
.aviso {
  border: var(--borde-fino) solid var(--c-aviso-borde);
  background: var(--c-aviso-fondo);
  border-radius: var(--radio-l);
  padding: var(--e-4) var(--e-5);
  max-width: var(--medida);
  margin: var(--e-4) 0;
}
.aviso > :last-child { margin-bottom: 0; }
.aviso h2, .aviso h3 { margin-top: 0; margin-bottom: var(--e-2); }

/* ---------- Testimonio (lo que cuentan quienes lo viven) ---------- */
.testimonio {
  border: var(--borde-fino) solid var(--c-testimonio-borde);
  background: var(--c-testimonio-fondo);
  border-radius: var(--radio-l);
  padding: var(--e-5);
  max-width: var(--medida);
  margin: var(--e-4) 0;
}
.testimonio blockquote {
  margin: var(--e-3) 0;
  font-size: var(--tam-l);
  line-height: var(--interlineado-titulo);
  font-weight: var(--peso-medio);
}
.testimonio blockquote p { margin: 0; }
.testimonio > :last-child { margin-bottom: 0; }
.testimonio .etq--testimonio { border: var(--borde-fino) solid var(--c-testimonio-borde); }
.contraste { margin: var(--e-3) 0 0; }
.contraste dt { font-weight: var(--peso-fuerte); margin-top: var(--e-3); }
.contraste dd { margin: var(--e-1) 0 0; }

/* ---------- Rutas de la portada ---------- */
.rutas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 var(--e-6); }
.rutas li + li { margin-top: 0; }
.ruta {
  display: block;
  padding: var(--e-4) 0;
  border-top: var(--borde-fino) solid var(--c-linea);
  color: var(--c-texto);
  text-decoration: none;
}
.ruta strong { display: block; font-size: var(--tam-l); color: var(--c-acento); line-height: var(--interlineado-titulo); margin-bottom: var(--e-1); }
.ruta:hover strong { color: var(--c-acento-hover); text-decoration: underline; text-underline-offset: var(--separacion-subrayado); }
.ruta span { display: block; color: var(--c-texto-suave); }
@media (min-width: 48rem) {
  .rutas { grid-template-columns: 1fr 1fr; }
}

/* ---------- Pasos ---------- */
.pasos { list-style: none; padding: 0; counter-reset: paso; max-width: var(--medida); }
.pasos > li { counter-increment: paso; position: relative; padding-left: var(--e-7); margin-top: var(--e-5); }
.pasos > li:first-child { margin-top: 0; }
.pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--e-6);
  height: var(--e-6);
  border-radius: var(--radio-pastilla);
  background: var(--c-acento-tinte);
  color: var(--c-acento);
  font-weight: var(--peso-titulo);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.pasos h3 { margin-top: 0; }

/* ---------- Tablas ---------- */
.tabla-marco { overflow-x: auto; margin: var(--e-4) 0; }
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tam-s);
  font-variant-numeric: tabular-nums;
}
.tabla caption { text-align: left; font-weight: var(--peso-fuerte); padding-bottom: var(--e-2); }
.tabla th, .tabla td {
  text-align: left;
  vertical-align: top;
  padding: var(--e-2) var(--e-3) var(--e-2) 0;
  border-bottom: var(--borde-fino) solid var(--c-linea);
}
.tabla thead th { font-weight: var(--peso-fuerte); color: var(--c-texto-suave); }
.tabla tbody th { font-weight: var(--peso-medio); }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .fila-total th, .tabla .fila-total td { font-weight: var(--peso-fuerte); background: var(--c-superficie); }

.medidor { display: flex; align-items: center; gap: var(--e-2); justify-content: flex-end; }
.medidor meter {
  width: var(--ancho-medidor);
  height: var(--alto-medidor);
  border: 0;
  border-radius: var(--radio-pastilla);
  background: var(--c-medidor-pista);
}
.medidor meter::-webkit-meter-bar { background: var(--c-medidor-pista); border: 0; border-radius: var(--radio-pastilla); height: var(--alto-medidor); }
.medidor meter::-webkit-meter-optimum-value,
.medidor meter::-webkit-meter-suboptimum-value,
.medidor meter::-webkit-meter-even-less-good-value { background: var(--c-medidor); border-radius: var(--radio-pastilla); }
.medidor meter::-moz-meter-bar { background: var(--c-medidor); border-radius: var(--radio-pastilla); }

/* Tabla que se apila en el móvil: cada fila pasa a ser una ficha con etiquetas */
@media (max-width: 47.99rem) {
  .tabla--apilable thead { position: absolute; width: var(--borde-fino); height: var(--borde-fino); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabla--apilable, .tabla--apilable caption, .tabla--apilable tbody, .tabla--apilable tr, .tabla--apilable th, .tabla--apilable td { display: block; width: 100%; }
  .tabla--apilable tr { border-bottom: var(--borde-medio) solid var(--c-linea); padding: var(--e-3) 0; }
  .tabla--apilable tbody th { border-bottom: 0; padding: 0 0 var(--e-2); font-size: var(--tam-m); }
  .tabla--apilable td {
    border-bottom: 0;
    padding: var(--e-1) 0;
    display: grid;
    grid-template-columns: var(--ancho-etiqueta-tabla) 1fr;
    gap: var(--e-3);
  }
  .tabla--apilable td::before { content: attr(data-etiqueta); font-weight: var(--peso-medio); color: var(--c-texto-suave); }
  .tabla--apilable .num { text-align: left; white-space: normal; }
  .tabla--apilable .fila-total { padding-left: var(--e-2); padding-right: var(--e-2); }
}

/* ---------- Vigilancia de fuentes ---------- */
.estado { font-weight: var(--peso-medio); }
.estado--ok { color: var(--c-estado-ok); }
.estado--cambio { color: var(--c-estado-cambio); }
.estado--caida { color: var(--c-estado-caida); }

/* ---------- Desplegables ---------- */
details {
  max-width: var(--medida);
  border: var(--borde-fino) solid var(--c-linea);
  border-radius: var(--radio-m);
  padding: var(--e-3) var(--e-4);
  margin: var(--e-4) 0;
  background: var(--c-superficie);
}
summary { cursor: pointer; font-weight: var(--peso-medio); }
details[open] summary { margin-bottom: var(--e-3); }
details > :last-child { margin-bottom: 0; }

/* ---------- Columnas ---------- */
.dos-columnas { display: grid; gap: var(--e-5); }
@media (min-width: 48rem) { .dos-columnas { grid-template-columns: 1fr 1fr; } }

/* ---------- Páginas legales ---------- */
.legal { max-width: var(--medida); }
.legal h2 { margin-top: var(--e-6); }
.version-cortesia { margin-top: var(--e-7); padding-top: var(--e-5); border-top: var(--borde-medio) solid var(--c-linea); }

/* ---------- Pie ---------- */
.pie {
  margin-top: var(--e-7);
  border-top: var(--borde-fino) solid var(--c-linea);
  background: var(--c-superficie);
  font-size: var(--tam-s);
  color: var(--c-texto-suave);
}
.pie__dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e-6) var(--margen-lateral);
  display: grid;
  gap: var(--e-5);
}
.pie p { max-width: var(--medida); }
.pie ul { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pie li + li { margin-top: 0; }
@media (min-width: 48rem) { .pie__dentro { grid-template-columns: 2fr 1fr; } }

/* Pie: webs hermanas (misma autora), en una fila propia bajo las dos columnas */
.pie__hermanas { grid-column: 1 / -1; padding-top: var(--e-4); border-top: var(--borde-fino) solid var(--c-banda-linea); }
.pie__titulo { margin-bottom: var(--e-2); font-weight: var(--peso-fuerte); }
.pie__hermanas ul { flex-direction: column; gap: var(--e-2); margin-bottom: 0; }

/* ---------- Índice «En esta página» (páginas largas) ---------- */
.indice {
  max-width: var(--medida);
  margin: 0 0 var(--e-5);
  padding: var(--e-4) var(--e-5);
  border: var(--borde-fino) solid var(--c-linea);
  border-radius: var(--radio-l);
  background: var(--c-superficie);
}
.indice__titulo { margin: 0 0 var(--e-3); font-weight: var(--peso-fuerte); }
.indice ol { margin: 0; padding-left: var(--e-5); }
.indice ul { margin: var(--e-2) 0 var(--e-1); padding-left: var(--e-5); font-size: var(--tam-s); }
.indice li + li { margin-top: var(--e-2); }
.indice li { padding: var(--e-1) 0; }
h2[id], h3[id] { scroll-margin-top: var(--e-6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}