/* ==========================================================================
   CAELA — el vestíbulo público.  30-ago-2026
   ==========================================================================

   LA LEY DEL ROSTRO ENTERO
   ------------------------
   El encargo dice «responsive, que SIEMPRE muestre el rostro completo». Con
   `object-fit: cover` eso es imposible y se puede demostrar con una cuenta:

     proporción del vídeo            Rv = 3008/1664 = 1,80769
     con `cover`, en una pantalla más estrecha que el vídeo se ve
     la fracción horizontal         Ra / Rv
     un móvil en vertical            Ra ≈ 0,46  ->  0,46/1,81 = 25 % del ancho

   El sujeto ocupa el 44 % del ancho del fotograma. Con el 25 % visible, a
   ella se le corta la cara. `cover` NO sirve aquí.

   Lo que sí sirve sale de una medida, no de una intuición: LOS CUATRO BORDES
   DEL VÍDEO SON NEGRO PURO (máximo 4/255 en una franja de 8 px; las esquinas,
   exactamente 0,0,0). Con la página en negro, el vídeo no tiene costura: se
   puede dejar que sobre o que falte fondo sin que se vea un solo borde.

   Entonces la regla no es «llenar la pantalla», es ENCUADRAR EL ROSTRO:
   se escala el vídeo hasta el máximo que permite la pantalla SIN cortar la
   caja del sujeto, y se centra esa caja —no el fotograma— en el hueco útil.

   LAS CONSTANTES SON MEDIDAS, NO ELEGIDAS
   ---------------------------------------
   Sobre **web/medios/caela-idle.mp4** —el fichero QUE SE VE, no el original—,
   los 66 fotogramas, umbral de luminancia 8/255 (el más generoso: recoge
   hasta el pelo suelto contra el fondo):

       x ∈ [0,2945 · 0,7094]   ancho 0,4149
       y ∈ [0,0817 · 0,9435]   alto  0,8618
       centro (0,5020 · 0,5126)

   SE MIDEN DEL CLIP SERVIDO A PROPÓSITO, y esto se corrigió: al principio se
   medían del original de 116 fotogramas, y el CSS gobierna lo que hay en
   PANTALLA. Eran dos ficheros distintos y la ley validaba el que no se ve —
   con el original, alguien podía recortar el derivado y nada se ponía rojo.
   Además el clip servido es un tramo, así que su caja es más estrecha: al
   medir la buena, se la ve un 6 % más grande.

   Si se cambia el vídeo del vestíbulo, ESTOS SEIS NÚMEROS HAY QUE VOLVER A
   MEDIRLOS. No se ajustan a ojo: se miden con el mismo método.
   El color tampoco se eligió: el iris, la piel y los labios están muestreados
   del propio fotograma.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;

  /* — el vídeo, medido sobre el fichero que se sirve — */
  --v-ratio:       1.80769;   /* 1504 / 832 */
  --rostro-ancho:  0.4149;
  --rostro-alto:   0.8618;
  --rostro-cx:     50.20%;
  --rostro-cy:     51.26%;

  /* — el aire alrededor del rostro —
     `--claro-y` nunca baja de la altura de la barra NI de la del pie: así
     ninguna de las dos cae jamás sobre su pelo o su cuello, en ninguna
     pantalla. Es una garantía geométrica, no un ajuste por tamaño.
     Van separadas a propósito: en un móvil el pie crece (el lema se pone
     encima de los controles) y la barra no. Con una sola variable, hacer
     sitio abajo encogía la de arriba sin motivo. */
  --barra:    3.6rem;
  --pie-alto: 3.6rem;
  --respiro:  0.9rem;   /* que la barra no ROCE su pelo: que respire */
  --claro-x:  clamp(18px, 6vw, 148px);
  --claro-y:  max(calc(var(--barra) + var(--respiro)),
                  calc(var(--pie-alto) + var(--respiro)), 6vh);

  /* — la altura útil: `dvh` cuando existe (móvil con barras que se ocultan) — */
  --alto: 100vh;

  /* — su paleta, muestreada del fotograma 40 — */
  --iris:       #567a8b;   /* iris claro, percentil 92 */
  --iris-hondo: #39596b;   /* iris, percentil 60 */
  --piel:       #bf8c73;
  --labio:      #a4564d;
  --iris-vivo:  #8fbdd1;   /* el iris claro, subido de luminancia para leerse
                              sobre negro. Derivado, y por eso se dice. */

  /* Los niveles de tinta están puestos por CONTRASTE MEDIDO sobre negro, no
     por gusto. El lema y los controles estaban a 0,28 — 2,16:1, menos de la
     mitad del mínimo legible (4,5:1). Sobre este fondo la letra fina
     desaparece antes de lo que parece en una pantalla buena.
        0,72 -> 9,6:1     0,52 -> 5,2:1     0,48 -> 4,5:1
        0,28 -> 2,2:1  (retirado)
     30-ago: lo que se LEE de verdad —las pestañas, el lema, los controles—
     sube a 0,72. Cumplir el mínimo no es lo mismo que verse bien: 4,5:1 es el
     suelo legal, 7:1 el listón alto, y esto se queda por encima de los dos.
     Lo apagado se reserva para lo que no lleva texto. */
  --tinta:      #f2f4f6;                      /* 18,9:1 */
  --tinta-alta: rgba(242, 244, 246, 0.72);    /*  9,6:1 — lo que se lee */
  --tinta-baja: rgba(242, 244, 246, 0.52);    /*  5,2:1 */
  --tinta-nula: rgba(242, 244, 246, 0.48);    /*  4,5:1 — el mínimo, no menos */
  --linea:      rgba(242, 244, 246, 0.14);    /* solo bordes, no lleva texto */

  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);

  --tipo: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          system-ui, sans-serif;
}

