/* =========================================================
   REVEL STUDIO — hoja de estilos
   Marca: navy #000b27  ·  crema #f6f7f1
   ========================================================= */

:root{
  --navy:#000b27;
  --cream:#f6f7f1;
  --line:rgba(0,11,39,.14);
  --muted:rgba(0,11,39,.55);

  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out-expo:cubic-bezier(0.87,0,0.13,1);

  --pad:6.25vw;
  --text-base:calc(12px + 0.25vw);

  /* Century Gothic, la letra del "studio" del logotipo. Se usa para los
     nombres de las disciplinas en la portada, para que peguen con la marca.
     Viene instalada en Windows y en Mac; detrás va Questrial (Google Fonts),
     que se le parece mucho, para quien no la tenga.
     El logotipo en sí ya no depende de ninguna letra: es un vector. */
  --font-studio:'Century Gothic',CenturyGothic,'Questrial','URW Gothic',
                'Futura','Avant Garde','Poppins',sans-serif;
  /* La del REVEL del logotipo. Sólo se usa para esa palabra dentro de la
     frase de la página de contacto; el logotipo en sí es un vector. */
  --font-revel:Impact,'Anton','Haettenschweiler','Arial Narrow Bold',
               'Franklin Gothic Heavy',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
/* El fondo del documento va en azul marino a propósito: es lo que pinta el
   navegador en el instante entre una página y otra. Si se deja en blanco,
   se ve un destello blanco al cambiar de página. */
html{height:100%;background:var(--navy);}
body{min-height:100%;}

/* La barra de desplazamiento, discreta y del color de la marca. Además de
   quedar mejor, evita que su franja clara se note al cambiar de página. */
html{scrollbar-width:thin;scrollbar-color:rgba(0,11,39,.3) rgba(0,11,39,.06);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:rgba(0,11,39,.06);}
::-webkit-scrollbar-thumb{background:rgba(0,11,39,.28);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:rgba(0,11,39,.45);}
body{
  background:var(--cream);
  color:var(--navy);
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:var(--text-base);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}

/* ---------- LOGO ----------
   Es el logotipo original vectorizado: un dibujo, no texto. Toma el color
   de lo que lo rodea (crema sobre el azul, azul sobre el crema), y se ve
   nítido a cualquier tamaño. El dibujo está en assets/logo.svg.txt y se
   inserta una vez en cada página. */
.logo-def{position:absolute;width:0;height:0;overflow:hidden;}
.logo{
  display:block;
  width:100%;height:auto;
  fill:currentColor;
  overflow:visible;
  user-select:none;
}

/* ---------- NAV ----------
   El logotipo va a la derecha del todo; a la izquierda, las tres rayas
   del menú y el contacto. */
.nav::before{
  content:'';
  position:absolute;inset:0 0 -46px 0;
  transition:opacity .5s ease;
  background:linear-gradient(to bottom,rgba(246,247,241,.96) 0%,rgba(246,247,241,.72) 45%,rgba(246,247,241,0) 100%);
  pointer-events:none;
  z-index:-1;
}
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px var(--pad);
  pointer-events:none;
}
.nav > *{pointer-events:auto;}
.nav-logo{display:block;width:118px;}
.nav-left{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}
.nav-left a{position:relative;padding-bottom:3px;}
.nav-left a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out-expo);
}
.nav-left a:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---------- ICONO DEL MENÚ: CUATRO CUADRADOS ---------- */
.icon-btn{
  display:block;
  padding:0;
  flex:0 0 auto;
  line-height:0;
}
.grid-icon{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:4px;
  width:20px;height:20px;
  transition:transform .5s var(--ease-out-expo);
}
.grid-icon > span{
  display:block;
  background:currentColor;      /* azul en la barra, crema sobre el menú */
  border-radius:1px;
  transition:transform .45s var(--ease-out-expo),opacity .35s ease;
}
.icon-btn:hover .grid-icon{transform:rotate(90deg);}
/* de botón de cerrar: los cuatro cuadrados se giran en aspa */
.icon-btn.is-open .grid-icon{transform:rotate(45deg);}
.icon-btn.is-open:hover .grid-icon{transform:rotate(135deg);}

/* estado de la barra sobre fondo oscuro */
.nav.on-dark{color:var(--cream);}

/* con el panel de contacto delante no hay fotos que tapar: el degradado
   de la barra sobra y además deslavaba el título */
body.at-contact .nav::before{opacity:0;}

/* ---------- MENÚ ---------- */
.menu{
  position:fixed;inset:0;z-index:80;
  background:var(--navy);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .95s var(--ease-in-out-expo);
  pointer-events:none;
}
.menu.open{clip-path:inset(0 0 0 0);pointer-events:auto;}
.menu-list{display:flex;flex-direction:column;align-items:flex-start;}
.menu-list a{
  font-family:'Anton',sans-serif;
  font-size:clamp(32px,6vw,80px);
  line-height:1.14;
  text-transform:uppercase;
  letter-spacing:.01em;
  opacity:.45;
  transition:opacity .45s ease,transform .45s var(--ease-out-expo);
}
.menu-list a:hover{opacity:1;transform:translateX(18px);}
.menu-list a .n{
  font-family:'Poppins',sans-serif;font-weight:300;
  font-size:.22em;letter-spacing:.2em;vertical-align:super;margin-right:.6em;opacity:.6;
}
.menu-close{
  position:absolute;top:24px;left:var(--pad);
  color:var(--cream);
}
.menu-foot{
  position:absolute;left:var(--pad);bottom:5vh;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.6;line-height:2.1;
}
.menu-foot a:hover{opacity:1;text-decoration:underline;}

/* ---------- LA REDONDA DEL CURSOR ----------
   Sigue al ratón por encima de las fotos de la diagonal. Va en negativo:
   con "mix-blend-mode:difference", el blanco del círculo invierte lo que
   tiene debajo (sale claro sobre el azul) y el negro del texto lo deja tal
   cual (sale azul). Por eso el texto se lee siempre, esté sobre lo que esté. */
