/* ==========================================================================
   CRISLEFILMS — Landing
   Sistema visual: negro, blanco y crema · Jost (títulos y firma) + Fustat (texto)
   Los comentarios explican el porqué de cada decisión, no solo el qué.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Color — tres familias, sin estridencias */
  --ink:        #0B0A09;   /* negro cálido, nunca #000 puro */
  --ink-soft:   #15130F;
  --paper:      #F1E9DC;   /* crema base */
  --paper-deep: #E4D9C7;   /* crema en sombra */
  --paper-earth:#F2ECE0;   /* crema claro y cálido de «La mirada» */
  --white:      #FBF8F3;
  --ember:      #AC3931;   /* terracota del log de marca: solo acentos mínimos */

  /* Superficie «noche»: el blanco roto del sitio (antes era el negro).
     Se cambia de tema con <html class="tema-oscuro"> o <html class="tema-verde"> */
  --noche:            #FFFFFF;
  --noche-soft:       #F2EEE6;
  --noche-rgb:        255,255,255;
  --sobre-noche:      var(--texto);   /* todo el texto va en este tono */
  --sobre-noche-rgb:  117,104,79;
  --sobre-noche-alto: #6F6250;        /* énfasis: un poco más oscuro */
  --titulo:           #75684F;   /* títulos: marrón cálido, legible sobre crema */
  --texto:            #75684F;   /* el mismo tono para TODO el texto y los iconos */
  --texto-rgb:        117,104,79;

  /* Escala de titulares — un solo sistema para toda la web.
     Los banners (phero) se quedan aparte, con su tamaño y su aire */
  --t1:        clamp(1.6rem,3.9vw,3.5rem);   /* título de sección */
  --t2:        clamp(1.1rem,1.9vw,1.65rem);  /* título de bloque */
  --t3:        clamp(.95rem,1.2vw,1.1rem);   /* título de tarjeta o paso */
  --t-peso:    600;
  --t-tracking:-.042em;
  --t-linea:   1.05;

  --line-ink:   rgba(117,104,79,.22);
  --line-paper: rgba(var(--sobre-noche-rgb),.20);
  --muted-ink:  rgba(117,104,79,.82);
  --muted-paper:rgba(var(--sobre-noche-rgb),.66);

  /* Estrella de 4 puntas: la marca. Se usa como máscara. */
  --spark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%200C12.7%206.3%2017.7%2011.3%2024%2012C17.7%2012.7%2012.7%2017.7%2012%2024C11.3%2017.7%206.3%2012.7%200%2012C6.3%2011.3%2011.3%206.3%2012%200Z'/%3E%3C/svg%3E");

  /* Tipografía — Jost (títulos y firma) + Fustat (texto y etiquetas) */
  --display: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:    'Fustat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'Fustat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Ritmo */
  --pad:    clamp(20px, 4.6vw, 76px);
  --gap:    clamp(14px, 2vw, 30px);
  --radius: clamp(16px, 2vw, 30px);

  /* Movimiento */
  --ease:      cubic-bezier(.22,.61,.24,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* Temas alternativos de la superficie «noche». Por defecto es blanco;
   con «tema-oscuro» vuelve al negro cálido y con «tema-verde» al verde. */
html.tema-oscuro{
  --titulo:           #F1E9DC;
  --noche:            #0B0A09;
  --noche-soft:       #15130F;
  --noche-rgb:        11,10,9;
  --sobre-noche:      #F1E9DC;
  --sobre-noche-rgb:  241,233,220;
  --sobre-noche-alto: #FBF8F3;
}
html.tema-verde{
  --titulo:           #F1E9DC;
  --noche:            #16352C;
  --noche-soft:       #1D4136;
  --noche-rgb:        22,53,44;
  --sobre-noche:      #F1E9DC;
  --sobre-noche-rgb:  241,233,220;
  --sobre-noche-alto: #FBF8F3;
}
/* Los logos de la banda son blancos: sobre fondo claro hay que oscurecerlos */
/* Los logos ya vienen en el tono del texto; en los temas oscuros se
   devuelven a blanco */
html.tema-oscuro .marcas__item img,
html.tema-verde  .marcas__item img{ filter:brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   02. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;           /* el scroll lo gobierna Lenis */
  background-color:var(--noche);  /* el lienzo nunca queda transparente/negro */
  overflow-x:clip;                /* clip no rompe position:sticky (hidden sí) */
}
body{
  margin:0;
  /* La superficie «noche»: blanco liso, sin textura */
  background-color:var(--noche);
  color:var(--sobre-noche);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.8;
  font-weight:400;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ display:block; max-width:100%; }
figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
::selection{ background:var(--paper); color:var(--texto); }

/* Accesibilidad: contenido para lectores de pantalla y buscadores, invisible en pantalla */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Estrella de 4 puntas (marca) */
.star{
  display:inline-block;
  width:1em; height:1em;
  vertical-align:-.08em;
  background:currentColor;
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
}
@keyframes starSpin{ to{ transform:rotate(360deg); } }

/* La estrella en la cabecera, la carátula y los títulos */
.hud__star{
  width:.85em; height:.85em;
  margin-right:.5em;
  animation:starSpin 9s linear infinite;
}
.cover__star{
  width:clamp(46px,6.2vw,76px);
  height:clamp(46px,6.2vw,76px);
  color:#E7C7A3;
  animation:starSpin 9s linear infinite;
}
.formatos__head h2::before,
.porke__head h2::before,
.trabajo__head h2::before,
.faq__head h2::before,
.contact__title::before{
  content:'';
  display:inline-block;
  width:.30em; height:.30em;
  margin-right:.34em;
  vertical-align:.10em;
  background:currentColor;
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
}

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* Tipografía de apoyo ------------------------------------------------------ */
.mono{
  font-family:var(--mono);
  font-size:clamp(10px,.68vw,11.5px);
  letter-spacing:.26em;
  text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   03. CARÁTULA (preloader)
   -------------------------------------------------------------------------- */
.cover{
  position:fixed;
  inset:0;
  z-index:900;
  background:var(--ink);
  display:grid;
  place-items:center;
  transition:transform 1.15s var(--ease-out);
}
.cover.is-done{ transform:translateY(-101%); }
.cover__inner{
  display:grid;
  justify-items:center;
  gap:clamp(18px,2.4vw,30px);
  transition:opacity .5s var(--ease);
}
.cover.is-done .cover__inner{ opacity:0; }
.cover__word{
  font-family:var(--display);
  font-style:normal;
  font-weight:700;
  font-size:clamp(2.6rem,8.5vw,5.6rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--paper);
  clip-path:inset(0 0 110% 0);
  animation:coverWord 1.5s var(--ease-out) .1s forwards;
}
@keyframes coverWord{ to{ clip-path:inset(0 0 -10% 0); } }
.cover__bar{
  width:clamp(120px,20vw,220px);
  height:1px;
  background:rgba(241,233,220,.18);
  overflow:hidden;
}
.cover__bar span{
  display:block;
  height:100%;
  width:100%;
  background:var(--paper);
  transform:scaleX(0);
  transform-origin:left center;
}
.cover__count{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--muted-paper);
}

/* --------------------------------------------------------------------------
   04. HUD FIJO — firma, navegación, progreso
   -------------------------------------------------------------------------- */
.hud{
  position:fixed;
  top:0; left:0; right:0;
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:clamp(14px,1.5vw,22px) var(--pad);
  color:var(--sobre-noche);
  transition:color .6s var(--ease), opacity .6s var(--ease), transform .8s var(--ease-out);
  mix-blend-mode:normal;
}
/* Sobre las portadas con foto (héroe, cita) el HUD va claro siempre */
.hud[data-theme="dark"]{ color:var(--paper); }
.hud[data-theme="light"]{ color:var(--texto); }
/* Sobre las superficies sólidas (trabajos, pie, "en movimiento"): siguen el tema */
.hud[data-theme="noche"]{ color:var(--sobre-noche); }
.hud.is-hidden{                     /* se aparta al bajar, vuelve al subir */
  transform:translateY(-125%);
  opacity:0;
  pointer-events:none;
}
.hud__mark{
  font-family:var(--display);
  font-style:normal;
  font-weight:700;
  font-size:clamp(1.2rem,1.7vw,1.7rem);
  letter-spacing:-.01em;
  line-height:1;
  display:block;
}
.hud__mark span{ display:inline-block; transition:transform .6s var(--ease-out); }
.hud__mark:hover span{ transform:translateX(3px); }
.hud__nav{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,32px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.26em;
  text-transform:uppercase;
  opacity:.75;
}
/* Todos los enlaces comparten el mismo relleno vertical, para que el texto
   quede a la misma altura que la pastilla de «Clientes». */
.hud__nav a{ position:relative; padding:6px 0; }
.hud__nav a::after{
  content:'';
  position:absolute; left:0; bottom:3px;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .5s var(--ease-out);
}
.hud__nav a:hover::after{ transform:scaleX(1); transform-origin:left center; }
/* Acceso de clientes: pastilla que lo separa del resto del menú */
.hud__nav .hud__clientes{
  margin-left:clamp(2px,.6vw,10px);
  padding:6px 12px;
  border:1px solid currentColor;
  border-radius:999px;
  opacity:.9;
  transition:opacity .4s var(--ease), transform .5s var(--ease-out);
}
.hud__nav .hud__clientes::after{ display:none; }
.hud__nav .hud__clientes:hover{ opacity:1; transform:translateY(-1px); }
/* línea de progreso pegada al borde superior */
.hud__line{
  position:absolute;
  top:0; left:0;
  width:100%; height:1px;
  background:currentColor;
  opacity:.16;
}
.hud__line i{
  display:block;
  height:100%;
  width:100%;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
}

/* --------------------------------------------------------------------------
   05. CURSOR
   -------------------------------------------------------------------------- */
.cursor{
  position:fixed;
  top:0; left:0;
  z-index:800;
  pointer-events:none;
  opacity:0;                /* solo aparece cuando el ratón se mueve */
  transition:opacity .4s var(--ease);
}
.cursor__dot,
.cursor__ring,
.cursor__text{
  position:absolute;
  top:0; left:0;
  transform:translate(-50%,-50%);
}
.cursor__dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--paper);
  mix-blend-mode:difference;
  transition:opacity .25s var(--ease);
}
.cursor__ring{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(241,233,220,.55);
  mix-blend-mode:difference;
  transition:width .45s var(--ease-out), height .45s var(--ease-out),
             background .35s var(--ease), border-color .35s var(--ease),
             mix-blend-mode .2s linear;
}
.cursor__text{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--texto);
  opacity:0;
  transition:opacity .25s var(--ease);
  white-space:nowrap;
}
.cursor.is-active .cursor__ring{
  width:104px; height:104px;
  background:rgba(241,233,220,.94);
  border-color:rgba(241,233,220,.94);
  mix-blend-mode:normal;
}
.cursor.is-active .cursor__dot{ opacity:0; }
.cursor.is-active .cursor__text{ opacity:1; }
html.has-cursor [data-cursor]{ cursor:none; }

