/* ============================================================
   APOLO PRODUCTIONS — Landing
   Base negra, texto hueso, sin color de acento.
   Anton para titulares y Barlow para el resto.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Sin color de marca: negro, blanco y grises, como la referencia. */
  --ink:    #0B0B0C;
  --ink-2:  #141416;
  --ink-3:  #1E1E21;
  --bone:   #F4F2EF;
  --bone-2: #E6E2DC;

  /* "Acento" neutro: lo que antes era naranja ahora es el propio blanco. */
  --sol:     #FFFFFF;
  --sol-ink: #0B0B0C;

  --bg:     var(--ink);
  --fg:     var(--bone);
  --fg-dim: #96949100;
  --fg-dim: #9A9894;
  --rule:   rgba(244,242,239,.14);

  /* Las dos de la referencia: Anton para titulares, Barlow para el resto. */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body:    "Barlow", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1600px;
  --rhythm: clamp(5rem, 11vw, 11rem);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:clamp(1rem,.94rem + .28vw,1.125rem);
  line-height:1.55;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--sol); color:var(--sol-ink); }

/* ---------- 3. Utilidades de composición ---------- */
.shell{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--rhythm); position:relative; }
.section--paper{ background:var(--bone); color:var(--ink); --fg-dim:#5E574E; --rule:rgba(11,11,12,.16); }

/* Etiqueta de sección: 01 — TRABAJO */
.tag{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--display);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-dim);
  padding-bottom:1.25rem; margin-bottom:clamp(2rem,5vw,4rem);
  border-bottom:1px solid var(--rule);
}
.tag i{ font-style:normal; color:var(--sol); font-variant-numeric:tabular-nums; }
.tag span{ margin-left:auto; text-transform:none; letter-spacing:.02em; font-weight:500; color:var(--fg-dim); }

/* Titulares */
.h-xl,.h-lg,.h-md{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.h-xl{ font-size:clamp(2.5rem,7.5vw,6rem); }
.h-lg{ font-size:clamp(1.875rem,4.4vw,3.75rem); }
.h-md{ font-size:clamp(1.375rem,2.4vw,2rem); font-weight:400; line-height:1.08; }

/* Sin gesto tipográfico: la palabra va igual que el resto del titular. */
.em{ font:inherit; color:inherit; font-style:normal; }

/* En móvil: sin saltos de línea forzados y con la tipografía menos ancha,
   para que ninguna palabra desborde los 375 px. */
@media (max-width:759px){
  .h-xl,.h-lg,.h-md{ font-stretch:104%; }
  .h-xl br,.h-lg br,.pilot h2 br{ display:none; }
  .h-xl,.h-lg{ text-wrap:balance; }
}

.lede{
  font-size:clamp(1.0625rem,.98rem + .5vw,1.375rem);
  line-height:1.45; color:var(--fg-dim); max-width:46ch; text-wrap:pretty;
}

/* ---------- 4. Grano + viñeta ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(5) infinite;
}
@keyframes grain{
  0%{background-position:0 0} 20%{background-position:-30px 18px} 40%{background-position:22px -28px}
  60%{background-position:-18px -20px} 80%{background-position:28px 12px} 100%{background-position:0 0}
}

/* ---------- 5. Cabecera ---------- */
/* Invisible sobre el vídeo; al bajar se vuelve blanca con texto negro. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(.55rem,.9vw,.8rem) var(--gutter);
  color:#fff;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), padding .45s var(--ease);
}
.nav.is-solid{
  background:#fff; color:var(--ink);
  border-bottom-color:rgba(11,11,12,.08);
  padding-block:clamp(.45rem,.75vw,.65rem);
}

/* Marca: las dos versiones superpuestas, se cruzan al cambiar el fondo. */
/* El texto del logotipo solo ocupa el 33 % del alto del SVG (el símbolo es
   el doble de alto), así que hace falta más ancho del habitual para que la
   palabra alcance la altura que tiene en la referencia. */
.nav__logo{ position:relative; display:block; flex:none; width:clamp(168px,17vw,252px); }
.nav__logo img{ width:100%; height:auto; display:block; transition:opacity .45s var(--ease); }
.nav__logo img + img{ position:absolute; inset:0; }
.nav__logo .is-dark{ opacity:0; }
.nav.is-solid .nav__logo .is-light{ opacity:0; }
.nav.is-solid .nav__logo .is-dark{ opacity:1; }

/* Enlaces: Barlow, caja baja, sin tracking. Como la referencia. */
.nav__links{
  display:none; margin-left:auto;
  gap:clamp(1.4rem,2.6vw,2.6rem);
  font-family:var(--body);
  font-size:1rem; font-weight:500; letter-spacing:-.02em;
}
@media (min-width:1040px){ .nav__links{ display:flex; } }
.nav__links a{ opacity:.9; transition:opacity .25s; }
.nav__links a:hover{ opacity:.55; }

/* ---------- Botones ---------- */
/* Pastilla blanca con texto oscuro. Es el único botón que existe. */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:var(--pad,.6rem 1.2rem);
  font-family:var(--body); font-weight:500;
  font-size:var(--fs,.875rem); letter-spacing:-.015em;
  background:#fff; color:var(--ink);
  border:1px solid #fff; border-radius:100px;
  white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), opacity .3s var(--ease);
}
.btn:hover{ background:rgba(255,255,255,.82); border-color:rgba(255,255,255,.82); }
.btn__ar{ font-size:.9em; line-height:1; opacity:.75; }
/* Variante en contorno, para cuando conviven dos botones y uno manda. */
.btn--ghost{
  background:transparent; color:var(--bone);
  border-color:rgba(244,242,239,.34);
}
.btn--ghost:hover{ background:rgba(244,242,239,.1); border-color:rgba(244,242,239,.5); }
/* Relleno oscuro, para cuando el botón cae sobre fondo claro. */
.btn--ink{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.btn--ink:hover{ background:#2A2A2E; border-color:#2A2A2E; }
/* Sobre fondo blanco se invierte para no desaparecer. */
.nav.is-solid .btn{ background:var(--ink); color:#fff; border-color:var(--ink); }
.nav.is-solid .btn:hover{ background:#2A2A2E; border-color:#2A2A2E; }
.nav .btn{ --pad:.5rem 1.05rem; --fs:.8125rem; }
.nav__cta{ display:none; flex:none; }
@media (min-width:1040px){ .nav__cta{ display:inline-flex; } }

/* Botón de menú en pantallas estrechas */
.burger{ display:grid; place-content:center; gap:5px; margin-left:auto; width:44px; height:44px; flex:none; }
@media (min-width:1040px){ .burger{ display:none; } }
.burger span{
  display:block; width:26px; height:2px; background:currentColor;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menú a pantalla completa */
.menu{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; justify-content:center;
  gap:.25rem; padding:6rem var(--gutter) 2rem;
  background:var(--ink); color:var(--bone);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease);
}
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu a{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(2rem,9vw,3.25rem);
  padding-block:.2rem;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease) var(--d,0ms), transform .5s var(--ease) var(--d,0ms), color .25s;
}
.menu.is-open a{ opacity:1; transform:none; }
.menu a:hover{ color:var(--fg-dim); }
.menu__foot{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--rule); font-size:.9375rem; color:var(--fg-dim); }
body.is-locked{ overflow:hidden; }

/* ---------- 6. Portada ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
  overflow:hidden;
}
/* En el móvil la portada no ocupa toda la pantalla: el vídeo es apaisado y
   en un alto de teléfono se recorta tanto que pierde definición. */
@media (max-width:699px){
  .hero{ min-height:min(68svh, 560px); }
}
.hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#000; }
.hero__media video,.hero__media > img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); animation:heroZoom 26s var(--ease-out) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__media::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#1A1A1D 0%,#0B0B0C 100%);
}
.hero__media video,.hero__media > img{ position:relative; z-index:1; }
/* Velo: oscurece arriba para la cabecera y abajo para el texto. */
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  /* El último tramo llega a negro puro: la portada muere en el mismo
     negro que la tira de logotipos, así no se ve el corte entre secciones. */
  background:linear-gradient(180deg,
    rgba(0,0,0,.50) 0%, rgba(0,0,0,.10) 22%,
    rgba(0,0,0,.20) 46%, rgba(0,0,0,.62) 78%,
    rgba(0,0,0,.90) 93%, #000 100%);
}
.hero__inner{ position:relative; z-index:3; width:100%; }