.disc{
  position:fixed;top:0;left:0;z-index:75;
  width:clamp(92px,8.4vw,128px);
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  color:#000;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-family:var(--font-studio);   /* la misma letra que el "studio" del logo */
  font-size:clamp(10px,.78vw,12px);
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.75;
  mix-blend-mode:difference;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  will-change:transform;
}
/* en el móvil no hay cursor que seguir */
@media (hover:none),(max-width:900px){.disc{display:none;}}

/* sobre las fotos manda la redonda: se esconde la flecha del sistema */
@media (hover:hover){
  .slide{cursor:none;}
}

/* ---------- PANEL DE TRANSICIÓN ---------- */
/* Al cargar la página, el panel ya está TAPANDO la pantalla y se retira solo
   con una animación de CSS. Antes empezaba fuera y sólo lo tapaba el
   JavaScript: entre el primer pintado y el arranque del script se colaba un
   destello blanco de unas milésimas. */
.transition{
  position:fixed;inset:0;z-index:999;
  background:var(--navy);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transform:translateX(0);
  animation:barrido-sale .9s var(--ease-in-out-expo) forwards;
  animation-play-state:paused;
  pointer-events:none;
  padding:0 var(--pad);
}
/* en cuanto la tipografía está lista (o pasan 600 ms), arrancan */
html.fonts-ready .transition,
html.fonts-ready .transition-title{animation-play-state:running;}

@keyframes barrido-sale{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}
@keyframes titulo-sale{
  0%{transform:translateX(0);opacity:1;}
  55%{opacity:.9;}
  100%{transform:translateX(-24vw);opacity:0;}
}
.transition-title{
  animation:titulo-sale 1.15s var(--ease-out-expo) forwards;
  animation-play-state:paused;
  font-family:'Anton',sans-serif;
  font-size:clamp(36px,7.5vw,140px);
  line-height:.94;
  text-transform:uppercase;
  text-align:center;
  letter-spacing:.01em;
}

/* =========================================================
   HOME
   ========================================================= */
body.home{overflow:hidden;}

/* =========================================================
   PORTADA DE ENTRADA
   El logo entra deslizándose de izquierda a derecha y se queda
   a la derecha de la pantalla, centrado en vertical. Debajo van
   apareciendo una a una las cuatro disciplinas. Después la
   portada sube y descubre la diagonal.
   ========================================================= */
.cover{
  position:fixed;inset:0;z-index:900;
  background:var(--navy);color:var(--cream);
  overflow:hidden;
  cursor:pointer;
  will-change:transform;
  transform:translateY(0);
  transition:transform 1.25s var(--ease-in-out-expo);
}
.cover.gone{transform:translateY(-100%);}

/* el bloque queda pegado a la derecha y centrado en vertical,
   igual que en la imagen de referencia */
.cover-inner{
  position:absolute;
  right:4vw;
  top:50%;
  transform:translateY(-50%);
  text-align:right;
}

/* --- el logo entra desde fuera por la izquierda --- */
.cover-logo{
  display:block;
  transform:translateX(calc(-100vw - 100%));
  opacity:0;
  transition:transform 1.75s var(--ease-out-expo) .18s,
             opacity .5s ease .18s;
}
.cover.in .cover-logo{transform:translateX(0);opacity:1;}
/* el ancho del logotipo en la portada, medido sobre tu imagen */
.cover .logo{width:25.8vw;}

/* --- las cuatro disciplinas, una detrás de otra, bajo el logo --- */
/* colgadas del logo: van en posición absoluta para que el logo quede
   centrado en la pantalla exactamente como en la imagen de referencia */
.cover-list{
  position:absolute;
  top:100%;right:0;
  width:max-content;
  display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:0 clamp(12px,1.6vw,26px);
  margin-top:clamp(16px,2.1vw,34px);
  list-style:none;
  font-family:var(--font-studio);
  font-size:clamp(8px,.78vw,11px);
  letter-spacing:.3em;text-transform:uppercase;
}
.cover-list li{overflow:hidden;padding:3px 0;}
.cover-list li > span{
  display:block;
  transform:translateY(150%);
  opacity:0;
  transition:transform 1.05s var(--ease-out-expo) var(--d,0s),
             opacity .7s ease var(--d,0s);
}
.cover.in .cover-list li > span{transform:translateY(0);opacity:.85;}

/* --- hilo de abajo: se va llenando y avisa de que la portada va a subir --- */
.cover-bar{
  position:absolute;left:var(--pad);right:var(--pad);bottom:0;
  height:1px;background:rgba(246,247,241,.16);
}
.cover-bar span{
  display:block;height:100%;background:var(--cream);
  transform:scaleX(0);transform-origin:left;
}
.cover-bar span.run{transition:transform var(--wait,1.2s) linear;transform:scaleX(1);}

body.cover-on{cursor:default;}

@media (prefers-reduced-motion:reduce){
  .cover-logo{transition-duration:.4s;}
  .cover-list li > span{transition-duration:.4s;}
}

.window{position:fixed;inset:0;overflow:hidden;}

.slider{position:absolute;inset:0;overflow:hidden;cursor:grab;}
.slider.is-dragging{cursor:grabbing;}
.slider.is-dragging *{pointer-events:none;}

.slider-track{
  position:absolute;top:0;left:0;
  display:flex;flex-flow:row nowrap;
  user-select:none;-webkit-user-select:none;
  will-change:transform;
}
.slider-item{flex:0 0 auto;position:relative;}

.slide{
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
  width:38vw;
  height:100vh;
  margin-right:3vw;
  background:var(--navy);
}
.slide .resizer{
  height:100%;width:150%;flex:0 0 auto;overflow:hidden;will-change:transform;
}
.slide .resizer img{
  transform:scale(1);
  transition:transform 2s var(--ease-out-expo);
}
@media (hover:hover){
  .slider:not(.is-dragging) .slide:hover .resizer img{transform:scale(1.08);}
}

/* --------------------------------------------------------
   VELO AL PASAR EL RATÓN
   Sobre la foto no hay ningún texto. Al pasar el cursor por
   encima aparece el azul de la marca al 50 % con el nombre
   de la sección, y la foto hace un zoom suave.
   -------------------------------------------------------- */