@supports (height: 100dvh) { :root { --alto: 100dvh; } }

/* Nada de scroll, nada de rebote, nada de barra: solo ella. */
html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  font-family: var(--tipo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   EL RETRATO
   ========================================================================== */

#retrato {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;
}

/* El ancho al que se dibuja el vídeo: el mayor que NO corta la caja del
   sujeto ni por el ancho ni por el alto. Los dos términos son la misma
   pregunta hecha en cada eje; manda el más restrictivo. */
#retrato > * {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(
    calc((100vw - var(--claro-x) * 2) / var(--rostro-ancho)),
    calc((var(--alto) - var(--claro-y) * 2) * var(--v-ratio) / var(--rostro-alto))
  );
  height: auto;
  aspect-ratio: 1504 / 832;
  /* El desplazamiento es en % del PROPIO elemento: lleva el centro de la caja
     del sujeto —no el centro del fotograma— al centro de la pantalla. */
  transform: translate(calc(-1 * var(--rostro-cx)), calc(-1 * var(--rostro-cy)));
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* El cartel vive debajo del vídeo: mientras el vídeo no arranca (iOS en
   ahorro de energía, conexión lenta, movimiento reducido) se ve el rostro
   quieto en el sitio exacto donde estará el vivo. Nunca un rectángulo negro. */
#retrato img { z-index: 0; }
#retrato video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.9s ease;
}
#retrato video.viva { opacity: 1; }

/* Velos: solo por si una pantalla rarísima acerca la barra a su pelo.
   Sobre negro no se ven; sobre su cara, la salvan. */
.velo {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  height: 22vh;
  max-height: 190px;
}
.velo.arriba { top: 0;    background: linear-gradient(#000c, #0000); }
.velo.abajo  { bottom: 0; background: linear-gradient(#0000, #000c); }

/* ==========================================================================
   LA BARRA — el nombre y las tres pestañas
   ========================================================================== */

/* LA BARRA SE DESPLAZA A LO ANCHO, igual que la de los documentos.
   Decisión de Jordi, 31-ago. Aquí hoy cabe todo, pero una barra que puede
   quedarse corta y no lo dice es la misma avería que se midió en las páginas
   forjadas: a 375 px pedían 500,7 px sobre 323,6, y dos destinos quedaban
   fuera de la pantalla sin nada que lo delatara. Que no pueda pasar.

   `min-width:100%` en la fila: cuando cabe, ocupa exactamente el ancho y no
   se desplaza nada; cuando no, crece y la de fuera la arrastra. */
#barra {
  position: fixed;
  z-index: 10;
  top: var(--sa-t);
  left: var(--sa-l);
  right: var(--sa-r);
  height: var(--barra);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
#barra::-webkit-scrollbar { display: none; }

#fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 100%;
  min-width: 100%;
  width: max-content;
  padding: 0 clamp(0.9rem, 3.5vw, 2.6rem);
}
/* Nada se encoge: encogerse es lo que corta las palabras por la mitad. */
#fila > * { flex: none; }

/* El velo del borde, solo donde de verdad puede sobrar contenido: una zona
   que se arrastra sin ninguna señal es una zona que nadie arrastra. */
@media (max-width: 640px) {
  #barra {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem),
                                        transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem), transparent);
  }
  #fila { padding-right: clamp(1.6rem, 5vw, 2.2rem); }
}