/* Titular contenido, como la referencia: no ocupa la pantalla entera. */
.hero h1{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2rem,3.6vw,3.25rem);
  line-height:1.08; letter-spacing:-.02em;
  max-width:14ch;
  margin-bottom:clamp(.75rem,1.2vw,1rem);
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; }
.hero__sub{
  font-family:var(--body); font-weight:400;
  font-size:clamp(.9375rem,.9rem + .22vw,1.0625rem);
  line-height:1.5; letter-spacing:-.01em;
  color:rgba(255,255,255,.88);
  max-width:36ch; margin-bottom:clamp(1.25rem,2vw,1.6rem);
  text-wrap:pretty;
}
.hero__actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.hero .btn{ --pad:.6rem 1.25rem; --fs:.875rem; }
/* Ya no hace falta apilarlos a todo el ancho: con el cuerpo reducido
   los dos caben en línea incluso a 375 px, como en la referencia. */

/* ---------- 7. Marcas ---------- */
/* Sección blanca con título y logotipos en negro desfilando hacia la
   izquierda, con los bordes desvanecidos. */
.brands__title{
  font-family:var(--body); font-weight:600;
  font-size:clamp(1.1875rem,1.9vw,1.6875rem);
  letter-spacing:-.02em; line-height:1.25;
  text-align:center; text-wrap:balance;
  margin-bottom:clamp(2rem,3.6vw,3.25rem);
}
.brands__marquee{
  --logo-h:clamp(34px,3.4vw,50px);
  width:min(100% - var(--gutter) * 2, 1100px);
  margin-inline:auto;
  display:flex; overflow:hidden;
  /* Desvanecido en los laterales: los logotipos entran y salen sin corte. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.brands__track{
  display:flex; flex:none; align-items:center;
  gap:clamp(2.25rem,4.4vw,3.75rem);
  padding-right:clamp(2.25rem,4.4vw,3.75rem);
  animation:brandsSlide var(--speed,80s) linear infinite;
  will-change:transform;
}
@keyframes brandsSlide{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
.brands__item{
  flex:none;
  display:flex; align-items:center;
}
/* Los archivos vienen normalizados: todos con el mismo alto de lienzo y el
   arte escalado para que pese lo mismo a ojo. Se le da el alto a la imagen
   y no al contenedor: en porcentaje no resuelve, porque el ítem no se
   estira y la caja acaba tomando el alto intrínseco del archivo. */
.brands__item picture{ display:block; }
.brands__item img{
  display:block; height:var(--logo-h,44px); width:auto;
  /* El arte ya es negro con transparencia; brightness(0) garantiza que los
     doce queden exactamente en el mismo negro. */
  filter:brightness(0);
}

/* Marquesina de texto (queda para las secciones de más abajo) */
.ticker{
  --speed:42s;
  position:relative; z-index:4;
  display:flex; overflow:hidden;
  padding-block:clamp(.9rem,1.6vw,1.35rem);
  background:var(--bone); color:var(--ink);
  border-block:1px solid var(--bone);
  user-select:none;
}
.ticker__track{ display:flex; flex:none; min-width:100%; animation:slide var(--speed) linear infinite; }
@keyframes slide{ to{ transform:translateX(-100%); } }
.ticker__item{
  display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.25rem);
  padding-inline:clamp(.75rem,1.6vw,1.5rem);
  font-family:var(--display); font-weight:400;
  font-size:clamp(.9rem,1.7vw,1.35rem);
  letter-spacing:-.01em; text-transform:uppercase; white-space:nowrap;
}
.ticker__item::after{ content:"\2022"; font-size:.7em; opacity:.45; }
.ticker--ghost{ background:transparent; color:var(--fg); border-color:var(--rule); }
.ticker--ghost .ticker__item{ color:transparent; -webkit-text-stroke:1px var(--fg-dim); }
.ticker--ghost .ticker__item::after{ color:var(--fg-dim); -webkit-text-stroke:0; }

