/* ==========================================================================
   CONSENTIMIENTO — diseño de SARH Studio (entrega del 6 sep 2026).

   Fuente: `landings/diseño del diseñador - landing Biofertility - Claude/
   banner bfc privacy/`. Es la tercera versión y la definitiva: sustituye a la
   caja al pie y a la propuesta de cristal.

   La una la usan las tres landings; lo único que cambia entre ellas es el
   texto, que sale de `content/<idioma>.js`.

   Qué cambia respecto de la anterior, y por qué importa:
     · La tarjeta va **centrada**, no al pie. Es la primera decisión de la
       página y se planta delante.
     · El velo **sí bloquea** ahora. Ver la nota larga en `.cookies`.
     · Entra con retraso y en transición, no de golpe. El retraso lo pone
       `consent.js`, no esto.

   Los valores son los del diseñador, pero expresados con los tokens del
   proyecto: donde su píxel y el token se separaban por menos de lo que el ojo
   distingue —eyebrow 10.5 vs 11px, título 19 vs 20px— manda el token, porque
   el día que la escala cambie no puede quedarse un componente atrás.

   Nada de lo que hay aquí decide si se carga el píxel: eso vive en
   `js/modules/consent.js`. Esto es sólo cómo se ve.
   ========================================================================== */

/* --- El velo ------------------------------------------------------------ */

.cookies {
  position: fixed;
  inset: 0;
  z-index: 60;                /* sobre el contenido, debajo del modal (100) */
  display: flex;
  align-items: center;        /* centrada: es lo primero que hay que resolver */
  justify-content: center;
  padding: var(--page-pad-x);

  /* SÍ bloquea la página, y es un cambio deliberado respecto de la versión
     anterior: lo pide el diseño de SARH, que lo declara `aria-modal`.
     No convierte esto en un «muro de cookies», que es lo ilegal: un muro es
     el que sólo deja pasar si ACEPTAS. Aquí las dos salidas abren la página
     por igual —«Solo lo esencial» cierra y da acceso completo—, así que lo
     que se exige no es el permiso, es una respuesta. Eso sí es válido.
     Lo que sostiene esa validez son los dos botones gemelos de más abajo: el
     día que uno pese menos que el otro, esto pasa a ser un muro de verdad. */
  opacity: 0;
  transition: opacity var(--dur-consent) var(--ease-default);
}

/* El velo y el desenfoque van en una capa APARTE, y sobredimensionada.
   ------------------------------------------------------------------------
   Estaban en `.cookies` mismo, que mide exactamente el viewport. El 8 sep
   2026 Carlos vio en producción una **franja de unos 30px sin difuminar en
   el borde superior**: el resto de la página se veía tapado y esa banda no.
   Dos causas posibles, y esto cubre las dos:

     · Con la página desplazada, `backdrop-filter` puede quedarse sin
       repintar una banda al borde — el navegador reutiliza lo que ya tenía.
     · Y a zoom distinto del 100%, el redondeo de píxeles deja descubierta
       una tira fina.

   Sobredimensionar el velo hace que ninguna de las dos se note: hay 12vh de
   margen por arriba y por abajo, y 12vw a los lados. Es una capa fija sin
   contenido, así que no puede crear scroll ni mover nada.

   Va como `::before` para no meter otro nodo: la tarjeta sigue centrada en
   `.cookies`, que sí mide el viewport exacto. */
