/* ══ final.css · EL FINAL DE TODAS LAS PÁGINAS (30-sep-2026) ═══════════════════════════════════════
   Cierre + pie en UNA pantalla, con el eclipse del sitio como sello alrededor de «Empezar».
   paco: «que afecte al footer para tener un final y poder ponerlo en todos los finales».
   Marcado: `<section class="seccion oscuro ci">` (titular .d1, .ci__escena con el botón, .ci__pie) seguido de
   `<footer class="pie oscuro -final">`. Lo mueve `assets/cierre.js`. Va DESPUÉS de caliber.css: iguala
   la especificidad de `.cierre`/`.oscuro` y gana por orden.
   v1 (eclipse a media pantalla con el botón dentro): «muy grande, raro». Probado también el eclipse de
   horizonte detrás del pie: a esa magnitud la corona lava el texto. Queda el SELLO. */

.ci{ min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'t t' 'd e';
  align-items:center; align-content:start; column-gap:3rem; row-gap:clamp(.75rem,3vh,2.5rem); text-align:left; overflow:visible;
  padding-top:calc(var(--aire) * .75); padding-bottom:clamp(1rem,3vh,2rem) }
.ci > .d1{ grid-area:t; margin:0 }
.ci > .arco-junta{ display:none }          /* la curva de costura cruzaba el titular: aquí no hay costura */
/* el titular a sangre: cierre.js lo MIDE y escribe el cuerpo exacto para tocar los dos márgenes. Esto
   es el reposo seguro si el script no corre: más chico de la cuenta, nunca cortado. */
.ci .d1{ font-size:clamp(2.75rem, 6.4vw, 11rem); line-height:.9; letter-spacing:-.045em; white-space:nowrap; max-width:none }
.ci .ci__escena{ grid-area:e; display:grid; place-items:center; width:min(18rem, 34vh); aspect-ratio:1; margin-right:clamp(0rem, 3vw, 3rem) }
.ci .ci__escena .cierre__cta{ margin:0 }
.ci .ci__boton{ padding:.9rem 1.5rem; font-size:var(--t5); background:rgba(8,9,12,.35) }
.ci .ci__pie{ grid-area:d; display:grid; gap:1.5rem; align-content:center }
.ci .ci__pie .cierre__dice{ margin:0; max-width:36rem; font-size:var(--t4); line-height:1.45; color:var(--tx-1) }
.ci .ci__pie .cierre__dice span{ display:block; margin-top:.4rem; color:var(--tx-2) }
.ci .ci__rutas{ display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; margin:0; font-size:var(--t5) }
.ci .ci__rutas a{ color:var(--tx-1); text-decoration:none; border-bottom:1px solid rgba(237,239,243,.25); padding-bottom:2px;
  transition:border-color .3s var(--curva) }
.ci .ci__rutas a:hover{ border-bottom-color:var(--tx-1) }
.ci .ci__rutas a:focus-visible{ outline:1px solid var(--tx-1); outline-offset:4px }

/* el botón: se llena de claro al pasar (lo mismo que tenía el cierre de la portada) */
.ci .ci__boton{ position:relative; isolation:isolate; overflow:hidden }
.ci .ci__boton::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--tx-1);
  clip-path:inset(0 0 100% 0); transition:clip-path .45s var(--curva) }
@media (hover:hover) and (pointer:fine){
  .ci .ci__boton:hover{ background:transparent; color:var(--tinta); border-color:var(--tx-1) }
  .ci .ci__boton:hover::before{ clip-path:inset(0 0 0 0) }
}
.ci .ci__boton .mono{ display:inline-block; transition:transform .22s var(--curva) }
@media (hover:hover) and (pointer:fine){ .ci .ci__boton:hover .mono{ transform:translate(2px,-2px) } }
.ci .ci__boton:focus-visible{ outline:1px solid var(--tx-1); outline-offset:4px }

/* el cielo lo pone el eclipse: la veladura se abre desde el tono de la sección de arriba y los halos
   pintados de `.oscuro` se quitan (subían el piso donde la totalidad tiene que dejar el cielo negro) */
.ci::before{ opacity:1; background:linear-gradient(to bottom, rgba(8,9,12,.55), rgba(8,9,12,.12) min(42vh, 26rem)) }
.ci::after{ display:none }

/* el pie, pegado: sin la puerta de aire de arriba; la marca a la izquierda de las columnas. Sin cielo ni
   veladura propios: con margen lateral se leían como una caja más clara (medido en la captura). */
.pie.-final::after{ display:none }
.pie.-final::before{ opacity:.12 }
.pie.-final{ padding-top:clamp(1.5rem,4vh,2.75rem); border-top:1px solid var(--tx-linea); margin-inline:var(--borde); padding-inline:0 }
@media (min-width:1100px){
  .pie.-final{ grid-template-columns:minmax(0,1.25fr) minmax(0,5fr); column-gap:3rem; row-gap:clamp(1.5rem,4vh,2.5rem) }
  .pie.-final .pie__bajo{ grid-column:1 / -1 }
  .pie.-final .pie__marca{ font-size:var(--t4) }
}

/* la salida: al hacer clic la corona crece y la pantalla se apaga antes de cambiar de página */
.ci-velo{ position:fixed; inset:0; z-index:90; background:#08090C; opacity:0; pointer-events:none;
  transition:opacity .42s cubic-bezier(.55,.06,.68,.19) .42s }
html.ci-sale .ci-velo{ opacity:1 }

@media (max-width:760px){
  .ci{ grid-template-columns:minmax(0,1fr); grid-template-areas:'t' 'e' 'd'; row-gap:1rem }
  .ci .ci__escena{ width:min(72vw, 17rem); justify-self:center; margin:0 }
}
@media (max-width:640px){
  .ci .d1{ white-space:normal; font-size:clamp(2.75rem, 14vw, 4rem); line-height:.95; letter-spacing:-.035em }
}
@media (prefers-reduced-motion:reduce){ .ci *, .ci-velo{ transition:none !important } }

/* ── lo mínimo para que el final se sostenga SOLO (las fichas de caso no cargan caliber.css). En el resto
   del sitio estas reglas repiten lo que ya dice caliber.css: no cambian nada. */
.ci{ padding-inline:var(--borde); position:relative }
.ci .d1{ font-family:var(--display, 'Switzer', sans-serif); font-weight:400; color:var(--tx-titular) }
.ci .golpe{ color:var(--tx-1) }
.ci .ci__boton{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--tx-1); border-radius:999px;
  color:var(--tx-1); text-decoration:none; font-weight:400 }
.ci .ci__boton:active{ transform:scale(.97) }
/* el lienzo de las fichas: aparece con el final y se va con él */
.ci-lienzo{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block; opacity:0;
  transition:opacity 1.2s cubic-bezier(.23,1,.32,1); pointer-events:none }
.ci-lienzo.-vivo{ opacity:1 }
/* la ficha pinta su negro en <html> Y en <body>: el fondo del body tapaba el lienzo (z-index -1) y el
   eclipse no salía (medido). El html conserva el mismo negro, así que quitarlo del body no cambia nada más. */
body:has(> .ci-lienzo){ background:transparent }