/* ---------- 7b. Quiénes somos ---------- */
/* Bloque de identidad centrado. Sin color de acento: el contraste lo da
   la alternancia entre texto contorneado y texto relleno. */
.weare{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--bone);
  /* El negro que se ve no empieza aquí: la franja del carrusel va pegada
     justo encima. Se descuenta arriba para que el rótulo quede centrado en
     el bloque oscuro entero y no solo en esta sección. */
  --weare-aire:clamp(4rem,7.5vw,6.75rem);
  padding-block:max(2.5rem, calc(var(--weare-aire) - var(--reel-band,0px)))
                var(--weare-aire);
  text-align:center;
}
/* Foco difuminado detrás del texto, como una luz de plató contra el fondo.
   Rompe el negro plano sin añadir ningún color a la paleta. */
.weare::before{
  content:""; position:absolute; inset:-10% -5%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(56% 54% at 50% 50%, rgba(255,255,255,.19) 0%,
                                        rgba(255,255,255,.075) 40%,
                                        transparent 72%),
    radial-gradient(92% 66% at 50% 52%, rgba(255,255,255,.05) 0%, transparent 76%);
  animation:weareGlow 16s ease-in-out infinite alternate;
}
/* Respiración muy lenta: da vida al bloque sin que se perciba como animación. */
@keyframes weareGlow{
  from{ transform:scale(1);    opacity:.88; }
  to  { transform:scale(1.07); opacity:1;   }
}
@media (prefers-reduced-motion:reduce){
  .weare::before{ animation:none; }
}
.weare .shell{ position:relative; }
.weare__stack{
  display:grid; gap:.04em;
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:-.02em; line-height:.98;
}
.weare__stack span{ display:block; }

/* Contorno. Se activa solo si el navegador lo soporta; si no, queda
   relleno normal y el bloque sigue leyéndose. */
.weare__out{ color:var(--bone); }
@supports (-webkit-text-stroke: 1px black){
  .weare__out{ color:transparent; -webkit-text-stroke:.022em var(--bone); }
}
/* La palabra rellena dentro de una línea contorneada: es el mismo recurso
   que el resaltado de la referencia, pero sin recurrir al color. */
.weare__out em{
  font-style:normal; color:var(--bone);
  -webkit-text-stroke:0;
}

.weare__r{
  font-size:.2em; vertical-align:top; line-height:1;
  position:relative; top:.35em; margin-left:.06em;
  -webkit-text-stroke:0; color:var(--bone);
}
.weare__l1{ font-size:clamp(2.125rem,5.4vw,4.5rem); }
.weare__l2{ font-size:clamp(2.75rem,7.2vw,6.25rem); }
.weare__l3{ font-size:clamp(1.875rem,4.6vw,3.875rem); }

/* ---------- 7c. Trabajos ---------- */
.work{
  background:var(--bone); color:var(--ink);
  padding-block:clamp(3.5rem,7vw,6.5rem) clamp(1.75rem,3.5vw,3rem);
}
.work__pill{
  display:block; width:max-content; margin:0 auto .9rem;
  padding:.5rem 1.25rem; border-radius:100px;
  background:rgba(11,11,12,.07);
  font-family:var(--body); font-weight:500; font-size:.9375rem;
  letter-spacing:-.01em;
}
.work__title{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; text-align:center;
  /* Mismo cuerpo que el rótulo del carrusel: los títulos de sección van
     todos iguales, y por encima de ellos solo la portada y el rótulo
     grande de "We are". */
  font-size:clamp(1.75rem,3.2vw,2.875rem);
  letter-spacing:-.02em; line-height:1.1;
  margin-bottom:clamp(2rem,3.6vw,3rem);
  text-wrap:balance;
}