/* --------------------------------------------------------------------------
   06. GRANO
   -------------------------------------------------------------------------- */
.grain{
  position:fixed;
  top:-100%; left:-100%;
  width:300%; height:300%;
  z-index:600;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url(../img/grain.png);
  background-repeat:repeat;
  animation:grainShift 1.1s steps(4) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%  { transform:translate3d(0,0,0); }
  25% { transform:translate3d(-3%,2%,0); }
  50% { transform:translate3d(2%,-3%,0); }
  75% { transform:translate3d(-2%,-2%,0); }
  100%{ transform:translate3d(3%,1%,0); }
}

/* --------------------------------------------------------------------------
   07. CABECERA CON VÍDEO
   .hero-hold da altura extra para que el vídeo quede fijo un instante
   mientras la página empieza a subir por encima.
   -------------------------------------------------------------------------- */
.hero-hold{
  position:relative;
  /* 210svh: el vídeo queda clavado 110svh, justo lo que tarda la hoja de
     abajo en subir del todo (100svh) y taparlo. */
  height:210vh;
  height:210svh;
  z-index:0;
}
.hero{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:var(--paper);
  isolation:isolate;
}
.hero.is-covered{ visibility:hidden; }   /* cuando ya no se ve, no gastamos GPU */

.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--paper);
}
/* La portada queda siempre detrás del vídeo: así no hay negro mientras
   carga el banner ni al volver arriba. */
.hero__media > *{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero__media video{ z-index:1; }
.hero__media img{ z-index:0; }
.hero__video{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.04);
  will-change:transform;
}
/* Difuminado progresivo del vídeo: opacity sobre una capa con backdrop-filter
   (mucho más barato que animar el radio del blur) */
.hero__veil{
  position:absolute;
  inset:-4%;
  backdrop-filter:blur(26px) saturate(.92) brightness(.92);
  -webkit-backdrop-filter:blur(26px) saturate(.92) brightness(.92);
  opacity:0;
  will-change:opacity;
  pointer-events:none;
}
.hero__scrim{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(85% 55% at 10% 92%, rgba(11,10,9,.62), rgba(11,10,9,0) 72%),
    linear-gradient(to top, rgba(11,10,9,.86) 0%, rgba(11,10,9,.30) 38%, rgba(11,10,9,0) 62%),
    linear-gradient(to bottom, rgba(11,10,9,.55) 0%, rgba(11,10,9,0) 26%),
    radial-gradient(120% 90% at 50% 50%, rgba(11,10,9,0) 45%, rgba(11,10,9,.42) 100%);
}