.cookies::before {
  content: "";
  position: fixed;
  inset: -12vh -12vw;
  z-index: -1;
  pointer-events: none;
  background: var(--bfc-noche-a34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* `consent.js` la pone en el fotograma siguiente a quitar [hidden]: sin ese
   paso el navegador pinta el estado final de golpe y no hay transición. */
.cookies.esta-visible { opacity: 1; }

/* Mientras el diálogo pregunta, la página de debajo no se mueve.
   ------------------------------------------------------------------------
   Es lo que corresponde a un `aria-modal` —lo de detrás está fuera de
   juego— y además evita la franja de arriba: si nada se desplaza, no hay
   nada que el desenfoque pueda dejar sin repintar.

   `scrollbar-gutter: stable` en `html` (base.css) impide el salto lateral
   al desaparecer la barra de desplazamiento. */
html.cookies-abierto,
html.cookies-abierto body {
  overflow: hidden;
}

/* --- La tarjeta --------------------------------------------------------- */

.cookies__caja {
  position: relative;
  width: min(100%, 520px);
  padding: var(--space-10) var(--space-10) var(--space-9);
  border: 1px solid var(--bfc-azul-a22);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-dialog);

  /* Blanco que cae a marfil. OPACO de punta a punta: la versión anterior
     terminaba en un turquesa al 14% de alfa y dejaba ver el video de detrás,
     con el texto encima ilegible. Un token `-aXX` es un color CON alfa; vale
     para bordes y lavados sobre algo ya opaco, nunca para el fondo de algo
     que lleva texto. */
  background: linear-gradient(180deg, var(--bfc-blanco), var(--bfc-marfil-alto));

  /* En una pantalla muy baja —un teléfono en horizontal— la tarjeta podría no
     caber. Que scrollee ella. */
  max-height: 100%;
  overflow-y: auto;

  /* Sube 16px al entrar. Con `prefers-reduced-motion` la duración del token
     ya es 0s, así que esto se apaga solo. */
  transform: translateY(16px);
  transition:
    transform var(--dur-consent) var(--ease-entrada),
    opacity var(--dur-consent) var(--ease-default);
  opacity: 0;
}

.cookies.esta-visible .cookies__caja {
  transform: none;
  opacity: 1;
}

/* Filo de luz en la esquina superior izquierda. Es un borde de 1px pintado
   con degradado: se hace con dos capas y `mask-composite`, porque `border`
   no acepta degradados. */
.cookies__caja::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--bfc-turquesa-a50), transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* --- Cabecera: el sello, la cédula y la bienvenida ---------------------- */

.cookies__cab {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

/* Mismo azulejo que los iconos de las opciones del formulario: es lo que hace
   que el bloque se lea como parte de la página y no como un plugin. */
.cookies__sello {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--bg-icon-tile);
  border: 1px solid var(--bfc-azul-a22);
  display: grid;
  place-items: center;
}

.cookies__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-accent);
}

/* La serif de la marca, la misma de las líneas emocionales del hero y del
   cierre. Es la bienvenida, no el mensaje legal: por eso va en cursiva. */
.cookies__bienvenida {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: var(--lh-serif);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  text-wrap: balance;
}

/* --- Cuerpo ------------------------------------------------------------- */

.cookies__titulo {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
  color: var(--text-body);
  text-wrap: balance;
}

.cookies__texto {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-option);
  line-height: 1.55;
  color: var(--text-muted);
}

/* Lo que la ley obliga a que se entienda a la primera va en tinta plena: que
   no se activa nada sin permiso, y que nada se vende. */
.cookies__texto strong {
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

/* Subrayado con borde y no con `text-decoration`: así se puede aclarar sin
   tocar el color del texto, que es lo que pide el diseño. */
.cookies__texto a {
  color: var(--link);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-bottom: 1px solid var(--bfc-azul-a50);
}

.cookies__texto a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--border-active);
}

/* --- Acciones ----------------------------------------------------------- */

.cookies__acciones {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Los dos ocupan exactamente lo mismo y llevan la misma letra y el mismo
   tamaño. Que uno sea sólido y el otro con filo es jerarquía visual, no una
   traba. Y aquí no es sólo estética: como el velo bloquea la página, estos
   dos botones son las DOS únicas salidas, y tienen que costar lo mismo. Si
   rechazar fuera más pequeño o más pálido, esto sí sería un muro de cookies
   y el consentimiento no valdría nada. */
.cookies__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px var(--space-7);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-option);
  border: none;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-default),
    border-color var(--dur-base) var(--ease-default),
    color var(--dur-base) var(--ease-default);
}

.cookies__btn--aceptar {
  background: var(--action-primary);
  color: var(--action-primary-text);
  box-shadow: var(--shadow-cta);
}

.cookies__btn--aceptar:hover { transform: translateY(-2px); }

.cookies__btn--secundario {
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--state-inactive);
}

.cookies__btn--secundario:hover {
  border-color: var(--border-active);
  color: var(--text-accent);
}

/* --- Pie ---------------------------------------------------------------- */

.cookies__nota {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* --- Pantallas estrechas ------------------------------------------------ */

@media (max-width: 520px) {
  .cookies__caja { padding: var(--space-9) var(--space-8) var(--space-8); }
  .cookies__bienvenida { font-size: 20px; }

  /* Apilados: a 320px, dos botones lado a lado parten «Solo lo esencial» en
     tres líneas o lo recortan, y un botón que no se lee entero no es una
     opción de verdad.

     `column` y NO `column-reverse`: al apilar, rechazar tiene que quedar
     arriba igual que queda a la izquierda en horizontal. Invertirlo pondría
     «Acepto» primero, que es exactamente la trampa que el resto de este
     archivo evita. */
  .cookies__acciones { flex-direction: column; }
}