/* RELAXIMO web v1 · sobria, tipografica, sin dependencias externas.
   Ninguna fuente, script ni hoja de terceros: cero peticiones fuera del dominio. */

:root {
  --tinta: #f4f1ec;
  --tinta-apagada: #b8b2a8;
  --fondo: #0d0c0b;
  --fondo-alto: #161513;
  --acento: #d9a05b;
  --linea: #2b2825;
  --ancho: 68ch;
  --paso: clamp(1.5rem, 4vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)/1.65
        ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: #14110d;
  padding: 0.6rem 1rem;
  font-weight: 700;
  z-index: 10;
}
.salto-contenido:focus { left: 0; }

.envoltorio {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--paso);
}

/* ---------- cabecera ---------- */

header[role="banner"] {
  border-bottom: 1px solid var(--linea);
  padding: 1.5rem 0;
}

.marca {
  display: inline-block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
}
.marca:hover, .marca:focus-visible { color: var(--acento); }

nav[aria-label] ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

nav a {
  color: var(--tinta-apagada);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
nav a:hover, nav a:focus-visible { color: var(--tinta); border-bottom-color: var(--acento); }
nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }

/* ---------- contenido ---------- */

main { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 6rem); }

h1 {
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  font-weight: 700;
}

.rotulo {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.75rem;
}

.entradilla {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--tinta);
  margin: 0 0 2.5rem;
  max-width: 54ch;
}

h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.005em;
  margin: 3rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
  font-weight: 700;
}

h3 {
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin: 2rem 0 0.5rem;
  font-weight: 700;
}

p { margin: 0 0 1.15rem; max-width: 62ch; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover, a:focus-visible { color: var(--tinta); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

ul.lista, ol.lista { padding-left: 1.2rem; margin: 0 0 1.15rem; }
ul.lista li, ol.lista li { margin-bottom: 0.4rem; }

dl.ficha { margin: 0 0 1.5rem; }
dl.ficha div {
  display: grid;
  grid-template-columns: minmax(10rem, 16ch) 1fr;
  gap: 0.25rem 1.25rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linea);
}
dl.ficha dt {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-apagada);
  margin: 0;
}
dl.ficha dd { margin: 0; }

@media (max-width: 34rem) {
  dl.ficha div { grid-template-columns: 1fr; gap: 0.15rem; }
}

blockquote {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--acento);
  color: var(--tinta);
}

.aviso {
  background: var(--fondo-alto);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  padding: 1rem 1.15rem;
  margin: 0 0 1.75rem;
}
.aviso p:last-child { margin-bottom: 0; }

/* ---------- formulario ---------- */

form { margin: 0 0 1.5rem; }

.campo { margin-bottom: 1.15rem; }

label {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-apagada);
  margin-bottom: 0.35rem;
}

input, textarea, select {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--fondo-alto);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 0.65rem 0.75rem;
}
input:focus, textarea:focus, select:focus { border-color: var(--acento); }
textarea { min-height: 7.5rem; resize: vertical; }

.pista { font-size: 0.875rem; color: var(--tinta-apagada); margin: 0.35rem 0 0; }

button {
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #14110d;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 2px;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
}
button:hover, button:focus-visible { background: var(--tinta); border-color: var(--tinta); }