/* Etiquetas finas sobre la regla: el claim a la izquierda, el oficio a la derecha */
.hero__eyebrow{
  margin:0;
  padding:0 var(--pad);
  font-family:var(--mono);
  font-size:clamp(9.5px,.68vw,11.5px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(241,233,220,.72);
  text-shadow:0 2px 18px rgba(11,10,9,.55);
}

/* Titular grande del hero: entra línea a línea con una máscara */
.hero__title{
  margin:0;
  padding:0 var(--pad);
  font-family:var(--display);
  font-style:normal;
  font-weight:600;
  font-size:clamp(2.05rem,7.6vw,6.6rem);
  line-height:.98;
  letter-spacing:-.038em;
  color:var(--paper);
  text-shadow:0 6px 50px rgba(11,10,9,.5);
}
.hero__line{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.hero__line-in{ display:block; will-change:transform; }
.hero__title em{ font-style:italic; color:#E7C7A3; }

/* «Desliza»: girado en vertical, pegado al borde derecho */
.hero__scroll{
  position:absolute;
  top:0; bottom:0;
  right:clamp(10px,1.6vw,26px);
  display:flex;
  align-items:center;
  pointer-events:none;
}
.hero__scroll-inner{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.2vw,16px);
  transform:rotate(90deg);
  transform-origin:center;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(241,233,220,.7);
  white-space:nowrap;
}
.hero__scroll-text{ display:block; }
.hero__scroll-line{
  position:relative;
  width:clamp(34px,4vw,56px);
  height:1px;
  background:rgba(241,233,220,.24);
  overflow:hidden;
}
.hero__scroll-line::after{
  content:'';
  position:absolute; inset:0;
  background:var(--paper);
  animation:cueDripX 2.8s var(--ease) infinite;
}
@keyframes cueDripX{
  0%  { transform:translateX(-100%); }
  55% { transform:translateX(0); }
  100%{ transform:translateX(100%); }
}

/* Base: regla, firma pegada a la esquina izquierda y datos a la derecha */
.hero__bottom{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.6vw,20px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.hero__rule{
  display:block;
  height:1px;
  margin:0 var(--pad);
  background:rgba(241,233,220,.3);
  transform-origin:left center;
  will-change:transform;
}
.hero__bottom-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(16px,3vw,48px);
  padding-right:var(--pad);
}

/* La firma: Jost bold, pegada a la esquina inferior izquierda */
.hero__brand{
  margin:0 0 -.13em -.045em;
  font-family:var(--display);
  font-style:normal;
  font-weight:700;
  font-size:clamp(2.6rem,15vw,18rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--white);
  white-space:nowrap;
  text-shadow:0 6px 60px rgba(11,10,9,.42);
}
.hero__brand-line{
  display:block;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}
.hero__brand-word{ display:block; white-space:nowrap; }
.brand__half{ display:inline-block; will-change:transform; }

.hero__foot{
  display:flex;
  align-items:flex-end;
  gap:clamp(16px,2.4vw,34px);
  padding-bottom:clamp(4px,.8vw,12px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(241,233,220,.72);
}
.hero__meta{ display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); }
.hero__sep{ width:1px; height:12px; background:currentColor; opacity:.35; }
.hero__sound{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 18px;
  font:inherit;
  font-family:var(--mono);
  font-size:clamp(10px,.7vw,11.5px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  background:rgba(11,10,9,.42);
  border:1px solid rgba(241,233,220,.55);
  border-radius:999px;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.hero__sound:hover{
  background:rgba(11,10,9,.62);
  border-color:rgba(241,233,220,.9);
  color:var(--white);
  transform:translateY(-1px);
}
/* El icono dice el estado: altavoz con ondas (suena) o tachado (no suena) */
.hero__sound .hero__ico{ display:block; width:19px; height:19px; }
.hero__sound .hero__ico svg{ display:block; width:100%; height:100%; }
.hero__sound[aria-pressed="false"] .hero__ico-on{ display:none; }
.hero__sound[aria-pressed="true"]  .hero__ico-off{ display:none; }
.hero__sound[aria-pressed="true"]{ border-color:rgba(241,233,220,.9); background:rgba(11,10,9,.55); }

.hero__dot{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(241,233,220,.4);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
/* En silencio el punto late despacio: invita a pulsar, sin gritar */
.hero__sound[aria-pressed="false"] .hero__dot{
  background:rgba(241,233,220,.8);
  animation:dotInvite 2.8s var(--ease) infinite;
}
.hero__sound[aria-pressed="true"] .hero__dot{
  background:var(--ember);
  box-shadow:0 0 0 0 rgba(172,57,49,.55);
  animation:emberPulse 2.4s var(--ease) infinite;
}
@keyframes dotInvite{
  0%  { box-shadow:0 0 0 0 rgba(241,233,220,.4); }
  70% { box-shadow:0 0 0 7px rgba(241,233,220,0); }
  100%{ box-shadow:0 0 0 0 rgba(241,233,220,0); }
}
@keyframes emberPulse{
  0%  { box-shadow:0 0 0 0 rgba(172,57,49,.5); }
  70% { box-shadow:0 0 0 9px rgba(172,57,49,0); }
  100%{ box-shadow:0 0 0 0 rgba(172,57,49,0); }
}

/* Onda de sonido: cinco líneas que laten con el audio del tráiler.
   Va abajo, junto a los datos, y desaparece con la cabecera al hacer scroll. */
.hero__wave{
  display:inline-flex;
  align-items:center;
  gap:3px;
  height:14px;
}
.hero__wave i{
  display:block;
  width:2px;
  height:100%;
  border-radius:1px;
  background:currentColor;
  transform-origin:center;
  animation:wavePulse 1.5s var(--ease) infinite;
}
.hero__wave i:nth-child(1){ animation-delay:0s; }
.hero__wave i:nth-child(2){ animation-delay:.16s; }
.hero__wave i:nth-child(3){ animation-delay:.32s; }
.hero__wave i:nth-child(4){ animation-delay:.48s; }
.hero__wave i:nth-child(5){ animation-delay:.64s; }
@keyframes wavePulse{
  0%,100%{ transform:scaleY(.3); opacity:.5; }
  50%    { transform:scaleY(1);   opacity:1; }
}
/* En silencio, la onda se queda plana */
.hero__wave.is-off i{ animation:none; transform:scaleY(.22); opacity:.35; }

/* --------------------------------------------------------------------------
   08. PÁGINA (sube por encima del vídeo)
   -------------------------------------------------------------------------- */
main{
  position:relative;
  z-index:2;
  background:transparent;   /* cada sección trae su propio fondo */
  /* Arranca justo por debajo del pliegue y sube hasta tapar el vídeo */
  margin-top:-100vh;
  margin-top:-100svh;
}

/* 01 · Declaración --------------------------------------------------------- */
/* Sin borde, radio ni sombra: el vídeo se disuelve en el crema (sfumato) */
.intro{
  position:relative;
  z-index:1;
  color:var(--texto);
  padding:clamp(100px,16vh,180px) 0 clamp(56px,7vh,84px);
  background:linear-gradient(to bottom,
    rgba(242,236,224,0) 0,
    rgba(242,236,224,.55) clamp(70px,12vh,150px),
    var(--paper-earth) clamp(150px,25vh,310px),
    var(--paper-earth) 100%);
}
/* Ruido de papel, el mismo en TODAS las secciones claras. Casi imperceptible. */
.intro::after,
.film::after,
.moments::after,
.contact::after,
.piezas::after,
.adm::after,
.galeria::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url(../img/grain.png);
  background-repeat:repeat;
  opacity:.04;
  mix-blend-mode:multiply;
}
/* En «La mirada» el ruido aparece solo donde el crema ya es opaco (sfumato) */
.intro::after{
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 clamp(150px,25vh,310px), #000 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 clamp(150px,25vh,310px), #000 100%);
}
.intro > *,
.film > *,
.moments > *,
.contact > *,
.piezas > *,
.adm > *,
.galeria > *{ position:relative; z-index:1; }
.intro__body{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr);
  gap:clamp(40px,7vw,120px);
  align-items:end;
  padding:0 var(--pad);
}
.statement{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.6rem,3.5vw,3.5rem);
  line-height:1.26;
  letter-spacing:-.008em;
  max-width:26ch;
  text-wrap:balance;
}
.statement .w{ display:inline-block; margin-right:.26em; }
.statement .w > i{ font-style:inherit; display:inline-block; }
.intro__aside{
  padding-bottom:clamp(6px,1.4vw,18px);
  border-left:1px solid var(--line-ink);
  padding-left:clamp(16px,2vw,28px);
}
.intro__note{
  font-size:clamp(.92rem,1.05vw,1.05rem);
  line-height:1.7;
  color:var(--muted-ink);
  max-width:34ch;
}
.signature{
  margin-top:clamp(16px,2vw,28px);
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.05rem,1.35vw,1.35rem);
  color:rgba(var(--texto-rgb),.72);
}

/* 02 · El vídeo ------------------------------------------------------------- */
/* Comparte el crema de «La mirada»: las dos secciones se leen como un bloque */
.film{
  position:relative;
  background:var(--paper-earth);
  color:var(--ink);
  padding:clamp(56px,7vh,84px) 0;
}
.film__card{
  position:relative;
  display:block;
  width:calc(100% - var(--pad)*2);
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--noche-soft);
  text-align:left;
}
.film__frame{ position:absolute; inset:0; overflow:hidden; }
.film__img{
  position:absolute;
  left:0; top:-9%;
  width:100%; height:118%;    /* altura extra: el parallax no descubre bordes */
  object-fit:cover;
  object-position:center;
  will-change:transform;
  transition:filter .4s var(--ease);
  filter:url(#wb) saturate(.94);
}
.film__card:hover .film__img{ filter:url(#wb) saturate(1.02); }
/* El bloque grande enseña el vídeo de fragmentos, que ya viene corregido de
   origen: va sin el balance de blancos, como en la galería. */
.film__img--limpio,
.film__card:hover .film__img--limpio{ filter:none; }
.film__card::after{                 /* velo inferior para que la insignia respire */
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,10,9,.55), rgba(11,10,9,.08) 55%, rgba(11,10,9,.28));
  pointer-events:none;
}
.film__badge{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(104px,10vw,140px);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--paper);
  border:1px solid rgba(241,233,220,.55);
  background:rgba(11,10,9,.18);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  transition:background .5s var(--ease), color .5s var(--ease),
             transform .7s var(--ease-out), border-color .5s var(--ease);
}
.film__badge-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid rgba(241,233,220,.5);
  animation:badgeRipple 3.4s var(--ease) infinite;
}
@keyframes badgeRipple{
  0%  { transform:scale(1);    opacity:.55; }
  70% { transform:scale(1.42); opacity:0; }
  100%{ transform:scale(1.42); opacity:0; }
}
.film__badge-text{
  font-family:var(--mono);
  font-size:clamp(10px,.72vw,12px);
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.5;
  text-align:center;
  white-space:nowrap;
}
.film__card:hover .film__badge{
  background:var(--paper);
  color:var(--texto);
  border-color:var(--paper);
  transform:translate(-50%,-50%) scale(1.05);
}
.film__info{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  padding:clamp(20px,3vw,40px) var(--pad) 0;
}
.film__eyebrow{
  margin:0 0 clamp(10px,1.3vw,16px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.film__title{
  font-style:italic;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.film__facts{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.6vw,20px);
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-ink);
  padding-bottom:.6em;
}
.film__div{ width:16px; height:1px; background:currentColor; opacity:.5; }

/* 02b · Una boda real ------------------------------------------------------ */
/* El vídeo y los seis planos del día viven en el mismo bloque: primero la
   película, después el día que la compone. Así la sección se lee como una
   historia y no como dos galerías seguidas. */
.boda-real{
  position:relative;
  background:var(--noche);
  color:var(--texto);
  padding:clamp(56px,7vh,84px) 0;
}
.boda-real__head{
  padding:0 var(--pad);
  margin-bottom:clamp(22px,3.5vw,42px);
}
.boda-real__eyebrow{
  margin:0 0 clamp(8px,1.2vw,14px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.boda-real__title{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.boda-real__meta{
  margin:clamp(8px,1.2vw,14px) 0 0;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.boda-real__momentos{
  margin-top:clamp(44px,7vw,80px);
  padding:0 var(--pad);
}
.boda-real__momentos-head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(16px,4vw,56px);
  align-items:end;
  margin-bottom:clamp(20px,3vw,34px);
}
.boda-real__momentos-head h3{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t2);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.boda-real__momentos-head p{
  margin:0 0 .35em;
  max-width:44ch;
  color:var(--muted-ink);
  line-height:1.7;
}
.boda-real__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);
}
.boda-real__momento{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:calc(var(--radius) * .45);
  background:var(--paper-deep);
  aspect-ratio:16/9;
}
.boda-real__momento video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.boda-real__momento:hover video{ transform:scale(1.035); }
.boda-real__momento::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,10,9,.62), rgba(11,10,9,0) 46%);
  pointer-events:none;
}
.boda-real__momento figcaption{
  position:absolute;
  left:clamp(10px,1.2vw,16px);
  bottom:clamp(8px,1vw,14px);
  z-index:2;
  font-family:var(--mono);
  font-size:clamp(8.5px,.6vw,10px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--white);
  text-shadow:0 2px 12px rgba(11,10,9,.8);
}
@media (max-width:900px){
  .boda-real__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .boda-real__grid{ grid-template-columns:1fr; }
  .boda-real__momentos-head{ grid-template-columns:1fr; gap:12px; }
}