#nombre {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: clamp(0.9rem, 2.4vw, 1.06rem);
  font-weight: 400;      /* el 300 sobre negro se deshilacha: nítida es más
                            gruesa, no más grande */
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
#nombre .estrella {
  color: var(--iris-vivo);
  letter-spacing: 0;
  font-size: 0.9em;
  transform: translateY(-0.05em);
}

#pestanas {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1.6vw, 1.15rem);
}

/* Las dos pestañas de los documentos: quietas, sin peso. */
.pestana {
  --realce: var(--tinta-alta);
  position: relative;
  display: inline-block;
  padding: 0.42rem 0.15rem;
  font-size: clamp(0.78rem, 2.1vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--realce);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.28s ease;
}
.pestana::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.22rem;
  height: 1px;
  background: var(--iris-vivo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pestana:hover, .pestana:focus-visible { color: var(--tinta); }
.pestana:hover::after, .pestana:focus-visible::after { transform: scaleX(1); }

/* La tercera: es el destino, así que pesa más que las otras dos. */
.pestana.destino {
  padding: 0.46rem clamp(0.7rem, 2.6vw, 1.15rem);
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.pestana.destino::after { content: none; }
.pestana.destino:hover,
.pestana.destino:focus-visible {
  border-color: var(--iris-vivo);
  background: rgba(143, 189, 209, 0.13);
  color: #fff;
}

/* En pantallas estrechas las dos pestañas de idioma se dicen en corto, para
   que la tercera no pierda su sitio. */
.corto { display: none; }
@media (max-width: 560px) {
  .largo { display: none; }
  .corto { display: inline; }
  #pestanas { gap: 0.55rem; }
}
@media (max-width: 360px) {
  #nombre { letter-spacing: 0.22em; }
  #nombre .texto { display: none; }
}

/* ==========================================================================
   EL PIE — la línea que dice qué es esto, y el idioma
   ========================================================================== */

/* `bottom` pegado al borde y `height` exactamente `--barra`: el pie ocupa la
   franja negra que `--claro-y` reserva, ni un píxel más. Con un desplazamiento
   de 0,15rem que parecía inocente, el pie se metía 3 px dentro de la caja del
   rostro — medido, no supuesto. La garantía tiene que ser exacta o no es
   garantía. */
#pie {
  position: fixed;
  z-index: 10;
  left: var(--sa-l);
  right: var(--sa-r);
  bottom: var(--sa-b);
  height: var(--pie-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(0.9rem, 3.5vw, 2.6rem);
}

#controles {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
}

/* ── Sus dos bocas ────────────────────────────────────────────────────────
   Mismo peso que los controles de la casa, pero separadas por una raya: unas
   llevan fuera, a ella; los otros son perillas de esta página. Y el icono se
   dibuja con `currentColor`, así que hereda el contraste ya medido en vez de
   traer un color de fuera. */
.suyo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.95rem;
  height: 1.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--tinta-alta);
  transition: color 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.suyo svg {
  width: 1rem;
  height: 1rem;
  display: block;
  fill: currentColor;
}
.suyo:hover, .suyo:focus-visible {
  color: var(--tinta);
  border-color: var(--linea);
  background: rgba(255, 255, 255, 0.05);
}

