/* ==========================================================================
   CaminoOrganizado.com — site.css

   SISTEMA VISUAL
   Paleta derivada del logo real (muestreada, no inventada): azul #001B4F y
   naranja #FFA500. Coincide, no por casualidad, con el par cromático de la
   señalización jacobea. El naranja se reserva para señalizar: dónde puedes
   parar, dónde está el hito. Nunca decora.

   Tipografía invertida respecto a lo habitual: la grotesca manda en los
   titulares (habla el lenguaje de la señal y del mapa) y la serif sostiene el
   texto largo (habla el lenguaje de la guía que se consulta). Los números van
   todos en monoespaciada: las columnas cuadran y los kilómetros se leen como
   una lectura de instrumento, que es lo que son.

   Fondo de granito, no de papel crema: esto es una herramienta de consulta,
   no un folleto artesanal.

   Trampas de la KB ya evitadas:
   §9  vh SIEMPRE antes que svh · longhand top/right/bottom/left en paneles
       fixed · ni backdrop-filter ni filter ni transform en .cabecera.
   ========================================================================== */

/* --- fuentes autoalojadas ------------------------------------------------- */
@font-face{font-family:Archivo;src:url(../fonts/archivo-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:Archivo;src:url(../fonts/archivo-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:Literata;src:url(../fonts/literata-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Literata;src:url(../fonts/literata-latin-400-italic.woff2) format('woff2');font-weight:400;font-display:swap;font-style:italic}
@font-face{font-family:Literata;src:url(../fonts/literata-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Plex Mono';src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Plex Mono';src:url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap;font-style:normal}

:root{
  /* del logo */
  --tinta:#001B4F;
  --flecha:#FFA500;
  /* derivados */
  --cuerpo:#1D2A45;
  --suave:#5A6880;
  --senda:#1E4D9B;
  --granito:#E9EAE6;
  --granito-2:#D4D7D0;
  --papel:#FCFCFB;
  --musgo:#3F6151;
  --flecha-tenue:#FFF3DC;
  --musgo-tenue:#E8EFEA;
  --ambar-texto:#8A5A00;

  --display:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --texto:Literata,Georgia,"Times New Roman",serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ancho:min(100% - 2.5rem, 76rem);
  --columna:min(100% - 2.5rem, 40rem);
  --r:3px;              /* radios casi nulos: esto es cartografía, no tarjetas */
  --hair:1px solid var(--granito-2);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--papel);color:var(--cuerpo);
  font:400 1.0625rem/1.7 var(--texto);
  text-rendering:optimizeLegibility;
}
img,picture,svg,video{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--display);color:var(--tinta);line-height:1.12;
  letter-spacing:-.015em;text-wrap:balance;font-weight:700;margin:2.6rem 0 .7rem}
h1{font-size:clamp(2rem,1.3rem + 3.1vw,3.4rem);letter-spacing:-.025em;margin:.4rem 0 .8rem}
h2{font-size:clamp(1.45rem,1.15rem + 1.3vw,2.05rem)}

/* --- iconos de seccion ---------------------------------------------------
   El icono acompaña, no compite: naranja de la marca, del mismo vocabulario
   que la flecha de señalización. El tamaño va ligado al del titular (em) para
   que crezca con él, y se alinea por la caja de texto y no centrado, para que
   el borde izquierdo del titular no se rompa.
   Se apaga entero con ICONOS_TITULOS = false en config.php.               */
.h2-ic{display:flex;align-items:flex-start;gap:.55em}
.h2-ic > svg.ic{flex:0 0 auto;width:.82em;height:.82em;margin-top:.16em;
  color:var(--flecha);stroke-width:1.7}
.h2-ic > span{display:block;min-width:0}
@media (max-width:34rem){
  .h2-ic{gap:.4em}
  .h2-ic > svg.ic{width:.74em;height:.74em}
}

h3{font-size:1.2rem;font-weight:600}
p,ul,ol,figure,table{margin:0 0 1.2rem}
a{color:var(--senda);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--tinta)}
strong,b{font-weight:600}
:focus-visible{outline:2.5px solid var(--flecha);outline-offset:2px}

/* números: siempre monoespaciados y tabulares */
.num,.dato,.rank-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* rótulo de sección: mayúsculas espaciadas, como una chapa de señal */
.eyebrow{font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--suave);
  margin:0 0 .5rem;display:block}

