/* ═══════════════════════════════════════════════════════════════════
   AIMA · assets/aima-niebla.css — LA NIEBLA DE «PRÓXIMAMENTE»
   ───────────────────────────────────────────────────────────────────
   Creado el 15/08/2026.

   QUÉ ES
   Una capa blanca que se pone ENCIMA de un bloque que ya está escrito
   y lo deja visible pero inalcanzable, con un sello de «Próximamente».
   No borra nada, no comenta nada, no mueve nada de sitio: el HTML de
   debajo sigue exactamente igual que estaba. El día que se descubra,
   se quita el atributo `data-niebla` y vuelve tal cual.

   POR QUÉ EXISTE — la decisión del 15/08/2026
   Bratney decidió dejar de empujar los tres sectores a la vez y vender
   SOLO el pack Base hasta que sea el mejor calidad-precio de España.
   Todo lo demás pasa a «Próximamente». Y el razonamiento que hay
   detrás importa, porque es el que decide cómo se ve esto:

     «es mejor añadir y subir precio que coger lo mejor y empezar
      a rebajar»

   Por eso la niebla NO borra. Enseñar lo que viene y no poder tocarlo
   sostiene el precio; quitarlo de la página lo convierte en una web
   más pequeña. Es un escaparate tapado, no un local vacío.

   LAS DOS TRAMPAS QUE CONDICIONAN ESTE CSS
   1 · `position:sticky` NO se puede usar aquí. En móvil el body lleva
       `overflow-x:hidden`, y eso convierte al body en contenedor de
       scroll y se lleva por delante cualquier sticky de dentro. Está
       avisado en el CSS de packs.html línea 63. Por eso el sello se
       coloca arriba del bloque con un margen, no pegado a la ventana.
   2 · La capa NO envuelve al bloque, se le añade como ÚLTIMO HIJO y va
       en `position:absolute`. Envolver rompería los `data-reveal` y
       los selectores de hijo directo. Absoluta = fuera del flujo, así
       que ni flex ni grid la colocan.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · EL BLOQUE TAPADO ─────────────────────────────────────────
   `position:relative` para que la capa se ancle aquí, y
   `pointer-events:none` para que nada de dentro se pueda pulsar. El JS
   además le quita el href a los enlaces y el foco al tabulador: con
   CSS solo, un teclado sigue entrando. */
.nb-tapado{
  position:relative;
  pointer-events:none;
  -webkit-user-select:none; user-select:none;
}
/* Lo de dentro se apaga un poco: menos color y menos contraste. No se
   difumina el contenido en sí porque un `filter:blur` sobre una
   sección de 1.500 px cuesta caro en móvil y ya lo hace la capa. */
.nb-tapado > *:not(.nb-capa){ opacity:.5; }

/* ── 2 · LA NIEBLA ───────────────────────────────────────────────
   inset:-1px come el borde del bloque para que no asome una línea.
   El degradado hace que la parte de arriba sea un poco más
   transparente: se adivina qué hay debajo sin poder leerlo. */
.nb-capa{
  position:absolute; inset:-1px; z-index:40;
  pointer-events:auto;                 /* el sello sí se puede tocar  */
  background:linear-gradient(180deg,
             rgba(255,255,255,.72) 0%,
             rgba(255,255,255,.88) 22%,
             rgba(255,255,255,.93) 100%);
  -webkit-backdrop-filter:saturate(.2) blur(3px);
          backdrop-filter:saturate(.2) blur(3px);
  display:flex; justify-content:center; align-items:center;
  padding:16px;
}
/* Bloque alto (una sección entera): el sello no puede ir centrado o
   habría que scrollear media pantalla para verlo. Va arriba. */
.nb-capa.larga{ align-items:flex-start; padding-top:clamp(28px, 12vh, 140px); }