.work__grid{
  list-style:none; display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.6rem,1.4vw,1.15rem);
  /* Agrupadas en el centro en vez de ocupar todo el ancho de la pantalla. */
  width:min(100%, 900px);
  margin-inline:auto;
}
@media (min-width:760px){ .work__grid{ grid-template-columns:repeat(3,1fr); } }

.work__link{ display:block; position:relative; }
.work__media{
  position:relative; overflow:hidden;
  border-radius:clamp(10px,1vw,16px);
  /* Los originales son verticales 9:16; la tarjeta respeta ese formato
     para no recortar las piezas. */
  aspect-ratio:9 / 16;
  background:#111;
}
.work__media img,
.work__media video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out), opacity .45s var(--ease);
}
.work__media video{ opacity:0; z-index:1; }
.work__card.is-playing .work__media video{ opacity:1; }
.work__link:hover .work__media img,
.work__link:hover .work__media video{ transform:scale(1.04); }

/* Velo inferior para que el texto se lea sobre cualquier fotograma. */
.work__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72) 100%);
}
.work__info{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:clamp(.7rem,1.3vw,1.1rem);
  color:#fff;
}
.work__info h3{
  font-family:var(--body); font-weight:600;
  font-size:clamp(.8125rem,1vw,.9375rem);
  letter-spacing:-.02em; line-height:1.2;
}
.work__go{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.2rem;
  font-family:var(--body); font-weight:400;
  font-size:clamp(.6875rem,.85vw,.8125rem);
  letter-spacing:-.01em; opacity:.85;
  transition:opacity .3s;
}
.work__link:hover .work__go{ opacity:1; }

/* ---------- 7c-bis. Testimonio ---------- */
/* Va sobre el mismo fondo que los trabajos, sin corte, para que se lea
   como el cierre de esa sección y no como un bloque aparte. */
.quote{
  background:var(--bone); color:var(--ink);
  padding-block:clamp(1.75rem,3.5vw,3rem) clamp(3.5rem,7vw,6.5rem);
  text-align:center;
}
.quote__stars{
  display:block;
  font-size:clamp(.9375rem,1.2vw,1.125rem);
  letter-spacing:.45em; text-indent:.45em;
  color:#9A938A;
  margin-bottom:clamp(1.5rem,2.6vw,2.25rem);
}
.quote__text{
  /* Mismo ajuste que el título de la tira de marcas. */
  font-family:var(--body); font-weight:600;
  font-size:clamp(1.1875rem,2.2vw,1.8125rem);
  line-height:1.34; letter-spacing:-.02em;
  max-width:min(100%, 880px); margin-inline:auto;
  text-wrap:balance;
}
.quote__who{
  display:block;
  margin-top:clamp(1.75rem,3vw,2.5rem);
  font-family:var(--body); font-weight:500;
  font-size:clamp(.75rem,.85vw,.8125rem);
  letter-spacing:.18em; text-transform:uppercase;
  color:#8A837A;
}

/* ---------- 7d. Qué producimos: carrusel en arco ---------- */
/* Las tarjetas son 9:16 como el material de origen. El guion las coloca en
   posición absoluta y las mueve; sin JavaScript queda una fila normal. */
.reel{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bone); color:var(--ink);
  padding-block:clamp(3.5rem,7vw,6.5rem) 0;
}

.reel__title{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; text-align:center;
  font-size:clamp(1.75rem,3.2vw,2.875rem);
  letter-spacing:-.02em; line-height:1.04;
  margin-bottom:clamp(1rem,1.7vw,1.5rem);
  text-wrap:balance;
}
.reel__lead{
  width:min(100%, 600px); margin-inline:auto; text-align:center;
  font-family:var(--body); font-weight:400;
  font-size:clamp(1rem,1.25vw,1.125rem);
  line-height:1.55; letter-spacing:-.01em; color:#5F5A54;
  text-wrap:balance;
}

/* El escenario ocupa todo el ancho: las tarjetas entran y salen del encuadre. */
.reel__stage{
  --reel-card:clamp(122px,14.5vw,224px);
  position:relative; z-index:2; overflow:hidden;
  width:calc(100% - var(--gutter) * 2); margin-inline:auto;
  margin-top:clamp(2rem,4vw,3.25rem);
  display:flex; gap:calc(var(--reel-card) * .09); align-items:flex-start;
  /* Un velo de nada en los costados: suficiente para que la tarjeta no
     aparezca de golpe contra el fondo, sin que se note el degradado. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,
                                     #000 calc(100% - 24px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24px,
                                     #000 calc(100% - 24px),transparent 100%);
}
/* Franja oscura al pie de la sección: va de borde a borde y empalma con la
   sección de abajo, de modo que las tarjetas más bajas la cruzan un poco.
   La altura la calcula el guion. */
.reel::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:0;
  height:var(--reel-band,0px); background:var(--ink); pointer-events:none;
}
/* A partir de aquí manda el guion: altura y posiciones las calcula él. */
.reel__stage.is-live{ display:block; }
.reel__stage.is-live .reel__card{ position:absolute; top:0; left:0; z-index:1; }