/* Un solo borde izquierdo para todo. Tres anchos de contenido, y cada uno
   dice de qué tipo es lo que contiene:
     40rem  prosa           — se lee
     58rem  datos y gráficos — se consulta
     76rem  fotografía y navegación — se mira
   Nada se centra: la columna de prosa y la tabla arrancan en la misma vertical. */
/* Rejilla de sangrado completo: sin trucos con 100vw, que provocan scroll
   horizontal, y sin overflow:hidden en body, que rompería la cabecera sticky. */
main{
  display:grid;
  grid-template-columns:
    [full-start] 1fr
    [content-start] min(76rem, 100% - 2.5rem)
    [content-end] 1fr
    [full-end];
  padding-bottom:5rem;
}
main > *{grid-column:content}
main > .a-sangre{grid-column:full}
main > p,main > ul,main > ol,main > h2,main > h3,
main > .lead,main > .firma,main > .toc,main > .migas,main > .eyebrow{
  max-width:var(--columna);margin-inline:0}
.lead{font-size:1.22rem;line-height:1.6;color:var(--cuerpo)}

.saltar{position:absolute;left:-9999px}
.saltar:focus{left:1rem;top:1rem;z-index:99;background:var(--tinta);color:#fff;
  padding:.6rem 1rem;font-family:var(--display)}

/* --- cabecera ------------------------------------------------------------- */
/* sin backdrop-filter: convertiría la cabecera en bloque contenedor de sus
   hijos position:fixed y el panel móvil mediría contra una caja de 64 px */
.cabecera{background:var(--papel);border-bottom:var(--hair);
  position:sticky;top:0;z-index:20}
.cabecera-inner{width:var(--ancho);margin-inline:auto}
.cabecera-fila{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.55rem 0}
/* El logo va entero, con eslogan e iconos. Por debajo de unos 340 px el
   eslogan deja de leerse, así que ese es el suelo en escritorio; en móvil se
   encoge lo justo para dejar sitio al botón de menú. */
.marca img{width:clamp(238px, 29vw, 372px);height:auto}
.marca{display:block;line-height:0}

.menu-btn{display:flex;align-items:center;gap:.55rem;background:none;border:0;
  font:600 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta);cursor:pointer;padding:.6rem 0}
.menu-btn em{font-style:normal}
.menu-btn i{display:block;width:22px;height:9px;border-top:2px solid var(--tinta);
  border-bottom:2px solid var(--tinta)}
.menu-btn[aria-expanded="true"] i{height:0;border-bottom:0}

.menu-nivel1,.menu-nivel2,.idiomas{list-style:none;margin:0;padding:0}
.menu-grupo-btn{background:none;border:0;cursor:pointer;padding:.6rem 0;color:var(--tinta);
  font:600 .8rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase}
.menu-grupo-btn:hover{color:var(--senda)}
.menu-nivel2 a{display:block;padding:.4rem 0;text-decoration:none;color:var(--cuerpo);
  font-family:var(--texto);font-size:.97rem}
.menu-nivel2 a:hover{color:var(--senda);text-decoration:underline}
.menu-nivel2 a[aria-current]{color:var(--tinta);font-weight:600}
.idiomas{display:flex;gap:.85rem;font:600 .74rem/1 var(--display);letter-spacing:.1em;
  text-transform:uppercase}
.idiomas a{text-decoration:none;color:var(--suave)}
.idiomas a:hover{color:var(--senda)}
.idiomas [aria-current]{color:var(--tinta)}