/* 03 · Momentos ------------------------------------------------------------ */
.momentos{
  position:relative;
  background:var(--paper-earth);
  color:var(--texto);
  padding:clamp(36px,5vh,64px) 0 clamp(56px,7vh,84px);
}
.momentos__head{ padding:0 var(--pad); }
.momentos__eyebrow{
  margin:0 0 clamp(10px,1.3vw,16px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.momentos__title{
  margin:0;
  max-width:18ch;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.momentos__pin{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(26px,4vw,50px);
}
.momentos__viewport{
  width:100%;
  overflow:hidden;
}
.momentos__viewport::-webkit-scrollbar{ display:none; }
.momentos__viewport.is-drag{ cursor:grabbing; }
.momentos__track{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,30px);
  width:max-content;
  padding:0 var(--pad);
  will-change:transform;
}
.momento{
  position:relative;
  flex:none;
  margin:0;
  overflow:hidden;
  border-radius:calc(var(--radius) * .55);
  background:var(--paper-deep);
  /* Todas iguales: mismo ancho y la proporción de los vídeos (16:9) */
  width:clamp(340px,58vw,1040px);
  aspect-ratio:16/9;
}
.momento img,
.momento video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  filter:url(#wb) saturate(.94);
}

/* El vídeo de fragmentos va SIN el balance de blancos: ya viene corregido
   de origen, así que el filtro solo lo estropeaba */
.momento--limpio video{ filter:none; }
/* Rejilla editorial: cada pieza tiene su ancho y su proporción */
.momentos__fin{
  flex:none;
  width:clamp(210px,24vw,340px);
  margin:0 clamp(6px,1vw,18px) 0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t2);
  line-height:1.15;
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.momentos__progreso{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,24px);
  padding:clamp(20px,3vw,34px) var(--pad) 0;
}
.momentos__barra{
  position:relative;
  flex:1;
  height:1px;
  background:rgba(117,104,79,.28);
  overflow:hidden;
}
.momentos__barra i{
  display:block;
  height:100%;
  width:100%;
  background:var(--titulo);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .15s linear;
}
.momentos__cuenta{
  flex:none;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.22em;
  color:var(--muted-ink);
}
.momentos__cuenta b{ color:var(--titulo); font-weight:600; }
.momentos__pista{ color:var(--muted-ink); opacity:.7; }
@media (min-width:701px){
  .momentos__pin{ min-height:100vh; min-height:100svh; }
}
@media (max-width:700px){
  .momentos__pin{ display:block; min-height:0; }
  .momentos__viewport{
    overflow-x:auto;
    overflow-y:hidden;
    cursor:grab;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .momentos__viewport::-webkit-scrollbar{ display:none; }
  .momentos__viewport.is-drag{ cursor:grabbing; }
  .momentos__track{ flex-direction:column; width:auto; gap:12px; align-items:stretch; }
  .momento{ width:100% !important; aspect-ratio:3/2 !important; }
    .momentos__fin{ width:auto; margin:18px 0 0; }
}

.grid__item{
  overflow:hidden;
  border-radius:calc(var(--radius) * .55);
  background:var(--paper-deep);
}
.grid__item img{
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
}
.grid__item--wide  { grid-column:1 / 8;   aspect-ratio:3/2; }
.grid__item--square{ grid-column:9 / 13;  aspect-ratio:1/1;   margin-top:9vh; }
.grid__item--tall  { grid-column:2 / 7;   aspect-ratio:4/5;   margin-top:6vh; }
.grid__item--mid   { grid-column:8 / 13;  aspect-ratio:3/2;   margin-top:-5vh; }
.grid__item--wide2 { grid-column:1 / 8;   aspect-ratio:16/9;  margin-top:8vh; }
.grid__item--small { grid-column:9 / 13;  aspect-ratio:1/1;   margin-top:-2vh; }
.grid__item--full  { grid-column:1 / 13;  aspect-ratio:21/9;  margin-top:10vh; }

.momentos__caption{
  padding:clamp(26px,4vw,52px) var(--pad) 0;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
/* Enlace a «Sobre mí» desde Momentos: no repite el contenido, solo lleva */
.momentos__mas{
  padding:clamp(10px,1.4vw,16px) var(--pad) 0;
  font-size:clamp(.95rem,1.1vw,1.1rem);
  color:var(--muted-ink);
}
.momentos__mas a{
  color:var(--texto);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:opacity .4s var(--ease);
}
.momentos__mas a:hover{ opacity:.6; }

/* Tira continua */
.strip{
  margin-top:clamp(34px,6vh,80px);
  overflow:hidden;
  padding:0;
}
.strip__track{
  display:flex;
  gap:clamp(10px,1.2vw,18px);
  width:max-content;
  animation:stripMove 68s linear infinite;
}
.strip:hover .strip__track{ animation-play-state:paused; }
.strip img,
.strip video{
  height:clamp(112px,15vw,215px);
  width:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:5px;
  filter:url(#wb) saturate(.72) contrast(.98);
  transition:filter .6s var(--ease);
  flex:none;
  display:block;
}
.strip img:hover,
.strip video:hover{ filter:url(#wb); }
@keyframes stripMove{ to{ transform:translateX(-50%); } }

/* 03b · Fragmentos de bodas: banda a sangre --------------------------------- */
.fragmentos{
  position:relative;
  background:var(--ink);
  overflow:hidden;
}
.fragmentos__video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:url(#wb) saturate(.94);
}
.fragmentos::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:32%;
  pointer-events:none;
  background:linear-gradient(to top, rgba(11,10,9,.62), rgba(11,10,9,0));
}
.fragmentos__pie{
  position:absolute;
  left:var(--pad);
  bottom:clamp(16px,2.4vw,34px);
  z-index:2;
  margin:0;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#FBF8F3;
  text-shadow:0 1px 12px rgba(11,10,9,.8);
}
/* 04 · Qué te llevas (los tres formatos) ----------------------------------- */
.formatos{
  position:relative;
  background:var(--paper-earth);
  color:var(--ink);
  padding:clamp(56px,7vh,84px) 0 clamp(52px,6.5vh,78px);
}
.formatos__head{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(18px,4vw,70px);
  align-items:end;
  padding:0 var(--pad);
}
.formatos__head h2{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.formatos__intro{
  margin:0 0 clamp(6px,1vw,16px);
  max-width:44ch;
  color:var(--muted-ink);
  font-size:clamp(.95rem,1.1vw,1.12rem);
  line-height:1.7;
}
.formatos__cuerpo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,90px);
  align-items:center;
  padding:clamp(24px,3.6vw,46px) var(--pad) 0;
}
.formatos__lista{ display:flex; flex-direction:column; }
.formato{
  display:flex;
  gap:clamp(14px,2vw,26px);
  width:100%;
  text-align:left;
  background:none;
  border:0;
  border-top:1px solid var(--line-paper);
  padding:clamp(16px,2.2vw,26px) 0;
  cursor:pointer;
  color:inherit;
  opacity:.5;
  transition:opacity .45s var(--ease);
}
.formato:last-child{ border-bottom:1px solid var(--line-paper); }
.formato.is-on{ opacity:1; }
.formato__num{
  flex:none;
  padding-top:.35em;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.26em;
  color:var(--muted-paper);
}
.formato__texto{ display:flex; flex-direction:column; gap:6px; }
.formato__t{
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t3);
  line-height:1.2;
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.formato__p{
  max-width:52ch;
  font-size:clamp(.9rem,1vw,1.02rem);
  line-height:1.65;
  color:var(--muted-paper);
}
.formatos__visor{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius) * .6);
  aspect-ratio:4/3;
  background:var(--noche-soft);
}
.formato__visual{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.05);
  filter:url(#wb) saturate(.94);
  transition:opacity .7s var(--ease), transform 1.4s var(--ease-out);
}
.formato__visual.is-on{ opacity:1; transform:scale(1); }
@media (max-width:900px){
  .formatos__cuerpo{ grid-template-columns:1fr; }
  .formatos__visor{ order:-1; aspect-ratio:16/10; }
}
.ficha{
  padding-top:clamp(14px,1.8vw,22px);
  border-top:1px solid var(--line-ink);
}
.ficha__num{
  display:block;
  margin-bottom:clamp(10px,1.4vw,18px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.26em;
  color:var(--muted-ink);
}
.ficha h3{
  margin:0 0 clamp(8px,1vw,14px);
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t3);
  line-height:1.2;
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.ficha p{
  margin:0;
  color:var(--muted-ink);
  font-size:clamp(.95rem,1.05vw,1.06rem);
  line-height:1.7;
}
@media (max-width:900px){
  .formatos__grid{ grid-template-columns:1fr; gap:clamp(18px,3vw,28px); }
  .formatos__head{ grid-template-columns:1fr; align-items:start; }
}
/* 05 · Por qué yo ---------------------------------------------------------- */
.porke{
  position:relative;
  background:var(--noche);
  color:var(--sobre-noche);
  padding:clamp(64px,9vh,110px) 0 clamp(40px,6vh,70px);
}
.porke__head,
.trabajo__head{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(18px,4vw,70px);
  align-items:end;
  padding:0 var(--pad);
}
.porke__head h2,
.trabajo__head h2,
.faq__head h2{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.porke__intro,
.trabajo__intro{
  margin:0 0 clamp(6px,1vw,16px);
  max-width:44ch;
  font-size:clamp(.95rem,1.1vw,1.12rem);
  line-height:1.7;
}
.porke__intro{ color:var(--muted-paper); }
.trabajo__intro{ color:var(--muted-ink); }
.porke__stage{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(36px,6vw,110px);
  padding:clamp(30px,5vw,70px) var(--pad) 0;
  align-items:start;
}
.porke__media{
  position:sticky;
  top:clamp(84px,12vh,130px);
  height:clamp(420px,72vh,760px);
  overflow:hidden;
  border-radius:calc(var(--radius) * .38);
  background:var(--noche-soft);
  isolation:isolate;
}
.porke__visual{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transform:scale(1.05);
  transition:opacity .9s var(--ease), transform 1.8s var(--ease-out);
  will-change:opacity, transform;
}
.porke__visual.is-on{
  opacity:1;
  transform:scale(1);
  z-index:1;
}
.porke__visual img,
.porke__visual video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.porke__visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(11,10,9,.74), rgba(11,10,9,0) 44%);
  pointer-events:none;
}
.porke__media-foot{
  position:absolute;
  left:clamp(16px,2.2vw,30px);
  right:clamp(16px,2.2vw,30px);
  bottom:clamp(18px,2.4vw,32px);
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.porke__count{
  font-family:var(--mono);
  font-size:clamp(9px,.68vw,11px);
  letter-spacing:.2em;
  color:var(--sobre-noche-alto);
}
.porke__count b{ font-weight:600; }
.porke__count span{ opacity:.4; padding:0 .5em; }
.porke__caption{
  font-family:var(--display);
  font-size:clamp(.9rem,1.1vw,1.1rem);
  letter-spacing:var(--t-tracking);
  color:var(--sobre-noche-alto);
  text-align:right;
}
.porke__progress{
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  z-index:2;
  background:rgba(241,233,220,.18);
}
.porke__progress i{
  display:block;
  height:100%;
  background:var(--paper);
  transform-origin:left center;
  transform:scaleX(.25);
  transition:transform .6s var(--ease-out);
}
.porke__reasons{ display:flex; flex-direction:column; }
.razon{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,36px);
  align-items:start;
  min-height:46vh;
  padding:clamp(26px,3.6vw,48px) 0;
  border-top:1px solid var(--line-ink);
  opacity:.38;
  transition:opacity .6s var(--ease);
}
.razon:first-child{ border-top:0; }
.razon.is-on{ opacity:1; }
.razon__num{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.2rem,4.2vw,4.8rem);
  line-height:.8;
  letter-spacing:-.04em;
  color:var(--sobre-noche);
  opacity:.28;
  transition:opacity .6s var(--ease), color .6s var(--ease);
}
.razon.is-on .razon__num{ opacity:1; color:var(--paper); }
.razon__texto h3{
  margin:0 0 clamp(10px,1.2vw,16px);
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:clamp(1.55rem,2.6vw,2.9rem);
  line-height:1.08;
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
  transition:color .6s var(--ease);
}
.razon.is-on .razon__texto h3{ color:var(--sobre-noche-alto); }
.razon__texto p{
  margin:0;
  max-width:52ch;
  color:var(--muted-paper);
  font-size:clamp(.95rem,1.05vw,1.06rem);
  line-height:1.7;
}
.porke__credito{
  margin:clamp(28px,4vw,52px) 0 0;
  padding:clamp(16px,2vw,24px) var(--pad) 0;
  border-top:1px solid var(--line-ink);
  color:var(--muted-ink);
  font-size:clamp(.9rem,.98vw,1rem);
  line-height:1.7;
}
.porke__credito b{ color:var(--titulo); font-weight:600; }

/* 05b · Crisle: marcas y eventos ------------------------------------------- */
/* La web de bodas y la web principal comparten marca, tipografía y mirada.
   Este bloque es el puente: el lima de CRISLE entra en el crema de bodas. */
.crisle-link{
  position:relative;
  background:#C6F24E;
  color:#14110F;
}
.crisle-link__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
.crisle-link__texto{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(44px,6vw,90px) var(--pad);
}
.crisle-link__marca{
  display:flex;
  align-items:center;
  gap:.55em;
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.1rem,1.8vw,1.5rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#14110F;
}
.crisle-link__star{
  width:.9em;
  height:.9em;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
}
.crisle-link__title{
  margin:clamp(18px,3vw,34px) 0 0;
  max-width:12ch;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:#14110F;
}
.crisle-link__p{
  margin:clamp(16px,2.4vw,28px) 0 0;
  max-width:44ch;
  line-height:1.7;
  color:rgba(20,17,15,.82);
}
.crisle-link__cta{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  align-self:flex-start;
  margin-top:clamp(24px,4vw,42px);
  padding:14px 28px;
  border:1px solid #14110F;
  border-radius:999px;
  font-family:var(--mono);
  font-size:clamp(10px,.7vw,12px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#14110F;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.crisle-link__cta:hover{ background:#14110F; color:#C6F24E; }
.crisle-link__media{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:4/5;
  background:#14110F;
}
.crisle-link__media img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 28%;
  transition:transform .7s var(--ease-out);
}
.crisle-link__media:hover img{ transform:scale(1.035); }
.crisle-link__media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,17,15,.5), rgba(20,17,15,0) 42%);
  pointer-events:none;
}
.crisle-link__badge{
  position:absolute;
  left:clamp(16px,2vw,28px);
  bottom:clamp(16px,2vw,28px);
  z-index:2;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1rem,1.6vw,1.4rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#C6F24E;
}
@media (max-width:820px){
  .crisle-link__inner{ grid-template-columns:1fr; }
  .crisle-link__texto{ padding:clamp(44px,9vw,70px) var(--pad); }
  .crisle-link__media{ aspect-ratio:4/5; }
}