.reel__card{
  position:relative; flex:0 0 auto;
  width:var(--reel-card); aspect-ratio:9 / 16;
  border-radius:14px; overflow:hidden;
  background:var(--ink-2);
  box-shadow:0 20px 42px rgba(11,11,12,.22);
  will-change:transform;
}
.reel__card img,
.reel__card video{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
}
/* Degradado para que la etiqueta se lea sobre cualquier fotograma. */
.reel__card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%; z-index:1;
  background:linear-gradient(to top, rgba(8,8,9,.88), rgba(8,8,9,.35) 45%, transparent);
  pointer-events:none;
}
.reel__tag{
  position:absolute; z-index:2;
  left:.7rem; right:.7rem; bottom:.65rem;
  font-family:var(--body); font-weight:600;
  font-size:clamp(.5625rem,.72vw,.6875rem);
  text-transform:uppercase; letter-spacing:.09em; line-height:1.3;
  color:var(--bone);
}

/* ---------- 7e. Marcas dentro del arco ---------- */
/* Encajadas en la parte baja de la rueda. La altura exacta la calcula el
   guion a partir de la curva, así que encajan en cualquier ventana. */
.reel__brands{ position:relative; z-index:1; }
.reel__stage.is-live ~ .reel__brands{
  position:absolute; left:0; right:0;
  top:var(--reel-brands,0px);
}
/* Sin JavaScript no hay curva: se quedan debajo, con su propio aire. */
.reel__stage:not(.is-live) ~ .reel__brands{
  padding-block:clamp(1.5rem,3.5vw,2.25rem) clamp(2.25rem,5vw,3.25rem);
}
.reel__brands .brands__title{
  font-size:clamp(.8125rem,1.15vw,1rem);
  margin-bottom:clamp(.55rem,1vw,.85rem);
  color:#3B3730;
}
/* Estrecha de por sí: cuanto más compacta, más limpio queda el hueco de la
   curva y menos se le acercan las tarjetas de los lados. */
.reel__brands .brands__marquee{
  width:clamp(220px, min(40vw, 100% - var(--gutter) * 2), 600px);
}
.reel__brands .brands__track{
  gap:clamp(1.5rem,2.6vw,2.5rem);
  padding-right:clamp(1.5rem,2.6vw,2.5rem);
}



/* ---------- 8. Planes ---------- */
/* Fondo oscuro y las dos cajas en claro, iguales entre sí: ninguna manda
   sobre la otra, se eligen por lo que dicen. */
/* El negro ya no va de borde a borde: es un panel con aire alrededor. */
.plans{
  background:var(--bone);
  padding-block:clamp(.5rem,1.4vw,1.5rem) clamp(1.5rem,3vw,3rem);
}
.plans__panel{
  position:relative; isolation:isolate; overflow:hidden;
  /* Mismo ancho que la rejilla de trabajos y la reseña de arriba. */
  width:min(100% - var(--gutter) * 2, 900px); margin-inline:auto;
  border-radius:clamp(20px,2.4vw,34px);
  background:var(--ink); color:var(--bone);
  padding-block:clamp(3rem,6vw,5.5rem);
}
.plans__panel::before{
  content:""; position:absolute; inset:-10% -5% auto; height:70%; z-index:-1;
  pointer-events:none;
  background:radial-gradient(75% 100% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 74%);
}
.plans__pill{
  display:block; width:max-content; margin:0 auto .9rem;
  padding:.5rem 1.25rem; border-radius:100px;
  background:rgba(244,242,239,.1);
  font-family:var(--body); font-weight:500; font-size:.9375rem;
  letter-spacing:-.01em;
}
.plans__title{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; text-align:center;
  font-size:clamp(1.75rem,3.2vw,2.875rem);
  letter-spacing:-.02em; line-height:1.04;
  margin-bottom:clamp(1rem,1.7vw,1.5rem);
  text-wrap:balance;
}
.plans__lead{
  width:min(100%, 520px); margin-inline:auto; text-align:center;
  font-family:var(--body); font-size:clamp(1rem,1.25vw,1.125rem);
  line-height:1.55; letter-spacing:-.01em; color:var(--fg-dim);
  text-wrap:balance;
}

.plans__grid{
  list-style:none; display:grid; gap:clamp(.9rem,1.8vw,1.25rem);
  grid-template-columns:1fr;
  /* Estrechas y altas, agrupadas en el centro. */
  width:min(100%, 660px); margin:clamp(2.5rem,5vw,4rem) auto 0;
}
@media (min-width:620px){ .plans__grid{ grid-template-columns:repeat(2,1fr); } }