/* --- selector por código: ES · EN · IT -----------------------------------
   Se separa del resto de la navegación en vez de competir con ella. La nav
   principal es texto suelto en mayúsculas; esto es una cápsula con borde, del
   mismo vocabulario que el sello de la credencial del peregrino. Menos ancho y
   otra jerarquía, sin inventar un color nuevo.
   Volver al modo anterior: IDIOMAS_ESTILO = 'nombre' en config.php.          */
.idiomas--codigo{gap:0;border:1px solid var(--granito-2);border-radius:999px;
  padding:.16rem;background:var(--papel);letter-spacing:.06em;font-size:.7rem}
.idiomas--codigo li{display:flex}
.idiomas--codigo a,
.idiomas--codigo [aria-current]{display:block;padding:.32rem .6rem;border-radius:999px;
  line-height:1;transition:background-color .15s ease,color .15s ease}
.idiomas--codigo a{color:var(--suave)}
.idiomas--codigo a:hover{background:var(--granito);color:var(--tinta)}
.idiomas--codigo [aria-current]{background:var(--tinta);color:#fff}
/* El foco de teclado tiene que verse sobre la píldora oscura */
.idiomas--codigo a:focus-visible{outline:2px solid var(--flecha);outline-offset:1px}
@media (prefers-reduced-motion:reduce){
  .idiomas--codigo a,.idiomas--codigo [aria-current]{transition:none}
}
/* En el menu movil la lista es hija de un contenedor en columna y el borde se
   estiraba a todo el ancho: la capsula tiene que cenirse a su contenido. */
@media (max-width:56rem){
  .idiomas--codigo{align-self:flex-start;width:max-content}
}

@media (max-width:56em){
  /* El panel es hijo de la cabecera: la fila con el logo y el botón tiene que
     quedar POR ENCIMA del panel, o el menú tapa su propio botón de cerrar. */
  /* El panel es hermano de la fila, no hijo: así el z-index puede dejar el
     logo y el botón de cerrar por encima del menú abierto. */
  .cabecera{z-index:40}
  .cabecera-fila{position:relative;z-index:31;background:var(--papel)}
  .lead,.portada-lead{font-size:1.08rem}
  .hero-lead{font-size:1rem;line-height:1.5}
  .menu{position:fixed;top:0;right:0;bottom:0;left:0;  /* inset no existe en iOS 14.0 */
    background:var(--papel);padding:5.5rem 1.35rem 3rem;overflow-y:auto;display:none;z-index:30}
  .menu.abierto{display:block}
  .menu-grupo{border-bottom:var(--hair)}
  .menu-nivel2{display:none;padding:0 0 1rem .1rem}
  .menu-grupo[data-abierto] .menu-nivel2{display:block}
  .idiomas{margin-top:1.6rem}
}
@media (min-width:56.01em){
  .menu-btn{display:none}
  .cabecera-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
  .cabecera-fila{flex:0 0 auto}
  .menu{display:flex;align-items:center;gap:1.7rem}
  .menu-nivel1{display:flex;gap:1.6rem}
  .menu-grupo{position:relative}
  .menu-nivel2{position:absolute;top:100%;left:-1rem;min-width:15rem;background:var(--papel);
    border:var(--hair);border-top:3px solid var(--flecha);padding:.7rem 1rem;display:none;
    box-shadow:0 10px 30px rgba(0,27,79,.13)}
  .menu-grupo:hover .menu-nivel2,.menu-grupo:focus-within .menu-nivel2{display:block}
}

/* --- portada: el ranking real de rutas ------------------------------------ */
.portada{width:100%;margin:2.5rem 0 0}
.portada h1{max-width:20ch}
.portada-lead{width:min(100%,44rem);font-size:1.22rem;line-height:1.6;margin-bottom:2.4rem}

.ranking{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.ranking li{border-bottom:var(--hair)}
.ranking a{display:grid;grid-template-columns:minmax(9rem,15rem) 1fr auto;
  align-items:center;gap:1.2rem;padding:.9rem .4rem;text-decoration:none;color:inherit}
.ranking a:hover{background:var(--granito)}
.rank-nombre{font:700 1rem/1.2 var(--display);color:var(--tinta)}
.rank-nombre small{display:block;font:400 .8rem/1.35 var(--texto);color:var(--suave);
  margin-top:.2rem}
.rank-barra{height:10px;background:var(--granito)}
.rank-barra i{display:block;height:100%;background:var(--senda)}
.rank-barra.sin{background:repeating-linear-gradient(45deg,var(--granito-2) 0 3px,transparent 3px 7px)}
.rank-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1rem;
  font-weight:600;color:var(--tinta);min-width:6rem;text-align:right}
.rank-num small{display:block;font:400 .64rem/1 var(--display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--suave);margin-top:.25rem}
.ranking-pie{font-size:.82rem;color:var(--suave);margin:.8rem 0 0;max-width:44rem}
@media (max-width:40em){
  .ranking a{grid-template-columns:1fr auto;gap:.5rem 1rem}
  .rank-barra{grid-column:1 / -1;order:3}
}

/* --- barras de datos: mismo lenguaje que el ranking ----------------------- */
.barras{list-style:none;margin:1.4rem 0 0;padding:0;max-width:58rem;
  border-top:2px solid var(--tinta)}
.barras li{display:grid;grid-template-columns:minmax(6rem,10rem) 1fr auto;align-items:center;
  gap:1.2rem;padding:.55rem .4rem;border-bottom:var(--hair)}
.barras-etq{font:600 .92rem/1.2 var(--display);color:var(--tinta)}
.barras-etq small{display:block;font:400 .78rem/1.3 var(--texto);color:var(--suave)}
.barras-barra{height:9px;background:var(--granito)}
.barras-barra i{display:block;height:100%;background:var(--senda)}
.barras-barra.sin{background:repeating-linear-gradient(45deg,var(--granito-2) 0 3px,transparent 3px 7px)}
.barras-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.92rem;
  font-weight:600;color:var(--tinta);min-width:5rem;text-align:right}