.slide-over{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(14px,1.6vw,24px);
  padding:0 24px;
  text-align:center;
  background:rgba(0,11,39,.5);       /* el azul de la marca, al 50 % */
  color:var(--cream);
  opacity:0;
  transition:opacity .55s var(--ease-out-expo);
  pointer-events:none;
}
.slide-over .cat{
  font-family:'Anton',sans-serif;
  font-size:clamp(24px,2.6vw,44px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.01em;
  transform:translateY(12px);
  transition:transform .6s var(--ease-out-expo);
}
/* En el ordenador, el "Open gallery" lo lleva la redonda del cursor,
   así que aquí sobra. En el móvil, que no tiene cursor, sí se ve. */
.slide-over .go{
  display:none;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  padding-bottom:6px;
  border-bottom:1px solid rgba(246,247,241,.55);
  transform:translateY(14px);
  transition:transform .6s var(--ease-out-expo) .05s;
}

@media (hover:hover){
  .slider:not(.is-dragging) .slide:hover .slide-over{opacity:1;}
  .slider:not(.is-dragging) .slide:hover .slide-over .cat,
  .slider:not(.is-dragging) .slide:hover .slide-over .go{transform:translateY(0);}
}

/* con el teclado (tabulador) también se ve */
.slide:focus-visible{outline:none;}
.slide:focus-visible .slide-over{opacity:1;}
.slide:focus-visible .slide-over .cat,
.slide:focus-visible .slide-over .go{transform:translateY(0);}

/* en móvil no hay cursor: el velo se queda puesto para saber qué es cada foto */
@media (hover:none){
  .slide-over{
    opacity:1;
    background:linear-gradient(to top,rgba(0,11,39,.62),rgba(0,11,39,.22));
  }
  .slide-over .go{display:block;}
  .slide-over .cat,.slide-over .go{transform:none;}
}

/* slide sin fotos todavía */
.slide.placeholder{
  background:var(--navy);
  color:var(--cream);
}
.slide.placeholder .ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:0 30px;width:100%;height:100%;
  border:1px solid rgba(246,247,241,.16);
}
.slide.placeholder .ph .mark{
  font-family:'Anton',sans-serif;font-size:clamp(26px,2.6vw,42px);
  text-transform:uppercase;line-height:1;
}
.slide.placeholder .ph .soon{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;
}

.home-hero{display:none;}
.home-hero-off{
  position:fixed;
  left:var(--pad);bottom:6vh;
  z-index:40;pointer-events:none;
  max-width:32ch;
  transition:opacity .8s var(--ease-out-expo);
}
body.moved .home-hero{opacity:0;}
.home-hero h1{
  font-family:'Anton',sans-serif;
  font-size:clamp(30px,3.6vw,58px);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.home-hero p{
  margin-top:14px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}

.home-meta{
  display:none;
  position:fixed;right:var(--pad);bottom:6vh;z-index:40;
  text-align:right;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:2;
  opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--ease-out-expo) .5s,transform .9s var(--ease-out-expo) .5s;
}
body.ready .home-meta{opacity:1;transform:translateY(0);}
body.moved .home-meta{opacity:0;transition-delay:0s;}
.home-meta a{pointer-events:auto;}
.home-meta a:hover{color:var(--navy);}

.rail{
  position:fixed;left:var(--pad);right:var(--pad);bottom:0;height:1px;
  background:var(--line);z-index:45;
}
.rail-bar{height:100%;background:var(--navy);transform-origin:left;transform:scaleX(0);will-change:transform;}

/* =========================================================
   PANEL DE CONTACTO
   Llega por la misma diagonal que las fotos, en el mismo
   sentido, y se queda quieto en el centro de la pantalla.
   El movimiento lo calcula assets/app.js.
   ========================================================= */