.boton-texto {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--acento);
  text-decoration: none;
  border: 1px solid var(--acento);
  border-radius: 2px;
  padding: 0.7rem 1.4rem;
}
.boton-texto:hover, .boton-texto:focus-visible { background: var(--acento); color: #14110d; }

/* ---------- pie ---------- */

footer[role="contentinfo"] {
  border-top: 1px solid var(--linea);
  padding: 2rem 0 3rem;
  font-size: 0.875rem;
  color: var(--tinta-apagada);
}
footer[role="contentinfo"] p { max-width: none; }
footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 1rem; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Tipografia de marca · Syne (SIL Open Font License 1.1, autoalojada)
   Licencia completa en /vendor/fuentes/SYNE_OFL.txt. La OFL permite uso
   comercial, modificacion y empotrado; no exige pago ni atribucion en pantalla.
   Se sirve desde este dominio: sigue habiendo cero peticiones a terceros.
   font-display: optional y no swap — una fuente que llega tarde y recoloca
   titulares es un salto de diseno, y el presupuesto de CLS es 0.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Syne";
  src: url("/vendor/fuentes/syne-latin-800-normal.woff2") format("woff2"),
       url("/vendor/fuentes/syne-latin-800-normal.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

:root {
  --display: "Syne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;
}

h1, h2, .rotulo { font-family: var(--display); }
h1 { font-weight: 800; letter-spacing: -0.02em; }
h2 { font-weight: 800; }

/* ---------------------------------------------------------------------------
   Logotipo en la cabecera. Va en linea como trazados: ni una peticion mas, ni
   una fuente que haga falta cargar antes de que la marca se lea.
--------------------------------------------------------------------------- */

.marca { line-height: 0; letter-spacing: normal; padding: 0.25rem 0; }
/* El formato principal pasa a ser el lockup horizontal (COMPAS, 08/10/2026).
   Es 10,6:1, asi que necesita mas ancho que el wordmark solo para que el
   simbolo no baje del minimo legible. El viewBox declara la proporcion:
   el navegador reserva el alto antes de pintar y el CLS sigue en 0. */
.marca svg { display: block; width: clamp(10rem, 26vw, 13.5rem); height: auto; color: var(--tinta); }
.marca:hover svg, .marca:focus-visible svg { color: var(--acento); }

/* ---------------------------------------------------------------------------
   HERO · marco cinematografico sin likeness.
   Lo que hay detras del titular es geometria de marca, no una imagen de nadie:
   el mismo compas de doce del simbolo, a escala de campo. No depende de
   OPEN-D3 ni de ninguna cesion de derechos.
   El hueco [data-hero-slot] sigue existiendo: el dia que haya un video o un
   visualizer propio entra como primer hijo de .hero-fondo y nada mas se toca.
--------------------------------------------------------------------------- */

main:has(> .hero) { padding-top: 0; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 82svh, 48rem);
  padding: clamp(3rem, 9vw, 6rem) 0 clamp(2.5rem, 7vw, 4.5rem);
  border-bottom: 1px solid var(--linea);
}

.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Dos brasas calientes fuera de eje y una caida al fondo. Gradientes, no imagenes. */
  background:
    radial-gradient(58% 48% at 76% 18%, rgba(217, 160, 91, 0.17) 0%, rgba(217, 160, 91, 0) 68%),
    radial-gradient(52% 55% at 12% 86%, rgba(164, 72, 44, 0.14) 0%, rgba(164, 72, 44, 0) 70%),
    linear-gradient(180deg, #121010 0%, var(--fondo) 72%);
}

/* Grano. SVG en linea como data URI: mismo documento, cero terceros. */
.hero-grano {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Surcos. Lineas finisimas, como un vinilo visto de canto. */
.hero-surcos {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(244, 241, 236, 0.035) 0px,
    rgba(244, 241, 236, 0.035) 1px,
    transparent 1px,
    transparent 7px
  );
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 10%, transparent 82%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 10%, transparent 82%);
}

/* El campo de compas: tres anillos concentricos del simbolo, a tamano de escenario. */
.compas-campo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(34rem, 86vmax, 92rem);
  height: clamp(34rem, 86vmax, 92rem);
  transform: translate(-50%, -50%);
  opacity: 0.42;
}
@media (min-width: 60rem) {
  .compas-campo { left: 68%; }
}

.hero-texto { position: relative; width: 100%; }

.hero .marca-hero {
  display: block;
  width: min(100%, 30rem);
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  color: var(--tinta);
}

.hero h1 {
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.25rem);
  max-width: 18ch;
}

.hero .entradilla { max-width: 46ch; }

/* El resto de la pagina ya no empieza con un borde: el hero ya lo puso. */
.hero + .envoltorio > h2:first-child { border-top: 0; padding-top: 0; margin-top: clamp(2.5rem, 7vw, 4rem); }