.barras .destacada .barras-barra i{background:var(--flecha)}
.barras .destacada .barras-etq{color:var(--tinta)}

.nota-km{font-size:.83rem;color:var(--suave);max-width:var(--columna);
  border-left:2px solid var(--flecha);padding-left:.9rem}
.fuente{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .7rem;font-size:.83rem;
  color:var(--suave);margin:.9rem 0 2rem;max-width:58rem}
.fuente .sello{flex:0 0 auto;align-self:flex-start}
.fuente > span{flex:1 1 20rem;min-width:0}

/* franja fotográfica: la foto acompaña, no tapa el texto */
.franja{margin:3.5rem 0}
.franja img{width:100%;aspect-ratio:21/8;object-fit:cover}
.franja figcaption{font-family:var(--display);font-size:.8rem;color:var(--suave);
  padding-top:.6rem;margin-top:.6rem;border-top:var(--hair);max-width:52rem}

/* --- sello de verificación ------------------------------------------------- */
/* Del vocabulario del propio Camino: la credencial se sella en cada parada.
   Aquí sella el dato. Verde = comprobado. Naranja = todavía no. */
.sello{display:inline-flex;align-items:center;gap:.35rem;font:600 .68rem/1 var(--display);
  letter-spacing:.1em;text-transform:uppercase;padding:.32rem .55rem;border:1.5px solid;
  border-radius:var(--r);transform:rotate(-1.4deg)}
.sello--ok{color:var(--musgo);border-color:var(--musgo);background:var(--musgo-tenue)}
.sello--pendiente{color:var(--ambar-texto);border-color:var(--flecha);background:var(--flecha-tenue)}