.contact{
  position:fixed;
  left:50%;top:50%;
  z-index:50;
  width:min(560px,86vw);
  max-height:88vh;
  /* El formulario se mide con el ALTO de la ventana (unidades vh), así que
     cabe entero sin barra de desplazamiento en cualquier pantalla. El
     overflow se deja por seguridad, pero la barra no se pinta. */
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.contact.live{pointer-events:auto;}
.contact::-webkit-scrollbar{display:none;}

.contact-kicker{
  display:block;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:clamp(6px,1.3vh,15px);
}
.contact-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(30px,min(4.9vw,6.6vh),68px);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.contact-lead{
  margin-top:clamp(8px,1.5vh,16px);
  max-width:42ch;
  font-size:clamp(11px,1.45vh,13px);line-height:1.75;color:var(--muted);
}
/* en ventanas bajas, el párrafo de presentación y el antetítulo sobran: lo
   que importa es que se vea el formulario entero, sin tener que deslizar */
@media (max-height:745px){
  .contact-lead{display:none;}
  .contact-kicker{display:none;}
}

/* ---- el formulario ---- */
.contact-form{
  margin-top:clamp(14px,2.5vh,28px);
  display:flex;flex-direction:column;
  gap:clamp(9px,1.5vh,16px);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.f-row{display:flex;gap:16px;flex-wrap:wrap;}
.f-row .f{flex:1 1 180px;}
.f{display:flex;flex-direction:column;gap:clamp(4px,.8vh,7px);}
.f > span{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.f input,.f textarea{
  font:inherit;font-size:13px;color:var(--navy);
  background:transparent;
  border:0;border-bottom:1px solid var(--line);
  padding:clamp(5px,1vh,8px) 0;
  border-radius:0;
  transition:border-color .4s ease;
}
.f textarea{resize:vertical;min-height:clamp(50px,9vh,86px);line-height:1.7;}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--navy);}
.f input::placeholder,.f textarea::placeholder{color:rgba(0,11,39,.3);}

.contact-send{
  align-self:flex-start;
  margin-top:clamp(0px,.6vh,6px);
  display:inline-flex;align-items:center;gap:14px;
  padding:clamp(9px,1.5vh,13px) 26px;
  border:1px solid var(--navy);
  border-radius:999px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  transition:background .45s var(--ease-out-expo),color .45s var(--ease-out-expo);
}
.contact-send .arrow{font-size:14px;letter-spacing:0;transition:transform .45s var(--ease-out-expo);}
.contact-send:hover{background:var(--navy);color:var(--cream);}
.contact-send:hover .arrow{transform:translateX(5px);}
.contact-send[disabled]{opacity:.45;pointer-events:none;}

/* mientras no dice nada, no ocupa sitio */
.contact-note:empty{display:none;}
.contact-note{
  min-height:1.2em;
  font-size:11px;letter-spacing:.06em;line-height:1.7;color:var(--muted);
}
.contact-note.ok{color:var(--navy);}
.contact-note.bad{color:#a3231f;}

.contact-alt{
  margin-top:clamp(12px,2.3vh,24px);padding-top:clamp(9px,1.5vh,16px);
  border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);line-height:1.85;
}
.contact-alt a:hover{color:var(--navy);text-decoration:underline;}

@media (max-width:900px){
  .contact{width:86vw;max-height:92vh;}
  .contact-title{font-size:clamp(24px,4.2vh,34px);line-height:.95;}
  .contact-lead{margin-top:clamp(8px,1.3vh,12px);font-size:12px;line-height:1.65;}
  .contact-form{margin-top:clamp(11px,1.9vh,20px);gap:clamp(7px,1.35vh,13px);}
  .f textarea{min-height:clamp(42px,6.6vh,62px);}
  .contact-send{padding:clamp(9px,1.4vh,12px) 22px;}
  .contact-alt{margin-top:clamp(10px,1.9vh,18px);padding-top:clamp(8px,1.3vh,14px);line-height:1.75;}
  .pick span{padding:clamp(5px,.95vh,10px) 16px;}
}

/* =========================================================
   PÁGINAS DE CATEGORÍA
   ========================================================= */
body.cat{background:var(--cream);}

/* =========================================================
   EL VÍDEO QUE ABRE UNA SECCIÓN
   Pantalla completa, sin controles, sin sonido y en bucle.
   Va en el flujo normal de la página: al deslizar hacia abajo
   se va con ella y aparece el título; si subes, sigue ahí.
   ========================================================= */
.film{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;                 /* en el móvil, la pantalla visible de verdad */
  overflow:hidden;               /* lo que sobra del vídeo se recorta */
  background:var(--navy);        /* mientras carga, azul de la marca */
}
/* El vídeo es 16:9. Se estira hasta cubrir la pantalla entera por el lado que
   haga falta, y el sobrante se recorta a izquierda y derecha (o arriba y
   abajo). Las dos parejas de medidas mantienen siempre la proporción. */
.film-video{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:100vw;  height:56.25vw;
  min-width:177.78vh;  min-height:100vh;
  min-width:177.78lvh; min-height:100lvh;
  border:0;
  pointer-events:none;           /* no se puede pausar ni tocar por error */
}
/* marca invisible en el borde de abajo: sirve para saber cuándo el vídeo
   deja de tapar la barra de arriba (assets/app.js, filmInit) */
.film-edge{position:absolute;left:0;bottom:0;width:100%;height:1px;pointer-events:none;}

/* ---------- LA FLECHA DE "DESLIZA HACIA ABAJO" ----------
   Círculo y flecha de línea fina, en crema, abajo y centrada. El círculo se
   queda quieto y la flecha cae despacio y se apaga, una y otra vez: se
   entiende sin leer nada y no distrae de la imagen. También se puede pulsar.*/
.film-scroll{
  position:absolute;
  left:50%;bottom:clamp(24px,4.5vh,52px);
  transform:translateX(-50%);
  width:clamp(38px,3.4vw,50px);
  color:var(--cream);
  opacity:0;
  animation:flecha-aparece 1s ease 1.1s forwards;
}
.film-scroll svg{display:block;width:100%;height:auto;overflow:visible;}
.film-scroll .fs-ring{
  fill:none;stroke:currentColor;stroke-width:1;
  opacity:.55;
  transition:opacity .5s ease,transform .5s var(--ease-out-expo);
  transform-origin:50% 50%;
}
.film-scroll .fs-arrow path{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.film-scroll .fs-arrow{
  transform-origin:50% 50%;
  animation:flecha-cae 2.3s cubic-bezier(.55,0,.35,1) infinite;
}
.film-scroll:hover .fs-ring{opacity:1;transform:scale(1.06);}

@keyframes flecha-aparece{to{opacity:1;}}
@keyframes flecha-cae{
  0%   {transform:translateY(-4px);opacity:0;}
  22%  {opacity:1;}
  62%  {opacity:1;}
  100% {transform:translateY(7px);opacity:0;}
}
/* el punto al que lleva la flecha si se pulsa */
#after-film{scroll-margin-top:0;}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}
@media (prefers-reduced-motion:reduce){
  .film-scroll{opacity:1;animation:none;}
  .film-scroll .fs-arrow{animation:none;}
}

/* con el vídeo delante, la barra de arriba se pone en crema para que se lea */
.nav.on-film{color:var(--cream);}
.nav.on-film::before{
  background:linear-gradient(to bottom,rgba(0,11,39,.55) 0%,rgba(0,11,39,.22) 45%,rgba(0,11,39,0) 100%);
}

.cat-head{
  padding:26vh var(--pad) 10vh;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cat-head h1{
  font-family:'Anton',sans-serif;
  font-size:clamp(44px,9vw,150px);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.cat-head .idx{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.2em;display:block;
}
.cat-head .lead{
  max-width:38ch;font-size:14px;line-height:1.75;color:var(--muted);
}
/* con vídeo arriba, el título ya no necesita tanto aire para librar la barra */
body.has-film .cat-head{padding-top:13vh;}

/* =========================================================
   EL RECORRIDO DE LA SECCIÓN
   Los tres momentos, la experiencia, la frase y el botón,
   todo centrado y con mucho aire entre uno y otro.
   Aparece al llegar deslizando.
   Los textos están en build.py: MOMENTOS, EXPERIENCIA, FRASE.
   ========================================================= */
.flow{
  position:relative;
  padding:6vh var(--pad) 8vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- las filas y las fotos ----------
   La sección va por filas. En el centro de cada fila, una sola cosa de texto,
   en columna estrecha. A los lados, en los márgenes que quedan libres, las
   fotos: a distintas alturas, colocadas a propósito. Como no ocupan sitio en
   la fila, nunca pueden tapar el texto.
   El orden, el lado, el tamaño y la altura están en build.py, lista FOTOS. */
/* el bloque de después de los deslizables (sólo el botón) entra justo detrás
   de la última tira, sin aire de más por arriba */
.flow-cierre{padding-top:0;}

.fila{
  position:relative;
  width:100%;
  min-height:var(--alto, 60vw);
  display:flex;
  align-items:center;
  justify-content:center;
}
.fila-txt{
  position:relative;
  z-index:2;
  width:100%;
  max-width:620px;          /* la columna de texto, estrecha y centrada */
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* Dos filas seguidas cuyo texto es una sola frase: la de arriba baja al borde
   de abajo de su fila y la de abajo sube al de arriba de la suya. Así se leen
   juntas aunque cada una lleve sus propias fotos a los lados. */
.fila.txt-abajo{align-items:flex-end;}
.fila.txt-abajo .fila-txt{padding-bottom:5vw;}
.fila.txt-arriba{align-items:flex-start;}
.fila.txt-arriba .fila-txt{padding-top:5vw;}
/* una fila sin fotos ocupa sólo lo que ocupa su texto */
.fila-sola{min-height:0;}

.ph{
  position:absolute;
  top:var(--y, 0vw);
  width:min(var(--w), 520px);   /* tope, para que no se desmadre en pantallas enormes */
  margin:0;
  z-index:1;
  will-change:transform;    /* la sube el JS al deslizar */
}
.ph.izq{left:0;}
.ph.der{right:0;}
.ph-in{
  display:block;
  opacity:0;
  transition:opacity 1.3s var(--ease-out-expo);
  /* su movimiento propio: se desliza muy despacio, aunque no toques nada */
  animation:flotar var(--dur,15s) ease-in-out var(--retardo,0s) infinite alternate;
}
.ph.in .ph-in{opacity:1;}
.ph img{display:block;width:100%;height:auto;object-fit:contain;}

@keyframes flotar{
  from{transform:translate3d(0,7px,0);}
  to  {transform:translate3d(0,-7px,0);}
}

/* ---------- los tres momentos ---------- */
.flow-steps{
  list-style:none;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  text-align:center;
}
.flow-step{
  display:block;
  font-family:'Anton',sans-serif;
  font-size:clamp(26px,4vw,58px);
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:.005em;
  white-space:nowrap;            /* cada momento, en una sola línea */
  margin-bottom:.95em;           /* separación entre una palabra y la siguiente */
}
.flow-step:last-child{margin-bottom:0;}
/* cada palabra entra deslizándose desde la izquierda y va apareciendo,
   hasta quedarse quieta en el centro */
.flow-step > span{
  display:inline-block;
  opacity:0;
  transform:translate3d(-14vw,0,0);
  transition:opacity 1.1s ease calc(var(--i,0) * .1s),
             transform 1.5s var(--ease-out-expo) calc(var(--i,0) * .1s);
}
.flow-step.in > span{opacity:1;transform:none;}

/* ---------- la experiencia ---------- */
.tally{
  display:flex;
  flex-direction:column;
  align-items:center;

  opacity:0;
  transform:translateY(18px);
  transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo);
}
.tally.in{opacity:1;transform:none;}
/* las dos rayas finas, una encima y otra debajo, que recalcan el texto */
.tally-rule{
  display:block;
  width:0;height:1px;
  background:currentColor;
  opacity:.35;
  margin:0 0 26px;
  transition:width 1.4s var(--ease-out-expo) .2s;
}
.tally-rule-b{margin:26px 0 0;}
.tally.in .tally-rule{width:min(220px,46vw);}
.tally-label{
  font-family:var(--font-studio);
  font-size:clamp(13px,1.5vw,18px);
  letter-spacing:.3em;
  text-transform:uppercase;
  text-align:center;
}

/* ---------- la frase ---------- */
.flow-line{
  font-family:var(--font-studio);
  font-size:clamp(20px,2.5vw,38px);
  line-height:1.45;
  text-align:center;
  max-width:19ch;
  margin:0 auto;
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo);
}
.flow-line.in{opacity:1;transform:none;}
/* "for a lifetime" se subraya con una raya que se dibuja de izquierda a
   derecha, justo después de aparecer la frase */
.flow-sub{
  position:relative;
  display:inline-block;
  white-space:nowrap;
}
.flow-sub::after{
  content:'';
  position:absolute;
  left:0;bottom:.3em;            /* pegada a la línea del texto */
  width:0;height:1.5px;
  background:currentColor;
  opacity:.55;
  transition:width 1.1s var(--ease-out-expo) .55s;
}
.flow-line.in .flow-sub::after{width:100%;}
.flow-revel{
  font-family:var(--font-revel);
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* ---------- el botón de contacto ---------- */
.btn-line{
  display:inline-flex;
  align-items:center;
  gap:16px;
  padding:19px 38px;
  border:1px solid currentColor;
  border-radius:100px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo),
             color .5s ease;
}
.btn-line.in{opacity:1;transform:none;}
/* al pasar por encima, el azul sube desde abajo y la letra se vuelve crema */
.btn-line::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--navy);
  transform:translateY(101%);
  transition:transform .6s var(--ease-out-expo);
}
.btn-line:hover{color:var(--cream);}
.btn-line:hover::before{transform:translateY(0);}
.btn-arrow{transition:transform .6s var(--ease-out-expo);}
.btn-line:hover .btn-arrow{transform:translateX(6px);}

/* ---------- la frase con el LOGOTIPO dentro ----------
   "At [logotipo], we also cover". El nombre de la marca no se escribe con
   letras: se dibuja con el logotipo, del alto de la línea. Va en fila
   centrada, así que en el móvil parte solo y sigue cuadrado. */
.flow-intro{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-studio);
  font-size:clamp(17px,2.05vw,30px);
  line-height:1.5;
  max-width:26ch;
  margin:0 auto;
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo);
}
.flow-intro.in{opacity:1;transform:none;}
/* ---------- la palabra REVEL dentro de una frase ----------
   Es el MISMO dibujo del logotipo, recortado por debajo de REVEL: las letras
   son exactamente las de la marca, no una tipografía parecida. */