/* 06 · Cómo trabajo -------------------------------------------------------- */
.trabajo{
  position:relative;
  background:var(--paper-earth);
  color:var(--ink);
  padding:clamp(56px,7vh,84px) 0;
}
.trabajo__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,64px);
  padding:clamp(24px,3.6vw,46px) var(--pad) 0;
}

/* 08 · Preguntas frecuentes ------------------------------------------------ */
.faq{
  position:relative;
  background:var(--paper-earth);
  color:var(--texto);
  padding:clamp(72px,11vh,140px) 0;
}
.faq__wrap{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
  padding:0 var(--pad);
}
.faq__head{
  position:sticky;
  top:clamp(90px,14vh,140px);
}
.faq__head h2 em{
  font-style:normal;
  font-weight:300;
  letter-spacing:-.01em;
}
.faq__lead{
  margin:clamp(16px,2.4vw,28px) 0 0;
  max-width:30ch;
  color:var(--muted-ink);
  line-height:1.7;
}
.faq__lead a{
  color:var(--titulo);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
.faq__item{
  border-bottom:1px solid var(--line-paper);
}
.faq__item summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding:clamp(16px,2.2vw,26px) 2.6rem clamp(16px,2.2vw,26px) 0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.3;
  letter-spacing:-.015em;
  color:var(--titulo);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:'+';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--display);
  font-size:1.6rem;
  font-weight:400;
  line-height:1;
  color:var(--titulo);
  transition:transform .4s var(--ease);
}
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(135deg); }
.faq__item p{
  margin:0;
  padding:0 2rem 1.5rem 0;
  max-width:64ch;
  color:var(--muted-ink);
  font-size:clamp(.95rem,1.05vw,1.08rem);
  line-height:1.75;
}
.faq__item[open] p{ animation:faqIn .5s var(--ease); }
@keyframes faqIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.faq__item p b{ color:var(--titulo); font-weight:600; }