.dato{font-weight:600;color:var(--tinta)}
.dato--sin-verificar{border-bottom:1.5px dotted var(--flecha);cursor:help}
.sin-dato{color:var(--suave);font-style:italic;font-family:var(--texto)}
.pendiente{background:var(--flecha-tenue);color:var(--ambar-texto);border:1px solid var(--flecha);
  border-radius:var(--r);padding:.12rem .45rem;font:600 .72rem/1.5 var(--display);
  letter-spacing:.05em}
.falta-legal{background:#FFE9E9;color:#B00020;border:1px solid #B00020;
  border-radius:var(--r);padding:.05rem .4rem;font-family:var(--display);font-size:.85rem}
.falta-img{background:var(--flecha-tenue);color:var(--ambar-texto);padding:.7rem;border-radius:var(--r)}

/* --- ELEMENTO FIRMA: el perfil con las camas ------------------------------ */
.perfil{margin:2rem 0;max-width:58rem;background:var(--granito);border:var(--hair);padding:1.2rem 1.3rem 1.1rem}
.perfil-titulo{font:700 1rem/1.2 var(--display);color:var(--tinta);margin-bottom:.8rem}
.perfil-svg{width:100%;height:auto;overflow:visible}
.perfil-eje,.perfil-hito-txt,.perfil-escala{font-family:var(--mono)}
.perfil-cifras{list-style:none;display:flex;flex-wrap:wrap;gap:0;padding:0;
  margin:1rem 0 0;border-top:var(--hair)}
.perfil-cifras li{padding:.8rem 2rem .1rem 0;font:600 .68rem/1 var(--display);
  letter-spacing:.11em;text-transform:uppercase;color:var(--suave)}
.perfil-cifras b{display:block;font-family:var(--mono);font-size:1.35rem;font-weight:600;
  color:var(--tinta);letter-spacing:-.02em;margin-bottom:.3rem;text-transform:none}
.perfil-leyenda{display:flex;gap:1.6rem;flex-wrap:wrap;margin:.9rem 0 0;padding:0;
  list-style:none;font-size:.82rem;color:var(--suave)}
.perfil-leyenda i{display:inline-block;width:.75rem;height:.75rem;margin-right:.45rem;
  vertical-align:-1px}
.perfil-leyenda .lg-cama{background:var(--flecha)}
.perfil-leyenda .lg-paso{background:var(--suave);height:.28rem;vertical-align:3px}
.perfil-fuente,.perfil-aviso{font-size:.8rem;color:var(--suave);margin:.9rem 0 0}
.perfil--muestra{background:var(--flecha-tenue);border-color:var(--flecha)}
.perfil-aviso{color:var(--ambar-texto);font-weight:600;font-family:var(--display);
  font-size:.78rem;letter-spacing:.03em}
.perfil--vacio{color:var(--suave)}

/* --- migas, índice, firma -------------------------------------------------- */
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:1.1rem 0 0;
  font:600 .72rem/1.4 var(--display);letter-spacing:.09em;text-transform:uppercase;
  color:var(--suave)}
.migas a{color:var(--suave);text-decoration:none}
.migas a:hover{color:var(--senda);text-decoration:underline}
.migas li+li::before{content:"\203A";margin-right:.4rem;color:var(--granito-2)}

.toc{border-left:3px solid var(--flecha);padding:.3rem 0 .3rem 1.2rem;margin:2rem auto}
.toc-titulo{font:600 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  color:var(--suave);margin:0 0 .7rem}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:.35rem}
.toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);
  font-size:.78rem;color:var(--suave);margin-right:.65rem}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

.firma{font-size:.85rem;color:var(--suave);border-top:var(--hair);padding-top:.8rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center}
.firma time{font-family:var(--mono);font-size:.8rem}

/* --- tarjetas de ruta ------------------------------------------------------ */
.ruta-cards{display:grid;gap:1.6rem;max-width:76rem;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));
  margin:1.8rem 0 3rem}
