/* ============================================================================
   estilos.css — Simulador Colpensiones vs. Fondo Privado
   ----------------------------------------------------------------------------
   Organización:
     1. Tokens
     2. Base y tipografía
     3. Estructura
     4. Aviso legal permanente
     5. Portada
     6. Formulario
     7. Resultado (tarjetas comparativas)
     8. Escalera de semanas
     9. Sensibilidad
    10. Contenido editorial
    11. Espacios de anuncio
    12. Banner de cookies
    13. Pie
    14. Utilidades y accesibilidad

   No hay framework ni preprocesador. Todo es CSS plano.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Papel y tinta */
  --papel:        #f1f0ea;
  --papel-alto:   #fbfaf6;
  --papel-hondo:  #e5e3d8;
  --tinta:        #16181b;
  --tinta-media:  #4c5158;
  /* --tinta-suave viste TODO el texto pequeño del sitio: pistas del
     formulario, epígrafes, encabezados de tabla, pies de foto. A 0,7-0,83rem
     ninguno de esos usos califica como "texto grande", así que WCAG AA les
     exige 4,5:1. El #767b82 anterior daba 3,73:1 sobre el papel y 3,31:1
     sobre el papel hondo: fallaba en todas partes. Este da 5,08:1 / 4,52:1. */
  --tinta-suave:  #5f646b;
  --linea:        #d2cfc2;
  --linea-fuerte: #b4b0a0;

  /* Los dos regímenes. Dos colores de valencia equivalente: ninguno es el
     "bueno". La diferencia de riesgo se comunica con textura, no con color. */
  --rpm:          #39527a;
  --rpm-claro:    #dfe4ee;
  /* #6e7b3f daba 4,40:1 en los signos +/- de los factores: se oscurece. */
  --rais:         #5c6733;
  --rais-claro:   #e6e8d8;

  /* Reservado EXCLUSIVAMENTE para lo legal y las advertencias. */
  --aviso:        #8a2233;
  --aviso-claro:  #f4e6e8;

  /* Marcador de la meta de semanas. Rotula un dato normativo (el mínimo legal)
     a 0,66rem, así que necesita 4,5:1. El #b8860b daba 2,85:1: fallaba incluso
     el umbral de texto grande. Este da 5,86:1. */
  --meta:         #7a5a06;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --ancho: 68rem;
  --radio: 3px;

  --paso-1: 0.35rem;
  --paso-2: 0.7rem;
  --paso-3: 1.2rem;
  --paso-4: 2rem;
  --paso-5: 3.2rem;
  --paso-6: 5rem;
}

/* ------------------------------------------------- 2. Base y tipografía */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La banda de aviso legal es sticky y mide ~3rem. Sin este colchón, al
     navegar a #metodologia o #simulador el encabezado de destino queda tapado
     debajo de ella y parece que el enlace apuntara al sitio equivocado. */
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  /* Cifras de ancho fijo en toda la página: es una herramienta de medición. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.021em;
  margin: 0 0 var(--paso-2);
  font-weight: 650;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6.2vw, 3.4rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
h3 { font-size: clamp(1.13rem, 2.3vw, 1.32rem); }

p { margin: 0 0 var(--paso-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--rpm); text-underline-offset: 0.18em; }
a:hover { color: var(--tinta); }

strong { font-weight: 650; }

/* El monoespaciado marca todo lo que es dato, cifra o referencia legal. */
.mono, .dato, .norma {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Etiqueta superior de sección. Estructura, no decoración: dice de qué habla. */
.epigrafe {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--paso-2);
  display: block;
}

.norma {
  font-size: 0.83em;
  color: var(--tinta-media);
}

/* ------------------------------------------------------- 3. Estructura */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--paso-3);
}

.franja { padding-block: var(--paso-5); }
.franja--alta { background: var(--papel-alto); border-block: 1px solid var(--linea); }

/* --------------------------------------- 4. Aviso legal permanente (arriba) */
.aviso-fijo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--aviso);
  color: #fff;
  font-size: 0.79rem;
  line-height: 1.45;
  padding: 0.55rem 0;
}