.plan__link{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:2 / 3; border-radius:16px;
  background:var(--ink-2); color:var(--bone); text-decoration:none;
  /* Las fotos son casi negras: sin este filo la caja se funde con el fondo. */
  box-shadow:0 26px 54px rgba(0,0,0,.72), inset 0 0 0 1px rgba(244,242,239,.26);
}
/* Halo de luz detrás de cada caja: marca la silueta sobre el panel negro. */
.plan{ position:relative; isolation:isolate; }
.plan::before{
  content:""; position:absolute; inset:-6% -8%; z-index:-1; pointer-events:none;
  border-radius:40px;
  background:radial-gradient(closest-side, rgba(244,242,239,.2) 0%,
                             rgba(244,242,239,.08) 55%, transparent 100%);
  filter:blur(24px);
}
.plan__link img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out), filter .5s var(--ease);
}
/* Velo de abajo arriba: el rótulo se lee sobre cualquier foto. */
.plan__link::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(8,8,9,.94) 0%, rgba(8,8,9,.6) 40%,
                                     rgba(8,8,9,.1) 72%, transparent 100%);
}
.plan__body{
  position:absolute; inset:auto 0 0 0; z-index:2; display:block;
  padding:clamp(1.15rem,2.2vw,1.6rem);
}
.plan__name{
  display:block;
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1;
  font-size:clamp(1.375rem,2.2vw,1.875rem);
}
/* La explicación sale al pasar el ratón. Se anima el alto con grid, que es
   lo único que transiciona de verdad entre "nada" y "lo que ocupe". */
.plan__reveal{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .5s var(--ease-out), opacity .35s var(--ease);
}
.plan__reveal > span{ display:block; overflow:hidden; }
.plan__for,.plan__how{ display:block; font-family:var(--body); }
.plan__for{
  padding-top:.85rem;
  font-size:clamp(.875rem,.95vw,.9375rem); line-height:1.5; letter-spacing:-.005em;
}
.plan__how{
  padding-top:.6rem;
  font-size:clamp(.8125rem,.88vw,.875rem); line-height:1.5;
  color:rgba(244,242,239,.66);
}

.plans__cta{
  margin-top:clamp(1.75rem,3.2vw,2.5rem);
  text-align:center;
}

@media (hover:hover) and (pointer:fine){
  .plan__link:hover img,
  .plan__link:focus-visible img{ transform:scale(1.05); filter:brightness(.82); }
  .plan__link:hover .plan__reveal,
  .plan__link:focus-visible .plan__reveal{ grid-template-rows:1fr; opacity:1; }
}
/* Sin ratón no hay dónde pasarlo: la explicación va siempre visible. */
@media (hover:none), (pointer:coarse){
  .plan__reveal{ grid-template-rows:1fr; opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .plan__link img,.plan__reveal{ transition:none; }
}

/* ---------- 9. Preguntas ---------- */
.faq{
  background:var(--bone); color:var(--ink);
  padding-block:clamp(3.5rem,7vw,6.5rem);
}
.faq__pill{
  display:block; width:max-content; margin:0 auto .9rem;
  padding:.5rem 1.25rem; border-radius:100px;
  background:rgba(11,11,12,.07);
  font-family:var(--body); font-weight:500; font-size:.9375rem;
  letter-spacing:-.01em; color:#4A4540;
}
.faq__title{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; text-align:center;
  font-size:clamp(1.75rem,3.2vw,2.875rem);
  letter-spacing:-.02em; line-height:1.04;
  margin-bottom:clamp(2.25rem,4.5vw,3.5rem);
  text-wrap:balance;
}

.faq__list{
  width:min(100%, 860px); margin-inline:auto;
  border-top:1px solid rgba(11,11,12,.14);
}
.qa{ border-bottom:1px solid rgba(11,11,12,.14); }
.qa__q{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  width:100%; padding:clamp(1.1rem,1.9vw,1.4rem) 0;
  background:none; border:0; cursor:pointer; text-align:left; color:inherit;
  font-family:var(--body); font-weight:500;
  font-size:clamp(.9375rem,1.15vw,1.0625rem);
  line-height:1.4; letter-spacing:-.015em;
  transition:opacity .25s var(--ease);
}
.qa__q:hover{ opacity:.6; }
/* Flechita hecha con dos bordes: gira media vuelta al abrir. */
.qa__mark{
  position:relative; flex:none; width:13px; height:13px;
  transition:transform .35s var(--ease);
}
.qa__mark::before{
  content:""; position:absolute; left:1px; top:1px;
  width:9px; height:9px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}
.qa:not(.is-closed) .qa__mark{ transform:rotate(180deg); }

/* Sin JavaScript se quedan abiertas; el guion añade .is-closed al cargar. */
.qa__a{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .4s var(--ease-out);
}
.qa.is-closed .qa__a{ grid-template-rows:0fr; }
.qa__a > div{ overflow:hidden; }
.qa__a p{
  margin:0; padding:0 0 clamp(1.1rem,1.9vw,1.4rem);
  max-width:68ch;
  font-family:var(--body); font-size:clamp(.875rem,1vw,.9375rem);
  line-height:1.6; letter-spacing:-.005em; color:#5F5A54;
  text-wrap:pretty;
}
@media (prefers-reduced-motion:reduce){ .qa__a{ transition:none; } }

/* ---------- 10. Contacto ---------- */
.contact{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--bone);
  padding-block:clamp(3.5rem,7vw,6.5rem) clamp(2.5rem,5vw,4rem);
}
.contact::before{
  content:""; position:absolute; inset:-10% -5%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 45% at 50% 0%, rgba(255,255,255,.12) 0%, transparent 70%);
}
.contact__grid{ display:grid; gap:clamp(2.25rem,4.5vw,4rem); align-items:start; }
@media (min-width:900px){ .contact__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.contact__pill{
  display:block; width:max-content; margin:0 0 .9rem;
  padding:.5rem 1.25rem; border-radius:100px;
  background:rgba(244,242,239,.1);
  font-family:var(--body); font-weight:500; font-size:.9375rem;
  letter-spacing:-.01em;
}
.contact__title{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.75rem,3.2vw,2.875rem);
  letter-spacing:-.02em; line-height:1.04;
  margin-bottom:clamp(.8rem,1.4vw,1.15rem);
}
.contact__lead{
  max-width:38ch;
  font-family:var(--body); font-size:clamp(.9375rem,1.05vw,1.0625rem);
  line-height:1.55; letter-spacing:-.01em; color:var(--fg-dim);
  text-wrap:pretty;
}
.contact__data{
  list-style:none; margin:clamp(1.5rem,2.6vw,2rem) 0 0;
  border-top:1px solid var(--rule);
}
.contact__data li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid var(--rule);
  font-family:var(--body); font-size:clamp(.875rem,.95vw,.9375rem);
  letter-spacing:-.005em;
}
.contact__data span{
  flex:none; width:6.5rem;
  font-size:clamp(.6875rem,.78vw,.75rem);
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim);
}
.contact__data a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); }
.contact__data a:hover{ border-color:var(--bone); }
.contact__media{
  margin:clamp(1.75rem,3vw,2.5rem) 0 0;
  border-radius:14px; overflow:hidden; aspect-ratio:4 / 5;
  background:var(--ink-2);
}
.contact__media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:900px){
  /* En escritorio la foto sobra: ya manda el formulario. */
  .contact__media{ display:none; }
}