.logo-word{
  display:inline-block;
  width:auto;height:.76em;      /* a la altura de las mayúsculas del texto */
  fill:currentColor;
  vertical-align:-.015em;
  margin:0 .12em;
  overflow:visible;
}
/* la segunda frase, pegadita a la primera: son una sola idea */
.flow-line-b{margin-top:clamp(10px,1.7vh,22px);}

/* =========================================================
   EL POP-UP DE INSTAGRAM  (Events)
   La publicación entra dando un saltito y le late un halo
   alrededor, para que se vea que se puede pulsar. Al pulsarla
   se abre Instagram en una pestaña nueva.
   La imagen y el enlace están en build.py, función popup().
   ========================================================= */
.pop{
  position:relative;
  display:block;
  width:min(300px,70%);
  margin:0 auto;
  opacity:0;
  transform:scale(.88) translateY(16px);
  transition:opacity .8s var(--ease-out-expo),
             transform .9s cubic-bezier(.2,1.25,.4,1);
}
.pop.in{opacity:1;transform:none;}
.pop-marco{
  display:block;
  overflow:hidden;
  border-radius:18px;
  background:var(--navy);
  box-shadow:0 18px 46px rgba(0,11,39,.22);
  transition:transform .6s var(--ease-out-expo),box-shadow .6s var(--ease-out-expo);
}
.pop-marco img{display:block;width:100%;height:auto;object-fit:cover;}
.pop:hover .pop-marco{transform:translateY(-7px) scale(1.02);
  box-shadow:0 28px 62px rgba(0,11,39,.3);}
