/* ═══════════════════════════════════════════════════════════════════════════
   ARMAZÓN · barra, isla de fondo, botones y pie

   Lo que rodea al contenido y no pertenece a ninguna sección. El raíl de la
   izquierda salió de aquí a `rail.css` cuando pasó de decir la cota a decir
   qué se cuenta en cada franja: este fichero llevaba cinco cosas dentro y ya
   pasaba de 250 líneas. La isla se queda, porque no se puede explicar sin el
   velo de lectura que tiene justo debajo: son una sola pieza.

   LA ISLA DEJÓ DE SER UNA COLUMNA. Estaba en una banda reservada a la derecha
   —hasta 700 px de ventana que el texto no podía pisar— y eso es lo contrario
   de un fondo: era un segundo contenido, iluminado y compitiendo. Ahora ocupa
   la ventana entera por detrás de todo y se apaga hasta donde la deja el
   contraste, que es lo que hace que un fondo sea un fondo.
   ═══════════════════════════════════════════════════════════════════════════ */

.piel{position:relative;z-index:2}

/* ── la isla en tres dimensiones ─────────────────────────────────────────── */
/* El lienzo ocupa la ventana entera y va detrás de todo. El encuadre no se
   persigue con la cámara: se descentra el plano de proyección con
   `--isla-sesgo` y `--isla-caida` (`base.css`), y así la masa de la isla cae
   al cuarto bajo derecho y el alto izquierdo, por donde entra el titular, se
   queda de cielo.

   Sale con fundido: aparece cuando la malla está construida, no antes. */
.isla3d{
  position:fixed;inset:0;z-index:1;
  width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity 1.6s ease .2s;
}

/* EL 40 % NO ES UNA ELECCIÓN, ES LO QUE CABE, y está medido con
   `scripts/checks/portada-regimenes.ts` — 451 medidas de contraste en catorce
   paradas, siete regímenes por dos anchos de pantalla. El total baila unas
   decenas entre pasadas porque depende de qué revelados han acabado en cada
   parada.

   LAS DOS ORILLAS. El texto que primero se cae es el pie de la captura de los
   senderos, en `--fg-faint` (#a49d92), a 1440 px y con el alisio pintado: es
   donde la ladera iluminada le pasa justo por detrás.

     opacidad   fondo bajo esa letra   contraste   mínimo 4,5
       0,40        rgb(43,46,40)         5,13  ✓
       0,55        rgb(52,56,49)         4,45  ✗

   Y detrás de ese va el raíl con la noche puesta, que al 40 % da 5,07:1 sobre
   rgb(45,46,45). Los dos son la misma cuenta: `--fg-faint` a 4,5:1 pide un
   fondo que no pase de rgb(55,55,55) de luminancia, y el 40 % deja la ladera
   más clara del relieve justo por debajo.

   Y NO SE GANA NADA REPARTIÉNDOLO DE OTRO MODO: lo que se ve del relieve es
   (1 − velo)·opacidad, y con el velo al 0,60 del tramo central eso da 0,16 con
   este par y 0,18 con 0,75/0,71. Lo que manda es el tope de la ladera más
   clara, no el reparto entre las dos capas.

   SE VUELVE A MEDIR cada vez que se toque el velo, el brillo de un régimen o la
   disposición del texto — las tres cosas mueven la misma cifra. Y una de ellas
   se movió al arreglar los `clamp()` de `base.css`: con el titular a 95 px en
   vez de a los 32 de fábrica, las letras tapan más fondo y el peor caso cambió
   de sitio. */
.isla3d.viva{opacity:.4}

/* EL VELO DE LECTURA. Una sola capa entre la isla y el contenido, y desde que
   el texto ocupa todo el ancho tiene que ser pareja: ya no hay flanco sin
   letras al que echar el desvanecido. Lo que queda es un tramo central de 0,60
   y dos cantos más densos —arriba, donde van la barra y el titular; abajo,
   donde va la lectura del régimen—, que es donde el fondo tiene que aguantar
   texto pequeño.

   Va después del lienzo en el marcado: mismo z-index, y pinta encima. Tapa
   también el cielo de `atmosfera.css`, que está por debajo — y ahí ha ganado,
   porque el velo viejo lo dejaba al 3 % en toda la columna de lectura y la
   calima y las estrellas no llegaban a verse en el escritorio. */