@media (max-width:900px){
  .porke__stage{ grid-template-columns:1fr; gap:clamp(22px,4vw,36px); }
  .porke__media{
    top:68px;
    height:clamp(260px,38vh,380px);
    z-index:2;
    border-radius:calc(var(--radius) * .3);
  }
  .razon{
    min-height:44vh;
    padding:clamp(22px,4vw,34px) 0;
  }
  .razon__num{ font-size:clamp(1.8rem,8vw,2.6rem); }
  .razon__texto h3{ font-size:clamp(1.45rem,5.6vw,2rem); }
  .porke__caption{ max-width:52%; }
  .trabajo__grid{ grid-template-columns:1fr; gap:clamp(18px,3vw,28px); }
  .porke__head,
  .trabajo__head{ grid-template-columns:1fr; align-items:start; }
  .faq__wrap{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px); }
  .faq__head{ position:static; }
}
/* 07 · Imagen a sangre ----------------------------------------------------- */
.quote{
  position:relative;
  background:var(--ink);
  min-height:92vh;
  min-height:92svh;
  display:grid;
  align-items:center;
  overflow:hidden;
  color:var(--paper);
}
.quote__bg{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
  transform-origin:50% 32%;      /* el zoom ancla arriba: no se cortan las caras */
  will-change:transform;
  filter:url(#wb) saturate(.9);
}
.quote__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(11,10,9,.82) 0%, rgba(11,10,9,.34) 58%, rgba(11,10,9,.16) 100%),
    linear-gradient(to top, rgba(11,10,9,.6), rgba(11,10,9,0) 45%);
}
.quote__body{
  position:relative;
  padding:clamp(60px,10vh,120px) var(--pad);
  max-width:min(1100px,90vw);
}
.quote__line{
  font-family:var(--display);
  font-style:italic;
  font-weight:600;
  font-size:clamp(3.2rem,10.5vw,10.5rem);
  line-height:.98;
  letter-spacing:-.03em;
}
.quote__line .w{ display:inline-block; margin-right:.24em; }
.quote__line .w > i{ font-style:inherit; display:inline-block; }
.quote__sub{
  margin-top:clamp(20px,3vw,38px);
  max-width:44ch;
  color:rgba(241,233,220,.74);
  font-size:clamp(.95rem,1.1vw,1.12rem);
}