/* ---------------------------------------------------------------------------
   CINTA DE SECCION · cabecera de las paginas interiores.
   El mismo fondo que el hero, sin el campo de compas y a menos altura: las
   interiores son documentos, no portada, y un segundo hero compitiendo con el
   primero seria efecto por efecto. Cuesta cero bytes: reutiliza los gradientes
   que ya estan en la hoja y no anade ninguna peticion.
--------------------------------------------------------------------------- */

main:has(> .cinta) { padding-top: 0; }

.cinta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--linea);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.cinta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 120% at 82% 0%, rgba(217, 160, 91, 0.13) 0%, rgba(217, 160, 91, 0) 70%),
    linear-gradient(180deg, #121010 0%, var(--fondo) 85%);
}

.cinta .entradilla { margin-bottom: 0; }
.cinta h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }

/* La primera seccion despues de la cinta no repite el filete superior. */
.cinta + .envoltorio > h2:first-child,
.cinta + .envoltorio > .aviso:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------------------------------------------------------------------------
   Prensa. Dos piezas nuevas y nada mas: la lista de descargas y las muestras
   de color. Ambas son cajas de tamano fijo o de flujo normal, asi que no
   mueven nada al cargar: el presupuesto de CLS sigue siendo 0.
   --------------------------------------------------------------------------- */
ul.descargas { list-style: none; padding-left: 0; }
ul.descargas li {
  display: grid;
  grid-template-columns: minmax(12rem, 22ch) 1fr;
  gap: 0.2rem 1.25rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea);
  margin: 0;
}
ul.descargas li > span {
  color: var(--tinta-apagada);
  font-size: 0.9375rem;
}

ul.muestras { list-style: none; padding-left: 0; margin: 0 0 1.5rem; }
ul.muestras li {
  display: grid;
  grid-template-columns: 2.5rem minmax(4rem, 8ch) minmax(7rem, 10ch) 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linea);
  margin: 0;
}
.muestra {
  display: block;
  width: 2.5rem;
  height: 1.75rem;
  border: 1px solid var(--linea);
  border-radius: 2px;
}
ul.muestras code {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--tinta-apagada);
}
ul.muestras li > span:last-child {
  color: var(--tinta-apagada);
  font-size: 0.9375rem;
}

@media (max-width: 34rem) {
  ul.descargas li { grid-template-columns: 1fr; }
  ul.muestras li { grid-template-columns: 2.5rem 1fr; row-gap: 0.15rem; }
  ul.muestras li > span:last-child { grid-column: 2; }
}

/* ---------------------------------------------------------------------------
   Capa WebGL del hero. NO se dimensiona aqui: el hueco del hero ya tiene su
   contrato en motion.css (.hero-fondo > canvas -> inset 0, 100% x 100%), que
   se escribio precisamente para esto. El encuadre del compas dentro del lienzo
   lo decide el shader, no el CSS.
   El SVG solo se apaga cuando el JS ha confirmado que el contexto existe y ha
   puesto .compas-gl-activo. Sin JS, sin WebGL o con prefers-reduced-motion esa
   clase no llega nunca y lo que se ve es el SVG de siempre.
   --------------------------------------------------------------------------- */
/* 🔴 23/10/2026 · `assets/compas-gl.js` SE PERDIO con el contenedor del 22/10 y
   QUEDA RETIRADO, no pendiente de reconstruir. Medido sobre la portada de hoy,
   que esta en `data-hero-estado="c"` y por tanto ya lleva el clip del HERO:
   quitar el campo de compas ENTERO cambia el 2,67 % de los pixeles, y subirlo
   del 0,26 actual al 0,68 que usaba el lienzo WebGL cambia 4,78 niveles de
   media. El aro que se ve en el hero lo pone el video, no esta capa.
   El guion se escribio para el estado "a", cuando el hero no tenia medio y el
   compas ERA la imagen. Ese trabajo lo hace ahora el clip.
   Las dos reglas se quedan escritas —son el contrato del hueco— pero ya no las
   dispara nadie: la clase `.compas-gl-activo` no la pone nada. */
