/* ═══════════════════════════════════════════════════════════════
   ATEREA — Agencia Creativa
   Sistema visual: negro profundo, luz ember, violeta éter.
   Sin dependencias externas: tipografía del sistema, arte vectorial.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --violet: #6A5695;
  --ember: #D1543A;
  --ember-hi: #FF8A3D;
  --magenta: #8E1B4B;
  --magenta-deep: #6E1339;
  --blue: #3D6BFF;
  --black: #070707;
  --carbon: #171717;
  --white: #FFFBF2;

  --sans: 'Inter Tight', 'Inter', 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { background: var(--black); }

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sans);
  color: var(--white);
  background: var(--black);
  overflow-x: hidden;
}

::selection { background: var(--ember); color: var(--white); }

/* ── Tipografía base ─────────────────────────────────────────── */
.eyebrow {
  font-size: clamp(9px, .78vw, 11px);
  letter-spacing: .38em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 251, 242, .62);
  margin: 0 0 clamp(18px, 2.4vw, 30px);
}
.eyebrow--ink { color: rgba(23, 23, 23, .5); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font: inherit;
  font-size: clamp(11px, .92vw, 13px);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 1.05em 2.1em;
  border-radius: 999px;
  border: 1px solid rgba(255, 251, 242, .35);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
  transition: background .5s var(--ease), color .5s var(--ease),
              border-color .5s var(--ease), transform .5s var(--ease);
}
.btn:hover { background: var(--white); color: var(--black); border-color: var(--white); transform: translateY(-2px); }

.btn--ember {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--white);
  box-shadow: 0 18px 50px -18px rgba(209, 84, 58, .8);
}
.btn--ember:hover { background: #b8422b; border-color: #b8422b; color: var(--white); }

/* ── Navbar ──────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 4vw, 62px);
  mix-blend-mode: normal;
  will-change: opacity, filter, transform;
}
/* Velo difuminado bajo la barra: sobre la película no hace falta —el
   metraje ya es oscuro y taparlo lo estropea—, así que solo aparece
   cuando hay una sección de contenido pasando por debajo. Va absoluto
   para no convertirse en un hijo más del flex. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 -22px 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  background: linear-gradient(180deg, rgba(7, 7, 7, .74) 0%, rgba(7, 7, 7, .46) 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  transition: opacity .5s var(--ease);
}
.nav--solid::before { opacity: 1; }
/* Sobre fondo claro el velo se aclara, o la tinta no se leería. */
.nav--ink::before {
  background: linear-gradient(180deg, rgba(255, 251, 242, .8) 0%, rgba(255, 251, 242, .5) 58%, transparent 100%);
}
.nav-logo {
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--white);
  text-decoration: none;
  margin-right: auto;
}
.nav-links { display: flex; gap: clamp(18px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.nav-links a, .nav-cta {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* Óvalo con aura: el contorno y el halo comparten el mismo color,
     así el botón parece encendido y no dibujado. */
  padding: .68em 1.25em;
  border-radius: 999px;
  border: 1px solid var(--nav-line, rgba(209, 84, 58, .42));
  color: rgba(255, 251, 242, .82);
  background: var(--nav-fill, rgba(209, 84, 58, .05));
  box-shadow:
    0 0 20px -6px var(--nav-glow, rgba(209, 84, 58, .55)),
    inset 0 0 14px -8px var(--nav-glow, rgba(209, 84, 58, .6));
  transition:
    color .4s var(--ease),
    border-color .4s var(--ease),
    background .4s var(--ease),
    box-shadow .55s var(--ease);
}
.nav-links a:hover, .nav-cta:hover {
  color: var(--white);
  border-color: var(--nav-glow, rgba(209, 84, 58, .9));
  background: var(--nav-fill-hi, rgba(209, 84, 58, .16));
  box-shadow:
    0 0 26px -4px var(--nav-glow, rgba(209, 84, 58, .8)),
    inset 0 0 18px -8px var(--nav-glow, rgba(209, 84, 58, .9));
}
/* Destello al presionar: entra de golpe y se apaga con calma. */
.nav-links a:active, .nav-cta:active {
  color: #fff;
  background: var(--nav-fill-hi, rgba(209, 84, 58, .3));
  box-shadow:
    0 0 0 4px var(--nav-ring, rgba(255, 170, 110, .3)),
    0 0 46px 2px var(--nav-glow, rgba(209, 84, 58, 1)),
    inset 0 0 26px -6px var(--nav-glow, rgba(255, 190, 140, .9));
  transition-duration: 0s;
}
.nav-links a:focus-visible, .nav-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nav-ring, rgba(255, 170, 110, .45));
}

/* Hablemos, en rosa */
.nav-cta {
  --nav-line: rgba(179, 36, 122, .6);
  --nav-glow: rgba(179, 36, 122, .85);
  --nav-fill: rgba(179, 36, 122, .08);
  --nav-fill-hi: rgba(179, 36, 122, .22);
  --nav-ring: rgba(255, 140, 200, .35);
  color: #FFD6EC;
}
.nav-cta:hover { color: #fff; }

.nav--ink .nav-logo { color: var(--carbon); }
.nav--ink .nav-links a { color: rgba(23, 23, 23, .74); }
.nav--ink .nav-links a:hover { color: var(--carbon); }
.nav--ink .nav-cta { color: #8E1B4B; }

@media (max-width: 720px) { .nav-links { display: none; } }

/* ── La película (pin fijo) ──────────────────────────────────── */
.film {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  will-change: opacity;
  background: var(--black);
}
.film-bg {
  position: absolute;
  inset: 0;
  /* Tono base de todo el sitio. .afterfilm repite exactamente estas
     mismas capas, ancladas al viewport, para que el empalme entre la
     película y el resto de la página no se vea. */
  background:
    radial-gradient(120% 90% at 78% 42%, rgba(209, 84, 58, .10), transparent 62%),
    radial-gradient(95% 75% at 16% 80%, rgba(106, 86, 149, .10), transparent 66%),
    var(--black);
}
/* Lo que dura la película: el reparto está en T, de scroll.js. */
.film-scroll { height: 1200vh; }

/* — metraje cuadro a cuadro — */
.strip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  will-change: opacity;
  filter: saturate(1.06) contrast(1.06);
}
/* Lleva el neón final del metraje a la paleta Aterea sin apagarlo. */
.strip-grade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: color;
  background: linear-gradient(118deg, #D1543A 0%, #8E1B4B 46%, #6A5695 100%);
}

/* — isotipo 3D: la otra apertura — */
/* Composición centrada: el logo arriba con su resplandor y el copy
   debajo, en eje. Va bajo el copy (.hero está en z-index 20) y no
   intercepta el cursor. */
/* El cuadro se reparte en dos: el logo ocupa la franja de arriba y el
   copy la de abajo, sin tocarse. Si el isotipo crece, hay que bajarle el
   `top` en la misma medida o el titular se le mete encima. */
/* ── La tinta ────────────────────────────────────────────────
   El fondo de la apertura: una simulación de fluidos a pantalla
   completa (src/Fluido.jsx). Va sobre .film-bg y bajo el isotipo, que
   está en z-index 10. No intercepta el cursor: el movimiento del ratón
   lo escucha el componente en la ventana, no en el lienzo. */
.fluido {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.logo3d-stage {
  position: absolute;
  left: 50%;
  top: 29%;
  transform: translate(-50%, -50%);
  width: min(42vh, 58vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  z-index: 10;
  pointer-events: none;
}

.logo3d-halo {
  position: absolute;
  width: min(300%, 88vw);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .9;
  /* Tope en vw: el halo escala con el logo y en un móvil se saldría del
     ancho, que es lo que ensanchaba el documento en el manifiesto. */
  filter: blur(52px);
  background: radial-gradient(closest-side,
    rgba(255, 214, 168, .5) 0%,
    rgba(209, 84, 58, .38) 32%,
    rgba(142, 27, 75, .2) 56%,
    rgba(106, 86, 149, .12) 74%,
    transparent 88%);
}

.logo3d {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  /* Sin filtro. La sombra proyectada —que lo asienta sobre el fondo— la
     pone ahora .logo3d-shade, un degradado quieto detrás. El drop-shadow
     vivía aquí, sobre un lienzo que se repinta ciento veinte veces
     durante el giro, y cada repintado obligaba a desenfocar la silueta
     entera otra vez: era lo más caro de la apertura.

     La variable sigue mandando —el portal la pone en 'none' al empezar
     el acercamiento, cuando a veinte aumentos un desenfoque de 70 px
     pasaría a medir más de mil—, solo que ahora su valor por defecto es
     no tener filtro en vez de tenerlo. */
  filter: var(--logo3d-shadow, none);
  /* Se agranda por el centro del hueco del triángulo —el punto por el que
     entra la cámara—, con la misma escala que el portal. El halo queda
     fuera a propósito: es la luz del estudio, no viaja con el objeto. */
  transform-origin: 55.17% 47.2%;
  transform: scale(var(--portal-k, 1));
  will-change: transform;
}

/* ── La sombra de la A ───────────────────────────────────────
   Un degradado quieto detrás del isotipo, en lugar del drop-shadow que
   llevaba el lienzo. A 70 px de desenfoque aquella sombra era ya una
   mancha difusa, y la mancha se ve igual sin que nadie la recalcule
   ciento veinte veces durante el giro.

   Va en porcentaje del escenario, así que acompaña al isotipo en
   cualquier tamaño de ventana. Se apaga al empezar el acercamiento
   —lo hace LogoStrip, en el mismo punto en que el portal apagaba el
   drop-shadow—: la A crece y esto no, y quieta se leería como una
   mancha pegada al fondo. */
.logo3d-shade {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 46%;
  transform: translate(-50%, -34%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(0, 0, 0, .55) 0%,
    rgba(0, 0, 0, .30) 42%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* ── El portal: la escena siguiente vista por el hueco de la A ──
   Ocupa la ventana entera y va recortada con la silueta del agujero.
   Lo que crece es el recorte; el hijo se contra-escala para que el
   contenido no se estire. Ambas transformaciones son de GPU. */
.portal {
  position: absolute;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  opacity: 0;
  /* Nada de will-change: transform. La escena no se transforma —solo se
     recorta—, y pedir una capa aquí es justo lo que hacía que el
     navegador la dibujara a la escala equivocada. */
  will-change: opacity, clip-path;
}
/* El otro lado. Mismo mundo que la película pero con la luz un punto más
   alta: lo justo para que el borde del hueco se distinga del fondo. */
/* La aurora va sobre el fondo plano del portal y bajo el carrusel, que
   tiene z-index propio. Si no hay WebGL se queda transparente y debajo
   sigue estando el fondo de siempre. */
.aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* La perilla del volumen: bájala si el aspa le compite al texto. */
  opacity: .9;
  pointer-events: none;
}

.portal-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 52% 38%, rgba(209, 84, 58, .22) 0%, rgba(70, 22, 40, .12) 42%, transparent 72%),
    #120a10;
}

/* El copy baja al pie y se centra bajo el logo. */
.film--logo .hero {
  left: 50%;
  right: auto;
  top: auto;
  bottom: clamp(72px, 12vh, 150px);
  max-width: min(860px, 88vw);
  text-align: center;
  transform: translateX(-50%) translate3d(0, var(--hero-y, 0px), 0);
}
/* El titular manda en la apertura: crece hasta la escala del manifiesto
   y se compone por letras, así que es una caja flexible centrada. */
.film--logo .hero-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: clamp(34px, 6.2vw, 96px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0 0 clamp(22px, 2.4vw, 34px);
}
.film--logo .hero-sub {
  margin: 0 auto clamp(20px, 2vw, 30px);
}
/* El botón llega al final del escrito; hasta entonces no está ni visible
   ni accesible al ratón. */
.hero-cta { opacity: 0; will-change: opacity, transform; }
/* Cada palabra es una pieza indivisible: dentro van sus letras, y el
   titular solo puede romper renglón entre palabras. */
.mw { display: inline-flex; white-space: pre; }
@media (prefers-reduced-motion: reduce) {
  .hero-cta {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

@media (max-width: 900px) {
.logo3d-stage { top: 26%; width: min(36vh, 74vw); }
  .film--logo .hero {
    left: 50%;
    right: auto;
    bottom: clamp(64px, 11vh, 120px);
    transform: translateX(-50%) translate3d(0, var(--hero-y, 0px), 0);
  }
  .film--logo .hero-h { font-size: clamp(28px, 7.4vw, 46px); }
}

/* — retrato (versión vectorial, en desuso desde el metraje) — */
.stage {
  position: absolute;
  top: -5vh;
  left: 50%;
  height: 110vh;
  width: calc(110vh * (1000 / 1200));
  transform-origin: 50% 40%;
  will-change: transform;
  margin-left: calc(-110vh * (1000 / 1200) / 2);
}
@media (min-width: 900px) { .stage { left: 66%; } }
.stage-inner { width: 100%; height: 100%; will-change: opacity, filter; }
.portrait { width: 100%; height: 100%; display: block; }
.p-reveal, .p-features { will-change: opacity; }

.fog { animation: drift 22s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.fog-b { animation-duration: 30s; animation-delay: -6s; }
.fog-c { animation-duration: 26s; animation-delay: -12s; }
@keyframes drift {
  from { transform: translate(-2%, 1%) scale(1); }
  to   { transform: translate(3%, -2%) scale(1.08); }
}

/* — primer plano del ojo — */
.eye-wrap {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 160vw;
  height: 100vh;
  transform: translate3d(-50%, -50%, 0) scale(.34);
  opacity: 0;
  will-change: transform, opacity, filter;
}
.eye { width: 100%; height: 100%; display: block; }

/* — túnel — */
.tunnel {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}
.tunnel-core {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 38% at 50% 50%, #000 0%, #000 42%, rgba(7, 7, 7, .2) 70%, transparent 100%),
    radial-gradient(70% 70% at 50% 50%, rgba(209, 84, 58, .16), transparent 68%),
    #050505;
}
.tunnel-rays {
  --R: 20vmax;
  --st: 1;
  --rot: 0deg;
  --sc: 1;
  position: absolute;
  inset: 0;
  transform: rotate(var(--rot)) scale(var(--sc));
  will-change: transform, filter;
  mix-blend-mode: screen;
}
.ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: var(--len);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--len) * -1);
  opacity: var(--o);
  border-radius: 999px;
  transform-origin: 50% 100%;
  transform: rotate(var(--a)) translateY(calc(var(--d) * var(--R) * -1)) scaleY(var(--st));
}
.mote {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sz);
  height: var(--sz);
  margin-left: calc(var(--sz) / -2);
  margin-top: calc(var(--sz) / -2);
  border-radius: 50%;
  background: #FFE3BD;
  opacity: var(--o);
  transform: rotate(var(--a)) translateY(calc(var(--d) * var(--R) * -.8));
}
.iris-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vh, 78vw);
  height: min(78vh, 78vw);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1);
  opacity: 0;
  border: 1px solid rgba(209, 84, 58, .28);
  box-shadow:
    0 0 120px 10px rgba(209, 84, 58, .16) inset,
    0 0 160px 20px rgba(106, 86, 149, .16);
  will-change: transform, opacity;
}