.aviso-fijo p { margin: 0; }
.aviso-fijo strong { font-weight: 700; }
.aviso-fijo a { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------- 5. Portada */
.portada { padding-block: var(--paso-5) var(--paso-4); }

.portada h1 { max-width: 20ch; }

.portada__entrada {
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  color: var(--tinta-media);
  max-width: 58ch;
}

/* Tres datos duros que fijan el marco normativo antes de que el usuario
   toque el formulario. */
.marco {
  display: grid;
  gap: var(--paso-2);
  grid-template-columns: 1fr;
  margin-top: var(--paso-4);
  border-top: 2px solid var(--tinta);
  padding-top: var(--paso-3);
}

.marco__item { display: flex; flex-direction: column; gap: 0.15rem; }

.marco__cifra {
  font-family: var(--mono);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.marco__nota { font-size: 0.83rem; color: var(--tinta-suave); }

@media (min-width: 46em) {
  .marco { grid-template-columns: repeat(3, 1fr); gap: var(--paso-4); }
}

/* -------------------------------------------------------- 6. Formulario */
.simulador {
  background: var(--papel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: var(--paso-3);
}

@media (min-width: 46em) { .simulador { padding: var(--paso-4); } }

.campos {
  display: grid;
  gap: var(--paso-3);
  grid-template-columns: 1fr;
}

@media (min-width: 46em) {
  .campos { grid-template-columns: 1fr 1fr; }
  .campo--ancho { grid-column: 1 / -1; }
}

.campo { display: flex; flex-direction: column; gap: 0.3rem; }

.campo label {
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.campo__pista { font-size: 0.79rem; color: var(--tinta-suave); }

.campo input,
.campo select {
  font-family: var(--mono);
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: #fff;
  color: var(--tinta);
  width: 100%;
}

.campo select { font-family: var(--sans); }

.campo input:focus-visible,
.campo select:focus-visible {
  outline: 2px solid var(--rpm);
  outline-offset: 1px;
}

.campo__error {
  font-size: 0.79rem;
  color: var(--aviso);
  font-weight: 600;
  min-height: 1.1em;
}

.campo input[aria-invalid="true"] { border-color: var(--aviso); }

/* Aviso de fallo del propio simulador (no de los datos del usuario). Solo
   aparece si algo se rompió de verdad: sin él, el botón no reaccionaría y el
   usuario no tendría forma de saber por qué. */
.fallo {
  margin: var(--paso-3) 0 0;
  border: 1px solid var(--aviso);
  border-left-width: 4px;
  background: var(--aviso-claro);
  color: var(--aviso);
  font-size: 0.87rem;
  font-weight: 600;
  padding: var(--paso-2) var(--paso-3);
  border-radius: var(--radio);
}

.fallo[hidden] { display: none; }

/* Supuestos avanzados */
.avanzados {
  margin-top: var(--paso-3);
  border-top: 1px solid var(--linea);
  padding-top: var(--paso-3);
}

.avanzados > summary {
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--rpm);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.avanzados > summary::-webkit-details-marker { display: none; }
.avanzados > summary::before { content: "+"; font-family: var(--mono); font-size: 1.1em; }
.avanzados[open] > summary::before { content: "−"; }
.avanzados > summary:focus-visible { outline: 2px solid var(--rpm); outline-offset: 3px; }

.avanzados__cuerpo { margin-top: var(--paso-3); }

.avanzados__intro {
  font-size: 0.85rem;
  color: var(--tinta-media);
  margin-bottom: var(--paso-3);
  max-width: 62ch;
}

.campo input[type="range"] { padding: 0; accent-color: var(--rais); }

.boton {
  margin-top: var(--paso-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1.4rem;
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  color: var(--papel-alto);
  background: var(--tinta);
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  cursor: pointer;
}

.boton:hover { background: var(--rpm); border-color: var(--rpm); }
.boton:focus-visible { outline: 2px solid var(--rpm); outline-offset: 2px; }

@media (min-width: 46em) { .boton { width: auto; min-width: 16rem; } }

/* Variante compacta, para acciones secundarias dentro del texto legal. */
.boton--menor {
  margin-top: 0;
  width: auto;
  min-width: 0;
  padding: 0.5rem 1rem;
  font-size: 0.87rem;
}

/* --------------------------------------------------------- 7. Resultado */
/* Va por #id: la sección es <section class="franja" id="resultado">, así que
   el antiguo selector .resultado[hidden] no casaba con nada. */
#resultado[hidden] { display: none; }

/* La sección recibe el foco por JavaScript al terminar el cálculo, para que
   quien navega con teclado aterrice en el resultado. Ese foco programático no
   debe dibujar un recuadro alrededor de media pantalla; el foco visible sigue
   existiendo para todo lo que se navega con Tab. */
#resultado:focus { outline: none; }

.resultado__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--paso-2);
  border-bottom: 2px solid var(--tinta);
  padding-bottom: var(--paso-2);
  margin-bottom: var(--paso-4);
}

.resultado__contexto {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--tinta-media);
}

/* Aviso de traslado bloqueado: va ANTES del resultado, no después. */
.bloqueo {
  border: 1px solid var(--aviso);
  border-left-width: 4px;
  background: var(--aviso-claro);
  padding: var(--paso-3);
  border-radius: var(--radio);
  margin-bottom: var(--paso-4);
}

.bloqueo h3 { color: var(--aviso); margin-bottom: var(--paso-1); font-size: 1.05rem; }
.bloqueo p { font-size: 0.92rem; margin-bottom: 0; }

.tarjetas {
  display: grid;
  gap: var(--paso-3);
  grid-template-columns: 1fr;
}

@media (min-width: 52em) { .tarjetas { grid-template-columns: 1fr 1fr; } }

.tarjeta {
  border: 1px solid var(--linea-fuerte);
  border-top: 4px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--papel-alto);
  padding: var(--paso-3);
  display: flex;
  flex-direction: column;
  gap: var(--paso-2);
}

.tarjeta--rpm  { border-top-color: var(--rpm); }
.tarjeta--rais { border-top-color: var(--rais); }

.tarjeta__nombre {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin: 0;
}

.tarjeta__mesada {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 5.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.tarjeta__mesada span { font-size: 0.42em; font-weight: 500; color: var(--tinta-suave); letter-spacing: 0; }

.tarjeta__sinpension {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--aviso);
  line-height: 1.3;
}

/* La barra proporcional. La del RAIS lleva rayado: su monto no está garantizado. */
.barra {
  height: 12px;
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
  border-radius: 1px;
  overflow: hidden;
}

.barra__relleno { height: 100%; width: 0; transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
.tarjeta--rpm  .barra__relleno { background: var(--rpm); }
.tarjeta--rais .barra__relleno {
  background: repeating-linear-gradient(
    -45deg, var(--rais) 0 5px, #8d9a58 5px 10px
  );
}

.tarjeta__dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem var(--paso-2);
  font-size: 0.87rem;
  border-top: 1px solid var(--linea);
  padding-top: var(--paso-2);
}

.tarjeta__dl dt { color: var(--tinta-media); }
.tarjeta__dl dd { margin: 0; font-family: var(--mono); text-align: right; }

.marcas { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.marca {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
  border: 1px solid currentColor;
}

.marca--nota  { color: var(--tinta-media); }
.marca--alerta { color: var(--aviso); background: var(--aviso-claro); }

.factores { margin: 0; padding: 0; list-style: none; font-size: 0.85rem; display: grid; gap: 0.35rem; }
.factores li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.4rem; align-items: start; }
.factores li::before { font-family: var(--mono); font-weight: 700; line-height: 1.5; }
.factores li.a-favor::before  { content: "+"; color: var(--rais); }
.factores li.en-contra::before { content: "−"; color: var(--aviso); }
.tarjeta--rpm .factores li.a-favor::before { color: var(--rpm); }

/* Diferencia entre regímenes */
.diferencia {
  margin-top: var(--paso-3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-hondo);
  padding: var(--paso-3);
  text-align: center;
}

.diferencia__cifra {
  font-family: var(--mono);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  display: block;
}

.diferencia__texto { font-size: 0.9rem; color: var(--tinta-media); margin: 0; }

/* ------------------------------------------- 8. Escalera de 50 semanas */
/* La ley sube la pensión un 1,5% por cada bloque de 50 semanas. Esta escalera
   dibuja exactamente esos bloques: es la fórmula hecha imagen. */
.escalera-caja { margin-top: var(--paso-4); }

.escalera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 3px;
  margin: var(--paso-2) 0;
  padding: 0;
  list-style: none;
}