.field{ display:grid; gap:.45rem; margin-bottom:clamp(1rem,1.7vw,1.35rem); }
.field--dos{ grid-template-columns:1fr; gap:clamp(1rem,1.7vw,1.35rem); }
@media (min-width:480px){ .field--dos{ grid-template-columns:1fr 1fr; } }
.field--dos > div{ display:grid; gap:.45rem; }
.field label,.eleccion legend{
  font-family:var(--body); font-weight:500;
  font-size:clamp(.6875rem,.78vw,.75rem);
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim);
}
.field label i{ font-style:normal; opacity:.6; }
.field input,.field textarea{
  width:100%; padding:.85rem 1rem;
  background:rgba(244,242,239,.04); color:var(--bone);
  border:1px solid var(--rule); border-radius:12px;
  font-family:var(--body); font-size:.9375rem; letter-spacing:-.01em;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:7.5rem; line-height:1.5; }
.field ::placeholder{ color:#6E6860; }
.field input:focus,.field textarea:focus{
  outline:none; border-color:rgba(244,242,239,.5); background:rgba(244,242,239,.07);
}
/* Solo se marca en rojo lo que el visitante ya ha tocado y dejado mal. */
.field input:user-invalid,.field textarea:user-invalid{ border-color:#C46A6A; }

/* Elección en pastillas: un desplegable nativo sobre fondo oscuro canta. */
.eleccion{ border:0; padding:0; margin-bottom:clamp(1.25rem,2vw,1.6rem); }
.eleccion legend{ padding:0; margin-bottom:.7rem; }
.eleccion__lista{ display:flex; flex-wrap:wrap; gap:.5rem; }
.eleccion__lista label{ position:relative; display:block; }
.eleccion__lista input{ position:absolute; opacity:0; width:0; height:0; }
.eleccion__lista span{
  display:block; padding:.6rem 1.05rem; border-radius:100px;
  border:1px solid var(--rule); cursor:pointer;
  font-family:var(--body); font-size:.875rem; letter-spacing:-.01em;
  transition:background .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease);
}
.eleccion__lista span:hover{ border-color:rgba(244,242,239,.4); }
.eleccion__lista input:checked + span{
  background:var(--bone); color:var(--ink); border-color:var(--bone);
}
.eleccion__lista input:focus-visible + span{
  outline:2px solid rgba(244,242,239,.65); outline-offset:2px;
}

/* Casilla de privacidad: obligatoria en España si el formulario recoge datos. */
.acepto{
  display:flex; gap:.7rem; align-items:flex-start;
  margin:.25rem 0 1rem; cursor:pointer;
  font-family:var(--body); font-size:.875rem; line-height:1.45;
  letter-spacing:-.01em; color:var(--fg-dim);
}
.acepto input{
  flex:none; width:1.05rem; height:1.05rem; margin-top:.12rem;
  accent-color:var(--bone); cursor:pointer;
}
.acepto a{ color:var(--bone); border-bottom:1px solid var(--rule); }
.acepto a:hover{ border-color:var(--bone); }

.contact__send{ margin-top:.5rem; }
.contact__note{
  margin:.9rem 0 0; min-height:1.25rem;
  font-family:var(--body); font-size:.875rem; line-height:1.5;
  letter-spacing:-.01em; color:var(--fg-dim);
}
.contact__note.is-ok{ color:var(--bone); }
.contact__note.is-error{ color:#E0928F; }

/* ---------- 11. Footer ---------- */
.footer{
  background:var(--ink); color:var(--bone);
  padding-block:clamp(2.5rem,5vw,4rem) clamp(1.5rem,2.6vw,2rem);
  border-top:1px solid var(--rule);
}
.footer__top{
  display:grid; gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2rem,3.6vw,3rem);
}
@media (min-width:820px){ .footer__top{ grid-template-columns:auto 1fr; align-items:start; } }
.footer__logo{ display:block; width:clamp(150px,15vw,212px); }
.footer__logo img{ width:100%; height:auto; display:block; }
.footer__cols{
  display:grid; gap:clamp(1.75rem,3.5vw,3rem);
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
@media (min-width:820px){ .footer__cols{ justify-items:end; } }
.footer__col span{
  display:block; margin-bottom:.9rem;
  font-family:var(--body); font-weight:500;
  font-size:clamp(.6875rem,.78vw,.75rem);
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim);
}
.footer__col ul{ list-style:none; display:grid; gap:.5rem; }
.footer__col a{
  color:inherit; text-decoration:none;
  font-family:var(--body); font-size:clamp(.8125rem,.9vw,.9375rem);
  letter-spacing:-.01em;
  transition:opacity .25s var(--ease);
}
.footer__col a:hover{ opacity:.6; }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  justify-content:space-between; align-items:center;
  padding-top:clamp(1.25rem,2.2vw,1.75rem);
  border-top:1px solid var(--rule);
  font-family:var(--body); font-size:clamp(.75rem,.85vw,.8125rem);
  letter-spacing:-.005em; color:var(--fg-dim);
}
.footer__bottom a{ color:inherit; text-decoration:none; }
.footer__bottom a:hover{ color:var(--bone); }
.footer__legal i{ font-style:normal; opacity:.45; margin-inline:.35rem; }