/* — viñeta y grano — */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 85% at 62% 46%, transparent 38%, rgba(0, 0, 0, .55) 82%, #000 100%);
}
.grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ── Escena 01 · copy ────────────────────────────────────────── */
.hero {
  position: absolute;
  left: clamp(20px, 6vw, 96px);
  top: 50%;
  /* El centrado vive aquí; el scroll solo aporta --hero-y, así nunca
     puede borrar el -50% al reescribir la transformación desde JS. */
  transform: translateY(-50%) translate3d(0, var(--hero-y, 0px), 0);
  max-width: min(560px, 46vw);
  z-index: 20;
  will-change: opacity, transform;
}
.hero-h {
  font-size: clamp(38px, 4.6vw, 76px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 600;
  margin: 0 0 clamp(20px, 2vw, 30px);
}
.hero-h em {
  font-style: normal;
  background: linear-gradient(96deg, var(--ember) 0%, var(--ember-hi) 46%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(14px, 1.12vw, 17px);
  line-height: 1.62;
  color: rgba(255, 251, 242, .66);
  max-width: 40ch;
  margin: 0 0 clamp(28px, 2.6vw, 40px);
  font-weight: 300;
}

.cue {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 3vw, 40px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, .42);
  z-index: 20;
  white-space: nowrap;
}
.cue-line {
  width: 46px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 251, 242, .7));
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue { 0%, 100% { transform: scaleX(.4); opacity: .4 } 50% { transform: scaleX(1); opacity: 1 } }

/* ── Escena 03 · frase ───────────────────────────────────────── */
.phrase {
  position: absolute;
  left: 50%;
  top: 76%;
  transform: translate3d(-50%, -50%, 0);
  margin: 0;
  z-index: 40;
  opacity: 0;
  text-align: center;
  width: min(94vw, 1640px);
  font-size: clamp(32px, 4.9vw, 88px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 300;
  color: var(--white);
  text-shadow: 0 0 60px rgba(0, 0, 0, .8);
  pointer-events: none;
}

/* ── Velo blanco ─────────────────────────────────────────────── */
.veil {
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0;
  z-index: 44;
  pointer-events: none;
}

/* ── Escena 05 · carrusel ────────────────────────────────────── */
.carousel {
  position: absolute;
  inset: 0;
  z-index: 50;
  opacity: 0;
  display: grid;
  place-items: center;
  will-change: opacity;
}
.carousel-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 55%, rgba(209, 84, 58, .55), transparent 70%);
  opacity: .3;
  pointer-events: none;
}

.carousel-intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
  width: min(92vw, 900px);
  z-index: 4;
  pointer-events: none;
}
.carousel-title {
  margin: 0 0 clamp(18px, 2vw, 28px);
  display: grid;
  gap: .02em;
  font-size: clamp(46px, 9.5vw, 148px);
  line-height: .88;
  letter-spacing: -.05em;
  font-weight: 300;
}
.t-magenta { color: var(--magenta); font-weight: 600; }
.t-white { color: var(--white); }
.carousel-sub {
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255, 251, 242, .6);
}