.escalera li {
  width: 15px;
  height: 30px;
  border-radius: 1px;
  border: 1px solid var(--linea-fuerte);
  background: transparent;
}

.escalera li.es-cotizada { background: var(--tinta); border-color: var(--tinta); }
.escalera li.es-futura {
  background: repeating-linear-gradient(-45deg, var(--tinta-suave) 0 3px, transparent 3px 6px);
  border-color: var(--tinta-suave);
}
.escalera li.es-extra   { background: var(--rpm); border-color: var(--rpm); height: 38px; }
.escalera li.es-faltante { border-style: dashed; border-color: var(--aviso); }

/* Bandera que marca el mínimo legal, intercalada en el flujo para que
   sobreviva al salto de línea. */
.escalera .meta-marca {
  width: auto;
  height: 38px;
  border: 0;
  border-left: 2px solid var(--meta);
  padding-left: 0.3rem;
  margin-right: 0.2rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.15;
  color: var(--meta);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 7.5rem;
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-2);
  font-size: 0.76rem;
  color: var(--tinta-media);
  margin: 0;
  padding: 0;
  list-style: none;
}

.leyenda li { display: flex; align-items: center; gap: 0.35rem; }

.leyenda i {
  width: 11px;
  height: 14px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 1px;
  flex: none;
}