/* Navegador sin backdrop-filter (Firefox viejo): se compensa subiendo
   la opacidad del blanco, que es lo que de verdad tapa. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nb-capa{ background:rgba(255,255,255,.95); }
}

/* ── 3 · EL SELLO ────────────────────────────────────────────────
   Chapita de escaparate: filo rojo arriba, la palabra en Poppins con
   mucho tracking, y una línea de explicación debajo. Tamaño contenido
   a propósito — el sello no es el protagonista, lo es lo que sí se
   puede comprar. */
.nb-sello{
  max-width:min(420px, 100%);
  background:#fff;
  border:1px solid var(--hair, rgba(11,11,13,.08));
  border-top:3px solid var(--red, #C1272D);
  box-shadow:0 18px 44px -22px rgba(11,11,13,.42);
  padding:20px 24px 22px;
  text-align:center;
}
.nb-sello b{
  display:block;
  font-family:'Poppins', -apple-system, sans-serif;
  font-weight:600; font-size:12px;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink, #0B0B0D);
}
.nb-sello .nb-que{
  display:block; margin-top:9px;
  font-family:'Montserrat', -apple-system, sans-serif;
  font-size:13.5px; line-height:1.5;
  color:var(--gray, #8A8D8F);
}
.nb-sello .nb-que em{ color:var(--ink, #0B0B0D); font-style:normal; font-weight:600; }

/* La salida: el único sitio al que se puede ir desde aquí. */
.nb-sello .nb-liga{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px;
  font-family:'Poppins', -apple-system, sans-serif;
  font-weight:600; font-size:12px; letter-spacing:.04em;
  color:var(--red, #C1272D); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease, ease);
}
.nb-sello .nb-liga:hover,
.nb-sello .nb-liga:focus-visible{ border-bottom-color:var(--red, #C1272D); }

/* ── 4 · LA VARIANTE CHICA ───────────────────────────────────────
   Para tarjetas (una puerta de pack, una barra del escaparate): el
   sello entero no cabe, así que se queda solo la palabra. */
.nb-capa.mini{ padding:10px; }
.nb-capa.mini .nb-sello{ padding:11px 15px; border-top-width:2px; box-shadow:none; }
.nb-capa.mini .nb-sello b{ font-size:10.5px; letter-spacing:.16em; }
.nb-capa.mini .nb-sello .nb-que,
.nb-capa.mini .nb-sello .nb-liga{ display:none; }

/* ── 4 bis · LA CINTA · 30/08/2026 ───────────────────────────────
   Bratney, viendo la ficha blanca sobre el podio de Corporación: «no
   pongas eso, mejor pon un próximamente en grande en diagonal, tipo
   oferta, solo la palabra en rojo — la explicación ya la dice la
   parte de abajo».

   Es la variante contraria a la chica: allí la palabra se encoge para
   caber en una tarjeta; aquí crece hasta ocupar la sección entera y
   se gira. No es un cartel que se lee, es una marca que se ve de
   lejos — como el sello de una oferta estampado sobre el escaparate.

   ⚠ SIN FICHA BLANCA DEBAJO. La caja del sello se apaga entera: un
   rectángulo blanco girado no parece un sello, parece un papel mal
   pegado. Lo que se gira es la palabra a pelo, sobre la vitrina.

   ⚠ Y EL GIRO NO PUEDE ENSANCHAR LA PÁGINA. Un texto rotado sigue
   ocupando su caja sin girar a efectos de scroll, y a 46 px por letra
   eso se sale por la derecha en móvil: `overflow:hidden` en la capa y
   `max-width:100%` en la palabra. Es el mismo fallo que ya costó una
   barra de scroll horizontal en la portada.

   El tamaño va con `clamp` sobre `vw` para que la palabra pese lo
   mismo en un portátil que en un móvil: es lo único que hay que leer
   en toda la sección. */
.nb-capa.cinta{ overflow:hidden; padding:0; }

/* ⚠ LA CINTA BAJA LA PALABRA, PERO NO ENCOGE EL VELO.
   `.larga` manda el sello ARRIBA cuando el bloque es más alto que la
   pantalla, y tiene razón: centrarlo en una sección de tres pantallas
   lo deja donde nadie lo ve al entrar. Eso era lo que tenía el
   PRÓXIMAMENTE pegado al techo del podio.

   ⚫ 30/08 · Y AQUÍ SE METIÓ UN FALLO GORDO AL ARREGLARLO. La primera
   versión acotaba la capa a una pantalla —`bottom:auto` y
   `height:min(100%,100svh)`— para poder centrar dentro. Centraba, sí:
   y DESTAPABA el resto de la sección. Corporación se quedó con el
   velo solo en su primer tercio y con toda su composición legible
   debajo — el spot mensual, las cuatro sesiones, el rodaje semanal —,
   que es exactamente lo que se llevaba media sesión retirando.
   La capa NO SE TOCA: sigue cubriendo la sección entera. Lo que se
   mueve es la palabra, empujándola con `padding-top` hasta la mitad
   del primer golpe de vista. Mismo sitio, y sin agujero. */
.nb-capa.cinta.larga{
  align-items:flex-start;
  padding-top:min(38svh, 42%);
}
.nb-capa.cinta .nb-sello{
  max-width:100%;
  background:none; border:0; box-shadow:none; padding:0;
  transform:rotate(-8deg);
}
.nb-capa.cinta .nb-sello b{
  font-family:'Anton', 'Poppins', -apple-system, sans-serif;
  font-weight:400;
  /* ⚫ 30/08, segunda pasada · «más grande». De 9vw a 15vw y el techo
     de 132 a 300 px. El suelo sube a 54 para que en un móvil siga
     siendo lo único que se lee, no una etiqueta más. */
  font-size:clamp(54px, 15vw, 300px);
  line-height:.9;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--red, #C1272D);
  white-space:nowrap;
  /* el trazo de refuerzo: sobre una foto muy clara o muy oscura, un
     rojo plano se pierde. Una sombra dura del color del fondo lo
     recorta sin ensuciarlo — no es un halo difuso, es un canto. */
  text-shadow:0 2px 0 rgba(255,255,255,.5);
}
.nb-capa.cinta.oscura .nb-sello b{ text-shadow:0 2px 0 rgba(11,11,13,.55); }
/* En móvil «PRÓXIMAMENTE» son trece letras en una línea: a 15vw se
   sale por los lados aunque la capa lo recorte, y recortada se lee a
   medias. Aquí manda el ancho, no el gusto. */
@media (max-width:520px){
  .nb-capa.cinta .nb-sello b{ font-size:clamp(30px, 12.5vw, 62px); }
}
@media (prefers-reduced-motion:reduce){
  .nb-capa.cinta .nb-sello{ transform:rotate(-8deg); }
}

/* ── 5 · LA VITRINA · 18/08/2026 ─────────────────────────────────
   La niebla de arriba TAPA: blanco al 88 %, saturación al 20 % y el
   contenido a la mitad. Con eso, la escena del podio de Corporación
   —focos, ciudad, AMI coronada, los tres diamantes— se queda en una
   mancha gris. Y esa escena está dibujada píxel a píxel.

   La vitrina hace lo contrario, y por eso existe: NO baja la opacidad
   de nada y NO le quita el color. Lo único que hace es DESENFOCAR, que
   es justo la herramienta que separa las dos cosas que hay que separar
   aquí — a 7 px un texto de 15 px deja de leerse, y una composición de
   260 px de ancho se sigue viendo entera. Tapa el precio, enseña el
   trabajo.

   Sigue cerrada de verdad: el cierre no lo hace el CSS, lo hace el JS
   quitando los href y el foco. Esto es solo cómo se ve. */
.nb-capa.vitrina{
  background:linear-gradient(180deg,
             rgba(255,255,255,.08) 0%,
             rgba(255,255,255,.18) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(1);
          backdrop-filter:blur(7px) saturate(1);
}
/* Un velo blanco sobre una sección negra la deja gris sucia, no
   translúcida. Si lo de debajo es oscuro, el velo también. La clase la
   pone el JS mirando si hay un `.oscuro` por encima. */
.nb-capa.vitrina.oscura{
  background:linear-gradient(180deg,
             rgba(11,11,13,.10) 0%,
             rgba(11,11,13,.26) 100%);
}
/* Y el contenido se queda como estaba: sin el `opacity:.5` de la
   niebla normal, que es exactamente lo que borra la composición. */
.nb-tapado:has(> .nb-capa.vitrina) > *:not(.nb-capa){ opacity:1; }

/* Sin backdrop-filter no hay vitrina posible —no se puede desenfocar lo
   de debajo—, así que se cae a la niebla normal antes que dejar el
   precio legible detrás de un velo del 18 %. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nb-capa.vitrina,
  .nb-capa.vitrina.oscura{ background:rgba(255,255,255,.95); }
  .nb-tapado:has(> .nb-capa.vitrina) > *:not(.nb-capa){ opacity:.5; }
}
/* ⚠️ `:has` no está en todos los navegadores. Donde no está, el
   contenido se queda al 50 % y la vitrina se ve más apagada de lo que
   debería: feo, no roto. No se compensa con más JS por una cosa que es
   solo cosmética. */

/* ── 6 · LA COLUMNA APAGADA ──────────────────────────────────────
   Para una tabla comparativa, donde «lo de Corporación» no es un
   bloque: son veinticinco celdas sueltas con la clase `.b`. Taparlas
   una a una serían veinticinco sellos, y tapar la tabla entera se
   llevaría por delante a Escala, que sí se vende.

   Aquí NO se desenfoca, y es a propósito: la tabla existe para que el
   visitante no tenga que fiarse de nuestra palabra, y una columna
   ilegible no compara nada. Se apaga y se rotula. El interruptor para
   borrarla de verdad está en el JS (`COLUMNA_BORROSA`), no aquí. */
[data-niebla-columna="b"].nb-col .b{
  opacity:.42;
  filter:grayscale(1);
}
[data-niebla-columna="b"].nb-col .duelo-cab .b{ opacity:.66; }
[data-niebla-columna="b"].nb-col-borrosa .b{
  filter:grayscale(1) blur(3px);
  -webkit-user-select:none; user-select:none;
}
/* 27/08/2026 · Y la CABECERA no. El blur se hereda a los hijos, así que sin
   esta línea también se borraba el nombre del pack y la chapa de
   «PRÓXIMAMENTE» — justo lo único que tiene que leerse. Se difuminan los
   datos; el rótulo se lee. */
[data-niebla-columna="b"].nb-col-borrosa .duelo-cab .b{ filter:grayscale(1); }
/* El pseudo-elemento que en móvil escribe «Corporación · » delante de
   cada celda se apaga con ella; no hay que tocarlo. */

/* La chapita que el JS le cuelga a la cabecera de la columna. Es lo
   único de la columna que se lee a plena luz: una columna apagada sin
   decir por qué parece un error de la página, no una decisión. */
.nb-chip{
  display:block; margin-top:6px;
  font-family:'Poppins', -apple-system, sans-serif;
  font-weight:600; font-size:8.5px; font-style:normal;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--red, #C1272D);
}
/* Y se lee entera aunque la columna esté al 42 %: la opacidad del
   padre no se puede «deshacer» desde el hijo, así que se le sube el
   contraste con color pleno y peso. */
[data-niebla-columna].nb-col .duelo-cab .b .nb-chip{ color:var(--red, #C1272D); }

/* ── 7 · CORTESÍAS ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){ .nb-sello .nb-liga{ transition:none; } }
@media print{ .nb-capa{ background:none; backdrop-filter:none; } .nb-tapado > *{ opacity:1; } }