/* — Carpetas: una caja estable, apertura solo en la superficie — */
.service-stage {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 88px 0 108px;
  opacity: 0;
}
.service-deck {
  position: relative;
  display: grid;
  width: min(1120px, 88vw);
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.service-deck:active { cursor: grabbing; }

/* Dos hojas de fondo, siempre en la misma posición. */
.service-back {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: var(--folder-color);
  pointer-events: none;
}
.service-back::before {
  content: '';
  position: absolute;
  top: -30px;
  width: 32%;
  height: 34px;
  background: inherit;
  border-radius: 40px 40px 0 0;
}
.service-back--far { transform: translateY(-28px) scaleX(.92); opacity: .32; }
.service-back--far::before { left: 9%; }
.service-back--near { transform: translateY(-14px) scaleX(.96); opacity: .6; }
.service-back--near::before { left: 36%; }

.service-card {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  min-width: 0;
  min-height: 300px;
  padding: 36px 42px;
  gap: 24px;
  color: var(--folder-ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.service-card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition-delay: 0s;
}
.service-card__surface {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), transparent 55%, rgba(0,0,0,.12)), var(--folder-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 18px 40px -26px rgba(0,0,0,.75);
  transform: scaleY(.38);
  transform-origin: center top;
  transition: transform .48s cubic-bezier(.2, .7, .25, 1);
  pointer-events: none;
}
.service-card.is-active .service-card__surface { transform: scaleY(1); }
.service-tab {
  position: absolute;
  top: -36px;
  width: 32%;
  height: 40px;
  border-radius: 48px 48px 0 0;
  background: var(--folder-color);
  pointer-events: none;
}
.service-tab--left { left: 7%; }
.service-tab--center { left: 34%; }
.service-tab--right { right: 7%; }
.service-card__head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 20px;
  min-width: 0;
}
.service-card__number {
  flex: none;
  font-size: 12px;
  letter-spacing: .18em;
  opacity: .62;
  font-variant-numeric: tabular-nums;
}
.service-card__title {
  margin: 0;
  min-width: 0;
  font-size: clamp(26px, 3.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.service-card__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-content: start;
  align-items: center;
  gap: 32px;
  opacity: 0;
  transition: opacity .18s ease;
}
.service-card.is-active .service-card__body {
  opacity: 1;
  transition: opacity .28s ease .14s;
}
.service-card__copy { min-width: 0; max-width: 54ch; }
.service-card__desc {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  opacity: .9;
}
.service-card__micro {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .68;
}
.service-card__art { width: 180px; opacity: .4; }
.band-art { width: 100%; height: auto; display: block; }

.service-controls {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  z-index: 20;
  opacity: 0;
}
.service-counter {
  min-width: 76px;
  font-size: 12px;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  color: rgba(255,251,242,.8);
  text-align: center;
}
.service-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,251,242,.32);
  background: rgba(7,7,7,.45);
  color: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .18s ease, opacity .18s ease;
}
.service-arrow:disabled { opacity: .28; cursor: default; }
.service-arrow:focus-visible { outline: 2px solid var(--white); outline-offset: 5px; }
.service-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .service-arrow:hover:not(:disabled) { background: rgba(209,84,58,.45); }
}
@media (max-width: 900px) {
  .service-deck { width: calc(100% - 32px); max-width: 660px; }
  .service-card { min-height: 280px; padding: 28px; }
  .service-card__body { grid-template-columns: minmax(0, 1fr); }
  .service-card__art { display: none; }
}
@media (max-width: 520px) {
  .service-stage { padding: 72px 0 104px; }
  .service-deck { width: calc(100% - 32px); }
  .service-card { min-height: 296px; padding: 26px 22px; gap: 24px; }
  .service-card__head { gap: 12px; }
  .service-card__title { font-size: clamp(20px, 5.3vw, 27px); letter-spacing: -.045em; }
  .service-card__surface, .service-back { border-radius: 22px; }
  .service-tab { top: -28px; height: 32px; width: 38%; border-radius: 32px 32px 0 0; }
  .service-tab--center { left: 31%; }
  .service-back::before { top: -24px; height: 28px; }
  .service-card__micro { letter-spacing: .1em; }
  .service-controls { bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (max-height: 540px) and (min-width: 521px) {
  .service-stage { padding: 68px 0 72px; }
  .service-card { min-height: 0; padding: 20px 28px; gap: 14px; }
  .service-card__title { font-size: 28px; }
  .service-card__desc { margin-bottom: 12px; }
  .service-card__micro { font-size: 12px; }
  .service-controls { bottom: 12px; }
  .service-arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card__surface, .service-card__body,
  .service-card.is-active .service-card__body, .service-arrow { transition: none; }
  .service-card__surface { transform: none; }
}

/* ── Escena 06 · cierre ──────────────────────────────────────── */
.outro {
  position: relative;
  z-index: 100;
  background: var(--white);
  color: var(--carbon);
  padding: clamp(80px, 12vw, 180px) clamp(20px, 6vw, 110px) clamp(40px, 5vw, 70px);
}
.outro-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(209, 84, 58, .18), transparent 70%);
}
.outro-block { max-width: 1280px; margin: 0 auto clamp(90px, 14vw, 200px); position: relative; }
.outro-h {
  font-size: clamp(30px, 4.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0 0 clamp(28px, 3vw, 44px);
  max-width: 20ch;
}
.outro-h--xl { font-size: clamp(34px, 6vw, 104px); font-weight: 600; }
.outro-block--final { text-align: left; }
.outro-sub {
  font-size: clamp(14px, 1.2vw, 19px);
  color: rgba(23, 23, 23, .56);
  font-weight: 300;
  margin: 0 0 clamp(28px, 3vw, 44px);
}

.footer {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: clamp(40px, 5vw, 70px);
  border-top: 1px solid rgba(23, 23, 23, .12);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.footer-brand { font-size: clamp(44px, 9vw, 140px); font-weight: 600; letter-spacing: -.055em; line-height: .8; }
.footer-cols { display: flex; gap: clamp(30px, 5vw, 80px); }
.footer-cols div { display: grid; gap: .7em; align-content: start; }
.footer-cols span {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(23, 23, 23, .42);
}
.footer-cols a {
  font-size: 13px; color: rgba(23, 23, 23, .78); text-decoration: none;
  transition: color .35s var(--ease);
}
.footer-cols a:hover { color: var(--ember); }
.footer-legal {
  grid-column: 1 / -1;
  margin: clamp(40px, 6vw, 80px) 0 0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(23, 23, 23, .38);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .stage { height: 88vh; width: calc(88vh * (1000 / 1200)); top: 2vh; margin-left: calc(-88vh * (1000 / 1200) / 2); left: 50%; }
  .hero {
    left: 22px; right: 22px; top: auto; bottom: clamp(90px, 18vh, 190px);
    transform: translate3d(0, var(--hero-y, 0px), 0); max-width: none;
  }
  .hero-h { font-size: clamp(36px, 10vw, 62px); }
  .hero-sub { max-width: 34ch; }
  .eye-wrap { width: 260vw; }
  .footer { grid-template-columns: 1fr; }
  .footer-cols { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .carousel-title { font-size: clamp(38px, 13vw, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .cue-line, .fog { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Luz atmosférica (fuera del SVG: no debe hacer zoom) ─────── */
.atmo { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
.atmo i { position: absolute; display: block; border-radius: 50%; }
.atmo-key {
  right: -6vw; top: 6vh; width: 62vw; height: 78vh;
  background: radial-gradient(closest-side, rgba(255, 200, 140, .95), rgba(255, 138, 61, .55) 34%, rgba(209, 84, 58, .26) 58%, transparent 78%);
  filter: blur(30px);
}
.atmo-warm {
  right: 6vw; top: 20vh; width: 26vw; height: 34vh;
  background: radial-gradient(closest-side, rgba(255, 226, 180, .9), transparent 72%);
  filter: blur(24px);
}
.atmo-violet {
  left: 4vw; bottom: -14vh; width: 54vw; height: 62vh;
  background: radial-gradient(closest-side, rgba(106, 86, 149, .5), transparent 72%);
  filter: blur(60px);
}
.atmo-fog {
  width: 70vw; height: 42vh;
  filter: blur(70px);
  mix-blend-mode: screen;
}
.atmo-fog--a {
  left: 8vw; bottom: 2vh;
  background: radial-gradient(closest-side, rgba(209, 84, 58, .3), transparent 72%);
  animation: drift 24s ease-in-out infinite alternate;
}
.atmo-fog--b {
  right: 2vw; top: 34vh; width: 52vw; height: 50vh;
  background: radial-gradient(closest-side, rgba(255, 154, 74, .22), transparent 72%);
  animation: drift 32s ease-in-out infinite alternate-reverse;
}
@media (max-width: 900px) {
  .atmo-key { right: -14vw; top: 2vh; width: 96vw; height: 60vh; }
  .atmo-violet { bottom: -6vh; width: 90vw; }
}

/* Ajustes de encuadre del copy de apertura */
/* Titular de apertura: manda en la composición, así que crece y se le
   da ancho para que no se rompa en demasiadas líneas. */
.hero { max-width: min(760px, 50vw); }
.hero-h { font-size: clamp(38px, 5.4vw, 96px); }
.hero-sub { font-size: clamp(15px, 1.25vw, 19px); max-width: 42ch; }
@media (max-width: 900px) { .hero { max-width: none; } }

/* Piel a pantalla completa detrás del primer plano del ojo:
   evita cualquier borde recto del SVG durante el relevo. */
.eye-skin {
  position: absolute;
  inset: -10%;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  background:
    radial-gradient(72% 62% at 40% 42%, rgba(232, 139, 78, .95), rgba(192, 90, 44, .9) 42%, rgba(92, 32, 17, .95) 76%, #170807 100%),
    #170807;
}

/* Etiquetaje de color del primer plano: la clave ember entra por la
   derecha y el lado izquierdo cae a negro. Va sobre el SVG, a pantalla
   completa, para que nunca aparezca un borde. */
.eye-grade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 12;
  background:
    linear-gradient(102deg, rgba(8, 3, 2, .92) 0%, rgba(12, 5, 3, .55) 34%, rgba(20, 8, 5, .12) 62%, transparent 82%),
    radial-gradient(78% 70% at 72% 34%, rgba(255, 170, 90, .22), transparent 66%),
    radial-gradient(120% 90% at 50% 50%, transparent 34%, rgba(0, 0, 0, .55) 86%, #000 100%);
}
.phrase { text-shadow: 0 2px 40px rgba(0, 0, 0, .95), 0 0 90px rgba(0, 0, 0, .9); }

/* Scrim de apertura: sostiene la legibilidad del copy sobre el metraje
   sin apagar la escena. Sigue la misma curva que el texto. */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(7, 7, 7, .94) 0%,
    rgba(7, 7, 7, .72) 34%,
    rgba(7, 7, 7, .2) 66%,
    transparent 88%
  );
}
@media (min-width: 901px) {
  .scrim {
    background: linear-gradient(
      100deg,
      rgba(7, 7, 7, .92) 0%,
      rgba(7, 7, 7, .66) 26%,
      rgba(7, 7, 7, .18) 50%,
      transparent 72%
    );
  }
}

/* ═══════════════════════════════════════════════════════════════
   Secciones posteriores a la película
   ═══════════════════════════════════════════════════════════════ */

/* Entradas: lentas, con desenfoque y desplazamiento mínimo. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(10px);
  transition:
    opacity 1.15s var(--ease) var(--d, 0ms),
    transform 1.25s var(--ease) var(--d, 0ms),
    filter 1.15s var(--ease) var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── 04 · Proyectos ──────────────────────────────────────────── */
.projects {
  position: relative;
  z-index: 100;
  background: transparent;
  color: var(--white);
  padding: clamp(90px, 12vw, 190px) clamp(20px, 6vw, 110px) clamp(70px, 10vw, 150px);
  overflow: hidden;
}
.projects-head { max-width: 1280px; margin: 0 auto clamp(50px, 8vw, 120px); }
.projects-h {
  font-size: clamp(30px, 5vw, 82px);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0 0 clamp(18px, 2vw, 30px);
  max-width: 17ch;
}
.projects-sub {
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255, 251, 242, .58);
  max-width: 46ch;
  margin: 0;
}

/* Rejilla asimétrica: cada pieza ocupa columnas distintas y se
   desfasa en vertical para que nada quede alineado por accidente. */
/* ── Proyectos · dos cintas infinitas ─────────────────────────── */
.marquee {
  display: grid;
  gap: clamp(18px, 2.4vw, 40px);
  /* Rompe el ancho del contenedor: las cintas van de borde a borde. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.mq-row {
  overflow: hidden;
  /* Las piezas nacen y mueren difuminadas en los bordes: sin esto la
     cinta parece cortada con tijera. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.mq-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: clamp(26px, 3vw, 44px) 0;
  will-change: transform;
}
.mq-track--left  { animation: mq-left 54s linear infinite; }
.mq-track--right { animation: mq-right 62s linear infinite; }
@keyframes mq-left  { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(-50%, 0, 0); } }
@keyframes mq-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* Al posar el cursor la cinta se detiene: si algo te interesa, puedes mirarlo. */
@media (hover: hover) and (pointer: fine) {
  .mq-row:hover .mq-track { animation-play-state: paused; }
}

.mq-item {
  flex: none;
  display: block;
  /* El hueco va aquí y no en `gap`: cada pieza mide ancho+hueco, así la
     mitad del recorrido es un número exacto de piezas y no hay costura. */
  margin-right: clamp(30px, 4vw, 76px);
  text-decoration: none;
  color: inherit;
}
.mq-item:focus-visible { outline: 1px solid rgba(255, 251, 242, .55); outline-offset: 10px; border-radius: 10px; }

/* El flote es independiente del avance de la cinta: cada pieza lleva su
   propio compás mediante el retardo. */
.mq-float {
  position: relative;
  display: block;
  animation: mq-bob 6.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes mq-bob {
  0%, 100% { transform: translate3d(0, -9px, 0); }
  50%      { transform: translate3d(0, 11px, 0); }
}

.mq-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 128%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(38px);
  opacity: .72;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(209, 84, 58, .38), rgba(106, 86, 149, .22) 52%, transparent 76%);
  transition: opacity .5s var(--ease), transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.mq-shot {
  position: relative;
  display: block;
  height: var(--h, 240px);
  width: auto;
  max-width: 46vw;
  object-fit: contain;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .7));
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.mq-item:hover .mq-shot { transform: scale(1.06); }
.mq-item:hover .mq-halo { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }

.mq-cap {
  display: block;
  margin-top: clamp(12px, 1.4vw, 20px);
  text-align: center;
}
.mq-name {
  display: block;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: rgba(255, 251, 242, .82);
  transition: color .4s var(--ease);
}
.mq-item:hover .mq-name { color: var(--white); }
.mq-work {
  display: block;
  margin-top: .32em;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, .38);
}
@media (prefers-reduced-motion: reduce) {
  .mq-track, .mq-float { animation: none; }
  .mq-shot, .mq-halo { transition: none; }
}
@media (max-width: 900px) {
  .mq-shot { max-width: 62vw; }
  .mq-track--left  { animation-duration: 34s; }
  .mq-track--right { animation-duration: 40s; }
}
}

/* ── 05 · Paquetes ───────────────────────────────────────────── */
.packages {
  position: relative;
  z-index: 100;
  background: transparent;
  color: var(--white);
  padding: clamp(90px, 12vw, 180px) clamp(20px, 6vw, 110px) clamp(100px, 13vw, 190px);
}
.packages-head { max-width: 1280px; margin: 0 auto clamp(46px, 6vw, 86px); }
.packages-h {
  font-size: clamp(28px, 4.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0;
  max-width: 16ch;
}
.pack-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
}
.pack {
  position: relative;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid rgba(23, 23, 23, .1);
  box-shadow: 0 30px 60px -40px rgba(23, 23, 23, .4);
}
.pack-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(26px, 3vw, 44px);
}
/* Grow: el contorno degradado es el único acento fuerte del bloque. */
.pack--featured {
  background: var(--white);
  border-color: transparent;
  box-shadow: 0 40px 80px -40px rgba(209, 84, 58, .45);
}
.pack--featured::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(140deg, var(--ember) 0%, var(--magenta) 48%, var(--violet) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.pack-badge {
  position: absolute;
  top: 0;
  left: clamp(26px, 3vw, 44px);
  transform: translateY(-50%);
  background: var(--ember);
  color: var(--white);
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: .62em 1.1em;
  border-radius: 999px;
  white-space: nowrap;
}
.pack-name {
  margin: 0 0 .5em;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -.04em;
  font-weight: 600;
}
.pack-claim {
  margin: 0 0 clamp(22px, 2.4vw, 32px);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 300;
  color: rgba(23, 23, 23, .58);
}
.pack-list {
  list-style: none;
  margin: 0 0 clamp(26px, 3vw, 40px);
  padding: 0;
  display: grid;
  gap: .85em;
  flex: 1;
}
.pack-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(23, 23, 23, .8);
}
.pack-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 1.5px;
  background: var(--ember);
}
.btn--ink {
  border-color: rgba(23, 23, 23, .22);
  color: var(--carbon);
  justify-content: center;
}
.btn--ink:hover { background: var(--carbon); color: var(--white); border-color: var(--carbon); }
.pack .btn { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .pack-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ── 06 · Cierre inmersivo ───────────────────────────────────── */
.closing {
  position: relative;
  z-index: 100;
  background: transparent;
  color: var(--white);
  overflow: hidden;
  padding: clamp(120px, 18vw, 260px) clamp(20px, 6vw, 110px) clamp(34px, 4vw, 56px);
}
.orbit {
  position: absolute;
  inset: -12% -6% auto -6%;
  height: 90%;
  pointer-events: none;
}
.orbit-float { width: 100%; height: 100%; will-change: transform; }
.orbit svg { width: 100%; height: 100%; display: block; }
.orbit-line {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: trace 3.4s var(--ease) forwards;
}
.is-in .orbit-line { animation-play-state: running; }
.orbit-line--glow { animation-duration: 3.9s; }
.orbit-line--echo { animation-duration: 4.4s; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .orbit-line { animation: none; stroke-dashoffset: 0; }
}

/* Copy a la izquierda, teléfono a la derecha */
.closing-grid {
  position: relative;
  max-width: 1280px;
  margin: 0 auto clamp(110px, 16vw, 230px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
}
.closing-copy { position: relative; }

/* — teléfono — */
.phone {
  position: relative;
  justify-self: center;
  display: block;
  width: min(380px, 92%);
  perspective: 1600px;
  text-decoration: none;
}
.phone-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(50px);
  background: radial-gradient(closest-side, rgba(209, 84, 58, .3), rgba(106, 86, 149, .22) 52%, transparent 78%);
  pointer-events: none;
}
.phone-float {
  position: relative;
  display: block;
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Portador del giro: las dos caras comparten celda, así la altura la
   marca la mayor y el volteo no descoloca nada. */
.phone-3d {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  will-change: transform;
}
.phone-frame, .phone-back { grid-area: 1 / 1; }
.phone-frame, .phone-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Cara trasera: carcasa lisa con la marca */
.phone-back {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 17.4;
  border-radius: 40px;
  transform: rotateY(180deg);
  background: linear-gradient(152deg, #2E2E34 0%, #191A1E 46%, #0D0D10 100%);
  box-shadow:
    0 60px 110px -50px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 0 1px rgba(255, 251, 242, .08);
}
.phone-lens {
  position: absolute;
  top: 6%;
  left: 8%;
  width: 26%;
  aspect-ratio: 1.15;
  border-radius: 22px;
  background: linear-gradient(150deg, #26262B, #131316);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 18px rgba(0, 0, 0, .6);
}
.phone-mark {
  width: 34%;
  height: auto;
  opacity: .5;
  filter: drop-shadow(0 10px 30px rgba(209, 84, 58, .4));
}
.phone-frame {
  position: relative;
  display: block;
  /* Un punto más alargado que 9:16. La captura entra completa a lo
     alto; solo se recorta un ~5% por lado, fuera de la cuadrícula. */
  aspect-ratio: 9 / 17.4;
  border-radius: 40px;
  overflow: hidden;
  background: linear-gradient(158deg, #34343A 0%, #1B1B1F 44%, #0E0E11 100%);
  padding: 9px;
  box-shadow:
    0 60px 110px -50px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 0 0 1px rgba(255, 251, 242, .08);
  transition: transform .8s var(--ease);
}
.phone:hover .phone-frame { transform: translateY(-8px); }
.phone-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 27%;
  height: 17px;
  border-radius: 0 0 12px 12px;
  background: #0B0B0D;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  z-index: 2;
}
.phone-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 32px;
  background: #FFFBF2;
}

@media (max-width: 900px) {
  /* El teléfono crece y sube con el scroll: el hueco tiene que dejarle
     sitio o se come el botón que tiene encima. */
  .closing-grid { grid-template-columns: 1fr; gap: clamp(74px, 14vw, 110px); }
  .phone { width: min(260px, 68%); order: 2; }
  .closing-copy { order: 1; position: relative; z-index: 3; }
  /* Lo que va por debajo del botón (teléfono, hueco y pie) sumaba más de
     una pantalla, así que al llegar al fondo el botón se quedaba fuera
     de cuadro. Recortando esta cola entra entero. */
  .closing-grid { margin-bottom: 30px; }
  .footer { padding-top: 30px; }
  .footer-legal { margin-top: 26px; }
}
.closing-h {
  font-size: clamp(28px, 4.4vw, 72px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 500;
  margin: 0 0 clamp(30px, 3.4vw, 50px);
  max-width: 22ch;
}
.closing-h em {
  font-style: normal;
  background: linear-gradient(96deg, var(--ember) 0%, var(--ember-hi) 44%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.foot {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid rgba(255, 251, 242, .12);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 50px);
  flex-wrap: wrap;
}
.foot-brand { font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
.foot-links { display: flex; gap: clamp(16px, 2.4vw, 36px); flex-wrap: wrap; }
.foot-links a {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, .62);
  text-decoration: none;
  transition: color .35s var(--ease);
}
.foot-links a:hover { color: var(--ember-hi); }
.foot-legal {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, .32);
}

/* ═══════════════════════════════════════════════════════════════
   Continuidad tras los servicios
   Manifiesto, proyectos, paquetes y cierre comparten un mismo
   degradado Aterea: la película no cambia de atmósfera al terminar.
   ═══════════════════════════════════════════════════════════════ */
.afterfilm {
  position: relative;
  z-index: 100;
  isolation: isolate;
  /* Solapa la cola de la película: el manifiesto empieza a
     entrar mientras el carrusel termina de salir (compensado con los 62vh de
     `padding-top` del manifiesto). Sin ese solape reaparece un viewport en
     negro entre servicios y manifiesto. */
  margin-top: -70vh;
  /* Mismas capas que .film-bg y ancladas al viewport (igual que la
     película, que es fixed): a ambos lados del empalme se pinta
     exactamente el mismo píxel, así que no hay corte visible. */
  background:
    radial-gradient(120% 90% at 78% 42%, rgba(209, 84, 58, .10), transparent 62%),
    radial-gradient(95% 75% at 16% 80%, rgba(106, 86, 149, .10), transparent 66%),
    #070707;
  background-attachment: fixed, fixed, fixed;
}

.afterfilm::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}
.afterfilm > * { position: relative; z-index: 1; }

/* Compensa el solape de -70vh: el fondo sigue montado sobre la cola de la
   película —eso es lo que evita el viewport en negro— pero el contenido
   arranca donde la película termina.

   Va en una pieza vacía a propósito. Estuvo un rato como padding de la
   primera sección y eso rompía su animación: las secciones se dibujan
   midiendo su propia caja contra la ventana, así que el relleno les
   adelantaba la cuenta esa misma distancia y el contenido aparecía ya
   terminado.

   30vh, no 70. El solape de .afterfilm es de 70vh, pero no hay que
   compensarlo entero: la parte de abajo la tapa el contenido de la
   primera sección según va entrando. Con 70 vacíos, este bloque cubre
   la película sin nada dentro y se ve un viewport en blanco.

   Es el mismo número que usaba el manifiesto cuando iba primero. Bajarlo
   más deja menos hueco, pero la primera sección empieza a animarse antes
   —todavía con la película encima— y se pierde parte del dibujado. */
.afterfilm-lead { height: 30vh; pointer-events: none; }

/* Escrito letra a letra. Nació con el manifiesto; hoy lo usa el titular
   del hero, que es el que quedó con la frase. */
.mc {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.mc--space { opacity: 1; width: .26em; }

@media (prefers-reduced-motion: reduce) {
  .mc {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}


/* ── Paquetes en vidrio ──────────────────────────────────────── */
.packages-h, .projects-h { color: var(--white); }

.pack-grid { perspective: 1400px; }

.pack {
  background: linear-gradient(152deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022) 62%, rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 251, 242, .14);
  box-shadow:
    0 50px 100px -50px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -30px 60px -40px rgba(255, 255, 255, .1);
  animation: floatcard 9s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
/* El borde encendido: un filo de luz que recorre la tarjeta. */
.pack::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 251, 242, .5), rgba(255, 251, 242, .04) 42%, rgba(106, 86, 149, .45) 78%, rgba(209, 84, 58, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@keyframes floatcard {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -12px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pack { animation: none; }
}

.pack--featured {
  background: linear-gradient(152deg, rgba(255, 255, 255, .13), rgba(209, 84, 58, .07) 58%, rgba(106, 86, 149, .12));
  box-shadow:
    0 60px 120px -50px rgba(209, 84, 58, .55),
    0 0 90px -30px rgba(142, 27, 75, .5),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.pack--featured::before {
  background: linear-gradient(140deg, var(--ember) 0%, var(--magenta) 46%, var(--violet) 100%);
  inset: -1.5px;
  padding: 1.5px;
  z-index: 1;
}
.pack--featured::after { opacity: .5; }

.pack-name { color: var(--white); }
.pack-claim { color: rgba(255, 251, 242, .58); }
/* Sin precio, el reverso abre con el nombre del paquete. */
.pack-back-name {
  margin: 0 0 clamp(20px, 2.2vw, 30px);
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -.045em;
  font-weight: 600;
  color: var(--white);
}
.pack-list li { color: rgba(255, 251, 242, .8); }
.pack-list li::before { background: var(--ember-hi); }
.btn--glass {
  border-color: rgba(255, 251, 242, .3);
  color: var(--white);
  background: rgba(255, 251, 242, .06);
  justify-content: center;
}
.btn--glass:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.pack-notes {
  max-width: 1280px;
  margin: clamp(46px, 6vw, 84px) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .8em;
  max-inline-size: 78ch;
}
.pack-notes li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255, 251, 242, .5);
}
.pack-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 1px;
  background: rgba(255, 251, 242, .38);
}


/* ═══════════════════════════════════════════════════════════════
   Paquetes: fichas que se voltean
   De frente, el símbolo. Al pasar el mouse la ficha gira y aparece
   el detalle. El vidrio y el filo de luz viven ahora en cada cara.
   ═══════════════════════════════════════════════════════════════ */
.pack {
  display: grid;               /* las tres fichas comparten altura */
  perspective: 1700px;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.pack::after,
.pack--featured::before { content: none; }  /* el filo vive en .face, no en el contenedor */

.pack-flip {
  position: relative;
  height: 100%;
  display: grid;               /* ambas caras en la misma celda: la
                                  ficha adopta la altura de la mayor */
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  /* El giro lleva curva propia. La --ease general es un expo-out: se come
     el 80% del recorrido en los primeros milisegundos y la ficha parece
     dar un latigazo. Una curva simétrica arranca y frena con calma, que
     es lo que pide una rotación de medio giro. */
  transition: transform .95s cubic-bezier(.45, .05, .25, 1);
  cursor: pointer;
  outline: none;
}
/* En táctil el :hover se queda pegado tras el primer toque y la ficha ya
   no puede volver. El hover se reserva a punteros finos; en móvil manda
   la clase que pone el toque. */
@media (hover: hover) and (pointer: fine) {
  .pack:hover .pack-flip { transform: rotateY(180deg); }
}
.pack.is-flipped .pack-flip,
.pack-flip:focus-visible { transform: rotateY(180deg); }
.pack-flip:focus-visible { box-shadow: 0 0 0 2px rgba(255, 251, 242, .5); border-radius: 22px; }

.face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 46px);
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(152deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022) 62%, rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 251, 242, .14);
  box-shadow:
    0 50px 100px -50px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  overflow: hidden;
}
/* filo de luz del borde */
.face::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 251, 242, .5), rgba(255, 251, 242, .04) 42%, rgba(106, 86, 149, .45) 78%, rgba(209, 84, 58, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.face--back { transform: rotateY(180deg); }
/* El símbolo y su aura llevan animación de transform, y eso los
   promociona a capa propia: el navegador deja de aplicarles el recorte
   de cara trasera de la ficha y se veían a través del reverso. Se les
   oculta la cara trasera explícitamente y, como red de seguridad, la
   cara frontal entera se apaga al pasar el medio giro. */
.sym, .sym-aura {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* El retardo solo vale para APAGAR la cara frontal. Al volver debe
   rearmarse ya: el giro usa un easing de arranque rápido, así que cruza
   los 90° a los ~130ms y no a la mitad del recorrido. Con el retardo en
   los dos sentidos la cara trasera ya se había ocultado por su propio
   backface y la frontal seguía apagada: la ficha desaparecía ~440ms al
   quitarle el cursor. Volviendo con retardo 0 no hay hueco, y tampoco se
   ve la cara frontal del revés porque su backface la tapa hasta pasar
   el medio giro. */
.face { transition: visibility 0s linear 0s; }
/* Cinturón y tirantes: además de ocultar la cara, el símbolo y su aura
   se apagan por opacidad. La visibilidad y el recorte de cara trasera
   dependen de cómo el navegador decida componer las capas; una opacidad
   a cero no se discute. El aura anima su propia opacidad, así que hay
   que detenerle la animación o ganaría ella. */
.sym { transition: opacity .38s var(--ease); }
.sym-aura { transition: opacity .38s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pack:hover .sym { opacity: 0; }
  .pack:hover .sym-aura { animation: none; opacity: 0; }
}
.pack.is-flipped .sym,
.pack-flip:focus-visible .sym { opacity: 0; }
.pack.is-flipped .sym-aura,
.pack-flip:focus-visible .sym-aura { animation: none; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .pack:hover .face--front { visibility: hidden; transition-delay: .5s; }
}
.pack.is-flipped .face--front,
.pack-flip:focus-visible .face--front { visibility: hidden; transition-delay: .5s; }

.pack--featured .face {
  background: linear-gradient(152deg, rgba(255, 255, 255, .13), rgba(209, 84, 58, .07) 58%, rgba(106, 86, 149, .12));
  /* El halo naranja calca la silueta de la ficha: nace del propio
     borde redondeado, no de una caja aparte. */
  box-shadow:
    0 0 0 1px rgba(255, 138, 61, .55),
    0 0 22px -2px rgba(255, 138, 61, .5),
    0 0 62px -14px rgba(209, 84, 58, .62),
    0 60px 120px -50px rgba(209, 84, 58, .55),
    inset 0 1px 0 rgba(255, 255, 255, .3);
  animation: growglow 4.2s ease-in-out infinite;
}
@keyframes growglow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 138, 61, .5),
      0 0 20px -2px rgba(255, 138, 61, .42),
      0 0 58px -16px rgba(209, 84, 58, .55),
      0 60px 120px -50px rgba(209, 84, 58, .55),
      inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 138, 61, .72),
      0 0 30px 0 rgba(255, 138, 61, .6),
      0 0 82px -10px rgba(209, 84, 58, .7),
      0 60px 120px -50px rgba(209, 84, 58, .55),
      inset 0 1px 0 rgba(255, 255, 255, .3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pack--featured .face { animation: none; }
}
.pack--featured .face::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(140deg, var(--ember-hi) 0%, #FFB170 38%, var(--ember) 72%, var(--ember-hi) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.pack--featured .face::after { opacity: .5; }

/* — cara frontal — */
.face--front { align-items: center; text-align: center; justify-content: flex-start; }
.face--front .pack-name { margin: 0 0 .35em; }
.pack-front {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 15.5px);
  line-height: 1.5;
  font-weight: 300;
  color: rgba(255, 251, 242, .6);
  max-width: 24ch;
}
.face--front .pack-badge { top: 22px; left: 50%; transform: translateX(-50%); }
/* La insignia flota sobre el flujo: en pantallas estrechas el relleno se
   encoge y acababa cayendo encima del nombre del paquete. */
.pack--featured .face--front { padding-top: clamp(66px, 7vw, 78px); }
@media (max-width: 900px) {
  /* Fichas menos altas: el símbolo no necesita tanto aire en vertical. */
  .sym-wrap { min-height: clamp(150px, 32vw, 220px); }
}

.sym-wrap {
  position: relative;
  flex: 1;
  min-height: clamp(180px, 20vw, 250px);
  display: grid;
  place-items: center;
  width: 100%;
}
.sym {
  position: relative;
  width: clamp(96px, 11vw, 148px);
  height: auto;
  display: block;
  animation: symfloat 7s ease-in-out infinite;
}
/* aura */
.sym-aura {
  position: absolute;
  width: clamp(220px, 26vw, 330px);
  height: clamp(220px, 26vw, 330px);
  border-radius: 50%;
  filter: blur(30px);
  background: radial-gradient(closest-side, rgba(255, 214, 168, .38), rgba(209, 84, 58, .2) 46%, transparent 76%);
  animation: aura 5.5s ease-in-out infinite;
}
/* Las tres auras van en la misma escala cálida que los símbolos: la
   del centro tira a magenta y la última a crema, pero ninguna a lila. */
.pack--featured .sym-aura {
  background: radial-gradient(closest-side, rgba(255, 138, 61, .42), rgba(142, 27, 75, .28) 46%, transparent 76%);
}
#paquetes .pack:last-child .sym-aura {
  background: radial-gradient(closest-side, rgba(255, 246, 234, .4), rgba(209, 84, 58, .2) 46%, transparent 76%);
}
@keyframes aura {
  0%, 100% { transform: scale(.94); opacity: .8; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes symfloat {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(6px); }
}

.pack-hint {
  margin-top: auto;
  font-size: 9.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, .34);
}

/* — cara trasera — */
.face--back .pack-back-name { margin-bottom: clamp(16px, 1.8vw, 24px); }
.face--back .pack-list { flex: 1; margin-bottom: clamp(20px, 2.2vw, 30px); }
.face--back .btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .pack-flip { transition: none; }
  .sym, .sym-aura { animation: none; }
}
@media (hover: none) {
  .pack-hint { font-size: 0; }
  .pack-hint::before { content: 'Toca la ficha para ver el detalle'; font-size: 9.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   Sitios web: portátiles que se abren
   La tapa gira sobre su bisagra; cerrada muestra la carcasa, abierta
   el monitor encendido con el nombre del paquete.
   ═══════════════════════════════════════════════════════════════ */
.websites {
  position: relative;
  z-index: 100;
  background: transparent;
  color: var(--white);
  padding: clamp(70px, 9vw, 140px) clamp(20px, 4vw, 70px) clamp(100px, 13vw, 180px);
  /* La tapa de cada portátil va rotada en 3D: la perspectiva la proyecta
     unos píxeles más ancha que su caja y en móvil eso ensanchaba el
     documento. Se recorta aquí —en el borde de la sección, que en móvil
     coincide con el de la pantalla—, así que no se ve ningún corte.
     `clip` y no `hidden`: no crea contenedor de scroll ni recorta en
     vertical las sombras de los portátiles. */
  overflow-x: clip;
}
.websites-head { max-width: 1560px; margin: 0 auto clamp(56px, 7vw, 110px); }
.websites-h {
  font-size: clamp(28px, 4.6vw, 74px);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0 0 .35em;
  color: var(--white);
  max-width: 18ch;
}
.t-ember {
  background: linear-gradient(96deg, var(--ember) 0%, var(--ember-hi) 52%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.websites-sub {
  margin: 0;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, .48);
}

.lap-grid {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 34px);
}
/* En pantallas donde cuatro portátiles quedarían ilegibles, bajan a
   dos y luego a uno. En escritorio van los cuatro en línea. */
@media (max-width: 1000px) { .lap-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 44px); } }
@media (max-width: 560px)  { .lap-grid { grid-template-columns: 1fr; gap: 40px; } }