.leyenda .m-cotizada { background: var(--tinta); border-color: var(--tinta); }
.leyenda .m-futura { background: repeating-linear-gradient(-45deg, var(--tinta-suave) 0 3px, transparent 3px 6px); }
.leyenda .m-extra { background: var(--rpm); border-color: var(--rpm); }
.leyenda .m-faltante { border-style: dashed; border-color: var(--aviso); }

/* ------------------------------------------------------ 9. Sensibilidad */
.sensibilidad { margin-top: var(--paso-4); }

.tabla-sens {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: var(--paso-2);
  /* Sin esto la columna de la mesada empuja la tabla fuera de la pantalla en
     móvil. Con el ancho mínimo, la envoltura la vuelve deslizable. */
  min-width: 19rem;
}

.tabla-sens th,
.tabla-sens td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--linea);
}

.tabla-sens th:first-child,
.tabla-sens td:first-child { padding-left: 0; }
.tabla-sens th:last-child,
.tabla-sens td:last-child { padding-right: 0; }

/* La anotación de garantía mínima va en su propia línea: en línea obligaba a
   la tabla a ser más ancha que el móvil. */
.sens-nota {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.74rem;
  color: var(--tinta-media);
}

.tabla-sens th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 500;
}

.tabla-sens td:last-child,
.tabla-sens th:last-child { text-align: right; font-family: var(--mono); }

.tabla-sens tr.es-base { background: var(--papel-hondo); font-weight: 600; }

/* Disclaimer permanente bajo el resultado */
.nota-resultado {
  margin-top: var(--paso-3);
  border-left: 3px solid var(--aviso);
  padding: var(--paso-2) var(--paso-3);
  background: var(--aviso-claro);
  font-size: 0.85rem;
  line-height: 1.55;
}

.nota-resultado p { margin-bottom: var(--paso-2); }
.nota-resultado p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ 10. Contenido editorial */
/* Columna de lectura. Centrada cuando va sola; pegada a la izquierda cuando
   comparte fila con la columna de anuncios. */
.articulo { max-width: 44rem; margin-inline: auto; }
.con-lateral .articulo { margin-inline: 0; }
.articulo h2 { margin-top: var(--paso-5); }
.articulo h2:first-child { margin-top: 0; }
.articulo h3 { margin-top: var(--paso-4); }
.articulo ul, .articulo ol { margin: 0 0 var(--paso-3); padding-left: 1.3rem; }
.articulo li { margin-bottom: var(--paso-1); }

.formula {
  font-family: var(--mono);
  background: var(--papel-alto);
  border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--rpm);
  border-radius: var(--radio);
  padding: var(--paso-3);
  margin: 0 0 var(--paso-3);
  font-size: 0.92rem;
  overflow-x: auto;
  line-height: 1.75;
  /* Los saltos de línea de la fórmula están escritos en el HTML. Sin esto el
     navegador los colapsa y la fórmula queda en un solo párrafo ilegible. */
  white-space: pre-wrap;
}

.tabla-envoltura { overflow-x: auto; margin-bottom: var(--paso-3); }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.89rem;
  min-width: 32rem;
}

.tabla caption {
  text-align: left;
  font-size: 0.79rem;
  color: var(--tinta-suave);
  padding-bottom: var(--paso-2);
}

.tabla th, .tabla td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.tabla thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 500;
  border-bottom: 2px solid var(--tinta);
}

.tabla tbody th { font-weight: 600; }
.tabla td.num { font-family: var(--mono); text-align: right; }

.faq { border-top: 1px solid var(--linea); }

.faq details {
  border-bottom: 1px solid var(--linea);
  padding: var(--paso-2) 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--paso-2);
  align-items: baseline;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--rpm); font-size: 1.2em; }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--rpm); outline-offset: 3px; }