.compas-lienzo { pointer-events: none; }
html.compas-gl-activo .compas-campo { display: none; }

/* ===========================================================================
   LOS TRES ESTADOS DEL HERO
   A · sin persona            USABLE HOY. Es lo que esta publicado
   B · con fotografia real    PREPARADO, NO ACTIVADO. Espera OPEN-D3
   C · con video o bucle      PREPARADO, NO ACTIVADO. Espera OPEN-D3
   Se cambia de estado con un solo atributo en .hero-fondo:
       data-hero-estado="a" | "b" | "c"
   No hay que tocar CSS, ni JS, ni el shader. El hueco ya existia declarado en
   motion.css desde la v1 ([data-hero-slot]) y esto solo lo viste.
   =========================================================================== */

/* El medio: foto o video, mismo tratamiento. object-position sale de una
   variable para poder declarar el PUNTO FOCAL por pieza sin tocar el CSS. */
.hero-retrato {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, 62% 34%);
  /* Gradacion a la paleta, hecha en el navegador y sin coste de red: contraste
     y desaturacion leves acercan cualquier toma al mundo de la marca. El resto
     del grading (duotono, halacion, grano) va horneado en el fichero. */
  filter: contrast(1.07) saturate(0.88) brightness(0.94);
  opacity: 0;                 /* el estado A no muestra medio */
  transition: opacity 900ms ease;
}
[data-hero-estado="b"] .hero-retrato { opacity: 0.76; }
/* El estado C ya no lleva una FOTOGRAFIA clara detras sino un render casi
   negro. Con 0.76 y el velo calibrado para foto, el video no se veia. */
/* El asset del estado C es geometria LUMINOSA sobre negro, no una fotografia.
   Sobre el fondo negro de la pagina, "screen" deja pasar el negro y suma la
   brasa: el anillo aparece sin aclarar el fondo ni tocar el contraste del
   titular. Con opacidad sola no se veia. */
[data-hero-estado="c"] .hero-retrato {
  opacity: 1;
  mix-blend-mode: screen;
}

/* EL VELO. Sin esto, un hero con foto es un titular ilegible esperando a
   ocurrir. Dos capas: una caida lateral que protege la columna del texto y una
   caida inferior que ata la imagen al fondo de la pagina.
   El presupuesto de contraste del proyecto es >= 7:1 sobre el titular, y se
   mide; no se estima. */
.hero-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  background:
    linear-gradient(100deg, var(--fondo) 6%, rgba(13, 12, 11, 0.88) 26%,
                    rgba(13, 12, 11, 0.38) 48%, rgba(13, 12, 11, 0.04) 74%),
    linear-gradient(0deg, var(--fondo) 2%, rgba(13, 12, 11, 0) 42%);
}
[data-hero-estado="b"] .hero-velo,
[data-hero-estado="c"] .hero-velo { opacity: 1; }

/* INTEGRACION CON EL WEBGL · es la parte que hace que no parezca un collage.
   Con medio detras, el compas deja de ser "el fondo" y pasa a ser LUZ delante
   de el: se funde en screen y baja de intensidad, como un reflejo en el aire
   de la sala. Sin medio, se queda tal cual, opaco sobre el degradado. */
[data-hero-estado="b"] .compas-lienzo,
[data-hero-estado="c"] .compas-lienzo {
  mix-blend-mode: screen;
  opacity: 0.68;
}
[data-hero-estado="b"] .compas-campo,
[data-hero-estado="c"] .compas-campo { opacity: 0.26; }

/* Los surcos y el grano suben un punto con medio detras: es lo que unifica
   una fotografia y una geometria en la misma imagen. */
[data-hero-estado="b"] .hero-grano,
[data-hero-estado="c"] .hero-grano { opacity: 0.85; }

/* En movil el titular ocupa el centro: el velo se vuelve vertical o el texto
   se pierde sobre la parte clara de la foto. */