.ruta-card{border:var(--hair);background:var(--papel)}
.ruta-card-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ruta-card-txt{padding:1rem 1.1rem 1.2rem}
.ruta-card h3{margin:0 0 .9rem;font-size:1.12rem;font-weight:700}
.ruta-card h3 a{text-decoration:none;color:var(--tinta)}
.ruta-card h3 a:hover{color:var(--senda)}
.ruta-card-datos{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem;margin:0}
.ruta-card-datos dt{font:600 .64rem/1 var(--display);letter-spacing:.1em;
  text-transform:uppercase;color:var(--suave);margin:0 0 .25rem}
.ruta-card-datos dd{margin:0;font-family:var(--mono);font-size:.95rem;font-weight:600;
  color:var(--tinta)}

.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0;
  margin:1.8rem 0 0;max-width:58rem;border-top:2px solid var(--tinta)}
.ficha > div{padding:.9rem 1.4rem .9rem 0;border-bottom:var(--hair)}
.ficha dt{font:600 .66rem/1 var(--display);letter-spacing:.11em;text-transform:uppercase;
  color:var(--suave);margin:0 0 .4rem}
.ficha dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.15rem;font-weight:600;color:var(--tinta)}
.ficha dd.txt{font-family:var(--display);font-size:1rem;line-height:1.25;
  letter-spacing:-.01em}
.ficha dd .sin-dato{font-size:.9rem}

/* --- tablas ---------------------------------------------------------------- */
.tabla-scroll{overflow-x:auto;margin:0 0 1.4rem;max-width:58rem}
/* La tabla de etapas lleva una columna de notas: necesita más aire. */
.t-etapas .tabla-scroll{max-width:76rem}
.t-etapas .dtable{font-size:.9rem}
.t-etapas .dtable td:last-child{color:var(--suave);line-height:1.45}
.t-etapas .dtable th:nth-child(1),.t-etapas .dtable td:nth-child(1){width:3rem}
.t-etapas .dtable th:nth-child(3),.t-etapas .dtable td:nth-child(3){
  width:5.5rem;text-align:right;padding-right:1.2rem}
.dtable{border-collapse:collapse;width:100%;font-size:.94rem}
.dtable caption{text-align:left;font:600 .72rem/1 var(--display);letter-spacing:.13em;
  text-transform:uppercase;color:var(--suave);padding-bottom:.8rem}
.dtable th,.dtable td{border-bottom:var(--hair);padding:.7rem .9rem .7rem 0;
  text-align:left;vertical-align:top}
.dtable thead th{border-bottom:2px solid var(--tinta);font:600 .68rem/1.3 var(--display);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta)}
.dtable tbody th{font-weight:600;color:var(--tinta);font-family:var(--texto)}
.dtable tbody tr:hover{background:var(--granito)}
.dtable .sub{display:block;font-weight:400;font-size:.82rem;color:var(--suave);
  font-family:var(--texto);margin-top:.15rem}

/* --- faq, usps, related ---------------------------------------------------- */
.faq{max-width:var(--columna);margin:3rem 0}
.faq details{border-bottom:var(--hair)}
.faq summary{cursor:pointer;padding:.9rem 0;font-family:var(--display);font-weight:600;
  color:var(--tinta);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--flecha);font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{padding-bottom:1rem}

.usps{list-style:none;padding:0;display:grid;gap:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin:2rem 0;max-width:76rem}
.usps li{border-top:2px solid var(--flecha);padding-top:.8rem}
.usps b{display:block;font-family:var(--display);color:var(--tinta);margin-bottom:.35rem}
.usps span{font-size:.95rem}

.related{margin:4rem 0 0;border-top:2px solid var(--tinta);
  padding-top:1.3rem}
.related h2{font:600 .74rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  color:var(--suave);margin:0 0 1.2rem}
.related ul{list-style:none;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}
.related a{display:block;text-decoration:none;color:inherit;padding:1rem 1.2rem 1.1rem .4rem;
  border-bottom:var(--hair)}
