/* ==========================================================================
   casa alza — design system
   Sitio estático multipágina. Paleta y tipografías extraídas del documento
   de marca. Sin dependencias ni build.
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------- */
:root {
  /* Isotipo (mask compartida por loader y marcas de agua) */
  --iso-img: url("assets/isotipo.png");
  /* Paleta de marca — sistema de tres colores (rediseño 2026) */
  --black:    #000000;
  --beige:    #F7F2EB;
  --red:      #91001D;

  --cream:    var(--beige);
  --cream-2:  #EFE6D9;
  --ink:      var(--black);
  --red-deep: #6D0016;
  --red-soft: #B01230;

  /* Alias heredados: el sitio se construyó con una paleta multicolor.
     Ahora todos apuntan al sistema negro / beige / rojo para que el
     rediseño se propague sin tener que reescribir cada regla. */
  --pink:     var(--red);
  --pink-soft:var(--cream-2);
  --blue:     var(--red);
  --navy:     var(--black);
  --yellow:   var(--beige);
  --green:    var(--black);
  --green-2:  var(--red);
  --sage:     var(--red);
  --espresso: var(--black);
  --taupe:    #E3D9CC;

  /* Tipografía */
  --font-sans:  'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', 'Times New Roman', Georgia, serif;

  /* Escala fluida */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.94rem + 0.28vw, 1.18rem);
  --step-1:  clamp(1.2rem, 1.08rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.5rem, 1.27rem + 1.1vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem);
  --step-4:  clamp(2.8rem, 1.4rem + 6vw, 6.4rem);
  --step-5:  clamp(3.4rem, 1.4rem + 9vw, 9.5rem);
  --step-6:  clamp(4rem, 1.5rem + 9vw, 10rem);

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  /* Alto del header sticky. Debe coincidir con la altura de .nav para que las
     secciones a pantalla completa puedan reservar ese espacio arriba. */
  --header-h: clamp(64px, 8vw, 86px);
  --radius: 14px;
  --radius-lg: 26px;

  /* Otros */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --line: rgba(0, 0, 0, 0.14);
}

/* --- Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* --- Tipografía base ------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }
.italic { font-family: var(--font-serif); font-style: italic; font-weight: 500; }

.eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--red);
  letter-spacing: 0.01em;
}
.overline {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* --- Layout helpers -------------------------------------------------------- */
.container {
  width: min(100% - 0px, var(--container));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.lead { font-size: var(--step-1); font-weight: 300; max-width: 46ch; }
.section-wrap { position: relative; overflow: hidden; }
/* El header es sticky: sin esto, saltar a un ancla deja el título tapado. */
#believe, #what-we-do, #featured, #manifesto, #cta {
  scroll-margin-top: var(--header-h);
}

/* --- Botones --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease),
              color 0.4s var(--ease), border-color 0.4s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn--primary { background: var(--green); color: var(--cream); }
.btn--primary:hover { background: var(--green-2); }
.btn--red { background: var(--red); color: var(--cream); }
.btn--red:hover { background: var(--red-deep); }
.btn--ghost-light { border-color: rgba(247,240,233,0.4); color: var(--cream); }
.btn--ghost-light:hover { background: var(--cream); color: var(--ink); }
.btn--ghost-dark {
  border-color: rgba(247,240,233,0.5);
  color: var(--cream);
  background: transparent;
}
.btn--ghost-dark:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

/* Pills rellenas del nuevo layout (texto normal + ícono) */
.btn--fill {
  border: none;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.72em 1.5em;
  gap: 0.55em;
}
.btn--fill svg { flex-shrink: 0; }
/* En el rediseño todas las pills son rojas con texto beige, sin importar
   sobre qué fondo vivan. Las variantes se conservan por compatibilidad. */
.btn--fill-blue,
.btn--fill-sage,
.btn--fill-yellow,
.btn--fill-cream,
.btn--fill { background: var(--red); color: var(--beige); }
.btn--fill:hover { background: var(--red-soft); filter: none; }

/* Shimmer al hover en botones sólidos */
.btn--primary,
.btn--red {
  position: relative;
  overflow: hidden;
}
.btn--primary::after,
.btn--red::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
.btn--primary:hover::after,
.btn--red:hover::after {
  transform: translateX(130%);
  transition: transform 0.55s var(--ease);
}

/* ==========================================================================
   Header / navegación
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}
/* El PNG del logo viene en un rojo distinto al de marca. En vez de pedir un
   asset nuevo, se usa la imagen como máscara y el color lo pone el CSS: así
   el logo siempre queda exactamente en el rojo del sistema. */
.logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  background-color: var(--logo-color, var(--red));
  -webkit-mask: url("assets/logo-casaalza.png") center / contain no-repeat;
  mask: url("assets/logo-casaalza.png") center / contain no-repeat;
}
.logo-link .logo { opacity: 0; }
.logo { height: clamp(26px, 1.3rem + 0.9vw, 34px); width: auto; display: block; }
.logo--light { /* el PNG ya viene en color crema */ }
.site-footer .footer__brand .logo { height: clamp(34px, 1.8rem + 1.6vw, 52px); }