.faq details > *:not(summary) { margin-top: var(--paso-2); font-size: 0.94rem; }

.fuentes { font-size: 0.88rem; }
.fuentes li { margin-bottom: var(--paso-2); }

/* ------------------------------------------ 11. Espacios de anuncio */
/* Altura reservada desde el HTML: sin esto, cuando AdSense inyecte el anuncio
   la página saltaría y arruinaría el CLS (Core Web Vitals). */
.anuncio {
  margin: var(--paso-5) auto;
  max-width: var(--ancho);
  padding-inline: var(--paso-3);
}


/* Ya no dibuja nada: su unico trabajo es RESERVAR el alto antes de que
   AdSense inyecte el anuncio. Sin esta reserva la pagina da un salto al
   cargar el anuncio y se dispara el CLS, que es metrica de Core Web Vitals.
   El ancho lo pone el <ins>, que es display:block al 100%. */
.anuncio__caja {
  min-height: 280px;
}

/* El <ins> vacio no ocupa nada hasta que Google lo rellena. */
.anuncio__caja .adsbygoogle {
  width: 100%;
}

/* El lateral es una unidad FIJA de 300x600: ni se estira ni se centra sola. */
.anuncio--lateral .adsbygoogle {
  width: 300px;
}

/* El anuncio que vive DENTRO de #resultado ya está en un .contenedor: no debe
   volver a aplicar ancho máximo ni relleno lateral, o se indentaría dos veces. */
.anuncio--interior {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Columna lateral: solo aparece cuando hay ancho de sobra. Por debajo de eso
   no existe, para no robarle espacio al texto en móvil. */
.anuncio--lateral { display: none; }
.con-lateral { display: block; }

/* --------------------------------------------------- 12. Banner cookies */
.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: var(--tinta);
  color: var(--papel);
  padding: var(--paso-3);
  font-size: 0.85rem;
  line-height: 1.5;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
}

.cookies[hidden] { display: none; }

.cookies__cuerpo {
  max-width: var(--ancho);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--paso-2);
}

.cookies p { margin: 0; }
.cookies a { color: #fff; }

.cookies__botones { display: flex; gap: var(--paso-2); flex-wrap: wrap; }

.cookies button {
  font: inherit;
  font-weight: 650;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radio);
  cursor: pointer;
  border: 1px solid var(--papel);
  background: transparent;
  color: var(--papel);
}

.cookies button.es-principal { background: var(--papel); color: var(--tinta); }
.cookies button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (min-width: 46em) {
  .cookies__cuerpo { flex-direction: row; align-items: center; justify-content: space-between; }
  .cookies__botones { flex: none; }
}

/* ---------------------------------------------------------------- 13. Pie */
.pie {
  border-top: 2px solid var(--tinta);
  background: var(--papel-hondo);
  padding-block: var(--paso-4);
  font-size: 0.86rem;
  margin-top: var(--paso-6);
}

.pie__rejilla {
  display: grid;
  gap: var(--paso-3);
  grid-template-columns: 1fr;
}

@media (min-width: 46em) { .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; gap: var(--paso-4); } }

/* Rótulos de las columnas del pie. Eran <h2> y ensuciaban la jerarquía de
   encabezados de la página: son etiquetas de navegación, no secciones. */
.pie__titulo { font-size: 0.73rem; font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 500; margin-bottom: var(--paso-2); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: var(--paso-1); }
.pie__legal { margin-top: var(--paso-3); padding-top: var(--paso-3); border-top: 1px solid var(--linea-fuerte); color: var(--tinta-media); font-size: 0.8rem; }

/* ------------------------------------------ 14. Utilidades y accesibilidad */
.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;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--tinta);
  color: var(--papel);
  padding: 0.7rem 1.1rem;
}

.saltar:focus { left: 0; }

/* Barra lateral de anuncios solo en pantallas anchas. */
@media (min-width: 76em) {
  .con-lateral {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--paso-5);
    align-items: start;
  }
  .anuncio--lateral {
    display: block;
    position: sticky;
    top: 5rem;
    margin: 0;
    padding: 0;
    max-width: none;
  }
  .anuncio--lateral .anuncio__caja { min-height: 600px; }
}

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

@media print {
  .aviso-fijo, .cookies, .anuncio, .simulador .boton { display: none; }
  body { background: #fff; }
}