.related a:hover{background:var(--granito)}
.related a:hover b{color:var(--senda)}
.related b{display:block;font-family:var(--display);color:var(--tinta);margin-bottom:.35rem}
.related span{font-size:.88rem;color:var(--suave);line-height:1.5}

/* --- llamada a la acción ---------------------------------------------------- */
.cta{display:inline-block;background:var(--tinta);color:#fff;text-decoration:none;
  padding:.85rem 1.6rem;font:700 .82rem/1 var(--display);letter-spacing:.09em;
  text-transform:uppercase;border-radius:var(--r);border-bottom:3px solid var(--flecha)}
.cta:hover{background:var(--senda);color:#fff}
.cta--pendiente{background:none;padding:0;border:0}

/* --- PORTADA A SANGRE ------------------------------------------------------ */
.hero{position:relative;isolation:isolate;background:var(--tinta);color:#fff;
  display:grid;align-items:end;
  min-height:78vh;     /* respaldo primero: svh invalidaría la declaración
                          entera en Safari < 15.4 si no hay versión previa */
  min-height:78svh;
  overflow:hidden}
.hero-media,.hero-contenido{grid-area:1 / 1}
.hero-media{position:relative;width:100%;height:100%}
.hero-media img,.hero-media video{position:absolute;top:0;left:0;
  width:100%;height:100%;object-fit:cover}
.hero-video{opacity:0;transition:opacity .8s}
.hero-video.visible{opacity:1}
/* Velo: azul de marca, no negro. Dos capas: una vertical que asienta el pie y
   otra horizontal que oscurece el lado del texto, para que el titular no
   dependa de lo que haya detrás en cada fotograma. */
.hero-velo{position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    linear-gradient(95deg, rgba(0,27,79,.86) 0%, rgba(0,27,79,.62) 42%,
                           rgba(0,27,79,.34) 78%, rgba(0,27,79,.30) 100%),
    linear-gradient(180deg, rgba(0,27,79,.34) 0%, rgba(0,27,79,.30) 40%,
                            rgba(0,27,79,.72) 100%)}

/* Acercamiento muy lento: da vida al plano sin marear. Se anula por completo
   con prefers-reduced-motion (ver el bloque del final). */
.hero-media img,.hero-media video{animation:acercar 26s ease-out forwards}
@keyframes acercar{from{transform:scale(1)}to{transform:scale(1.08)}}

.hero-contenido{position:relative;z-index:2;display:flex;align-items:flex-end;
  padding:7rem 0 5.5rem}
.hero-caja{width:var(--ancho);margin-inline:auto}
.hero-eyebrow{font:600 .74rem/1 var(--display);letter-spacing:.18em;
  text-transform:uppercase;color:var(--flecha);margin:0 0 1.1rem;
  padding-left:.9rem;border-left:3px solid var(--flecha)}
.hero h1{color:#fff;max-width:17ch;margin:0 0 1.1rem;
  font-size:clamp(2.2rem,1.2rem + 4.4vw,4.6rem);letter-spacing:-.03em;line-height:1.02;
  text-shadow:0 2px 30px rgba(0,15,45,.45)}
.hero-lead{max-width:40rem;font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);line-height:1.55;
  color:rgba(255,255,255,.92);margin:0}
.hero-cifras{list-style:none;display:flex;flex-wrap:wrap;gap:0;padding:0;
  margin:2.2rem 0 0;border-top:1px solid rgba(255,255,255,.28)}
.hero-cifras li{padding:1rem 3.2rem 0 0;min-width:8rem}
.hero-cifras b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem);font-weight:600;color:var(--flecha);
  letter-spacing:-.02em}
.hero-cifras span{font:600 .68rem/1.4 var(--display);letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.78);display:block;margin-top:.4rem;
  max-width:20ch;text-wrap:balance}

.hero-flecha{position:absolute;z-index:3;right:max(1.25rem,calc(50% - 38rem));bottom:1.6rem;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;text-decoration:none;
  color:var(--flecha);font:600 .64rem/1 var(--display);letter-spacing:.14em;
  text-transform:uppercase}