/* ---------- 16. Entrada de la portada ----------
   Solo la portada aparece con movimiento; el resto de secciones ya está
   puesto cuando se llega a ellas. */
.js [data-reveal]{ opacity:0; transform:translateY(22px); }
.is-in [data-reveal],[data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.mask{ display:block; overflow:hidden; }
.js .mask > *{ transform:translateY(105%); }
.mask > *{ display:block; transition:transform 1.05s var(--ease-out); transition-delay:var(--d,0ms); }
.is-in .mask > *,.mask.is-in > *{ transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-reveal]{ opacity:1; transform:none; }
  .mask > *{ transform:none; }
}

/* ---- Anclas por debajo de la nav fija ---- */
section[id]{ scroll-margin-top:clamp(64px,8vw,96px); }
:focus-visible{ outline:2px solid var(--sol); outline-offset:3px; border-radius:2px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--gutter); top:.75rem; z-index:200; padding:.6rem 1rem; background:var(--sol); color:var(--sol-ink); font-family:var(--display); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }

/* ---- La tira respeta la preferencia de movimiento reducido del sistema ---- */
@media (prefers-reduced-motion:reduce){
  .brands__track,.ticker__track{ animation:none !important; }
  .brands__marquee{ overflow-x:auto; }
}

/* Campo señuelo del formulario: presente para los robots, invisible para
   las personas, pero sin display:none, que algunos lectores ignoran. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 12. Ajustes de teléfono ---------- */
@media (max-width:699px){
  /* En las cajas de planes, solo el rótulo y la frase de para quién es:
     sin ratón todo sale a la vez y la segunda frase sobra. */
  .plan__how{ display:none; }
  .plan__body{ padding:clamp(1rem,2.2vw,1.4rem) clamp(1rem,2.2vw,1.4rem) .85rem; }
}

/* ---------- 13. Páginas legales ---------- */
.legal{ padding-block:clamp(2rem,5vw,4rem) var(--rhythm); }
.legal__back{
  display:inline-block; margin-bottom:clamp(2.5rem,6vw,5rem);
  width:clamp(140px,14vw,190px);
}
.legal__back img{ width:100%; height:auto; }
.legal__body{ max-width:46rem; }
.legal h1{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.5rem,6vw,4.5rem); line-height:.95; letter-spacing:.005em;
  margin-bottom:.75rem;
}
.legal__date{ color:var(--fg-dim); font-size:.875rem; margin-bottom:clamp(2rem,4vw,3rem); }
.legal h2{
  font-family:var(--body); font-weight:600; font-size:1.125rem;
  letter-spacing:-.01em; margin:2.25rem 0 .6rem; scroll-margin-top:2rem;
}
.legal p,.legal li{ color:var(--bone-2); }
.legal p + p{ margin-top:.8rem; }
.legal ul{ padding-left:1.2rem; margin-top:.6rem; display:grid; gap:.35rem; }
.legal a{ border-bottom:1px solid var(--rule); }
.legal a:hover{ border-color:var(--bone); }
.legal dl{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.25rem; margin-top:.6rem; }
.legal dt{ color:var(--fg-dim); }
@media (max-width:520px){ .legal dl{ grid-template-columns:1fr; gap:.1rem; } .legal dd{ margin-bottom:.5rem; } }