@media (max-width: 52rem) {
  .hero-velo {
    background:
      linear-gradient(180deg, rgba(13, 12, 11, 0.86) 0%, rgba(13, 12, 11, 0.62) 38%,
                      rgba(13, 12, 11, 0.88) 78%, var(--fondo) 100%);
  }
  .hero-retrato { object-position: var(--foco-movil, 58% 28%); }
}

/* Marcador de posicion visible solo cuando el medio es un marcador y no la
   pieza real. Nunca se publica un hero con esto puesto sin que se vea. */
.hero-marcador {
  position: absolute;
  left: var(--paso); bottom: 0.9rem;
  z-index: 2;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-apagada);
  border: 1px solid var(--linea);
  padding: 0.3rem 0.6rem;
  background: rgba(13, 12, 11, 0.72);
}

/* ---------------------------------------------------------------------------
   CIERRE VISUAL · el frame del CLIP 05 cerrando la portada.
   Va separado de la lista de escucha por la misma linea que separa secciones:
   sin ella la imagen se leia como un apendice colgado de los enlaces. width y
   height estan en el HTML, asi que reserva su hueco antes de descargarse y el
   CLS sigue en 0.
   --------------------------------------------------------------------------- */
.cierre-visual {
  position: relative;
  margin-top: clamp(2.5rem, 7vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
}
/* La linea se dibuja con un pseudoelemento y no con border-top de la seccion
   porque .envoltorio lleva padding lateral: un borde en la seccion se saldria
   de la columna de texto y no coincidiria con las demas separaciones. */
.cierre-visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--paso);
  right: var(--paso);
  border-top: 1px solid var(--linea);
}
.figura-web { margin: clamp(1.2rem, 3vw, 1.8rem) 0; }
.figura-web,
.cierre-visual > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   HERO · COMPOSICION A2 · columna estrecha + velo optimizado.  23/10/2026
   El titular, la entradilla y el CTA dejan de cruzarse con el COMPAS en todo
   el recorrido del clip. Medido en los frames 1, 84, 105 y 168 del render
   premium, en 1440x900 y en 390x844:
       titular  <= 0,683 %   (0,026 % / 0,003 % / 0,000 % en los otros tres)
       CTA       = 0,000 %
       movil     = 0,000 % en las cuatro piezas
   El velo esta en el punto mas flojo que respeta esos limites: conserva
   p95 79 de los 105 originales, 21 % mas de imagen que el ajuste a cero.
   No cambia tipografias, textos, colores, CTA ni navegacion.
   --------------------------------------------------------------------------- */
.hero h1          { max-width: 10ch; }
.hero .entradilla { max-width: 30ch; }
.hero .marca-hero { width: min(100%, 22rem); }
.hero-velo {
  background:
    linear-gradient(100deg, var(--fondo) 24%, rgba(13, 12, 11, 0.961) 47%,
                    rgba(13, 12, 11, 0.572) 64%, rgba(13, 12, 11, 0.055) 81%),
    linear-gradient(0deg, var(--fondo) 2%, rgba(13, 12, 11, 0) 43%);
}

/* ---------------------------------------------------------------------------
   HERO · TRANSICION POSTER -> VIDEO.  23/10/2026
   El clip empieza en f1, que es el fotograma mas debil del recorrido, y es lo
   que ve de forma permanente quien pide menos movimiento o ahorro de datos.
   El poster pasa a ser f105 —la composicion aprobada— en una capa propia por
   detras, y el video se funde sobre ella cuando empieza a reproducirse.
   Solo opacity: cero coste de layout, el presupuesto de CLS sigue en 0.
   El fundido NO retrasa la reproduccion: arranca cuando el video ya esta
   sonando (evento playing), no antes.
   Sin JavaScript y con prefers-reduced-motion el video nunca arranca, asi que
   la capa se queda con f105 fija y no hay ninguna animacion.
   --------------------------------------------------------------------------- */
.hero-poster {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/hero/poster_f105.avif") center / cover no-repeat;
}
.hero-fondo .hero-retrato { opacity: 0; transition: opacity 520ms ease; }
html.hero-video-vivo .hero-fondo .hero-retrato { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-fondo .hero-retrato { transition: none; }
}