/* 07b · Testimonio (prueba social) ---------------------------------------- */
.testimonio{
  position:relative;
  background:var(--paper-earth);
  color:var(--texto);
  padding:clamp(72px,12vh,150px) var(--pad);
  text-align:center;
}
.testimonio__fig{
  margin:0 auto;
  max-width:min(760px,90vw);
}
.testimonio__cita{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-weight:600;
  font-size:var(--t2);
  line-height:1.32;
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
  text-wrap:balance;
}
.testimonio__autor{
  margin:clamp(20px,3.5vw,34px) 0 0;
  font-family:var(--mono);
  font-size:var(--t3);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-ink);
}

/* 04 · Otros trabajos ------------------------------------------------------ */
.works{
  background:var(--noche);
  color:var(--sobre-noche);
  padding:clamp(80px,13vh,180px) 0 clamp(56px,9vh,120px);
}
.works__head{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(18px,4vw,70px);
  align-items:end;
  padding:0 var(--pad);
}
.works__title{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.works__intro{
  margin:0 0 clamp(6px,1vw,16px);
  max-width:44ch;
  color:var(--muted-paper);
  font-size:clamp(.95rem,1.1vw,1.12rem);
  line-height:1.7;
}
.works__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  padding:clamp(24px,3.6vw,46px) var(--pad) 0;
  align-items:start;
}
.work{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius) * .55);
  background:var(--noche-soft);
  margin:0;
}
.work video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.work--land{ grid-column:span 6; aspect-ratio:16/10; }
.work--port{ grid-column:span 4; aspect-ratio:4/5; }
.work__tag{
  position:absolute;
  left:clamp(12px,1.3vw,18px);
  bottom:clamp(12px,1.3vw,18px);
  z-index:2;
  font-family:var(--mono);
  font-size:clamp(9px,.62vw,10.5px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(241,233,220,.92);
  background:rgba(11,10,9,.34);
  border:1px solid rgba(241,233,220,.24);
  border-radius:999px;
  padding:.5em .85em;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* 06 · Contacto ------------------------------------------------------------ */
.contact{
  position:relative;
  background:var(--paper-earth);
  color:var(--texto);
  padding:clamp(48px,6.5vh,80px) 0 clamp(44px,6vh,72px);
}
.contact__body{ padding:0 var(--pad); }
.contact__title{  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.contact__title em{
  font-style:italic;
  font-weight:600;
}
.contact__mail{
  display:inline-block;
  margin-top:clamp(30px,5vw,64px);
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.4rem,4vw,3.6rem);
  letter-spacing:-.01em;
  padding-bottom:.12em;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .7s var(--ease-out);
}
.contact__mail:hover{ background-size:100% 1px; }
.contact__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(34px,5vw,60px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
.contact__link{ position:relative; }
.contact__link::after{
  content:'';
  position:absolute; left:0; bottom:-3px;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease-out);
}
.contact__link:hover::after{ transform:scaleX(1); transform-origin:left center; }

/* Formulario de contacto: campos con subrayado, en la línea del resto */
.contacto{
  margin-top:clamp(44px,7vw,90px);
  max-width:min(820px,100%);
}
/* En la portada no hay formulario: solo el botón que lleva a Contacto */
.contact__acciones{ margin-top:clamp(26px,3.4vw,44px); }
.contacto__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,34px);
}
.contacto__campo{ display:block; margin-bottom:clamp(16px,2.2vw,26px); }
.contacto__label{
  display:block;
  margin-bottom:9px;
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted-ink);
}
/* Campos con cuerpo: se ve dónde se escribe, no solo una línea */
.contacto__input{
  width:100%;
  padding:14px 16px;
  font:inherit;
  font-size:clamp(1rem,1.15vw,1.1rem);
  color:var(--texto);
  background:rgba(255,255,255,.55);
  border:1px solid var(--line-ink);
  border-radius:12px;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.contacto__input::placeholder{ color:rgba(var(--texto-rgb),.42); }
.contacto__input:focus{
  outline:none;
  background:#fff;
  border-color:rgba(11,10,9,.4);
  box-shadow:0 8px 24px rgba(11,10,9,.07);
}
.contacto__area{ min-height:132px; resize:vertical; line-height:1.6; }
/* El selector de fecha del navegador, integrado */
.contacto__input[type="date"]{ min-height:52px; }
.contacto__input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.4;
  cursor:pointer;
  transition:opacity .3s var(--ease);
}
.contacto__input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:.8; }
.contacto__pie{
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,26px);
  flex-wrap:wrap;
  margin-top:clamp(6px,1vw,12px);
}
.contacto__boton{
  /* Botón suave: el tono del texto, translúcido */
  font-family:var(--mono);
  font-size:clamp(10px,.68vw,11.5px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--texto);
  background:rgba(var(--texto-rgb),.16);
  border:1px solid rgba(var(--texto-rgb),.32);
  padding:15px 34px;
  border-radius:999px;
  transition:background .4s var(--ease), opacity .3s var(--ease);
}
.contacto__boton:hover{ background:rgba(var(--texto-rgb),.26); }
.contacto__boton[disabled]{ opacity:.5; }
.contacto__msg{ margin:0; font-size:.92rem; color:#8d2f28; }
.contacto__msg.is-ok{ color:#2f6b46; }

/* Pie ---------------------------------------------------------------------- */
.footer{
  background:var(--noche);
  color:var(--sobre-noche);
  padding:clamp(40px,6vh,80px) var(--pad) clamp(26px,4vh,40px);
  overflow:hidden;
}
.footer__mark{
  font-family:var(--display);
  font-style:normal;
  font-weight:700;
  font-size:clamp(3.8rem,23vw,22rem);
  line-height:.94;
  letter-spacing:-.04em;
  color:rgba(var(--texto-rgb),.10);
  white-space:nowrap;
  will-change:transform;
  margin-left:-.06em;
}
.footer__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:clamp(28px,5vh,60px);
  padding-top:clamp(16px,2.4vh,26px);
  border-top:1px solid var(--line-paper);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-paper);
}
.footer__links{ display:flex; gap:22px; }
.footer__row a{ position:relative; }
.footer__row a::after{
  content:'';
  position:absolute; left:0; bottom:-3px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease-out);
}
.footer__row a:hover::after{ transform:scaleX(1); transform-origin:left center; }

/* --------------------------------------------------------------------------
   09. REPRODUCTOR
   -------------------------------------------------------------------------- */
.player{
  position:fixed;
  inset:0;
  z-index:900;
  background:rgba(9,8,7,.95);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:grid;
  place-items:center;
  opacity:0;
}
/* El atributo hidden debe poder ganar: sin esto el reproductor queda siempre
   renderizado (display:grid anula el display:none del navegador) tapando la
   página entera y bloqueando todos los clics. */