.hero-flecha svg{animation:baja 2.6s ease-in-out infinite}
@keyframes baja{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero-aviso{position:absolute;z-index:3;top:1rem;left:max(1.25rem,calc(50% - 38rem));
  margin:0;background:var(--flecha);color:#3d2800;padding:.4rem .7rem;border-radius:var(--r);
  font:700 .68rem/1.3 var(--display);letter-spacing:.06em;max-width:min(30rem,80vw)}
@media (max-width:44em){
  .hero-contenido{padding:5rem 0 6.5rem}
  .hero-cifras li{padding-right:1.6rem}
  .hero-flecha{left:1.25rem;right:auto}
}

/* --- banda a sangre sobre azul: rompe el ritmo del papel ------------------- */
.banda{background:var(--tinta);color:rgba(255,255,255,.9);
  padding:3.5rem 0;margin:4rem 0}
.banda-caja{width:var(--ancho);margin-inline:auto;max-width:min(76rem,100% - 2.5rem)}
.banda h2{color:#fff;margin-top:0}
.banda h2::after{content:"";display:block;width:3.5rem;height:3px;background:var(--flecha);
  margin-top:.9rem}
.banda p{max-width:var(--columna)}
.banda a{color:var(--flecha)}
.banda strong{color:#fff}
.banda-lista{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.banda-lista li{border-top:2px solid var(--flecha);padding-top:.9rem}
.banda-lista b{display:block;font-family:var(--display);color:#fff;margin-bottom:.4rem}

/* --- pie -------------------------------------------------------------------- */
.pie{border-top:2px solid var(--tinta);background:var(--granito);margin-top:4rem;
  padding:3rem 0 1.6rem;font-size:.94rem}
.pie-cols{width:var(--ancho);margin-inline:auto;display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.pie-titulo{font:600 .7rem/1 var(--display);letter-spacing:.13em;text-transform:uppercase;
  color:var(--suave);margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:var(--hair)}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.4rem}
.pie a{color:var(--cuerpo);text-decoration:none}
.pie a:hover{color:var(--senda);text-decoration:underline}
.pie-legal{width:var(--ancho);margin:2.6rem auto 0;border-top:var(--hair);padding-top:1.2rem;
  color:var(--suave);font-size:.85rem}
.pie-titularidad{margin:0 0 .7rem}
.pie-legales{display:flex;flex-wrap:wrap;gap:1.2rem;list-style:none;padding:0;margin:0}
.cc-abrir{background:none;border:0;font:inherit;color:var(--senda);cursor:pointer;padding:0;
  text-decoration:underline}

/* --- banner de cookies ------------------------------------------------------ */
.cc{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:60;padding:1rem;
  background:rgba(0,27,79,.45)}
.cc-caja{background:var(--papel);border-top:3px solid var(--flecha);padding:1.4rem 1.5rem;
  max-width:46rem;margin-inline:auto}
.cc-caja h2{margin:0 0 .5rem;font-size:1.1rem}
.cc-botones{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}
/* aceptar y rechazar: mismo peso visual, un clic cada uno (AEPD) */
.cc-b{flex:1 1 11rem;padding:.8rem 1rem;border:2px solid var(--tinta);border-radius:var(--r);
  background:var(--papel);color:var(--tinta);cursor:pointer;
  font:700 .78rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase}
.cc-b:hover{background:var(--tinta);color:#fff}
.cc-b--fino{flex-basis:100%;border-color:var(--granito-2);color:var(--suave);font-weight:600}
.cc-cats label{display:block;margin:.5rem 0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* El acercamiento se anula del todo: acortar la duración dejaría la imagen
     saltada al 108 % en el primer fotograma. */
  .hero-media img,.hero-media video{animation:none !important;transform:none !important}
  .hero-flecha svg{animation:none !important}
}