.lap { margin: 0; }

/* — el portátil — */
.lt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.98;
  perspective: 900px;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lt:focus-visible { outline: 1px solid rgba(255, 251, 242, .5); outline-offset: 8px; border-radius: 10px; }

/* teclado: plano inclinado en la base */
.lt-deck {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 8%;
  height: 32%;
  transform-origin: top center;
  transform: rotateX(72deg);
  border-radius: 3px 3px 8px 8px;
  background: linear-gradient(180deg, #2A2A2E 0%, #17171A 42%, #0E0E10 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.lt-keys {
  position: absolute;
  inset: 14% 10% 42% 10%;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 8%, transparent 8% 10%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 22%, transparent 22% 26%);
  opacity: .7;
}
.lt-pad {
  position: absolute;
  left: 34%;
  right: 34%;
  bottom: 12%;
  height: 28%;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* tapa: gira sobre la bisagra */
/* La bisagra está en el borde trasero del teclado. Cerrada, la tapa
   cae sobre el teclado y se ve la carcasa; abierta, se yergue. */
.lt-lid {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 40%;
  height: 56%;
  transform-origin: bottom center;
  transform: rotateX(-108deg);
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.2, .9, .25, 1);
}
@media (hover: hover) and (pointer: fine) { .lap:hover .lt-lid { transform: rotateX(-4deg); } }
.lap.is-open .lt-lid { transform: rotateX(-4deg); }