.player[hidden]{ display:none; }
.player.is-open{ opacity:1; }
.player__stage{
  position:relative;
  width:min(94vw,1500px);
}
.player__video{
  width:100%;
  max-height:78vh;
  border-radius:calc(var(--radius) * .6);
  background:#000;
}
.player__hit{
  position:absolute; left:0; top:0;
  width:100%;
  height:calc(78vh - 76px);
  max-height:78vh;
  border-radius:calc(var(--radius) * .6);
}
.player__bar{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,26px);
  padding-top:clamp(14px,2vh,22px);
  font-family:var(--mono);
  font-size:clamp(9.5px,.66vw,11px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-paper);
}
.player__track{
  position:relative;
  flex:1;
  height:1px;
  background:rgba(241,233,220,.22);
}
.player__track i{
  position:absolute; inset:0;
  background:var(--paper);
  transform:scaleX(0);
  transform-origin:left center;
}
.player__share,
.player__close{
  font:inherit;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper);
  transition:opacity .4s var(--ease);
}
.player__share:hover,
.player__close:hover{ opacity:.6; }
.player__title{
  position:absolute;
  left:0; top:-1.2em;
  font-family:var(--display);
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.25rem,2.3vw,2.1rem);
  color:rgba(241,233,220,.5);
}

/* --------------------------------------------------------------------------
   10. ESTADOS INICIALES DE ANIMACIÓN (solo si hay JS)
   -------------------------------------------------------------------------- */
.js [data-anim="fade"]{ opacity:0; }
.js [data-anim="up"]{ opacity:0; transform:translateY(26px); }
.js [data-anim="title"]{ opacity:0; transform:translateY(.12em); }
.js [data-anim="clip"]{ clip-path:inset(0 0 100% 0); }
.js [data-anim="clip"] img,
.js [data-anim="clip"] video{ transform:scale(1.14); }
.js .statement .w > i{ opacity:.12; }
.js .quote__line .w > i{ opacity:.1; }
.js .hero__rule{ transform:scaleX(0); }

/* --------------------------------------------------------------------------
   11. ADAPTACIÓN
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .intro__body{ grid-template-columns:1fr; }
  .intro__aside{ border-left:0; padding-left:0; border-top:1px solid var(--line-ink); padding-top:22px; }
  .statement{ max-width:100%; }
  .film__info{ align-items:flex-start; flex-direction:column; }
  .works__head{ grid-template-columns:1fr; align-items:start; }
  .work--land{ grid-column:span 12; }
  .work--port{ grid-column:span 6; }
}
@media (max-width:720px){
  .hero__labels{ flex-direction:column; align-items:flex-start; gap:6px; }
  .hero__eyebrow{ text-align:left; }
  .hero__scroll{ right:6px; }
  .hero__bottom{ gap:clamp(10px,2.4vw,16px); }
  .hero__bottom-row{ flex-direction:column-reverse; align-items:flex-start; gap:clamp(12px,3vw,18px); }
  .hero__foot{ padding-bottom:0; align-self:flex-end; }
  .hero__brand{ font-size:clamp(2.2rem,15vw,5.5rem); }
  /* En móvil el vídeo ya lleva pista de audio: el botón de sonido se mantiene */
  .hero__sep{ display:none; }
  .hud__nav{ gap:12px; font-size:9px; letter-spacing:.12em; }
  .hud__nav .hud__clientes{ margin-left:0; padding:4px 9px 5px; }
  .film__card{ aspect-ratio:4/3; }
  .grid{ grid-template-columns:1fr; gap:12px; }
  .grid__item{ grid-column:1 / -1 !important; margin-top:0 !important; aspect-ratio:3/2 !important; }
  .grid__item--tall{ aspect-ratio:4/5 !important; }
  .grid__item--full{ aspect-ratio:16/9 !important; }
  .work--land,
  .work--port{ grid-column:1 / -1; }
  .contacto__row{ grid-template-columns:1fr; }
  .player__hit{ height:60vh; }
  .player__video{ max-height:60vh; }
  .footer__row{ flex-direction:column; align-items:flex-start; }
}
@media (hover:none){
  .grain{ opacity:.045; }
}

/* --------------------------------------------------------------------------
   12. MOVIMIENTO REDUCIDO — misma web, sin vértigo
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cover__word{ animation:none; clip-path:none; }
  .grain,.hero__scroll-line::after,.film__badge-ring,.hero__sound .hero__dot,.hero__wave i{
    animation:none;
  }
  .strip__track{ animation:none; }
  /* Recorrido más corto: sin parallax no hace falta tanto scroll para tapar el vídeo */
  .hero-hold{ height:140vh; height:140svh; }
  main{ margin-top:-40vh; margin-top:-40svh; }
  .js [data-anim]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  *{ transition-duration:.001s !important; }
}

/* --------------------------------------------------------------------------
   GRANO EN LAS SUPERFICIES CREMA
   El blanco va liso; el crema lleva la textura de papel.
   -------------------------------------------------------------------------- */
.film,
.momentos,
.momentos__pin,
.formatos,
.trabajo,
.contact,
.intro,
.split,
.piezas,
.adm,
.acceso__card{ position:relative; }

.film::after,
.moments::after,
.momentos::after,
.formatos::after,
.trabajo::after,
.contact::after,
.intro::after,
.mosaico-sec::after,
.split::after,
.pasos::after,
.pcta::after,
.cpag::after,
.piezas::after,
.adm::after,
.galeria::after,
.acceso__card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url(../img/grain.png);
  background-repeat:repeat;
  opacity:.04;
  mix-blend-mode:multiply;
}

/* --------------------------------------------------------------------------
   Testimonios de parejas
   -------------------------------------------------------------------------- */
.voces{
  position:relative;
  padding:clamp(56px,9vw,110px) var(--pad);
  background:var(--paper-earth);
  color:var(--texto);
}
.voces::after{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url(../img/grain.png);
  background-repeat:repeat;
  opacity:.04;
  mix-blend-mode:multiply;
}
.voces > *{ position:relative; z-index:1; }
.voces__head{
  max-width:var(--wrap);
  margin:0 auto clamp(26px,4vw,44px);
}
.voces__head h2{
  margin:0;
  font-family:var(--display);
  font-weight:var(--t-peso);
  font-size:var(--t1);
  line-height:var(--t-linea);
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
}
.voces__head h2 em{ font-style:italic; }
.voces__grid{
  max-width:var(--wrap);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(20px,3vw,38px);
}
.voz{
  margin:0;
  padding:clamp(22px,3vw,34px) 0 0;
  border-top:1px solid var(--line-ink);
  background:none;
}
.voz blockquote{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-weight:600;
  font-size:var(--t2);
  line-height:1.32;
  letter-spacing:var(--t-tracking);
  color:var(--titulo);
  text-wrap:balance;
}
.voz blockquote::before{ content:'“'; }
.voz blockquote::after{ content:'”'; }
.voz figcaption{
  margin-top:clamp(14px,2vw,20px);
  font-family:var(--mono);
  font-size:var(--t3);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-ink);
}

/* --------------------------------------------------------------------------
   COMPATIBILIDAD
   Misma experiencia en Chrome/Edge (Windows), Safari y Firefox. Si algo no
   está soportado, el contenido sigue visible y la navegación funciona.
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .hero__veil{ background:rgba(11,10,9,.5); }
}
@supports not (position: sticky){
  .porke__media{ position:relative; top:auto; }
}
.no-gsap .momentos__viewport,
.is-reduce .momentos__viewport{ overflow-x:auto; }
.no-gsap .momentos__track,
.is-reduce .momentos__track{ transform:none !important; }

/* Accesibilidad: saltar la navegación y foco visible en todo lo interactivo */
.skip-link{
  position:fixed;
  left:16px;
  top:16px;
  z-index:1200;
  padding:12px 18px;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus-visible{ transform:translateY(0); outline:2px solid var(--paper); outline-offset:3px; }
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}