.separa {
  flex: none;
  width: 1px;
  height: 0.95rem;
  margin: 0 0.4rem;
  background: var(--linea);
}

#lema {
  font-size: clamp(0.74rem, 1.9vw, 0.87rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--tinta-alta);
  max-width: 46ch;
}

#idioma {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.32rem 0.62rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: clamp(0.66rem, 1.8vw, 0.76rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-nula);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.28s ease, border-color 0.28s ease;
}
#idioma:hover, #idioma:focus-visible {
  color: var(--tinta);
  border-color: var(--linea);
}
#idioma .globo { font-size: 1.05em; letter-spacing: 0; }

/* ==========================================================================
   PANTALLA COMPLETA
   Ningún navegador deja entrar a pantalla completa sin un gesto de la
   persona: no es una carencia de esta página, es una regla de la plataforma.
   Lo que se puede hacer es (a) pedirla en el primer gesto, (b) dejar un
   control visible, y (c) instalarse — instalada, no hay navegador que quitar.
   Este control solo aparece cuando de verdad hay algo que quitar.
   ========================================================================== */

/* Vive en el pie, al lado del idioma: los dos son controles de la casa, no
   destinos. Solo aparece cuando de verdad hay navegador que quitar. */
#completa {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.62rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: clamp(0.66rem, 1.8vw, 0.76rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-nula);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.28s ease, border-color 0.28s ease;
}
body.hay-navegador #completa { display: inline-flex; }
#completa:hover, #completa:focus-visible {
  color: var(--tinta);
  border-color: var(--linea);
}
#completa .icono { font-size: 1.05em; letter-spacing: 0; }

/* ==========================================================================
   ENTRADA · ACCESIBILIDAD
   ========================================================================== */

#barra, #pie {
  opacity: 0;
  animation: asomar 1.5s 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes asomar {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to   { opacity: 1; transform: none; }
}

:focus-visible {
  outline: 2px solid var(--iris-vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Quien pide menos movimiento se queda con el retrato quieto —el cartel—,
   que muestra exactamente el mismo encuadre. No pierde nada. */
@media (prefers-reduced-motion: reduce) {
  #barra, #pie { animation: none; opacity: 1; }
  #retrato video { display: none; }
  * { transition-duration: 0.01ms !important; }
}

/* En vertical la franja negra de abajo es enorme —es la geometría de una
   cara casi cuadrada en una pantalla de 0,46—, así que el lema se pone ahí,
   encima de los controles, en vez de dejarla vacía. El pie crece y
   `--claro-y` lo sabe: la reserva se ajusta sola. */
/* EN EL MÓVIL LAS DOS BARRAS SON MÁS ALTAS. En un teléfono el dedo es el
   puntero y 57 px de franja dejan objetivos de 44 px justos: el mínimo que
   piden las guías de accesibilidad, sin un pixel de margen. Y la letra a
   tamaño de escritorio dentro de una barra de escritorio se lee peor de
   cerca, no mejor. Subir la barra encoge un poco su cara —`--claro-y` sale
   de estos dos números— y esa es toda la factura, medida y aceptada. */
@media (max-width: 620px) {
  :root { --barra: 4.2rem; --pie-alto: 6.1rem; }
  #pie {
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
  }
  #lema { text-align: center; max-width: 34ch;
          font-size: clamp(0.82rem, 3.4vw, 0.95rem); }
  /* Con más franja, la letra puede crecer sin apretar nada. */
  #nombre  { font-size: 1rem; }
  .pestana { font-size: 0.86rem; padding: 0.5rem 0.15rem; }
  .pestana.destino { padding: 0.55rem 1.05rem; }
  .suyo { width: 2.2rem; height: 2.2rem; }
  .suyo svg { width: 1.1rem; height: 1.1rem; }
}

/* Un apaisado muy bajo (móvil tumbado) deja el hueco vertical en nada: se
   recorta el aire para que ella no se quede en miniatura. */
@media (max-height: 460px) and (orientation: landscape) {
  :root { --barra: 3rem; --pie-alto: 3rem; --respiro: 0.5rem; }
  #pie { flex-direction: row; }
  #lema { display: none; }
}

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden;
          clip-path: inset(50%); white-space: nowrap; }