/* el halo que late */
.pop-halo{
  position:absolute;inset:-10px;
  border:1px solid currentColor;border-radius:28px;
  opacity:0;
  pointer-events:none;
}
.pop.in .pop-halo{animation:latido 3s var(--ease-out-expo) 1s infinite;}
@keyframes latido{
  0%  {opacity:.45;transform:scale(.985);}
  65% {opacity:0;  transform:scale(1.06);}
  100%{opacity:0;  transform:scale(1.06);}
}
.pop-pie{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:15px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.pop-quien{opacity:.55;white-space:nowrap;}
.pop-ver{display:inline-flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap;}
.pop-flecha{transition:transform .5s var(--ease-out-expo);}
.pop:hover .pop-flecha{transform:translateX(6px);}

/* =========================================================
   EL VÍDEO DEL FINAL DE UNA SECCIÓN
   A todo lo ancho y en su proporción. Se pone en marcha al
   asomar y se para al salir de la pantalla (assets/app.js,
   cineInit), para no gastar datos ni batería de balde.
   ========================================================= */
.cine{
  display:block;
  width:100%;
  padding:0 var(--pad) 9vh;
  opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo);
}
.cine.in{opacity:1;transform:none;}
/* el reproductor ya no ocupa todo el ancho: se queda en dos tercios, centrado */
.cine-marco{
  width:min(66vw,980px);
  margin:0 auto;
}
.cine-titulo{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.2vw,30px);
  margin-bottom:2.2vh;
}
.cine-quien{
  flex:0 0 auto;
  font-family:'Anton',sans-serif;
  font-size:clamp(19px,2.3vw,34px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
}
.cine-raya{flex:1 1 0;height:1px;background:currentColor;opacity:.22;}
.cine-ver{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  opacity:.6;
  transition:opacity .4s ease;
}
.cine-flecha{transition:transform .5s var(--ease-out-expo);}
.cine-titulo:hover .cine-ver{opacity:1;}
.cine-titulo:hover .cine-flecha{transform:translateX(6px);}
.cine-caja{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--navy);
}
.cine-video{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* cuando debajo van las tres palabras, van juntas: son la misma frase */
.flow-intro + .flow-steps{margin-top:clamp(16px,3.2vh,38px);}
.flow-intro .logo-inline{
  display:inline-block;
  width:auto;height:2.15em;          /* el alto manda; el ancho lo pone él */
  margin:0 .14em 0 .32em;   /* pegado a la coma que va detrás */
  position:relative;top:.06em;       /* asentado sobre la línea del texto */
}

/* =========================================================
   LOS DESLIZABLES DE FOTOS
   Una tira por reportaje: el nombre, la raya, las flechas y
   las fotografías. Se pasan arrastrando, con las flechas, con
   el dedo o con la rueda del ratón.
   Los reportajes y sus fotos están en build.py, ROLLOS_*.
   ========================================================= */
.rollo{position:relative;padding:0 0 8vh;}
.rollo-head{
  display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);
  padding:0 var(--pad);
  margin-bottom:3vh;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo);
}
.rollo-head.in{opacity:1;transform:none;}
/* el nombre va a la IZQUIERDA, con la raya y las dos flechas a su derecha */
.rollo-title{
  flex:0 0 auto;
  font-family:'Anton',sans-serif;
  font-size:clamp(19px,2.3vw,34px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
  text-align:center;
}
.rollo-rule{flex:1 1 0;height:1px;background:currentColor;opacity:.22;}
.rollo-nav{display:flex;gap:10px;flex:0 0 auto;}
.rollo-btn{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid currentColor;border-radius:50%;
  opacity:.5;
  transition:opacity .4s ease,background .5s var(--ease-out-expo),color .4s ease;
}
.rollo-btn svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.rollo-btn:hover{opacity:1;background:var(--navy);color:var(--cream);}
.rollo-btn[disabled]{opacity:.16;pointer-events:none;}
/* si caben todas las fotos a la vez, las flechas sobran y no se ponen */
.rollo.quieto .rollo-nav{display:none;}
.rollo.quieto .rollo-pista{cursor:default;}

.rollo-pista{
  display:flex;
  gap:1.4vw;
  padding:0 var(--pad);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.rollo-pista::-webkit-scrollbar{display:none;}
.rollo-pista:focus-visible{outline:1px solid currentColor;outline-offset:8px;}
.rollo-pista.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
.rollo-pista.is-dragging *{pointer-events:none;}

.rollo-foto{
  flex:0 0 auto;
  height:clamp(300px,54vh,580px);
  margin:0;
  overflow:hidden;
  scroll-snap-align:center;
  background:rgba(0,11,39,.05);
}
.rollo-foto img{
  display:block;
  height:100%;width:auto;
  object-fit:cover;
  user-select:none;-webkit-user-drag:none;
  transition:transform 1.4s var(--ease-out-expo);
}
@media (hover:hover){
  .rollo-pista:not(.is-dragging) .rollo-foto:hover img{transform:scale(1.04);}
}

@media (max-width:900px){
  .flow{padding:4vh var(--pad) 8vh;}
  .fila{min-height:auto;flex-direction:column;gap:6vh;padding:7vh 0;}
  .fila-txt{order:-1;}
  /* en el móvil no hay márgenes: las fotos van debajo del texto, en fila */
  .ph{position:static;width:var(--wm);align-self:center;}
  /* en columna, align-items manda en horizontal: se vuelve a centrar */
  .fila.txt-abajo,.fila.txt-arriba{align-items:center;}
  .fila.txt-abajo .fila-txt,.fila.txt-arriba .fila-txt{padding:0;}
  /* apilado, el texto sigue yendo primero; sólo se ajusta el aire */
  .fila.txt-abajo{padding-bottom:0;}
  .fila.txt-arriba{padding-top:4vh;}
  .fila-sola{padding:2vh 0 0;}
  .ph[data-movil="no"]{display:none;}
  .flow-step > span{transform:translate3d(-24vw,0,0);}
  /* los deslizables: fotos más bajas y flechas más pequeñas */
  .rollo{padding-bottom:7vh;}
  .pop{width:min(300px,82%);}
  .cine{padding-bottom:7vh;}
  /* en el móvil no sobra ancho: el vídeo ocupa la columna entera */
  .cine-marco{width:100%;}
  .cine-titulo{gap:12px;margin-bottom:1.8vh;}
  .rollo-head{gap:12px;margin-bottom:2.4vh;}
  .rollo-btn{width:38px;height:38px;}
  .rollo-btn svg{width:15px;height:15px;}
  .rollo-pista{gap:3.5vw;}
  .rollo-foto{height:46vh;}
  /* en el móvil se ven cinco, más anchas y sin escalonar */
  /* en el móvil no hay sitio para solapar: la foto ocupa casi todo el ancho */
  .ph{width:var(--wm);margin:4vh 0;}
  .ph[data-movil="no"]{display:none;}
}
@media (prefers-reduced-motion:reduce){
  /* se quita el balanceo continuo, pero las fotos siguen subiendo al
     deslizar (a la mitad), que es lo que hace la página */
  .ph-in{animation:none;}
  .tally,.flow-line,.flow-intro,.btn-line,.rollo-head,.pop,.cine{opacity:1;transform:none;transition:none;}
  .pop.in .pop-halo{animation:none;}
  .flow-step > span{opacity:1;transform:none;transition:none;}
  .tally-rule{width:min(220px,46vw);transition:none;}
  .flow-sub::after{width:100%;transition:none;}
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2.2vw;
  padding:0 var(--pad) 12vh;
}
.grid figure{overflow:hidden;background:rgba(0,11,39,.05);}
.grid figure img{transition:transform 1.4s var(--ease-out-expo);}
.grid figure:hover img{transform:scale(1.04);}
.g7{grid-column:span 7;aspect-ratio:4/5;}
.g5{grid-column:span 5;aspect-ratio:4/5;}
.g6{grid-column:span 6;aspect-ratio:3/4;}
.g4{grid-column:span 4;aspect-ratio:4/5;}
.g8{grid-column:span 8;aspect-ratio:16/10;}
.g12{grid-column:span 12;aspect-ratio:21/9;}

/* =========================================================
   SECCIÓN QUE TODAVÍA NO ESTÁ  (Real Estate)
   Sólo el letrero, centrado en la pantalla. Los tres puntos
   van apareciendo uno detrás de otro, y vuelta a empezar.
   ========================================================= */
.pronto{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 var(--pad);
}
.pronto-txt{
  font-family:'Anton',sans-serif;
  font-size:clamp(38px,9vw,150px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.01em;
  text-align:center;
  white-space:nowrap;
  opacity:0;
  transform:translateY(16px);
  transition:opacity 1.2s var(--ease-out-expo),transform 1.2s var(--ease-out-expo);
}
.pronto-txt.in{opacity:1;transform:none;}
.pronto-punto{
  opacity:0;
  animation:puntito 2.4s ease-in-out calc(var(--i,0) * .28s + .8s) infinite;
}
@keyframes puntito{
  0%,10%   {opacity:0;}
  25%,70%  {opacity:1;}
  85%,100% {opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .pronto-txt{opacity:1;transform:none;transition:none;}
  .pronto-punto{opacity:1;animation:none;}
}

/* aviso de categoría vacía */
.empty{
  margin:0 var(--pad) 12vh;
  border:1px solid var(--line);
  padding:12vh 6vw;
  text-align:center;
}
.empty .mark{
  font-family:'Anton',sans-serif;
  font-size:clamp(24px,3.4vw,52px);
  text-transform:uppercase;line-height:1.05;
}
.empty p{margin-top:18px;font-size:13px;line-height:1.9;color:var(--muted);max-width:46ch;margin-inline:auto;}

/* pie de navegación entre categorías */
.site-foot{
  background:var(--navy);color:var(--cream);
  padding:10vh var(--pad) 6vh;
}
/* el logotipo, a la derecha y ocupando un tercio del ancho de pantalla,
   con la frase de la empresa justo debajo, alineada con su borde derecho */
.foot-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-left:auto;
  width:33.33vw;
}
.site-foot .logo{width:100%;}
.foot-tagline{
  /* va con translate="no": el traductor la deja en inglés */
  display:block;
  margin-top:.9em;
  font-family:var(--font-studio);
  font-size:clamp(11px,1.35vw,20px);
  letter-spacing:.34em;
  text-transform:uppercase;
  /* la última letra arrastra el espaciado: se compensa para que quede
     alineada con el borde derecho del logotipo */
  margin-right:-.34em;
  opacity:.82;
}
.site-foot .cols{
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  margin-top:8vh;padding-top:26px;border-top:1px solid rgba(246,247,241,.18);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:2.2;
}
.site-foot .cols a:hover{text-decoration:underline;}
.site-foot .cols .c{opacity:.68;}

/* =========================================================
   PETARDOS
   Unos cuantos estallidos repartidos alrededor del formulario.
   Al llegar éste al centro, cada uno lanza sus trazos hacia
   fuera y se apaga, sin dejar rastro. Estallan cada vez que
   se llega al final, no sólo la primera.
   Las formas se calculan en build.py, función petardo().
   ========================================================= */
.sparks{
  position:fixed;inset:0;
  z-index:49;                       /* justo por debajo del formulario */
  overflow:hidden;                  /* nada se sale de la pantalla */
  pointer-events:none;
  opacity:0;
  color:var(--navy);
  will-change:transform,opacity;
}
.spark{
  position:absolute;
  display:block;
  transform:translate(-50%,-50%);   /* el estallido, centrado en su punto */
}
.spark-svg{display:block;width:100%;height:auto;overflow:visible;}
.spark-svg path{
  fill:currentColor;
  transform-box:fill-box;
  transform-origin:0% 50%;          /* salen desde donde nacen */
  opacity:0;
}

.sparks.pop .spark-svg path{
  animation:petardo .95s cubic-bezier(.1,.72,.22,1)
            calc(var(--d,0s) + var(--dd,0s)) forwards;
}
@keyframes petardo{
  0%  {transform:translateX(var(--x0,0)) scaleX(.28);opacity:0;}
  12% {opacity:1;}
  55% {opacity:1;}
  100%{transform:translateX(var(--x1,0)) scaleX(1);opacity:0;}
}

/* En pantalla estrecha no hace falta nada especial: app.js mide el hueco
   real que queda y encoge o retira los estallidos que no caben. */

@media (prefers-reduced-motion:reduce){
  .sparks.pop .spark-svg path{animation-duration:.01s;}
}

/* =========================================================
   PÁGINA DE CONTACTO
   ========================================================= */
body.say-page{background:var(--cream);}

/* --- la frase, centrada en la pantalla --- */
.say{
  min-height:82vh;
  display:flex;align-items:center;justify-content:center;
  padding:24vh var(--pad) 10vh;
}
.say-line{
  max-width:22ch;
  text-align:center;
  font-family:var(--font-studio);      /* la letra del "studio" del logotipo */
  font-weight:400;
  font-size:clamp(26px,4.2vw,58px);
  line-height:1.32;
  letter-spacing:.005em;
}
.say-revel{
  font-family:var(--font-revel);       /* la letra del "REVEL" del logotipo */
  text-transform:uppercase;
  font-size:1.02em;
  letter-spacing:.005em;
}

/* --- el formulario y las otras vías de contacto --- */
.reach{
  display:flex;
  gap:clamp(40px,6vw,96px);
  align-items:flex-start;
  flex-wrap:wrap;
  margin:0 var(--pad);
  padding:9vh 0 16vh;
  border-top:1px solid var(--line);
}
.reach-form{flex:1 1 420px;max-width:620px;margin-top:0;}

/* los tres servicios, en pastillas */
.picks{
  display:block;          /* los tres servicios, en fila */
  border:0;padding:0;
}
.picks legend{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  margin-bottom:clamp(6px,1.1vh,12px);padding:0;
}
.pick{display:inline-block;margin:0 8px clamp(5px,.9vh,8px) 0;cursor:pointer;}
.pick input{position:absolute;opacity:0;width:0;height:0;}
.pick span{
  display:inline-block;
  padding:clamp(7px,1.2vh,10px) 20px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  transition:border-color .35s ease,color .35s ease,background .35s ease;
}
.pick:hover span{border-color:var(--navy);color:var(--navy);}
.pick input:checked + span{background:var(--navy);border-color:var(--navy);color:var(--cream);}
.pick input:focus-visible + span{outline:2px solid var(--navy);outline-offset:2px;}

/* las otras vías de contacto */
/* La página de contacto ya no lleva fondo animado. */
.say-wrap{position:relative;}
.reach-alt{flex:0 1 330px;padding-top:4px;}
.reach-kicker{
  display:block;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  margin-bottom:24px;
}
.reach-link{
  display:block;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease-out-expo);
}
.reach-link:hover{padding-left:10px;}
.reach-link .what{
  display:block;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:7px;
}
.reach-link .who{
  display:block;
  font-size:16px;letter-spacing:.02em;
  word-break:break-word;
}

@media (max-width:900px){
  .say{min-height:auto;padding:22vh var(--pad) 8vh;}
  .say-line{font-size:clamp(22px,7.2vw,34px);max-width:18ch;}
  .reach{flex-direction:column;gap:8vh;padding-top:7vh;padding-bottom:12vh;}
  .reach-alt{flex:1 1 auto;width:100%;}
}

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width:900px){
  :root{--pad:7vw;}
  .slide{width:80vw;height:58vh;margin-right:0;margin-bottom:7vh;margin-left:10vw;}
  .slider-track{flex-flow:column nowrap;}
  .nav .logo{font-size:21px;}
  .nav-right{gap:18px;font-size:10px;}
  .home-hero{bottom:auto;top:16vh;max-width:22ch;}
  .home-meta{display:none;}
  .cat-head{padding:20vh var(--pad) 6vh;}
  .foot-brand{width:62vw;}
  .foot-tagline{
  /* va con translate="no": el traductor la deja en inglés */font-size:11px;letter-spacing:.28em;margin-right:-.28em;}
  .cover-inner{right:var(--pad);}
  .cover .logo{width:62vw;}
  .nav-logo{width:92px;}
  .cover-list{
    flex-direction:column;align-items:flex-end;
    gap:7px 0;
    margin-top:22px;
    font-size:9px;letter-spacing:.26em;
  }
  .slide-over{gap:12px;padding:0 18px;}
  .slide-over .cat{font-size:clamp(20px,6vw,30px);}
  .slide-over .go{font-size:9px;}
  .grid{grid-template-columns:repeat(6,1fr);gap:4vw;}
  .g7,.g5,.g6,.g4,.g8,.g12{grid-column:span 6;aspect-ratio:4/5;}
  .g12{aspect-ratio:16/10;}
}