.velo-lectura{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,12,11,.78) 0,
    rgba(13,12,11,.6) 16%,
    rgba(13,12,11,.6) 76%,
    rgba(13,12,11,.8) 100%);
}
@media (max-width:1079px){
  /* En el móvil la isla va centrada y sin descentrar el encuadre: se queda de
     telón muy bajo, con el pie desvanecido, y el texto baja sobre tinta. */
  .isla3d{
    mask-image:linear-gradient(180deg,#000 0,#000 46%,transparent 88%);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 46%,transparent 88%);
  }
  .isla3d.viva{opacity:.3}
  .velo-lectura{
    background:linear-gradient(180deg,
      rgba(13,12,11,.35) 0 22%,
      rgba(13,12,11,.86) 46%,
      rgba(13,12,11,.95) 62%);
  }
}
.isla3d-ok ~ .velo-lectura,.velo-lectura{display:block}
html:not(.isla3d-ok) .velo-lectura{display:none}

/* Cuando el relieve está en pie, el plano de curvas de nivel sobra. */
.isla3d-ok .isla-fija{display:none}

/* ── la isla, al fondo ───────────────────────────────────────────────────── */
/* Las curvas de nivel salen del DEM de la aplicación (`scripts/web-island.ts`).
   Se quedan fijas mientras la página pasa por delante, y la cota que toca a la
   altura de lectura se enciende en ámbar. Es el único adorno de la página que
   no se puede dibujar sin haber medido la isla. */
.isla-fija{
  position:fixed;z-index:1;pointer-events:none;
  /* Al mismo sitio al que el sesgo lleva el relieve: un poco a la derecha y un
     poco abajo, para que el plano de repuesto encuadre como el que sustituye.
     El 9 % de la ventana es lo que valen `--isla-sesgo` .18 y `--isla-caida` .2
     llevados a píxeles —la mitad, porque van en pantalla normalizada—. */
  top:50%;left:50%;
  /* Entera dentro de la ventana: recortada por arriba y por abajo deja de
     leerse como una isla y pasa a ser un rayado. El límite en `vw` es para que
     en una pantalla apaisada no se coma el texto. */
  height:min(94vh,62vw);translate:calc(-50% + 9vw) calc(-50% + 9vh);
  opacity:.4;
}
.isla-fija .isla{height:100%;width:auto;display:block;overflow:visible}
.isla-fija path{
  stroke:var(--amber);stroke-width:1;fill:none;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
}

/* Ocho cotas: costa, 300, 600 … 2.100. El índice lo pone el orden, no un
   atributo `style` — la CSP del sitio no admite estilo en línea. */
.iso:nth-child(1){--lv:0}
.iso:nth-child(2){--lv:1}
.iso:nth-child(3){--lv:2}
.iso:nth-child(4){--lv:3}
.iso:nth-child(5){--lv:4}
.iso:nth-child(6){--lv:5}
.iso:nth-child(7){--lv:6}
.iso:nth-child(8){--lv:7}

/* Distancia entre la cota del trazado y la cota de lectura. `max(a-b, b-a)` es
   el valor absoluto escrito con lo que hay: `abs()` todavía no está en todos
   los navegadores a los que sirve esta página. */
.iso{
  --cota:calc(var(--asc) * 7.4);
  --d:max((var(--lv) - var(--cota)),(var(--cota) - var(--lv)));
  opacity:calc(.13 + .87 * max(0,(1 - var(--d))));
}
.iso:nth-child(1){opacity:max(.3,calc(.13 + .87 * max(0,(1 - var(--d)))));stroke-width:1.4}
.isla-fija .iso:nth-child(1) path{stroke:var(--fg);stroke-width:1.35}

@media (max-width:1079px){
  /* En el móvil el texto ocupa todo el ancho y la isla le pasa por detrás:
     a .18 el rótulo de un aviso se quedaba en 4,5:1 justo. A .14 sube a 4,9. */
  .isla-fija{left:auto;right:-30vw;height:min(80vh,110vw);translate:0 -50%;opacity:.14}
}

/* ── barra superior ──────────────────────────────────────────────────────── */
/* LA TINTA VA AL 95 %, Y ESTÁ MEDIDO. Antes eran 78 en general y 95 solo por
   encima de 1180 px, donde la barra cruzaba la banda de la isla; ahora el
   relieve pasa por debajo de la barra en TODO el recorrido y en cualquier
   ancho, así que el caso peor es el de siempre: con el 90 % los enlaces del
   menú se quedaban en 3,6:1. Sigue con desenfoque y un 5 % de transparencia,
   así que la isla se sigue intuyendo pasar por debajo. */
.top{
  position:sticky;top:0;z-index:6;
  background:color-mix(in srgb,var(--ink) 95%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.top-in{display:flex;align-items:center;gap:1.2rem;min-height:58px}

.marca{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.8rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--fg);
}
.marca svg{display:block;flex:none;overflow:visible}
.marca .rayo{transform-origin:center;animation:pulso-marca 6s ease-in-out infinite}
@keyframes pulso-marca{0%,86%,100%{opacity:1}90%{opacity:.35}94%{opacity:1}}

.top nav{display:none;gap:1.5rem;margin-left:1.5rem}
/* 940 y no 860: el menú pasó de cuatro entradas a cinco al entrar «Para quién»,
   «En 3D» y «El cielo», y a 900 px las cinco se partían en dos líneas cada una
   —«PARA / QUIÉN»— y la barra crecía al doble de alto. Medido con
   `.tmp/nav.mjs`: con `nowrap` el menú entero pide 773 px y el hueco de la barra
   son 792 a 900 px, así que cabe justo; a 940 sobran 54. El `nowrap` además
   convierte el fallo en desbordamiento visible en vez de en una barra doble,
   que es más fácil de ver si algún día se añade una sexta entrada. */
@media (min-width:940px){.top nav{display:flex}}
.top nav a{
  position:relative;font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim);
  padding-block:.35rem;transition:color .25s;white-space:nowrap;
}
.top nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.top nav a:hover{color:var(--fg)}
.top nav a:hover::after{transform:scaleX(1)}

/* Cota de lectura para cuando no hay sitio para el raíl. Por debajo de
   430 px tampoco hay sitio para ella: la barra son marca + cota + botón, y a
   390 px eso sumaba 410 px de contenido en 353 de hueco — el botón se salía de
   la pantalla con la mitad de la etiqueta cortada. */
.cota-movil{
  display:none;align-items:baseline;gap:.28rem;
  font-family:var(--mono);font-size:.72rem;color:var(--fg-faint);
}
.cota-movil b{color:var(--amber);font-weight:600;font-variant-numeric:tabular-nums}
@media (min-width:430px){.cota-movil{display:flex}}
@media (min-width:940px){.cota-movil{display:none}}

/* El margen automático va SIEMPRE en el botón, que es el único elemento de la
   barra que está en todos los tamaños. Colgarlo del `nav` o de la cota —que se
   esconden según el ancho— dejaba el botón pegado a la marca en cuanto
   desaparecía aquel del que colgaba. */
.top-in>.btn{margin-left:auto}

/* Marca y botón encogen antes de que nada se salga. */
@media (max-width:559px){
  .marca{font-size:.7rem;letter-spacing:.12em;gap:.45rem}
  .marca svg{width:19px;height:19px}
  .top .btn{padding:.5rem .8rem;letter-spacing:.1em}
}

/* Progreso del ascenso, pegado al canto inferior de la barra. */
.progreso{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;display:block;
  background:linear-gradient(90deg,var(--amber-deep),var(--amber));
  transform:scaleX(var(--asc));transform-origin:left;
}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.72rem 1.15rem;border-radius:10px;overflow:hidden;
  font-family:var(--mono);font-size:.73rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  background:var(--amber);color:#17130c;border:1px solid var(--amber);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
.btn span{position:relative;z-index:1}
.btn .fl{position:relative;z-index:1;flex:none;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,#f2cd85,var(--amber) 55%);
  transform:translateX(-101%);transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(226,180,92,.75)}
.btn:hover::before{transform:translateX(0)}
.btn:hover .fl{transform:translateX(4px)}

.btn--fino{background:transparent;color:var(--fg);border-color:var(--line)}
.btn--fino::before{background:rgba(226,180,92,.11)}
.btn--fino:hover{border-color:var(--amber);box-shadow:none;color:var(--fg)}

.top .btn{padding:.55rem .9rem;font-size:.68rem}
.btn .corta{display:none}
@media (max-width:559px){
  .btn .larga{display:none}
  .top .btn .corta{display:inline}
}

/* ── pie ─────────────────────────────────────────────────────────────────── */
footer{
  position:relative;z-index:2;margin-top:clamp(4rem,10vh,7rem);
  border-top:1px solid var(--line-soft);padding-block:2.4rem 3rem;
  background:linear-gradient(180deg,transparent,rgba(8,10,18,.55));
}
.pie{display:grid;gap:1.4rem;font-family:var(--mono);font-size:.7rem;line-height:1.75;color:var(--fg-faint)}
@media (min-width:760px){.pie{grid-template-columns:1fr auto;align-items:end}}
.pie a{color:var(--fg-dim);border-bottom:1px solid var(--line-soft);transition:color .2s,border-color .2s}
.pie a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.pie .der{text-align:left}
@media (min-width:760px){.pie .der{text-align:right}}