.lt-screen,
.lt-shell {
  position: absolute;
  inset: 0;
  border-radius: 8px 8px 4px 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
/* interior: el monitor */
.lt-screen {
  display: block;
  background: linear-gradient(165deg, #17161C 0%, #0C0B10 60%, #08080A 100%);
  border: 1px solid rgba(255, 251, 242, .16);
  box-shadow: inset 0 0 60px rgba(209, 84, 58, .1);
}
.lt-glow {
  position: absolute;
  inset: -30% -10% 20% -10%;
  background: radial-gradient(closest-side, rgba(209, 84, 58, .5), rgba(106, 86, 149, .28) 52%, transparent 78%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity 1.1s var(--ease) .35s;
}
@media (hover: hover) and (pointer: fine) { .lap:hover .lt-glow { opacity: 1; } }
.lap.is-open .lt-glow { opacity: 1; }
/* la captura del sitio, encajada a sangre en el monitor */
.lt-shot {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Las capturas traen el marco del navegador con margen alrededor:
     un pelo de escala lo saca de cuadro y la web llena el monitor. */
  transform: scale(1.06);
  transform-origin: top center;
  opacity: 0;
  transition: opacity .7s var(--ease) .3s;
}
@media (hover: hover) and (pointer: fine) { .lap:hover .lt-shot { opacity: 1; } }
.lap.is-open .lt-shot { opacity: 1; }

/* exterior: la carcasa cerrada */
.lt-shell {
  transform: rotateX(180deg);
  background: linear-gradient(158deg, #303036 0%, #1B1B1F 46%, #101013 100%);
  border: 1px solid rgba(255, 251, 242, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
}
.lt-mark {
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(209, 84, 58, .55), rgba(106, 86, 149, .35) 58%, transparent 76%);
  filter: blur(6px);
}

.lt-closed {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 8%;
  height: 32%;
  transform-origin: top center;
  transform: rotateX(72deg);
  border-radius: 4px 4px 9px 9px;
  background: linear-gradient(158deg, #303036 0%, #1B1B1F 46%, #101013 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 18px 40px -20px rgba(0, 0, 0, .9);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity .34s var(--ease) .28s;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .lap:hover .lt-closed { opacity: 0; transition-delay: 0s; transition-duration: .22s; } }
.lap.is-open .lt-closed { opacity: 0; transition-delay: 0s; transition-duration: .22s; }

.lt-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .85), transparent 76%);
  filter: blur(10px);
}

.lt-caption {
  margin: clamp(16px, 1.8vw, 26px) 0 0;
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .12em;
  line-height: 1.4;
  color: rgba(255, 251, 242, .58);
  transition: color .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .lap:hover .lt-caption { color: rgba(255, 251, 242, .78); } }
.lap.is-open .lt-caption { color: rgba(255, 251, 242, .78); }
.lt-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.lap:hover .lt-link { color: var(--white); border-bottom-color: rgba(209, 84, 58, .7); }
.lt-link:focus-visible { outline: 1px solid rgba(255, 251, 242, .6); outline-offset: 4px; }
.lt:focus-visible { outline: 1px solid rgba(255, 251, 242, .55); outline-offset: 10px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .lt-lid, .lt-shot, .lt-glow { transition: none; }
}
/* En táctil no hay cursor que los abra: se muestran ya abiertos y el
   toque va directo al sitio. */
/* Antes, en táctil se forzaba la tapa abierta —sin hover no había otra
   forma de verlas—. Pero eso ganaba al scroll y ya nunca cerraban. Ahora
   manda el scroll, que abre y cierra una a una en cualquier dispositivo. */

/* ═══════════════════════════════════════════════════════════════
   Paquete integral: la frase se escribe con el scroll
   Cada palabra tiene su propio tramo; el botón entra al final.
   ═══════════════════════════════════════════════════════════════ */
.integral { position: relative; }
.integral-track { position: relative; height: 170vh; }
.integral-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 44px);
  padding: 0 clamp(20px, 6vw, 110px);
  text-align: center;
}
.integral-eyebrow { margin: 0; opacity: 0; }

.integral-h {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(12px, 1.6vw, 30px);
  max-width: 16ch;
  font-size: clamp(44px, 9vw, 152px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 500;
  color: var(--white);
}
.iw {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform, filter;
}
/* La última palabra recoge la luz de la marca. */
.iw:last-child {
  background: linear-gradient(96deg, var(--ember) 0%, var(--ember-hi) 46%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.integral-cta { opacity: 0; will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .iw, .integral-cta, .integral-eyebrow { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Nosotros
   ═══════════════════════════════════════════════════════════════ */
.about {
  position: relative;
  z-index: 100;
  background: transparent;
  color: var(--white);
  padding: clamp(80px, 11vw, 170px) clamp(20px, 6vw, 110px) clamp(90px, 12vw, 180px);
}
.about-head { max-width: 1280px; margin: 0 auto clamp(50px, 7vw, 100px); }
.about-h {
  font-size: clamp(28px, 4.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0 0 clamp(22px, 2.6vw, 38px);
  max-width: 20ch;
  color: var(--white);
}
.about-h em {
  font-style: normal;
  background: linear-gradient(96deg, var(--ember) 0%, var(--ember-hi) 46%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-lead {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.65;
  font-weight: 300;
  color: rgba(255, 251, 242, .62);
}
.about-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 70px);
}
.pillar { position: relative; padding-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid rgba(255, 251, 242, .14); }
.pillar-n {
  display: block;
  margin-bottom: 1.4em;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--ember-hi);
}
.pillar-title {
  margin: 0 0 .7em;
  font-size: clamp(19px, 1.8vw, 26px);
  letter-spacing: -.035em;
  font-weight: 600;
  color: var(--white);
}
.pillar-text {
  margin: 0;
  font-size: clamp(13px, 1.02vw, 15.5px);
  line-height: 1.62;
  font-weight: 300;
  color: rgba(255, 251, 242, .6);
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ═══════════════════════════════════════════════════════════════
   Hablemos: formulario de contacto
   ═══════════════════════════════════════════════════════════════ */
.contact {
  position: relative;
  z-index: 100;
  background: transparent;
  color: var(--white);
  padding: clamp(80px, 11vw, 170px) clamp(20px, 6vw, 110px) clamp(90px, 12vw, 170px);
}
.contact-head { max-width: 1280px; margin: 0 auto clamp(44px, 6vw, 78px); }
.contact-h {
  font-size: clamp(28px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0 0 clamp(16px, 2vw, 26px);
  max-width: 20ch;
  color: var(--white);
}
.contact-h em {
  font-style: normal;
  background: linear-gradient(96deg, var(--ember) 0%, var(--ember-hi) 46%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact-lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255, 251, 242, .58);
}

.contact-form {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.field { display: grid; gap: .7em; }
.field--wide { grid-column: 1 / -1; }
.field-label {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, .5);
}
.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 300;
  color: var(--white);
  background: linear-gradient(152deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 251, 242, .16);
  border-radius: 14px;
  padding: .95em 1.1em;
  width: 100%;
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.field textarea { resize: vertical; min-height: 5.4em; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 251, 242, .28); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: rgba(209, 84, 58, .8);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 4px rgba(209, 84, 58, .14);
}
/* El desplegable nativo pinta el menú con el fondo del sistema:
   se fuerza el contraste para que las opciones se lean. */
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 251, 242, .55) 50%),
    linear-gradient(135deg, rgba(255, 251, 242, .55) 50%, transparent 50%),
    linear-gradient(152deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 2.6em;
}
.field select option { background: #141317; color: var(--white); }

.contact-send {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  flex-wrap: wrap;
  margin-top: clamp(6px, 1vw, 14px);
}
.contact-note {
  margin: 0;
  font-size: 12.5px;
  font-weight: 300;
  color: rgba(255, 251, 242, .5);
}
.contact-note a { color: rgba(255, 251, 242, .8); text-decoration: none; border-bottom: 1px solid rgba(209, 84, 58, .6); }
.contact-note a:hover { color: var(--white); }

@media (max-width: 760px) {
  .contact-form { grid-template-columns: 1fr; }
}

/* ── Nosotros: piezas flotantes ──────────────────────────────── */
.about { overflow: hidden; }
.about-floats {
  position: absolute;
  top: 0;
  right: 0;
  width: min(48%, 660px);
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
/* La canasta es el marco: las piezas se sitúan en porcentaje sobre ella,
   así la composición final aguanta cualquier tamaño de pantalla. */
.basket {
  position: absolute;
  top: 36%;
  left: 40%;
  width: clamp(300px, 42vw, 560px);
  aspect-ratio: 1080 / 1350;
  transform: translate(-50%, -50%);
}
.basket-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 50px 90px rgba(0, 0, 0, .75));
}
/* .fl lleva el rebote del scroll y el arrastre; .fl-bob, el vaivén. */
.fl { position: absolute; display: block; will-change: transform; z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  /* Arrastrables solo con ratón: en táctil el gesto es el scroll. */
  .fl { pointer-events: auto; cursor: grab; touch-action: none; }
  .fl.is-grabbed { cursor: grabbing; z-index: 3; }
  .fl.is-grabbed .fl-bob { animation-play-state: paused; }
  .fl.is-grabbed .fl-img { filter: drop-shadow(0 50px 90px rgba(0, 0, 0, .9)); }
}
.fl-img { user-select: none; -webkit-user-drag: none; }
.fl-bob {
  display: grid;
  place-items: center;
  animation: flfloat 11s ease-in-out infinite;
}
/* El halo se apaga a medida que la pieza entra en la canasta. */
.fl-halo {
  position: absolute;
  opacity: var(--halo, 1);
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(48px);
  background: radial-gradient(closest-side,
    rgba(255, 190, 140, .42) 0%,
    rgba(209, 84, 58, .3) 40%,
    rgba(106, 86, 149, .2) 66%,
    transparent 84%);
  animation: flhalo 7s ease-in-out infinite;
}
.fl-img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .8));
}

/* Colocación escalonada: ninguna se alinea con otra */
/* Posiciones finales dentro de la canasta, en % de su caja. */
.fl--a { top: -8%; left: 6%;  width: 52%; }   /* cámara     */
.fl--b { top: 10%; left: 26%; width: 54%; }   /* agenda     */
.fl--d { top: 25%; left: 2%;  width: 38%; }   /* audífonos  */
.fl--c { top: 36%; left: 18%; width: 58%; }   /* portátil   */
.fl--a .fl-bob { animation-delay: -1.4s; }
.fl--d .fl-bob { animation-delay: -3.8s; }
.fl--b .fl-bob { animation-delay: -6.5s; }
.fl--c .fl-bob { animation-delay: -9.2s; }

.fl--d .fl-halo {
  background: radial-gradient(closest-side,
    rgba(255, 226, 190, .45) 0%, rgba(209, 84, 58, .28) 44%, transparent 82%);
}
.fl--b .fl-halo {
  background: radial-gradient(closest-side,
    rgba(228, 190, 255, .4) 0%, rgba(106, 86, 149, .28) 44%, transparent 82%);
}
.fl--c .fl-halo {
  background: radial-gradient(closest-side,
    rgba(255, 214, 168, .4) 0%, rgba(179, 36, 122, .24) 46%, transparent 84%);
}

@keyframes flfloat {
  0%, 100% { transform: translate3d(0, -10px, 0) rotate(-1.2deg); }
  50%      { transform: translate3d(0, 14px, 0) rotate(1.4deg); }
}
@keyframes flhalo {
  0%, 100% { opacity: .7; transform: scale(.92); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

/* El contenido manda sobre las piezas */
.about-head, .about-grid { position: relative; z-index: 1; }
@media (min-width: 1100px) {
  .about-h { max-width: 17ch; }
  .about-lead { max-width: 44ch; }
}
@media (max-width: 900px) {
  .about-floats { position: relative; width: 100%; height: auto; margin-top: 40px; }
  .basket { position: relative; top: auto; left: auto; transform: none; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-bob, .fl-halo { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Resultados
   ═══════════════════════════════════════════════════════════════ */
.results {
  position: relative;
  z-index: 100;
  background: transparent;
  color: var(--white);
  padding: clamp(70px, 10vw, 150px) clamp(20px, 6vw, 110px) clamp(80px, 11vw, 160px);
}
.results-head { max-width: 1280px; margin: 0 auto clamp(40px, 5vw, 76px); }
.results-h {
  font-size: clamp(28px, 4.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0 0 clamp(14px, 1.8vw, 24px);
  color: var(--white);
}
.results-h em {
  font-style: normal;
  background: linear-gradient(96deg, var(--ember) 0%, var(--ember-hi) 46%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.results-sub {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255, 251, 242, .55);
}

.rs-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 34px);
}
.rs-card {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 42px);
  border-radius: 22px;
  background: linear-gradient(152deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02) 64%, rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 251, 242, .13);
  box-shadow:
    0 50px 100px -50px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}
/* El brillo que pide la métrica: nace bajo la cifra. */
.rs-aura {
  position: absolute;
  left: 8%;
  top: -30%;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(56px);
  background: radial-gradient(closest-side, rgba(255, 170, 110, .3), rgba(209, 84, 58, .16) 50%, transparent 78%);
  pointer-events: none;
}
.rs-card:nth-child(2) .rs-aura {
  background: radial-gradient(closest-side, rgba(255, 150, 190, .28), rgba(179, 36, 122, .16) 50%, transparent 78%);
}
.rs-card:nth-child(3) .rs-aura {
  background: radial-gradient(closest-side, rgba(200, 170, 255, .28), rgba(106, 86, 149, .18) 50%, transparent 78%);
}

.rs-pct {
  position: relative;
  margin: 0;
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: 600;
  color: var(--white);
}
.rs-label {
  position: relative;
  margin: .5em 0 0;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 300;
  color: rgba(255, 251, 242, .72);
}
.rs-chart {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(84px, 9vw, 120px);
  margin: clamp(22px, 2.6vw, 34px) 0 clamp(16px, 1.8vw, 22px);
}
/* El dibujo y el crecimiento los escribe Results.jsx fotograma a
   fotograma, con reloj propio: las tres tarjetas arrancan solas al
   quedar enmarcadas y, mientras se cuentan, no se puede seguir bajando.
   Aquí solo queda el estado de partida: el trazo sin dibujar. */
.rs-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rs-pct { font-variant-numeric: tabular-nums; }

.rs-note {
  position: relative;
  margin: 0;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, .4);
}

@media (max-width: 900px) { .rs-grid { grid-template-columns: 1fr; gap: 26px; } }
@media (prefers-reduced-motion: reduce) {
  .rs-line { stroke-dashoffset: 0; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   El contexto · tres planos sobre una pantalla clavada
   La sección mide varias pantallas pero enseña siempre la misma:
   .market-stage se queda pegado arriba y lo que cambia con el
   scroll es qué plano ocupa el cuadro. Se empuja la rueda y se
   siente que la página no baja —baja el montaje—.
   ═══════════════════════════════════════════════════════════════ */
.market {
  position: relative;
  z-index: 100;
  background: transparent;
  color: var(--white);
  /* El recorrido del pin. Es lo único que hay que tocar para que la
     secuencia se sienta más larga o más corta: las fracciones del
     montaje viven en Market.jsx y se reparten sobre esta altura.
     460vh − 100vh de escenario = 360vh de rueda con la página quieta.

     Empezó en 330vh y se quedaba corta por el final: la antesala y la
     pregunta apenas aguantaban veinte y sesenta vh, así que la última
     se leía a medias y Proyectos ya venía subiendo. Con 360 de
     recorrido los tres planos aguantan cerca de una pantalla cada uno
     —el reparto exacto, en la constante P de Market.jsx—. */
  height: 460vh;
}

.market-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Los tres planos se apilan en el mismo sitio: cada uno se coloca
     absoluto y la rejilla los centra a todos sobre el mismo punto. */
  display: grid;
  place-items: center;
  padding: clamp(60px, 8vw, 120px) clamp(20px, 6vw, 110px);
  /* Los planos entran y salen desplazándose una decena de vh: sin esto
     asomarían por arriba y por abajo del cuadro. */
  overflow: hidden;
}

/* Un plano. Ocupa la casilla entera de la rejilla —por eso van todos
   en la misma— y su opacidad, su arrastre y su desenfoque los escribe
   Market.jsx en cada fotograma. */
.mk-plate {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 1280px;
  margin: 0;
  opacity: 0;
  /* Apagado de verdad hasta que le toque: con solo `opacity: 0` el plano
     sigue ahí, encima del que sí se ve, y se puede llegar a seleccionar
     su texto a ciegas. Market.jsx lo enciende al entrar en cuadro. */
  visibility: hidden;
  will-change: transform, opacity;
}
.mk-plate--data { opacity: 1; visibility: visible; }

.market-eyebrow {
  text-align: center;
  margin: 0 0 clamp(28px, 3.4vw, 54px);
}

.market-body {
  display: grid;
  /* Columnas al tamaño de su contenido y el par centrado: con 1fr la
     segunda columna se estiraba y el conjunto quedaba escorado. */
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: clamp(34px, 6vw, 96px);
}

/* — el anillo — */
.market-figure {
  position: relative;
  width: clamp(230px, 26vw, 340px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.market-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
/* El halo vive detrás del anillo y crece con él. */
.market-aura {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 138, 61, .34), rgba(209, 84, 58, .14) 52%, transparent 74%);
}
.market-pct {
  position: relative;
  margin: 0;
  font-size: clamp(44px, 5.6vw, 82px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  text-shadow: 0 0 42px rgba(255, 138, 61, .45);
}
.market-sign {
  font-size: .46em;
  font-weight: 500;
  margin-left: .12em;
  color: var(--ember-hi);
  letter-spacing: 0;
}

/* — la rejilla de cien: cada punto, un internauta — */
.market-dots {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: clamp(5px, .62vw, 9px);
  width: min(100%, 460px);
  margin: 0 0 clamp(24px, 2.6vw, 38px);
}
.mk-dot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 251, 242, .13);
  transition: background .45s var(--ease);
}
/* El resplandor va en una capa aparte y lo que se anima es su OPACIDAD.
   Antes estaba en `box-shadow` dentro del transition, y un box-shadow en
   transición no se puede interpolar: el navegador tiene que volver a
   calcular el desenfoque en cada fotograma que dura, por cada punto. Con
   cien encendiéndose en cadena siempre hay un puñado a medias.

   Así el degradado se dibuja UNA vez y después solo se funde. Mismo
   resplandor, mismo fundido de 450ms, una fracción del trabajo. */
.mk-dot::after {
  content: '';
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 138, 61, .9) 0%, rgba(255, 138, 61, .45) 38%, transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.mk-dot.is-on { background: var(--ember-hi); }
.mk-dot.is-on::after { opacity: 1; }

.market-claim {
  margin: 0 0 clamp(12px, 1.4vw, 20px);
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1.1;
  letter-spacing: -.045em;
  font-weight: 500;
  color: var(--white);
  max-width: 20ch;
}
.market-claim em {
  font-style: normal;
  background: linear-gradient(96deg, var(--ember-hi) 0%, var(--ember) 54%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.market-note {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255, 251, 242, .62);
  max-width: 38ch;
}

/* — plano 2 · la antesala — */
/* Sola en pantalla y a tamaño de cartel. Sigue siendo una línea
   espaciada en versales —no compite con el titular que viene detrás—,
   pero varias veces el cuerpo que tenía cuando era un pie de sección. */
.mk-plate--lead {
  text-align: center;
  font-size: clamp(15px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  /* La caja del espaciado sobra por la derecha: sin esto la línea
     queda descentrada esa misma cantidad. */
  text-indent: .34em;
  color: rgba(255, 251, 242, .52);
}

/* — plano 3 · la pregunta — */
.mk-plate--ask {
  text-align: center;
  font-size: clamp(34px, 5.4vw, 82px);
  line-height: 1.1;
  letter-spacing: -.05em;
  font-weight: 500;
  color: var(--white);
  max-width: 18ch;
  justify-self: center;
  text-wrap: balance;
}
/* Cada palabra es indivisible: la frase se escribe letra a letra, pero
   sigue partiendo la línea por los espacios, como cualquier texto. */
.mk-w { display: inline-block; white-space: pre; }
.mk-ch {
  opacity: 0;
  transition: opacity .38s var(--ease);
}
.mk-ch.is-lit { opacity: 1; }

/* ── El remate: «te elijan?» ──────────────────────────────────
   Va entero en una caja propia. Dos razones: la barra puede ser una
   sola de punta a punta, y la frase no puede partir la línea por la
   mitad del golpe. */
.mk-mark {
  position: relative;
  display: inline-block;
  /* Sitio para la barra, por debajo de la cola de la «j». */
  padding-bottom: .18em;
}

/* El arcoíris Aterea. No es un color por letra ni un degradado que
   vuelve a empezar en cada palabra: es un solo espectro —ámbar, ember,
   magenta, violeta, azul y de vuelta— cruzando el remate entero. Cada
   letra recorta su trozo del mismo dibujo y encaja con la vecina porque
   Market.jsx le mide y le pasa en --x su distancia al origen.

   El primer alto y el último son el mismo color a propósito: así el
   mosaico repite sin costura y el bucle puede correr desplazándose
   exactamente un ancho de mosaico, sin salto al volver a empezar.

   El degradado va en la letra, no en un padre: por eso su opacidad
   —la del escrito, letra a letra— sí lo apaga. Puesto en la palabra,
   el recorte a texto ignoraba la opacidad de las letras y el remate
   aparecía de golpe, ya pintado, mientras el resto se escribía. */
.mk-ch--mark {
  --tile: 6em;
  background-image: linear-gradient(96deg,
    #FFB170 0%, #FF8A3D 10%, #D1543A 22%, #8E1B4B 34%,
    #6A5695 48%, #3D6BFF 60%, #6A5695 72%, #D1543A 84%,
    #FF8A3D 93%, #FFB170 100%);
  background-size: var(--tile) 100%;
  background-repeat: repeat-x;
  background-position-x: calc(var(--x, 0px) * -1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Solo corre con la pregunta en cuadro; lo enciende Market.jsx. */
.mk-plate--ask.is-live .mk-ch--mark {
  animation: mk-rainbow 9s linear infinite;
}
@keyframes mk-rainbow {
  to { background-position-x: calc(var(--x, 0px) * -1 - var(--tile)); }
}

/* La barra. Se dibuja de izquierda a derecha al ritmo del escrito y
   lleva los mismos colores que subraya.

   Sustituye al `text-decoration: underline` de antes, que el navegador
   partía en dos al tropezar con la cola de la «j» —el salto de tinta
   que trae de serie— y dejaba el remate con un mordisco. Una barra
   propia no tropieza con ningún glifo, se baja lo que haga falta y, de
   paso, se puede animar.

   El par que la sitúa es el `padding-bottom` de .mk-mark y este
   `bottom`: la barra acaba .13em por debajo de la caja del texto, con
   la cola de la «j» despejada. Subirla o bajarla es mover esos dos. */
.mk-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .05em;
  height: .05em;
  border-radius: 1em;
  background: linear-gradient(96deg,
    var(--ember) 0%, var(--ember-hi) 34%, var(--violet) 72%, var(--blue) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  /* El escrito ya va por fotogramas; esto solo lima el escalón de una
     letra a la siguiente. */
  transition: transform .38s var(--ease);
}

@media (max-width: 900px) {
  /* En vertical cada plano ocupa mucho más alto, así que el pin necesita
     algo menos de rueda para no hacerse eterno. El reparto es el mismo,
     solo que sobre 300vh: los aguantes bajan a ~60/69/78vh. */
  .market { height: 400vh; }
  .market-body { grid-template-columns: 1fr; justify-items: start; gap: 34px; }
  .market-figure { width: min(74vw, 300px); }
  .market-dots { grid-template-columns: repeat(20, 1fr); width: 100%; }
  .market-claim { max-width: none; }

  /* En vertical el cuerpo lo tiene que fijar el ancho de la pantalla, no
     el mínimo del clamp. Con `5.4vw` un móvil de 390px daba 21px, o sea
     que mandaba el mínimo de 34 y la pregunta —que es EL titular de la
     sección— se leía más chica que el texto de apoyo del dato. Aquí la
     escala pasa a ser de verdad proporcional: 11vw son 43px en un 390 y
     39 en un 360, con el tope puesto para que en tableta no se desborde.
     Cabe de sobra: la palabra más larga («encuentren,») ocupa unos 5,7em
     y el escenario deja 344px libres a ese ancho. */
  .mk-plate--ask {
    max-width: none;
    font-size: clamp(34px, 11vw, 62px);
  }
  /* La antesala, por la misma razón: 2.4vw en un móvil son 9px. */
  .mk-plate--lead { font-size: clamp(15px, 5vw, 34px); }
}

/* Sin movimiento no hay pin ni planos: la sección vuelve a ser tres
   bloques uno debajo de otro, y Market.jsx los pinta ya terminados. */
@media (prefers-reduced-motion: reduce) {
  .market { height: auto; }
  .market-stage {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
    padding: clamp(70px, 10vw, 150px) clamp(20px, 6vw, 110px) clamp(80px, 11vw, 160px);
  }
  .mk-plate {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    margin-inline: auto;
    will-change: auto;
  }
  .mk-plate--lead { margin-top: clamp(56px, 7vw, 110px); }
  .mk-plate--ask { margin-top: clamp(12px, 1.4vw, 20px); }
  .mk-dot, .mk-dot::after, .mk-ch, .mk-rule { transition: none; }
  /* El espectro se queda quieto: sigue estando, pero no corre. */
  .mk-plate--ask.is-live .mk-ch--mark { animation: none; }
}

/* ── Versión ligera (html.is-low, la pone device.js) ──────────
   Un teléfono pinta los mismos píxeles que un portátil con una
   fracción de la GPU. Lo que lo tumba no es el movimiento —eso lo
   resuelve el compositor— sino tres cosas que obligan a releer y
   recomponer la pantalla entera en cada fotograma: las mezclas
   (mix-blend-mode), los desenfoques grandes y las sombras anchas
   sobre elementos que se mueven.

   Aquí se quitan esas tres. La puesta en escena no cambia: el
   carrusel se mueve igual, la aurora sigue detrás, los colores son
   los mismos. Lo que desaparece es el grano y la textura de papel,
   que a un palmo de distancia y a 400 px de ancho no se ven. */

/* El grano cubre cuatro veces la ventana y se mezcla en modo overlay
   sobre TODO lo que hay debajo —aurora incluida—, así que el navegador
   no puede reutilizar ni una capa: recompone la pantalla completa en
   cada fotograma del carrusel. Es, él solo, la mitad del tirón. */
.is-low .grain,
.is-low .afterfilm::before { display: none; }

/* (La sombra de la A vive arriba, junto a .logo3d) */

/* ── El telón de entrada ─────────────────────────────────────
   Lo primero que se ve, y lo único, mientras los fotogramas de la
   apertura terminan de descargarse. Todo lo que hay aquí está pintado
   con formas y tipografía del sistema: el velo no puede depender de
   ninguna imagen, o tendría su propia espera dentro de la espera.

   Mientras está puesto, el documento no scrollea: si no, se llega al
   final de la película con el velo todavía delante y al levantarlo la
   escena ya pasó. */
html.is-loading,
html.is-loading body,
/* Y mientras la apertura va sola (autogiro.js): el dedo no mueve nada. */
html.is-held,
html.is-held body {
  overflow: hidden;
}
/* Reservar el hueco de la barra evita que el ancho del documento salte
   15 px al soltar el scroll. En macOS, con la barra flotante, no hay
   hueco que reservar y esto no cambia nada. */
html { scrollbar-gutter: stable; }

.curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--black);
  /* El mismo respiro de luz que hay detrás del isotipo, para que el
     velo y la primera escena sean el mismo sitio. */
  background-image:
    radial-gradient(58% 46% at 50% 46%, rgba(209, 84, 58, .10), transparent 70%);
  opacity: 1;
  transition: opacity .72s var(--ease), filter .72s var(--ease);
  will-change: opacity;
}
/* Solo opacidad: antes el velo entero se iba también con un blur(8px)
   animado, y desenfocar una capa a pantalla completa en cada fotograma
   del fundido es lo más caro que se puede pedir justo cuando el titular
   empieza a escribirse. El desenfoque se queda en el contenido, que es
   pequeño y es lo que se ve irse. */
.curtain--open {
  opacity: 0;
  pointer-events: none;
}

.curtain-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.6vw, 30px);
  padding: 0 24px;
  transition: transform .72s var(--ease), filter .72s var(--ease);
}
/* El contenido se retira un poco antes que el velo: el fundido deja de
   ser una capa que se apaga y pasa a ser algo que se aparta. */
.curtain--open .curtain-in { transform: translate3d(0, -14px, 0); filter: blur(8px); }

.curtain-mark {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 18px);
  font-weight: 600;
  letter-spacing: .58em;
  /* El interletrado empuja el texto hacia la derecha: el sangrado del
     último hueco se descuenta para que quede centrado de verdad. */
  text-indent: .58em;
  text-transform: uppercase;
  color: var(--white);
}

.curtain-bar {
  position: relative;
  width: clamp(150px, 22vw, 230px);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 251, 242, .12);
  overflow: hidden;
}
.curtain-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--ember), var(--ember-hi));
  /* La barra la mueve el bucle de Curtain.jsx en cada fotograma; una
     transición encima llegaría siempre un paso tarde. */
}

.curtain-note {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 1em;
  font-size: clamp(9px, .78vw, 11px);
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 251, 242, .52);
}
.curtain-pct {
  font-variant-numeric: tabular-nums;
  letter-spacing: .18em;
  color: rgba(255, 251, 242, .82);
}

/* Sin movimiento: el velo se va de golpe, sin fundido ni desenfoque. */
@media (prefers-reduced-motion: reduce) {
  .curtain,
  .curtain-in { transition: none; }
  .curtain--open .curtain-in { filter: none; }
}