/* Marca de agua: el isotipo detrás del contenido, en negro muy tenue.
   Va pegado al borde derecho pero ENTERO: se dimensiona por alto (no por
   ancho) para que nunca lo recorte el alto de la ventana. */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 50%;
  right: 0;
  height: min(46vh, 420px);
  aspect-ratio: 1.472;
  transform: translateY(-50%);
  background-color: var(--ink);
  -webkit-mask: var(--iso-img) center / contain no-repeat;
  mask: var(--iso-img) center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.3rem);
}
.nav-links a {
  position: relative;
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  padding: 0.3em 0;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  transition: color 0.3s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover { color: var(--red); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-links a[aria-current="page"] { color: var(--red); }

.nav-lang__btn {
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.28em 0.75em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-lang__btn:hover { border-color: var(--red); color: var(--red); }

/* Hamburguesa */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 46px; height: 46px;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 24px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span { top: 50%; transform: translateY(-50%); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop del menú móvil */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(17,12,9,0.4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Marquee (navy, serif itálica)
   ========================================================================== */
.marquee {
  background: var(--navy);
  color: var(--cream);
  padding-block: clamp(0.6rem, 1.2vw, 0.95rem);
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: 0;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-1);
  padding-inline: 1.2rem;
}
.marquee span::after { content: "."; }
.marquee span { padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Hero editorial (home)
   ========================================================================== */
.editorial-hero {
  position: relative;
  min-height: 92svh;
  /* Rediseño: el fondo del hero ya no es rojo. Es el beige del sitio, para
     que arranque plano como en el layout y las fotos emerjan al scrollear. */
  background: linear-gradient(180deg, var(--beige) 0%, var(--beige) 72%, #F0E8DD 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editorial-hero__copy {
  position: relative;
  z-index: 4;
  padding: clamp(5rem, 10vh, 9rem) var(--gutter) clamp(3rem, 6vh, 6rem);
  width: 100%;
  max-width: 96rem;
  /* En modo cine este elemento es position:absolute;inset:0 (ver .cine__hero
     en is-cine): con left/right/width ya explícitos, el navegador resuelve
     el sobre-restringido pegando la caja al borde izquierdo en vez de
     centrarla en pantallas > 96rem de ancho. margin-inline:auto fuerza el
     centrado real en ambos modos (normal y cine). */
  margin-inline: auto;
  color: var(--ink);
  text-align: center;
}
.editorial-hero__masthead {
  line-height: 0.9;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.masthead-sans {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(3.8rem, 12vw, 11.5rem);
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline;
}
.masthead-serif-inline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3.4rem, 11vw, 10.5rem);
  color: var(--ink);
  display: inline;
  margin-left: 0.15em;
}
.editorial-hero__sub {
  font-size: var(--step-1);
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  margin-inline: auto;
  margin-bottom: clamp(1.6rem, 3.2vw, 2.6rem);
  max-width: 50ch;
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
@media (max-width: 760px) {
  .editorial-hero { min-height: 88svh; }
  .editorial-hero__copy { padding-top: clamp(4rem, 12vh, 7rem); }
  .masthead-sans,
  .masthead-serif-inline { font-size: clamp(2.8rem, 13vw, 5.5rem); }
}

/* ==========================================================================
   What we do — panel rojo con seis servicios repartidos en tres filas.
   Cada fila se parte en dos celdas separadas por una diagonal. Al pasar el
   mouse sobre una celda, la diagonal se corre hacia el lado contrario: esa
   celda se estira y descubre su descripción. Toda la geometría (celdas y
   línea divisoria) se deriva de la misma variable --p, así nunca se
   desalinean entre sí.
   ========================================================================== */
@property --p {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

.wwd-section {
  background: var(--red);
  color: var(--beige);
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
  /* La sección sangra a todo el ancho: las filas tocan ambos bordes. */
}
.wwd-header {
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  padding-inline: var(--gutter);
}
.wwd-title {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--beige);
  line-height: 1;
  text-transform: lowercase;
}
.wwd-sub {
  margin: clamp(1rem, 2vw, 1.6rem) auto 0;
  max-width: 52ch;
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.5;
  color: color-mix(in srgb, var(--beige) 88%, transparent);
}
.wwd-swipe { display: none; }

.wwd-rows {
  border-top: 1px solid color-mix(in srgb, var(--beige) 45%, transparent);
}
.wwd-row {
  --p: 50%;
  /* Cuánto se inclina la diagonal: desplazamiento horizontal entre el borde
     superior y el inferior, medido desde el centro de la línea. */
  --skew: clamp(1.6rem, 4vw, 5.5rem);
  position: relative;
  height: clamp(140px, 15vw, 195px);
  border-bottom: 1px solid color-mix(in srgb, var(--beige) 45%, transparent);
  /* Rebote corto al final del recorrido: la diagonal "aterriza" en vez de
     frenar en seco. Es lo que le da vida al gesto. */
  transition: --p 0.72s cubic-bezier(0.34, 1.42, 0.42, 1);
}
/* Marcador que viaja sobre la diagonal. A media altura la línea pasa
   exactamente por --p (el sesgo es simétrico), así que el punto siempre
   cae encima de ella sin cálculos extra. */
.wwd-row::after {
  content: "";
  position: absolute;
  left: var(--p);
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--beige);
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 0.35s var(--ease), transform 0.5s cubic-bezier(0.34, 1.42, 0.42, 1);
  pointer-events: none;
  z-index: 3;
}
.wwd-row:hover::after,
.wwd-row.is-open-a::after,
.wwd-row.is-open-b::after { opacity: 1; transform: scale(1); }
.wwd-cell {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: clamp(2rem, 9vw, 11rem);
  padding-inline: clamp(1.5rem, 6vw, 6.5rem);
  background: var(--red);
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* La celda izquierda ocupa desde el borde hasta la diagonal; la derecha,
   desde la diagonal hasta el borde. Comparten exactamente los dos puntos
   del corte, por eso encajan sin costura. */
.wwd-cell--a {
  clip-path: polygon(
    0 0,
    calc(var(--p) + var(--skew)) 0,
    calc(var(--p) - var(--skew)) 100%,
    0 100%
  );
  justify-content: flex-start;
}
.wwd-cell--b {
  clip-path: polygon(
    calc(var(--p) + var(--skew)) 0,
    100% 0,
    100% 100%,
    calc(var(--p) - var(--skew)) 100%
  );
  /* row-reverse invierte el eje principal: flex-start es el borde derecho,
     que es justo donde debe quedar la etiqueta de este lado. */
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: right;
}
/* La línea divisoria es un paralelogramo de 1px con los mismos vértices que
   el corte de las celdas: se mueve con ellas por construcción. */
.wwd-row__edge {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--beige) 45%, transparent);
  pointer-events: none;
  clip-path: polygon(
    calc(var(--p) + var(--skew)) 0,
    calc(var(--p) + var(--skew) + 1px) 0,
    calc(var(--p) - var(--skew) + 1px) 100%,
    calc(var(--p) - var(--skew)) 100%
  );
}

.wwd-cell__label {
  flex: none;
  position: relative;
  z-index: 2;
  /* Al cerrarse su lado, la etiqueta se apaga: si no, la diagonal la corta
     a media palabra y parece un error de maquetación. */
  font-size: clamp(1.35rem, 2.4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--beige);
  transition: transform 0.6s cubic-bezier(0.34, 1.42, 0.42, 1),
              opacity 0.4s var(--ease);
}
.wwd-row:has(.wwd-cell--a:hover) .wwd-cell--b .wwd-cell__label,
.wwd-row:has(.wwd-cell--b:hover) .wwd-cell--a .wwd-cell__label,
.wwd-row.is-open-a .wwd-cell--b .wwd-cell__label,
.wwd-row.is-open-b .wwd-cell--a .wwd-cell__label { opacity: 0; }
/* Número gigante en contorno: aparece en el fondo del lado que se abre.
   Va como <text> de SVG y NO con -webkit-text-stroke: text-stroke traza el
   contorno crudo del glifo y, según el navegador y el tamaño, las curvas se
   cruzan por dentro (el cliente veía una estrella en el 2 aunque aquí se
   viera limpio). Con paint-order el trazo beige va DEBAJO y el relleno rojo
   —el mismo del fondo— lo tapa por dentro: ninguna línea interna puede
   asomarse, y las esquinas van redondeadas en vez de picos de inglete. */
.wwd-cell__num {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  /* Altura visual equivalente al número anterior (~0.72 × su fuente). */
  height: clamp(2.9rem, 6.5vw, 6.85rem);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s var(--ease) 0.1s, transform 0.7s var(--ease) 0.1s;
}
.wwd-cell__num svg {
  height: 100%;
  width: auto;
  display: block;
  overflow: visible; /* el trazo sobresale 2px del viewBox */
}
.wwd-cell__num text {
  font-family: var(--font-sans);
  font-size: 100px; /* unidades del viewBox; el tamaño real lo da la altura */
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--red);
  stroke: var(--beige);
  /* 4px de trazo, la mitad interior la cubre el relleno: se ven 2px, y con
     non-scaling-stroke son 2px de pantalla a cualquier tamaño. */
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
/* El número se ancla a la diagonal, no al borde de la fila: la celda ocupa
   todo el ancho pero solo se ve hasta --p, así que se posiciona respecto a
   ese corte para que quede siempre dentro de la zona que se abre. */
/* Se descuenta --skew además de --p: si no, la diagonal (que es ancha por
   la inclinación) cruza el número y se ve como líneas atravesándolo. */
.wwd-cell--a .wwd-cell__num {
  right: calc(100% - var(--p) + var(--skew) + 2.5rem);
  transform: translateX(2rem);
}
.wwd-cell--b .wwd-cell__num {
  left: calc(var(--p) + var(--skew) + 2.5rem);
  transform: translateX(-2rem);
}
/* Destello que barre la celda al abrirse. */
.wwd-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(247,242,235,0.10) 50%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.wwd-cell__desc {
  position: relative;
  z-index: 2;
  font-size: clamp(1.15rem, 1.8vw, 1.8rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--beige);
  opacity: 0;
  transform: translateX(-1.4rem);
  transition: opacity 0.45s var(--ease) 0.18s, transform 0.6s var(--ease) 0.18s;
  white-space: nowrap;
}
.wwd-cell--b .wwd-cell__desc { transform: translateX(1.4rem); }

/* Estirar hacia el lado contrario + revelar el texto. */
.wwd-row:has(.wwd-cell--a:hover),
.wwd-row:has(.wwd-cell--a:focus-visible),
.wwd-row.is-open-a { --p: 88%; }
.wwd-row:has(.wwd-cell--b:hover),
.wwd-row:has(.wwd-cell--b:focus-visible),
.wwd-row.is-open-b { --p: 12%; }

.wwd-row:has(.wwd-cell--a:hover) .wwd-cell--a .wwd-cell__desc,
.wwd-row:has(.wwd-cell--a:focus-visible) .wwd-cell--a .wwd-cell__desc,
.wwd-row.is-open-a .wwd-cell--a .wwd-cell__desc,
.wwd-row:has(.wwd-cell--b:hover) .wwd-cell--b .wwd-cell__desc,
.wwd-row:has(.wwd-cell--b:focus-visible) .wwd-cell--b .wwd-cell__desc,
.wwd-row.is-open-b .wwd-cell--b .wwd-cell__desc {
  opacity: 1;
  transform: translateX(0);
}

/* La celda que se abre: número visible, etiqueta que se recorre hacia el
   borde y destello que la barre una vez. */
.wwd-cell:hover .wwd-cell__num,
.wwd-cell:focus-visible .wwd-cell__num,
.wwd-row.is-open-a .wwd-cell--a .wwd-cell__num,
.wwd-row.is-open-b .wwd-cell--b .wwd-cell__num {
  opacity: 1;
  transform: translateX(0);
}
.wwd-cell--a:hover .wwd-cell__label,
.wwd-cell--a:focus-visible .wwd-cell__label,
.wwd-row.is-open-a .wwd-cell--a .wwd-cell__label { transform: translateX(-0.5rem); }
.wwd-cell--b:hover .wwd-cell__label,
.wwd-cell--b:focus-visible .wwd-cell__label,
.wwd-row.is-open-b .wwd-cell--b .wwd-cell__label { transform: translateX(0.5rem); }

.wwd-cell:hover::before,
.wwd-row.is-open-a .wwd-cell--a::before,
.wwd-row.is-open-b .wwd-cell--b::before {
  animation: wwd-sheen 0.9s var(--ease);
}
@keyframes wwd-sheen {
  from { opacity: 1; transform: translateX(-60%); }
  to   { opacity: 0; transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) {
  .wwd-cell::before { animation: none !important; }
  .wwd-row { transition-timing-function: var(--ease); }
}

.wwd-cell:focus-visible { outline: none; }
.wwd-cell:focus-visible .wwd-cell__label {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Móvil / tablet angosta: sin diagonal. Seis bloques apilados con su
   descripción siempre a la vista. */
@media (max-width: 860px) {
  .wwd-row {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .wwd-row__edge,
  .wwd-row::after,
  .wwd-cell__num { display: none; }
  .wwd-cell {
    position: static;
    clip-path: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 0.4rem;
    padding: clamp(1.4rem, 5vw, 2rem) var(--gutter);
    cursor: default;
  }
  .wwd-cell--b {
    text-align: left;
    border-top: 1px solid color-mix(in srgb, var(--beige) 32%, transparent);
  }
  .wwd-cell__desc,
  .wwd-cell--b .wwd-cell__desc {
    opacity: 1;
    transform: none;
    white-space: normal;
  }
  /* Sin diagonal no hay lado que "cerrar": los títulos se quedan siempre
     visibles, aunque wwd.js siga marcando is-open-a/b al tocar. */
  .wwd-cell__label {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   A creative house (home) — antes "ideas become brands".
   Fondo beige con el isotipo gigante como marca de agua a la derecha.
   ========================================================================== */
.ideas-brands-section {
  background: var(--beige);
  padding-block: clamp(5rem, 10vw, 10rem);
  position: relative;
  overflow: hidden;
}
/* Marca de agua: el MISMO isotipo que en Contact (mismo rojo, mismo tamaño
   y misma opacidad), pero anclado a la sección en vez de fijo a la ventana:
   aquí se queda pegado al fondo y viaja con el contenido. */
.ideas-brands-section::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  height: min(72%, 460px);
  aspect-ratio: 1.472;
  transform: translateY(-50%);
  background-color: var(--ink);
  -webkit-mask: var(--iso-img) center / contain no-repeat;
  mask: var(--iso-img) center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.ideas-brands-section > .container { position: relative; z-index: 1; }
.ideas-brands__text {
  display: block;
  font-size: clamp(2.6rem, 7.5vw, 6.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
}
.ideas-brands__line1 {
  display: block;
  font-family: var(--font-sans);
}
.ideas-brands__line2 {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink);
}
/* La última palabra del titular va en serif itálica, en la misma línea. */
.ideas-brands__accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06em;
  letter-spacing: -0.01em;
}

/* --- Reel de video (dos proyectos, escalonados) ----------------------- */
.reel {
  margin-top: clamp(3rem, 7vw, 6.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
}
/* Escalonado: la segunda tarjeta baja, para que no se vean amontonadas. */
.reel__card--b { margin-top: clamp(2rem, 7vw, 7rem); }
.reel__btn {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--green);
  font: inherit;
}
.reel__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  background: var(--green);
  box-shadow: 0 18px 40px -22px rgba(1, 55, 48, 0.55);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.reel__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
  filter: saturate(1.02);
}
/* Velo suave para que el botón de play y la etiqueta se lean siempre. */
.reel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1,55,48,0.05) 0%, rgba(1,55,48,0.32) 100%);
  opacity: 0.9;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.reel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(52px, 5vw, 70px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  color: var(--green);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px -8px rgba(0,0,0,0.45);
  transition: transform 0.45s var(--ease), background 0.35s var(--ease);
  pointer-events: none;
}
.reel__play svg { margin-left: 3px; }
.reel__tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.45em 0.95em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  color: var(--green);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.reel__meta {
  display: block;
  margin-top: 1rem;
}
.reel__eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.35rem;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: var(--step-0);
}
.reel__title {
  display: block;
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--ink);
  padding-left: 1.6rem;
}
/* Flecha roja delante del nombre del proyecto, como en el layout. */
.reel__title::before {
  content: "\2192";
  color: var(--red);
  margin-left: -1.6rem;
  margin-right: 0.55rem;
  font-weight: 500;
}
/* Hover / foco: la tarjeta se levanta, el video se acerca y aparece la pista. */
.reel__btn:hover .reel__media,
.reel__btn:focus-visible .reel__media {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -26px rgba(1, 55, 48, 0.7);
}
.reel__btn:hover .reel__preview,
.reel__btn:focus-visible .reel__preview { transform: scale(1.05); }
.reel__btn:hover .reel__scrim,
.reel__btn:focus-visible .reel__scrim { opacity: 0.55; }
.reel__btn:hover .reel__play,
.reel__btn:focus-visible .reel__play {
  transform: scale(1.12);
  background: var(--cream);
}
.reel__btn:hover .reel__tag,
.reel__btn:focus-visible .reel__tag { opacity: 1; transform: translateY(0); }
@media (max-width: 780px) {
  .reel { grid-template-columns: 1fr; gap: 2.2rem; }
  .reel__card--b { margin-top: 0; }
  .reel__media { aspect-ratio: 16 / 9; }
}

/* --- Reproductor a pantalla completa ---------------------------------- */
.vplayer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.vplayer[hidden] { display: none; }
.vplayer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 18, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: vplayer-fade 0.35s var(--ease);
}
.vplayer__inner {
  position: relative;
  width: min(1200px, 100%);
  animation: vplayer-pop 0.4s var(--ease);
}
.vplayer__video {
  width: 100%;
  max-height: 78vh;
  border-radius: clamp(10px, 1.4vw, 18px);
  background: #000;
  display: block;
}
.vplayer__caption {
  margin-top: 0.9rem;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vplayer__close {
  position: absolute;
  top: -3.1rem;
  right: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(247,240,233,0.25);
  background: rgba(247,240,233,0.08);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.vplayer__close:hover { background: rgba(247,240,233,0.2); transform: rotate(90deg); }
@keyframes vplayer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vplayer-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
body.vplayer-open { overflow: hidden; }

/* ==========================================================================
   Featured projects (home, fondo oscuro)
   ========================================================================== */
/* --- Featured projects: la calle ----------------------------------------
   Sección inmersiva: un muro de calle a pantalla completa con tres mupis
   digitales (dos / uno según el ancho, vía --fp-cols) montados encima. El
   contenido de cada panel se cruza por páginas; el muro y el riel hacen
   parallax con el mouse. El logo va "pintado" en la esquina, apoyado en el
   plano del muro. La lógica vive en featured.js; aquí solo la piel. */
.featured-section {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #241a12;
  color: var(--beige);
}

/* Muro + logo: viven juntos y se mueven juntos con el parallax. */
.fp-stage { position: absolute; inset: 0; }
.fp-wall {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 106%; height: 106%;
  transform: scale(1.02);
  transition: transform 0.3s var(--ease);
  will-change: transform;
}
.fp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo "encalado" en la esquina, apoyado en el plano del muro (perspectiva). */
.fp-logo {
  position: absolute; left: 4.5%; bottom: 11%; width: 29%; max-width: 360px; height: auto;
  opacity: 0.46; mix-blend-mode: screen; filter: blur(0.3px) contrast(0.95);
  transform-origin: 0% 100%;
  transform: perspective(1500px) rotateZ(3deg) rotateY(-20deg);
  pointer-events: none;
}
.fp-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(180deg, rgba(20,12,6,0.34) 0%, transparent 20% 60%, rgba(20,12,6,0.5) 100%);
}

/* --- El riel de mupis --- */
.fp-rack {
  --fp-cols: 3;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; align-items: center; gap: clamp(12px, 2.2vw, 30px);
  will-change: transform; transition: transform 0.3s var(--ease);
}
.fp-panel {
  height: min(56vh, 44vw); aspect-ratio: 118 / 175; border-radius: 9px;
  padding: clamp(6px, 0.9vh, 13px); position: relative; cursor: pointer; flex: none;
  background: linear-gradient(150deg, #484641 0%, #201f1d 46%, #33312d 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(0,0,0,0.35),
    22px 34px 44px -20px rgba(42,22,8,0.55),
    10px 16px 24px -14px rgba(42,22,8,0.45);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.fp-screen {
  position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; background: #0c0b0d;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45) inset; transition: filter 0.5s var(--ease);
}

/* Cada proyecto es una capa que se cruza por opacidad. */
.fp-layer { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0.9s var(--ease); }
.fp-layer.is-on { opacity: 1; z-index: 2; }
.fp-layer img, .fp-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Varias fotos por proyecto, cruzadas por opacidad mientras esa página está al frente. */
.fp-frame { z-index: 1; opacity: 0; transition: opacity 0.7s var(--ease); }
.fp-frame.is-active { z-index: 2; opacity: 1; }
/* Escalonado: los paneles se cruzan en cascada, no todos a la vez. */
.fp-rack .fp-panel:nth-child(2) .fp-layer { transition-delay: 0.11s; }
.fp-rack .fp-panel:nth-child(3) .fp-layer { transition-delay: 0.22s; }

/* Placa beige con la categoría y el "-> nombre", como en el layout. */
.fp-plaque {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  background: var(--beige); border-radius: 0 10px 0 8px;
  padding: clamp(0.42rem, 0.85vw, 0.8rem) clamp(0.6rem, 1.1vw, 1.15rem) clamp(0.5rem, 0.95vw, 0.9rem);
  max-width: 92%; box-shadow: 0 8px 20px -12px rgba(0,0,0,0.5);
}
.fp-cat { display: block; font-weight: 700; letter-spacing: -0.01em; color: var(--red); font-size: clamp(0.62rem, 0.98vw, 0.9rem); line-height: 1.1; }
.fp-name { display: block; margin-top: 0.18rem; font-weight: 400; color: var(--ink); font-size: clamp(0.58rem, 0.9vw, 0.86rem); line-height: 1.15; }
.fp-name::first-letter { color: var(--red); }
.fp-name em { font-family: var(--font-serif); font-style: italic; font-weight: 600; }

.fp-warm { position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(180deg, rgba(255,214,158,0.10), transparent 40%, rgba(120,60,20,0.10)); mix-blend-mode: soft-light; }
.fp-glass { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(122deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.04) 13%, transparent 30%); mix-blend-mode: screen; }
.fp-shine { position: absolute; inset: 0; pointer-events: none; z-index: 6; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.32) 46%, rgba(255,255,255,0.05) 56%, transparent 68%); mix-blend-mode: screen; transform: translateX(-120%); }

/* Al pasar el mouse (solo punteros finos): crece, se eleva, brilla y barre luz. */
@media (hover: hover) and (pointer: fine) {
  .fp-panel:hover {
    z-index: 6; transform: translateY(-10px) scale(1.05);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.16) inset,
      0 0 0 1px rgba(0,0,0,0.35),
      0 42px 72px -22px rgba(42,22,8,0.72),
      0 0 48px -6px rgba(255,140,90,0.42);
  }
  .fp-panel:hover .fp-screen { filter: brightness(1.07) saturate(1.06); }
  .fp-panel:hover .fp-shine { transform: translateX(120%); transition: transform 0.85s var(--ease); }
}

/* --- UI (por encima del muro, debajo del header sticky) --- */
.fp-ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.fp-ui__top {
  position: absolute; left: 0; right: 0; top: clamp(96px, 12vh, 124px);
  display: flex; align-items: baseline; justify-content: flex-start; gap: clamp(0.9rem, 2vw, 1.5rem);
  padding: 0 clamp(20px, 4vw, 54px);
}
.fp-eyebrow { margin: 0; font-size: clamp(0.7rem, 1vw, 0.82rem); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(247,242,235,0.9); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.fp-count { margin: 0; font-size: 0.82rem; letter-spacing: 0.14em; color: var(--beige); font-variant-numeric: tabular-nums; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.fp-count b { color: #ff5a4d; font-weight: 700; }

.fp-ctrl { position: absolute; left: 50%; translate: -50% 0; bottom: clamp(22px, 4vw, 44px); display: flex; align-items: center; gap: 16px; pointer-events: auto; }
.fp-dots { display: flex; gap: 8px; }
.fp-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(247,242,235,0.45); cursor: pointer; transition: width 0.3s var(--ease), background 0.3s var(--ease); }
.fp-dots button[aria-current="true"] { width: 26px; border-radius: 99px; background: #ff5a4d; }
.fp-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(247,242,235,0.45); background: rgba(20,14,8,0.35); color: var(--beige); display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.fp-btn:hover { background: var(--red); border-color: var(--red); }

.fp-cta {
  position: absolute; right: clamp(20px, 4vw, 54px); bottom: clamp(22px, 4vw, 44px); pointer-events: auto;
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.05rem; border-radius: 999px;
  border: 1px solid rgba(247,242,235,0.4); color: var(--beige); font-size: 0.82rem; font-weight: 500;
  text-decoration: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.fp-cta:hover { background: var(--beige); color: var(--ink); border-color: var(--beige); }

/* --- Adaptación a distintas medidas --- */
@media (max-width: 1000px) {
  .fp-rack { --fp-cols: 2; }
  .fp-panel { height: min(60vh, 58vw); }
}
@media (max-width: 600px) {
  .fp-rack { --fp-cols: 1; gap: 0; }
  .fp-panel { height: min(60vh, 122vw); }
  .fp-logo { width: 40%; bottom: 13.5%; }
  .fp-cta { display: none; }
  .fp-eyebrow { letter-spacing: 0.2em; }
  .fp-ui__top { top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-wall, .fp-rack, .fp-layer, .fp-panel, .fp-frame { transition: none; }
  .fp-panel:hover .fp-shine { transition: none; }
}

/* ==========================================================================
   Closing / CTA (home) — "let's create something worth remembering".
   Pantalla negra con estética de monitor CRT: el texto se teclea línea por
   línea (closing.js), con cursor parpadeante, líneas de barrido y un leve
   resplandor. Sin JS o con reduced-motion el texto simplemente está ahí.
   ========================================================================== */
.closing-section {
  position: relative;
  background: var(--black);
  color: var(--beige);
  padding-block: clamp(5rem, 12vw, 11rem);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.closing-section > .container { position: relative; z-index: 2; }

/* --- Capa CRT: barrido horizontal + viñeta + brillo del fósforo --------- */
.crt {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Scanlines: franjas finas que recorren la pantalla muy despacio. */
.crt__lines {
  position: absolute;
  inset: -100% 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(247, 242, 235, 0.055) 0px,
    rgba(247, 242, 235, 0.055) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: crt-roll 9s linear infinite;
}
@keyframes crt-roll { to { transform: translateY(33.333%); } }
/* Banda de refresco: la franja clara que se ve al grabar un monitor con
   una cámara. Es lo que más "delata" que estás filmando una pantalla. */
.crt__band {
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(247, 242, 235, 0.035) 35%,
    rgba(247, 242, 235, 0.075) 50%,
    rgba(247, 242, 235, 0.035) 65%,
    transparent 100%);
  animation: crt-band 6.5s linear infinite;
}
@keyframes crt-band {
  from { transform: translateY(-140%); }
  to   { transform: translateY(360%); }
}
/* Grano de video: ruido fino, estático, sin costo de repintado. */
.crt__grain {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* El <svg> del filtro no debe ocupar espacio. */
.crt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Viñeta: los bordes de un tubo de rayos catódicos caen a negro. */
.crt__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 45%, rgba(0, 0, 0, 0.55) 100%);
}
/* Parpadeo casi imperceptible del brillo general. */
.crt__flicker {
  position: absolute;
  inset: 0;
  background: rgba(247, 242, 235, 0.02);
  animation: crt-flicker 3.2s steps(1, end) infinite;
}
@keyframes crt-flicker {
  0%, 92%, 100% { opacity: 0; }
  93%           { opacity: 1; }
  94%           { opacity: 0; }
  96%           { opacity: 0.7; }
  97%           { opacity: 0; }
}

.closing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3rem);
}
/* La "pantalla": deformación de lente (ruido fractal que desplaza píxeles),
   una curvatura muy leve en perspectiva y saltos de tracking ocasionales,
   como cuando la cinta pierde sincronía. */
.closing-screen {
  filter: url(#crt-warp);
  transform-origin: 50% 50%;
  animation: crt-tracking 11s steps(1, end) infinite;
}
@keyframes crt-tracking {
  0%, 41%, 100% { transform: none; }
  42%           { transform: translateX(-7px) skewX(0.7deg); }
  43%           { transform: translateX(5px)  skewX(-0.5deg); }
  44%           { transform: none; }
  79%           { transform: translateX(3px) translateY(-2px); }
  80%           { transform: none; }
}
.closing-heading {
  font-size: clamp(2.6rem, 8.5vw, 7.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--beige);
  max-width: 16ch;
  /* Fósforo + aberración cromática: los canales rojo y cian se separan un
     par de píxeles, como en una lente barata o una copia de VHS. */
  animation: crt-aberration 5.5s ease-in-out infinite;
}
@keyframes crt-aberration {
  0%, 100% {
    text-shadow:
      -1.5px 0 rgba(255, 40, 80, 0.42),
       1.5px 0 rgba(90, 230, 255, 0.34),
       0 0 1px rgba(247, 242, 235, 0.55),
       0 0 26px rgba(247, 242, 235, 0.20);
  }
  38% {
    text-shadow:
      -3.5px 0.5px rgba(255, 40, 80, 0.55),
       3px  -0.5px rgba(90, 230, 255, 0.45),
       0 0 1px rgba(247, 242, 235, 0.6),
       0 0 30px rgba(247, 242, 235, 0.24);
  }
  62% {
    text-shadow:
      -0.5px 0 rgba(255, 40, 80, 0.3),
       0.5px 0 rgba(90, 230, 255, 0.26),
       0 0 1px rgba(247, 242, 235, 0.5),
       0 0 20px rgba(247, 242, 235, 0.16);
  }
}
/* Cada línea se teclea por separado; el bloque no salta porque la caja ya
   está reservada con la línea completa en un span invisible debajo. */
.closing-heading__line {
  display: block;
  position: relative;
}
.closing-heading__ghost {
  visibility: hidden;
  pointer-events: none;
}
.closing-heading__typed {
  position: absolute;
  inset: 0;
  display: block;
}
/* El cursor de bloque vive al final de la línea que se está escribiendo. */
.closing-heading__caret {
  display: inline-block;
  width: 0.52em;
  height: 0.82em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: var(--beige);
  box-shadow: 0 0 14px rgba(247, 242, 235, 0.5);
  opacity: 0;
}
.closing-heading__line.is-typing .closing-heading__caret,
.closing-heading__line.is-done-last .closing-heading__caret {
  opacity: 1;
  animation: caret-blink 1s steps(1, end) infinite;
}
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* El botón entra cuando terminó de escribirse la frase. */
.closing-inner .btn {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.closing-section.is-typed .closing-inner .btn { opacity: 1; transform: none; }

/* Sin JS (o con animaciones reducidas) todo se ve de una vez. */
html.no-js .closing-inner .btn,
.no-type .closing-inner .btn { opacity: 1; transform: none; }
.no-type .closing-heading__ghost { visibility: visible; }
.no-type .closing-heading__typed,
.no-type .closing-heading__caret { display: none; }

@media (prefers-reduced-motion: reduce) {
  .crt__lines, .crt__flicker, .crt__band { animation: none; }
  .closing-heading__caret, .closing-heading { animation: none; }
  /* Sin deformación ni saltos: se queda la pantalla quieta. */
  .closing-screen { filter: none; animation: none; }
}
@media (max-width: 760px) {
  /* El desplazamiento por ruido es caro en móvil y a este tamaño casi no se
     aprecia: se conservan grano, banda y aberración, que sí se leen. */
  .closing-screen { filter: none; }
}

@media (max-width: 760px) {
  .closing-inner .btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* ==========================================================================
   What we believe (home)
   ========================================================================== */
.believe-section {
  background: var(--beige);
  /* El beige ocupa toda la pantalla; el contenido queda centrado en vertical. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.believe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.believe-grid__heading { position: relative; }
.believe-title {
  position: relative;
  z-index: 1;
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--red);
  /* --gc es el color del brillo interior: rojo por defecto (sin brillo) y
     cálido al pasar el mouse. Se define aquí y lo heredan las líneas. */
  --gc: var(--red);
  /* flotación sutil y continua */
  animation: believe-float 7s ease-in-out infinite;
  will-change: transform;
}
.believe-title:hover { --gc: var(--red-soft); }
/* Cada línea del título es un bloque independiente para que believe.js pueda
   moverlas por separado (entrada desde lados opuestos, deriva, skew). La luz
   que sigue al cursor se pinta POR LÍNEA: degradado radial recortado a la
   tipografía; --gx/--gy los pone el ratón relativo a cada línea (believe.js). */
.believe-title__line {
  display: block;
  --gx: 50%;
  --gy: 50%;
  background:
    radial-gradient(circle clamp(150px, 17vw, 280px) at var(--gx) var(--gy), var(--gc) 0%, var(--red) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: --gc 0.4s var(--ease);
  will-change: transform;
}
@keyframes believe-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
/* @property permite transicionar suavemente el color del brillo (--gc).
   inherits: true para que el valor puesto en .believe-title (hover) llegue
   a las líneas, que son las que pintan el degradado. */
@property --gc {
  syntax: '<color>';
  inherits: true;
  initial-value: #91001D;
}
@media (prefers-reduced-motion: reduce) {
  .believe-title { animation: none; }
}
.believe-list {
  display: flex;
  flex-direction: column;
  /* Hueco entre ítems ya deja espacio para la descripción, así que ésta
     puede aparecer ahí (posición absoluta) sin empujar nada ni estirar la
     sección: la altura del bloque es SIEMPRE la misma, con o sin hover. */
  /* El hueco tiene que dar para la descripción (2 líneas) + su margen y
     todavía dejar aire antes del siguiente punto; si no, al aparecer se ve
     amontonada contra el ítem de abajo. */
  gap: clamp(5rem, 8.6vw, 7.5rem);
}
.believe-list__item {
  position: relative;
  /* Ancho de la columna de la flecha. Se calcula sobre la escala tipográfica
     y NO en em, para que la descripción (que tiene otro tamaño de letra)
     pueda usar exactamente la misma medida y quedar a plomo con la etiqueta. */
  --bullet: calc(1.9 * var(--step-2));
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--ink);
  cursor: default;
}
.believe-list__row {
  /* Retícula de dos columnas: la flecha siempre ocupa el mismo ancho, así
     TODAS las etiquetas arrancan en la misma vertical (y la descripción,
     con su sangría de 1.9em, cae exactamente bajo ellas). */
  display: grid;
  grid-template-columns: var(--bullet) 1fr;
  align-items: baseline;
  /* al activarse el ítem se recorre un poco a un lado */
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}
/* El giro va en el <i> interno: el <span> lo mueve GSAP con un transform
   inline durante la entrada, y ese inline ganaría siempre sobre el hover. */
.believe-list__arrow {
  font-weight: 400;
  color: var(--ink);
  opacity: 0.75;
  display: inline-block;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.believe-list__arrow i {
  display: inline-block;
  font-style: normal;
  transition: transform 0.45s var(--ease);
}
.believe-list__label { transition: color 0.3s var(--ease); }
/* Descripción: aparece SIN modificar el layout — posicionada absoluta en el
   hueco reservado bajo cada ítem, sólo se desvanece (opacity). No cambia la
   altura de la sección ni mueve el título. */
.believe-list__desc {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.8em;
  padding-left: var(--bullet);
  max-width: 44ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.38rem);
  font-weight: 400;
  line-height: 1.62;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
/* Hover: el ítem pasa de negro a rojo, la flecha gira a ↓ (señala su
   descripción, como en el layout) y el texto aparece debajo. */
.believe-list__item:hover .believe-list__label { color: var(--red); }
.believe-list__item:hover .believe-list__arrow { color: var(--red); opacity: 1; }
/* La flecha apunta hacia abajo, hacia el texto que acaba de aparecer. */
.believe-list__item:hover .believe-list__arrow i { transform: rotate(90deg); }
.believe-list__item:hover .believe-list__row { transform: translateX(0.4em); }
.believe-list__item:hover .believe-list__desc { opacity: 1; }
@media (max-width: 900px) {
  .believe-grid { grid-template-columns: 1fr; }
  .believe-title { font-size: var(--step-4); }
  /* El header es sticky y se pinta encima: si la sección ocupa el alto
     completo y centra su contenido, la primera línea del título queda
     debajo del header. Reservamos su alto arriba. */
  .believe-section { padding-top: calc(var(--header-h) + clamp(1.5rem, 5vw, 3rem)); }
  /* En móvil la descripción va en flujo normal y siempre visible (sin hover). */
  .believe-list { gap: 1.4rem; }
  .believe-list__desc {
    position: static;
    /* Es un <span>: en flujo normal quedaría inline, y entonces padding-left
       sólo afecta al primer renglón (sangría rota) y max-width se ignora.
       Como bloque, la descripción se alinea con la etiqueta de arriba. */
    display: block;
    max-width: none;
    padding-left: var(--bullet);
    line-height: 1.5;
    opacity: 1;
    pointer-events: auto;
    margin-top: 0.35em;
  }
  /* Sin hover en táctil: la etiqueta no debe quedarse desplazada. */
  .believe-list__row { transform: none !important; }
}
@media (max-width: 560px) {
  /* Etiquetas más contenidas para que no partan en tres renglones. */
  .believe-list__item { font-size: var(--step-1); }
  .believe-list__desc { padding-left: var(--bullet); }
}

/* ==========================================================================
   Footer — calcado del layout: marca a la izquierda, tres columnas
   alineadas a la derecha, y el pie con la ubicación y el copyright.
   El enlace de la página actual va en negrita.
   ========================================================================== */
.site-footer {
  background: var(--beige);
  color: var(--red);
}
.site-footer .container { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.site-footer .footer__brand .logo { height: clamp(38px, 2rem + 2vw, 62px); }
.footer__tagline {
  display: block;
  font-size: clamp(0.66rem, 0.6rem + 0.16vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 0.85rem;
}
/* Las tres columnas van alineadas a la derecha, como en el layout. */
.footer-col { text-align: right; min-width: 7rem; }
.site-footer h4 {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red);
  margin-bottom: 1.1rem;
}
.footer-col a {
  display: block;
  padding: 0.22em 0;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--red);
  transition: opacity 0.3s var(--ease);
}
.footer-col a:hover { opacity: 0.6; }
/* La página en la que estás, en negrita. */
.footer-col a[aria-current="page"] { font-weight: 700; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: clamp(3rem, 7vw, 5.5rem);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--red);
}
.footer__bottom span:last-child { text-align: right; }
/* El aviso de privacidad vive aquí abajo: la columna "More" del diseño
   tiene sus tres enlaces y no se toca. */
.footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__bottom a:hover { text-decoration: none; }
@media (max-width: 920px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem 1.5rem;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer-col { text-align: left; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__bottom span:last-child { text-align: left; }
}

/* ==========================================================================
   Formulario de contacto (base, ver overrides .talk-card en contact.html)
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.3rem; }
.field label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.field input, .field textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9em 1.1em;
  font-weight: 300;
  transition: border-color 0.3s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field textarea { resize: vertical; min-height: 140px; }
.form-status { margin-top: 1rem; font-weight: 500; color: var(--green); min-height: 1.4em; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  .loader__iso, .loader__logo { opacity: 1 !important; transform: none !important; }
  .loader__panels span { transition: none !important; }
}

/* ==========================================================================
   Responsive nav
   ========================================================================== */
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  /* IMPORTANTE: sin backdrop-filter en móvil. Un ancestro con backdrop-filter
     se convierte en el bloque contenedor de sus descendientes `position:fixed`,
     así que el cajón del menú quedaba encerrado dentro del header (320×64px)
     en vez de ocupar la pantalla. Aquí el header va con fondo sólido. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cream);
  }
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 360px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6rem;
    padding: 2rem var(--gutter);
    /* deja respirar bajo la barra de estado / notch */
    padding-top: max(2rem, env(safe-area-inset-top));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    background: var(--cream);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
    box-shadow: -30px 0 60px -30px rgba(0,0,0,0.3);
    /* si algún día hay más enlaces de los que caben, se puede desplazar */
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 120;
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a {
    font-size: var(--step-1);
    /* área táctil cómoda (mín. 44px de alto recomendado) */
    display: block;
    padding-block: 0.35rem;
  }
  .nav-lang { margin-top: 0.4rem; }
  body.nav-open { overflow: hidden; }
}

/* ==========================================================================
   Loading screen (cascada de entrada)
   ========================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  /* Red de seguridad: se oculta sola tras 6s aunque falle el JS */
  animation: loaderSafety 0.01s linear 6s forwards;
}
.loader__panels { position: absolute; inset: 0; display: flex; }
.loader__panels span {
  flex: 1 1 0;
  background: var(--cream);
  box-shadow: 0 18px 34px rgba(33, 26, 21, 0.06);
  transform: translateY(0);
  transition: transform 0.7s var(--ease);
}
.loader__mark {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
/* El isotipo se traza de verdad: el contorno se dibuja con
   stroke-dashoffset (de punta a punta) y, cuando termina el recorrido,
   se rellena la forma. Los tiempos de aquí y el MIN_MS del loader en
   script.js van de la mano: la pantalla no se va hasta que el trazo
   terminó. Si tocas una duración, ajusta la otra. */
.loader__iso {
  width: clamp(130px, 20vw, 210px);
  aspect-ratio: 639 / 436;
  display: block;
}
.loader__iso svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.loader__draw {
  fill: none;
  stroke: var(--red);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: isoDraw 1.6s cubic-bezier(0.55, 0.06, 0.3, 0.96) 0.15s forwards;
}
/* El hueco interior de la "a" se dibuja un poco después, para que se lea
   como un solo recorrido y no como dos trazos simultáneos. */
.loader__draw--in { animation-delay: 0.85s; animation-duration: 0.9s; }
.loader__fill {
  fill: var(--red);
  opacity: 0;
  animation: isoFill 0.45s var(--ease) 1.75s forwards;
}
@keyframes isoDraw { to { stroke-dashoffset: 0; } }
@keyframes isoFill { to { opacity: 1; } }
/* Sin movimiento: el isotipo aparece ya dibujado. */
@media (prefers-reduced-motion: reduce) {
  .loader__draw { display: none; }
  .loader__fill { opacity: 1; animation: none; }
}
@keyframes loaderSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Salida en cascada */
.loader.is-exiting .loader__mark { opacity: 0; transform: translateY(-14px); }
.loader.is-exiting .loader__panels span { transform: translateY(-101%); }
.loader.is-exiting .loader__panels span:nth-child(1) { transition-delay: 0.08s; }
.loader.is-exiting .loader__panels span:nth-child(2) { transition-delay: 0.16s; }
.loader.is-exiting .loader__panels span:nth-child(3) { transition-delay: 0.24s; }
.loader.is-exiting .loader__panels span:nth-child(4) { transition-delay: 0.32s; }
.loader.is-exiting .loader__panels span:nth-child(5) { transition-delay: 0.40s; }
.loader.is-hidden { display: none; }
/* Al navegar por clic (no recarga / no primera visita) no se muestra el loader */
html.no-loader .loader { display: none !important; }

/* ==========================================================================
   Grain overlay — textura estática (sin animación: cero costo de repintado)
   ========================================================================== */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/></filter><rect width='250' height='250' filter='url(%23g)'/></svg>");
  background-size: 250px 250px;
}

/* ==========================================================================
   Cursor dot follower
   ========================================================================== */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease),
              opacity 0.4s var(--ease), background 0.3s var(--ease);
  opacity: 0;
  mix-blend-mode: multiply;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-expanded { width: 44px; height: 44px; opacity: 0.22; }
@media (hover: none) { .cursor { display: none !important; } }

/* ==========================================================================
   Cine hero — transición scrubbed hero → galería coverflow (home)
   Layout por defecto = fallback sin JS/GSAP: hero normal + tira horizontal.
   Con html.is-cine (lo añade cine.js) las capas se superponen y ScrollTrigger
   pinea el escenario.
   ========================================================================== */
.cine { position: relative; }
.cine__stage { position: relative; }
/* El scroll suave nativo del navegador (html{scroll-behavior:smooth} en el
   reset) anima/retrasa cada evento de rueda antes de que ScrollTrigger lea
   la posición real — eso es lo que causaba el "pre-scroll" perceptible
   antes de que arrancara el difuminado. Se desactiva mientras el modo cine
   está activo para que el scrub responda al instante, cuadro a cuadro. */
html.is-cine { scroll-behavior: auto; }

/* --- Hero (capa superior) --- */
.cine__hero {
  position: relative;
  z-index: 3;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* En fallback, el velo actúa como fondo del hero */
.cine__veil {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 92svh;
  /* Rediseño: el fondo del hero ya no es rojo. Es el beige del sitio, para
     que arranque plano como en el layout y las fotos emerjan al scrollear. */
  background: linear-gradient(180deg, var(--beige) 0%, var(--beige) 72%, #F0E8DD 100%);
  z-index: 2;
  pointer-events: none;
}

/* --- Galería --- */
.cine__gallery {
  position: relative;
  z-index: 1;
  background: var(--cream);
  display: flex;
  align-items: center;
  overflow-x: auto;              /* fallback: tira desplazable */
  perspective: 1200px;
  scrollbar-width: none;
}
.cine__gallery::-webkit-scrollbar { display: none; }
.cine__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 5vh, 4rem);
  padding-inline: var(--gutter);
  will-change: transform;
}
/* La figura ya no recorta: el redondeo vive en .cine__frame para que la
   ficha de texto pueda salirse por arriba sin quedar cortada. */
.cine__photo {
  position: relative;
  flex: none;
  height: 70vh;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}
.cine__frame {
  display: block;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.35);
}
.cine__photo img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  object-fit: cover;
}
/* Ficha de cada foto: categoría, cliente y año, encima de la imagen. */
.cine__cap {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.55rem);
  display: flex;
  flex-direction: column;
  font-size: clamp(0.6rem, 0.52rem + 0.22vw, 0.75rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}
.cine__cap .cine__year { color: color-mix(in srgb, var(--ink) 62%, transparent); }

/* --- Fondo vivo de la galería ----------------------------------------
   Dos capas de isotipos repetidos que cruzan en direcciones opuestas
   (parallax) y un halo rojo que respira. Todo se anima con transform, así
   que el navegador no repinta nada: solo compone. */
.cine__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Unas cuantas líneas cruzando muy despacio: lo justo para que el fondo no
   quede vacío. Cada capa se corre exactamente un período del patrón, así el
   bucle no tiene salto. El inset negativo esconde los bordes. */
.cine__bg-layer {
  position: absolute;
  inset: -25%;
  will-change: transform;
}
.cine__bg-layer--far {
  background-image: repeating-linear-gradient(90deg,
    rgba(145, 0, 29, 0.14) 0 1px, transparent 1px 260px);
  animation: cine-lines-x 38s linear infinite;
}
.cine__bg-layer--near {
  background-image: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 340px);
  animation: cine-lines-y 54s linear infinite;
}
@keyframes cine-lines-x { to { transform: translateX(260px); } }
@keyframes cine-lines-y { to { transform: translateY(-340px); } }
/* Halo rojo que va y viene por detrás: da temperatura al beige. */
.cine__bg-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(70vw, 820px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(145, 0, 29, 0.07) 0%, rgba(145, 0, 29, 0.03) 42%, transparent 70%);
  animation: cine-orb 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes cine-orb {
  0%, 100% { transform: translate(-14%, -6%) scale(1); }
  50%      { transform: translate(14%, 6%) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .cine__bg-layer, .cine__bg-orb { animation: none; }
}

/* --- Modo cine (activado por JS): capas superpuestas en un escenario ---
   cine.js fija .cine__stage y --cine-photo-h como PÍXELES exactos (no
   svh/calc) calculados a partir de la altura real del header y del
   viewport, para que el centrado sea determinista y ScrollTrigger no
   remida valores inestables entre refrescos. Estas reglas son solo el
   valor por defecto antes de que cine.js corra. */
html.is-cine .cine__stage {
  height: 640px;
  overflow: hidden;
}
html.is-cine .cine__photo {
  height: var(--cine-photo-h, 78vh);
}
html.is-cine .cine__gallery {
  position: absolute;
  inset: 0;
  overflow: visible;
}
html.is-cine .cine__track {
  /* margen para que la primera/última foto puedan quedar centradas */
  padding-inline: 50vw;
}
html.is-cine .cine__veil {
  position: absolute;
  inset: 0;
  height: auto;
}
html.is-cine .cine__hero {
  position: absolute;
  inset: 0;
  min-height: 0;
}

@media (max-width: 760px) {
  .cine__photo { height: 60vh; }
  .cine__hero { min-height: 88svh; }
  .cine__veil { height: 88svh; }
  html.is-cine .cine__hero { min-height: 0; }
  html.is-cine .cine__veil { height: auto; }
}

/* ==========================================================================
   Contact — "let’s built together!" (contact.html)
   Calcado del layout: copy en negro a la izquierda (con "together!" en serif
   itálica), tarjeta roja a la derecha con los campos recortados en beige.
   ========================================================================== */
.talk-section {
  padding-block: clamp(3rem, 6vw, 5.5rem) var(--section-y);
  position: relative;
}
.talk-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.talk-heading {
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.talk-heading__sans {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
}
.talk-heading__serif {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.12em;
  letter-spacing: -0.01em;
  /* La itálica arranca con mucho aire a la izquierda: se compensa para que
     la "t" quede a plomo con las dos líneas de arriba. */
  margin-left: -0.04em;
}
.talk-lead {
  font-size: var(--step-0);
  font-weight: 400;
  max-width: 34ch;
  color: var(--ink);
  line-height: 1.5;
}
.talk-emph {
  font-size: var(--step-1);
  font-weight: 700;
  max-width: 24ch;
  color: var(--red);
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.25;
}

/* wwd.js desactiva el scroll suave global mientras dura el recorrido
   cinematográfico de "What we do" (el mismo ajuste que ya usa el hero:
   con scroll-behavior:smooth activo, el scrub queda a destiempo del
   scroll real y se siente trabado / con retraso). */
html.is-wwd { scroll-behavior: auto; }

.talk-card {
  position: relative;
  color: var(--beige);
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
}
/* El relleno rojo vive en una capa aparte para poder recortarle huecos
   exactos donde están los campos (ver script.js): así cada campo deja ver
   el verdadero beige de la página, no un color simulado. */
.talk-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--red);
  border-radius: inherit;
  pointer-events: none;
}
.talk-card form { position: relative; z-index: 1; }
.talk-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.1rem;
}
.talk-card .field { margin-bottom: 1.05rem; }
.talk-card .field label {
  display: block;
  color: var(--beige);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.5rem;
}
.talk-card .field input,
.talk-card .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.92rem;
  padding: 0.85em 1.3em;
}
.talk-card .field input::placeholder,
.talk-card .field textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 38%, transparent);
}
.talk-card .field input:focus,
.talk-card .field textarea:focus {
  outline: 2px solid var(--beige);
  outline-offset: 3px;
}
.talk-card .field--full textarea {
  min-height: 130px;
  border-radius: 20px;
  resize: vertical;
}
/* Botón del formulario: pill beige con texto oscuro, como en el layout. */
.talk-send {
  margin-top: 0.4rem;
  background: var(--beige);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7em 1.5em;
}
.talk-send:hover { background: #fff; }
.talk-card .form-status { color: var(--beige); margin-top: 0.9rem; }

@media (max-width: 900px) {
  .talk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .talk-fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Páginas simples — legales (términos, aviso de privacidad), shop y 404.
   Calcadas de los PDFs: título display negro en minúsculas sobre el beige
   de la página, y los apartados numerados en rojo. El isotipo de fondo es
   el global (body::before).
   ========================================================================== */
.page-section {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 9vw, 7rem);
}
/* No lleva marca de agua propia: el isotipo de fondo es el global
   (body::before), que ya es el mismo en todas las páginas. */
.page-title {
  font-size: clamp(2.7rem, 8.6vw, 6.4rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--ink);
  max-width: 14ch;
}
.page-updated {
  margin-top: clamp(2rem, 4.5vw, 3.4rem);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 700;
  color: var(--ink);
}

/* Shop y 404 son cortas: se estiran para que el footer no quede flotando
   a media pantalla. */
.page-section--fill {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h, 72px) - 2rem);
}
/* Como ítem flex, el container se encogería al ancho del texto. */
.page-section--fill > .container { flex: 1 1 auto; }

/* --- Cuerpo legal --- */
.legal { max-width: 78ch; }
.legal p {
  margin-top: 0.85rem;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink);
}
.legal__intro { margin-top: 1.4rem; }
.legal h2 {
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  font-size: clamp(1.12rem, 1.5vw, 1.42rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--red);
}
.legal ul {
  margin: 0.9rem 0 0;
  padding-left: 1.3rem;
  list-style: disc;
}
.legal li {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
}
.legal a { color: var(--red); font-weight: 400; }
.legal a:hover { text-decoration: underline; }
.legal__mail {
  display: inline-block;
  margin-top: 1rem;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
}

/* --- Shop: "coming soon" --- */
.page-lead {
  max-width: 46ch;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
}
.page-soon {
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--red);
}

/* --- 404 --- */
.page-section--center { text-align: center; }
.page-section--center .page-title,
.page-section--center .page-lead { max-width: none; margin-inline: auto; }

.page-404 {
  font-size: clamp(5rem, 17vw, 12rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.page-404__msg {
  margin-top: clamp(0.8rem, 2vw, 1.6rem);
  font-size: clamp(1.5rem, 4.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--red);
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: clamp(2rem, 4.5vw, 3.4rem);
}