/* =========================================================
   TFG — The Fitness Garage · Premium scroll-driven site
   Brand: #E62329 (rojo) · #FFCC33 (dorado) · #0A0A0F (negro)
   ========================================================= */

:root {
  --red: #E62329;
  --red-glow: rgba(230, 35, 41, 0.55);
  --gold: #FFCC33;
  --black: #0A0A0F;
  --black-2: #12121A;
  --gray-1: #1B1B24;
  --gray-2: #2A2A36;
  --gray-3: #6B6B7B;
  --white: #FFFFFF;
  --white-dim: rgba(255, 255, 255, 0.62);

  --font-display: 'Bebas Neue', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --nav-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; user-select: none; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ============== NAV ============== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(10,10,15,0.92) 0%, rgba(10,10,15,0.0) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.02em; }
.nav__brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav__brand span { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.08em; }
.nav__right { display: flex; align-items: center; gap: 18px; }
.lang-toggle {
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 12px; border-radius: 999px; font-size: 12px;
  letter-spacing: 0.08em; font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.lang-toggle:hover { border-color: var(--red); background: rgba(230,35,41,0.08); }
.nav__cta {
  background: var(--red); color: #fff; padding: 9px 18px;
  border-radius: 999px; font-weight: 600; font-size: 13px; letter-spacing: 0.03em;
  box-shadow: 0 0 30px var(--red-glow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 0 45px var(--red-glow); }

/* ============== SCENE BASE ============== */
.scene {
  position: relative;
  width: 100%;
  background: var(--black);
}
/* Subtle film grain overlay across the whole site */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1000;
  pointer-events: none;
  background-image: url('assets/opt/grain_texture.jpg');
  background-size: 400px;
  opacity: 0.06;
  mix-blend-mode: overlay;
}
/* Cinematic scene background images */
.scene__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.32;
  filter: brightness(0.55) contrast(1.15) saturate(0.85);
  mix-blend-mode: screen;
}
.scene__bg--left { object-position: left center; mask-image: linear-gradient(90deg, #000 30%, transparent 75%); -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 75%); opacity: 0.5; }
.scene__bg--right { object-position: right center; mask-image: linear-gradient(-90deg, #000 30%, transparent 75%); -webkit-mask-image: linear-gradient(-90deg, #000 30%, transparent 75%); opacity: 0.5; }
.scene--hero { min-height: 100vh; }
/* Alturas base (antes de que JS calcule): #sleep se excluye — es fijo 100vh (luna interactiva) */
#titan, #workouts, #builder, #nutrition, #progress, #coaches, #health {
  height: 200vh;
}
.scene__sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: 60px; padding: 0 80px;
  overflow: hidden;
  z-index: 2;
}
.scene--health .scene__sticky,
.scene--coaches .scene__sticky { grid-template-columns: 1fr; place-items: center; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: 0.32em; color: var(--red);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.scene__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95; letter-spacing: 0.005em;
  display: flex; flex-direction: column;
}
.scene__title .accent { color: var(--red); }
.scene__sub {
  margin-top: 24px;
  max-width: 480px;
  font-size: 18px; line-height: 1.55;
  color: var(--white-dim);
}
.scene__copy--center { max-width: 720px; text-align: center; }
.scene__copy--center .scene__title { align-items: center; }
.scene__copy--center .scene__sub { margin-left: auto; margin-right: auto; }

.btn {
  display: inline-flex; align-items: center;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 600; letter-spacing: 0.04em; font-size: 14px;
  margin-top: 28px;
  transition: transform 0.2s, box-shadow 0.25s, background 0.25s;
}
.btn--gold {
  background: var(--gold); color: var(--black);
  box-shadow: 0 0 40px rgba(255,204,51,0.35);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 0 55px rgba(255,204,51,0.5); }
.btn--red {
  background: var(--red); color: #fff;
  box-shadow: 0 0 40px var(--red-glow);
}
.btn--red:hover { box-shadow: 0 0 60px var(--red-glow); }
.btn--ghost {
  background: transparent; color: var(--white-dim);
  border: 1px solid rgba(255,255,255,0.18);
  margin-left: 12px;
}
.btn--ghost:hover { color: #fff; border-color: var(--red); background: rgba(230,35,41,0.08); }
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.4em; color: var(--red);
  margin-bottom: 18px; text-transform: uppercase;
  opacity: 0; animation: heroTextIn 0.9s var(--ease-out) 0.9s forwards;
}
.hero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; opacity: 0; animation: heroTextIn 1s var(--ease-out) 2.0s forwards; }

/* ============== PHONE FRAME ============== */
.phone {
  position: relative;
  width: 320px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  border-radius: 44px;
  background: linear-gradient(145deg, #2a2a32 0%, #14141a 60%, #0a0a0f 100%);
  padding: 10px;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.06),
    0 30px 80px rgba(230,35,41,0.18),
    0 60px 140px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}
.phone__notch {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 26px;
  background: #000; border-radius: 999px;
  z-index: 3;
}
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: #000;
}
.phone__screen img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ============== ESC 0 · HERO ============== */
.scene--hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(230,35,41,0.18) 0%, transparent 55%),
    var(--black);
}
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  filter: brightness(0.55) contrast(1.15) saturate(0.95);
}
.scene--hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.85) 100%);
  pointer-events: none; z-index: 1;
}
.scene--hero .hero__inner { position: relative; z-index: 2; }
.hero__particles { display: none; }

/* ============== ATOM BG para sección TITAN — PINNED via GSAP ScrollTrigger ============== */
.scene__atom-bg {
  position: absolute; top: 0; left: 0;
  display: block;
  width: 100vw; height: 100vh;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  filter: brightness(1) contrast(1.2) saturate(1.1);
  transition: opacity 0.6s ease-out;
}
.scene__atom-bg.is-active { opacity: 0.75; }
/* Apple Health mobile canvas: ligeramente más opaco para que la sync se lea */
#healthSyncCanvasMobile.is-active { opacity: 0.9; }
.scene--health__fade-top,
.scene--health__fade-bottom {
  position: absolute; left: 0; right: 0; height: 18vh;
  pointer-events: none; z-index: 1;
}
.scene--health__fade-top { top: 0; background: linear-gradient(to bottom, #0A0A0F 0%, rgba(10,10,15,0) 100%); }
.scene--health__fade-bottom { bottom: 0; background: linear-gradient(to top, #0A0A0F 0%, rgba(10,10,15,0) 100%); }
/* Health: scroll-scrub video desktop + mobile */
.scene--health { min-height: 280vh; }
.scene--health .scene__sticky {
  position: sticky; top: 0; height: 100vh; padding: 0;
}
.health__hub.legacy-hide { display: none !important; }
.scene--health .scene__copy { z-index: 3; position: absolute; left: 0; right: 0; padding: 0 20px; text-align: center; }
.scene--health .scene__title { font-size: clamp(28px, 8vw, 56px); line-height: 1; }
.scene--health .scene__sub { font-size: 14px; opacity: 0.85; margin-top: 12px; max-width: 480px; margin-left: auto; margin-right: auto; }
/* Intro: visible abajo; se oculta antes de que entren los iconos TFG/Health */
.health__copy-intro { bottom: 60px; opacity: 1; transition: opacity 0.5s ease-out; }
.health__copy-intro.is-hidden { opacity: 0; }
/* Outro: aparece en la zona de flujo entre TFG (arriba) y los iconos orbitales (centro) */
.health__copy-outro { top: 38vh; opacity: 0; transform: translateY(-8px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.health__copy-outro.is-visible { opacity: 1; transform: translateY(0); }
.health__copy-outro .scene__title { font-size: clamp(24px, 6vw, 48px); text-shadow: 0 2px 18px rgba(0,0,0,0.85); }
.health__copy-outro .eyebrow { font-size: clamp(10px, 1vw, 14px); margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.85); }
.health__copy-outro .scene__sub { display: none; }
@media (min-width: 901px) {
  /* En desktop el copy intro queda más arriba (no pegado al footer) y outro un poco más arriba también */
  .health__copy-intro { bottom: 80px; }
  .health__copy-outro { top: 22vh; }
}

/* Mostrar/ocultar según viewport */
.desktop-only { display: block; }
.mobile-only { display: none; }
@media (max-width: 900px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
}

/* ============== MOBILE BG · imagen HD + animaciones premium ============== */
.scene__atom-mobile {
  position: absolute; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.scene__atom-mobile-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  /* Estado inicial — gym oscuro, fuera de foco. Scroll lo "revela" */
  filter: brightness(0.18) contrast(1.4) saturate(0.5) blur(18px);
  transform: scale(1.28) translateY(0);
  will-change: transform, filter;
}
/* Pulse rojo ambient (luz roja del gym late suave) */
.scene__atom-mobile-pulse {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 18%, rgba(230, 35, 41, 0.22) 0%, transparent 45%);
  mix-blend-mode: screen;
  animation: gymPulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gymPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
/* Scan line sci-fi que pasa cada 8s */
.scene__atom-mobile-scan {
  position: absolute; left: 0; right: 0;
  height: 110px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(230, 35, 41, 0) 30%,
    rgba(230, 35, 41, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(230, 35, 41, 0.15) 50.5%,
    rgba(230, 35, 41, 0) 70%,
    transparent 100%);
  mix-blend-mode: screen;
  filter: blur(1px);
  top: -120px;
  animation: gymScan 9s linear infinite;
  pointer-events: none;
}
@keyframes gymScan {
  0%   { top: -120px; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}
/* Particles canvas — partículas de polvo flotando */
.scene__atom-mobile-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.7;
}
/* Vignette para concentrar la atención al centro (iPhone) */
.scene__atom-mobile-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(10,10,15,0.55) 75%, var(--black) 100%);
  pointer-events: none;
}
.scene--titan {
  min-height: 360vh;
  position: relative;
  overflow: visible;
  background: #000;
}
.scene--titan .scene__sticky { z-index: 2; background: transparent; }
/* Cross-fade suave arriba y abajo — fusión seamless entre secciones */
.scene--titan__fade-top {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 25vh;
  background: linear-gradient(180deg, var(--black) 0%, rgba(10,10,15,0.6) 40%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}
.scene--titan__fade-bottom {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 40vh;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,15,0.5) 35%, rgba(10,10,15,0.85) 65%, var(--black) 100%);
  z-index: 3;
  pointer-events: none;
}
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center; min-height: 100vh;
  padding: var(--nav-h) 80px 0;
}
.hero__phone-wrap {
  position: relative;
  display: grid; place-items: center;
  opacity: 0; transform: translateX(-40px) scale(0.94);
  animation: heroPhoneIn 1.4s var(--ease-out) 0.3s forwards;
}
@keyframes heroPhoneIn { to { opacity: 1; transform: translateX(0) scale(1); } }
/* ============== TITAN ATOM (núcleo cuántico premium · pure CSS/SVG) ============== */
.atom {
  position: absolute; top: 50%; left: 50%;
  width: 520px; height: 520px;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 40px var(--red-glow));
}
.atom__waves { position: absolute; inset: 0; }
.atom__waves span {
  position: absolute; inset: 0;
  border: 1px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  animation: atomWave 4s ease-out infinite;
}
.atom__waves span:nth-child(2) { animation-delay: 1.3s; }
.atom__waves span:nth-child(3) { animation-delay: 2.6s; }
@keyframes atomWave {
  0%   { transform: scale(0.35); opacity: 0; border-width: 2px; }
  20%  { opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; border-width: 0.5px; }
}
.atom__orbit {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%;
  border: 1px solid rgba(230, 35, 41, 0.25);
  border-radius: 50%;
  transform-style: preserve-3d;
  transform-origin: center;
}
.atom__orbit--1 {
  transform: translate(-50%, -50%) rotateX(72deg);
  animation: atomSpin1 8s linear infinite;
}
.atom__orbit--2 {
  width: 78%; height: 78%; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotateY(70deg) rotateZ(30deg);
  animation: atomSpin2 11s linear infinite reverse;
  border-color: rgba(255, 204, 51, 0.3);
}
.atom__orbit--3 {
  width: 60%; height: 60%; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotateX(60deg) rotateY(40deg);
  animation: atomSpin3 6s linear infinite;
}
@keyframes atomSpin1 { to { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); } }
@keyframes atomSpin2 { to { transform: translate(-50%, -50%) rotateY(70deg) rotateZ(390deg); } }
@keyframes atomSpin3 { to { transform: translate(-50%, -50%) rotateX(60deg) rotateY(40deg) rotateZ(360deg); } }
.atom__electron {
  position: absolute; top: 50%; left: -8px; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--red) 50%, transparent 100%);
  box-shadow: 0 0 18px var(--red), 0 0 36px var(--red-glow);
}
.atom__orbit--2 .atom__electron { background: radial-gradient(circle, #fff 0%, var(--gold) 50%, transparent 100%); box-shadow: 0 0 18px var(--gold), 0 0 36px rgba(255,204,51,0.5); }
.atom__orbit--3 .atom__electron { width: 10px; height: 10px; }

.atom__field { position: absolute; inset: 0; }
.atom__particle {
  position: absolute; top: 50%; left: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red), 0 0 16px var(--red-glow);
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--d)) rotate(calc(-1 * var(--a)));
  animation: atomParticle 5s ease-in-out infinite;
  opacity: 0.7;
}
.atom__particle:nth-child(2n) { animation-delay: 0.6s; background: var(--gold); box-shadow: 0 0 8px var(--gold), 0 0 16px rgba(255,204,51,0.5); }
.atom__particle:nth-child(3n) { animation-delay: 1.2s; }
.atom__particle:nth-child(5n) { animation-delay: 2.1s; }
@keyframes atomParticle {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--d)) rotate(calc(-1 * var(--a))) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--d) * 1.15)) rotate(calc(-1 * var(--a))) scale(1.4); opacity: 1; }
}

.atom__core {
  position: absolute; top: 50%; left: 50%;
  width: 110px; height: 110px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
}
.atom__core-inner {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fff 0%, #FFE0E0 8%, var(--red) 30%, #8B0000 70%, transparent 100%);
  box-shadow:
    inset 0 0 30px rgba(255,255,255,0.4),
    0 0 60px var(--red),
    0 0 120px var(--red-glow),
    0 0 200px rgba(230,35,41,0.4);
  animation: atomCorePulse 2s ease-in-out infinite;
}
@keyframes atomCorePulse {
  50% { transform: scale(1.08); box-shadow: inset 0 0 40px rgba(255,255,255,0.6), 0 0 80px var(--red), 0 0 150px var(--red-glow), 0 0 240px rgba(230,35,41,0.5); }
}
.atom__core-bolt {
  position: relative; z-index: 2;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.5));
  animation: atomBoltPulse 2s ease-in-out infinite;
}
@keyframes atomBoltPulse { 50% { transform: scale(1.15); } }
/* ============== iPhone 3D fotorealista (imagen + video overlay) ============== */
.iphone-3d {
  position: relative;
  width: 506px;
  aspect-ratio: 1152 / 2048;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease-out);
  will-change: transform;
  touch-action: auto;
  filter:
    drop-shadow(0 30px 80px rgba(230, 35, 41, 0.4))
    drop-shadow(0 60px 160px rgba(0, 0, 0, 0.75));
}
@media (max-width: 900px) {
  /* Por default móvil: scroll libre, sin tilt */
  .iphone-3d { touch-action: auto; }
  .iphone-3d--titan { transform: none !important; }
  /* HERO conserva el 3D tilt en móvil — touch dentro del iPhone lo inclina */
  .scene--hero .iphone-3d { touch-action: none; }
}
@media (max-width: 1100px) { .iphone-3d { width: 418px; } }
.iphone-3d__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  user-select: none;
}
.iphone-3d__screen {
  position: absolute;
  /* Calibrado AL PIXEL detectando bordes verdes del mockup chroma-key */
  top: 11.38%; left: 20.40%;
  width: 57.03%; height: 74.51%;
  z-index: 2;
  object-fit: cover;
  border-radius: 28px;
  background: #000;
  display: block;
}
/* Variante con contenido HTML dentro de la pantalla (chat, etc) */
.iphone-3d__screen--content {
  overflow: hidden;
  padding: 18px 12px 12px;
}
.iphone-3d--titan { width: 460px; }
@media (max-width: 1100px) { .iphone-3d--titan { width: 400px; } }
@media (max-width: 900px) { .iphone-3d--titan { width: min(460px, 96vw); } }
.iphone-3d--titan .chat { height: 100%; display: flex; flex-direction: column; padding: 0; }
.iphone-3d--titan .chat__header { padding: 6px 8px 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.iphone-3d--titan .chat__avatar { width: 32px; height: 32px; font-size: 14px; }
.iphone-3d--titan .chat__header strong { font-size: 12px; }
.iphone-3d--titan .chat__header small { font-size: 9px; }
.iphone-3d--titan .chat__msgs { padding: 0 4px; gap: 6px; flex: 1; overflow: hidden; }
.iphone-3d--titan .bubble { font-size: 10.5px; padding: 7px 10px; max-width: 80%; }
.iphone-3d--titan .bubble--card { padding: 10px 11px; }
.iphone-3d--titan .bubble__card-title { font-size: 11px; margin-bottom: 5px; }
.iphone-3d--titan .bubble--card ul { font-size: 9.5px; line-height: 1.55; padding: 5px 0; margin: 4px 0; }
.iphone-3d--titan .bubble__card-cta { font-size: 10px; }

/* Variante con imagen full-bleed dentro de la pantalla (screenshots de la app) */
.iphone-3d__screen--image { overflow: hidden; padding: 0; }

/* Canvas del screen recording dentro del iPhone TITAN (scroll-scrub) */
.iphone-3d__screen--content:has(.titan-phone-canvas) { padding: 0; }
.titan-phone-canvas,
.titan-phone-video,
.workouts-phone-video,
.nutrition-scan-video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
/* Video real: usa la pantalla EXACTA calibrada del mockup + cover para llenar sin huecos */
.iphone-3d--workout .iphone-3d__screen--content:has(.workouts-phone-video) {
  /* Coordenadas EXACTAS de la pantalla calibrada del mockup (al pixel).
     border-radius 0: el marco PNG (encima) cubre las esquinas cuadradas y
     su recorte redondeado define la curva visible — encaja perfecto sin huecos. */
  top: 11.38%; left: 19.9%;
  width: 58%; height: 74.9%;
  border-radius: 26px;
  overflow: hidden;
}
.workouts-phone-video { object-fit: cover; object-position: center top; }
/* Override para el video real de TITAN: el screen recording es 720x1560 (ratio nativo iPhone 0.462)
   pero la máscara del mockup fue calibrada más angosta (0.431). Ampliamos la máscara
   para el video para que no se recorten los bordes de la app */
.iphone-3d--titan .iphone-3d__screen--content:has(.titan-phone-video) {
  top: 11.38%; left: 19.20%;
  width: 59.60%; height: 74.51%;
}
/* Video nutrición (screen recording nativo 0.46 ratio) — misma máscara ampliada que TITAN */
.iphone-3d--nutrition .iphone-3d__screen--content:has(.nutrition-scan-video) {
  top: 11.38%; left: 19.20%;
  width: 59.60%; height: 74.51%;
  border-radius: 26px;
  overflow: hidden;
  padding: 0;
}
.iphone-3d__screen--image > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Variantes de tamaño por sección */
.iphone-3d--workout, .iphone-3d--nutrition, .iphone-3d--progress, .iphone-3d--sleep {
  width: 340px;
}
/* Workouts con video real: un poco más grande para lucir la app */
.iphone-3d--workout { width: 400px; }
@media (max-width: 1100px) {
  .iphone-3d--workout, .iphone-3d--nutrition, .iphone-3d--progress, .iphone-3d--sleep {
    width: 300px;
  }
  .iphone-3d--workout { width: 360px; }
}
@media (max-width: 900px) {
  .iphone-3d--workout, .iphone-3d--nutrition, .iphone-3d--progress, .iphone-3d--sleep {
    width: min(320px, 80vw);
    margin: 0 auto;
    transform: none !important;
  }
  .iphone-3d--workout { width: min(414px, 96vw); }
}

/* Para que los overlays existentes (workout__overlay, scanner-beam, etc) sigan posicionándose correctamente dentro del nuevo screen */
.iphone-3d__screen--image .workout__overlay,
.iphone-3d__screen--image .scanner-beam {
  z-index: 3;
}

/* Sleep screen styling para el nuevo contenedor */
.iphone-3d__screen.sleep__screen {
  padding: 32px 14px 14px;
  background: linear-gradient(180deg, #0c0c20 0%, #050510 100%);
  display: flex; flex-direction: column; gap: 12px;
}
.iphone-3d__screen.sleep__screen .hypnogram { width: 100%; height: auto; }
.iphone-3d__screen.sleep__screen .sleep__stages { margin-top: auto; }
@media (max-width: 900px) {
  .iphone-3d { width: 330px; }
}
.hero__bolt-badge {
  position: absolute; top: -18px; right: -18px;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red) 0%, #8B0000 100%);
  display: grid; place-items: center;
  box-shadow: 0 0 30px var(--red-glow), 0 0 80px var(--red-glow), 0 8px 20px rgba(0,0,0,0.6);
  z-index: 3;
  animation: boltSpin 6s linear infinite, boltGlow 2s ease-in-out infinite;
}
@keyframes boltSpin { to { transform: rotate(360deg); } }
@keyframes boltGlow { 50% { box-shadow: 0 0 50px var(--red), 0 0 120px var(--red-glow), 0 8px 20px rgba(0,0,0,0.6); } }
.hero__bolt-badge svg { animation: boltCounter 6s linear infinite; }
@keyframes boltCounter { to { transform: rotate(-360deg); } }
.hero__content { position: relative; }
.hero__logo {
  position: relative; display: inline-block;
  margin-bottom: 32px;
  opacity: 0; transform: translateY(20px);
  animation: heroLogoIn 1s var(--ease-out) 0.8s forwards;
}
.hero__logo img { width: 280px; }
.hero__logo-scan {
  position: absolute; top: 0; bottom: 0; left: -8px; width: 6px;
  background: linear-gradient(180deg, transparent, var(--red) 50%, transparent);
  filter: blur(2px);
  animation: heroScan 1.6s var(--ease-out) 1.2s;
}
@keyframes heroLogoIn { to { opacity: 1; transform: translateY(0); } }
@keyframes heroScan {
  0% { left: -8px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: calc(100% + 8px); opacity: 0; }
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.92; letter-spacing: 0.005em;
  display: flex; flex-direction: column;
}
.hero__title span { opacity: 0; transform: translateY(30px); }
.hero__title span:nth-child(1) { animation: heroTextIn 0.9s var(--ease-out) 1.1s forwards; }
.hero__title span:nth-child(2) { animation: heroTextIn 0.9s var(--ease-out) 1.3s forwards; }
.hero__title span:nth-child(3) { animation: heroTextIn 0.9s var(--ease-out) 1.5s forwards; }
.hero__title .accent { color: var(--red); text-shadow: 0 0 50px var(--red-glow); }
@keyframes heroTextIn { to { opacity: 1; transform: translateY(0); } }

.hero__sub {
  margin-top: 28px; max-width: 460px;
  font-size: 18px; line-height: 1.55; color: var(--white-dim);
  opacity: 0; animation: heroTextIn 1s var(--ease-out) 1.8s forwards;
}
.hero__scroll {
  position: absolute; bottom: 40px; left: 0;
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.32em; color: var(--white-dim);
  text-transform: uppercase; font-weight: 500;
  opacity: 0; animation: heroTextIn 1s var(--ease-out) 2.2s forwards;
}
.hero__scroll-line {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, var(--red), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: var(--red);
  animation: scrollLine 2s linear infinite;
}
@keyframes scrollLine { to { left: 100%; } }

/* ============== ESC 1 · TITAN ============== */
.scene--titan .scene__sticky {
  background: radial-gradient(ellipse at 70% 50%, rgba(230,35,41,0.08) 0%, transparent 60%);
}
.phone--titan .phone__screen {
  background: linear-gradient(180deg, #14141d 0%, #0a0a0f 100%);
  padding: 50px 14px 14px;
}
.chat { height: 100%; display: flex; flex-direction: column; }
.chat__header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 14px; border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 14px;
}
.chat__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red) 0%, #8B0000 100%);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 18px;
  box-shadow: 0 0 20px var(--red-glow);
}
.chat__header small { color: var(--white-dim); font-size: 10px; }
.chat__header strong { font-size: 13px; }
.chat__msgs {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 4px;
}
.bubble {
  padding: 10px 14px; font-size: 12px; line-height: 1.4;
  max-width: 78%; border-radius: 16px;
  opacity: 0; transform: translateY(12px) scale(0.95);
}
.bubble--me {
  align-self: flex-end;
  background: var(--red); color: #fff;
  border-bottom-right-radius: 4px;
}
.bubble--titan {
  align-self: flex-start;
  background: rgba(255,255,255,0.08); color: #fff;
  border-bottom-left-radius: 4px;
}
.bubble.typing { display: flex; gap: 4px; padding: 14px 18px; }
.bubble.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.6);
  animation: dot 1.2s infinite ease-in-out;
}
.bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.bubble--card {
  align-self: flex-start; max-width: 90%;
  background: linear-gradient(145deg, #1a1a24, #101018);
  border: 1px solid rgba(230,35,41,0.25);
  padding: 14px;
}
.bubble__card-title {
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: 0.1em; color: var(--red); margin-bottom: 8px;
}
.bubble--card ul {
  list-style: none; font-size: 11px; line-height: 1.7;
  color: var(--white-dim);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 8px 0; margin: 6px 0;
}
.bubble__card-cta {
  font-size: 11px; color: var(--gold); font-weight: 600; letter-spacing: 0.04em;
  text-align: right; margin-top: 4px;
}

/* ============== ESC 2 · WORKOUTS ============== */
.scene--workouts { min-height: 200vh; }
.scene--workouts .scene__sticky {
  background: radial-gradient(ellipse at 30% 50%, rgba(230,35,41,0.08) 0%, transparent 60%);
}
.workout__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
}
.workout__rep {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-display);
  margin-bottom: 8px;
}
.workout__rep-num { font-size: 58px; line-height: 1; color: var(--red); text-shadow: 0 0 30px var(--red-glow); }
.workout__rep-lbl { font-size: 20px; color: var(--white-dim); letter-spacing: 0.05em; }
.workout__bar {
  height: 4px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden;
}
.workout__bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 999px;
  box-shadow: 0 0 12px var(--red-glow);
}

/* ============== ESC 3 · BUILDER — TITAN arma tu semana ============== */
.scene--builder { min-height: 580vh; }
.scene--builder .scene__sticky {
  background: radial-gradient(ellipse at 50% 45%, rgba(230,35,41,0.06) 0%, transparent 62%);
  display: block; padding: 0;
}
/* La foto del barbell de fondo se nota más en esta sección */
.scene--builder .scene__bg--right { opacity: 0.72; }
/* Mobile: la foto es horizontal (1600×900); centrada y sin máscara lateral
   para que no se vea recortada/distorsionada en pantalla vertical */
@media (max-width: 900px) {
  .scene--builder .scene__bg--right {
    object-position: center 38%;
    -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 42%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 120% 80% at 50% 42%, #000 55%, transparent 100%);
    opacity: 0.5;
    filter: brightness(0.6) contrast(1.1) saturate(0.9);
  }
}
.builder__copy {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 70px); left: 0; right: 0;
  text-align: center; z-index: 5; padding: 0 24px;
}
.builder__copy .scene__title { align-items: center; text-align: center; font-size: clamp(28px, 7vw, 52px); }
/* Carrusel de teléfonos (screenshots reales dentro del iPhone) */
.build-flow {
  position: absolute; left: 0; right: 0; top: 55%;
  transform: translateY(-50%);
  z-index: 3; text-align: center;
}
.build-carousel {
  position: relative;
  height: min(540px, 60vh);
}
.build-phone {
  position: absolute; left: 50%; top: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
}
/* Los teléfonos del carrusel van juntos: sombra sutil (casi sin rojo)
   para que sus halos no se encimen ni tapen la imagen de fondo */
.build-phone .iphone-3d {
  filter: drop-shadow(0 20px 42px rgba(0, 0, 0, 0.7));
  transition: none;
}
.iphone-3d--build { width: 300px; }
@media (max-width: 1100px) { .iphone-3d--build { width: 270px; } }
@media (max-width: 900px)  { .iphone-3d--build { width: min(264px, 68vw); } }
/* Stepper */
.build-stepper { margin-top: 22px; }
.build-steps {
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.build-step {
  position: relative; display: grid; place-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  color: var(--white-dim); transition: all 0.35s ease;
}
.build-step em {
  font-style: normal; font-family: var(--font-display);
  font-size: 15px; letter-spacing: 0.04em;
}
.build-step::after {
  content: ''; position: absolute; left: 100%; top: 50%; width: 22px; height: 2px;
  background: rgba(255,255,255,0.15); transform: translateY(-50%);
}
.build-step:last-child::after { display: none; }
.build-step.is-active {
  border-color: var(--red); color: #fff;
  background: var(--red);
  box-shadow: 0 0 20px var(--red-glow);
}
.build-step.is-done { border-color: rgba(230,35,41,0.5); color: var(--red); }
.build-caption {
  margin-top: 16px; min-height: 26px;
  font-family: var(--font-display); font-size: clamp(16px, 4.4vw, 22px);
  letter-spacing: 0.04em; color: #fff;
}
.build-caption__txt { display: inline-block; transition: opacity 0.35s ease, transform 0.35s ease; }
@media (max-width: 900px) {
  .build-step { width: 34px; height: 34px; }
  .build-step::after { width: 14px; }
  .build-step em { font-size: 13px; }
}

/* ============== ESC 4 · NUTRITION ============== */
.scene--nutrition .scene__sticky {
  background: radial-gradient(ellipse at 30% 50%, rgba(230,35,41,0.08) 0%, transparent 60%);
}
.nutrition__phone { position: relative; }
.scanner-beam {
  position: absolute; left: 8%; right: 8%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  box-shadow: 0 0 20px var(--red), 0 0 40px var(--red-glow);
  top: 10%;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.macros {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 18px;
}
.macro { position: relative; width: 80px; height: 80px; }
.macro svg { transform: rotate(-90deg); }
.macro__bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 6; }
.macro__fill {
  fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 263.9; stroke-dashoffset: 263.9;
  filter: drop-shadow(0 0 6px var(--red-glow));
}
.macro:nth-child(2) .macro__fill { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(255,204,51,0.5)); }
.macro:nth-child(3) .macro__fill { stroke: #4ade80; filter: drop-shadow(0 0 6px rgba(74,222,128,0.4)); }
.macro__lbl {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em;
  text-align: center; line-height: 1.2;
}
.macro__lbl span { font-size: 16px; color: var(--white); }

/* ============== ESC 4 · RECIPES 3D CHOREOGRAPHY (real TFG data) ============== */
.scene--nutrition { min-height: 480vh; }
/* Fondo de comida: notable sin distraer */
.scene--nutrition .scene__bg--left {
  opacity: 0.55;
  filter: brightness(1.15) contrast(1.05) saturate(1.15);
  /* Máscara horizontal: fade desde izquierda */
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.35) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.35) 100%);
}
@media (max-width: 900px) {
  .scene--nutrition .scene__bg--left {
    /* En móvil: imagen llena con máscara vertical suave (no horizontal) */
    object-position: center center;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.15) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.15) 100%);
    opacity: 0.38;
    filter: brightness(0.95) contrast(1.0) saturate(1.1);
  }
}

/* Animación de entrada del copy outro (Your Kitchen. Your Macros.) */
@keyframes copyOutroIn {
  0% { opacity: 0; transform: translateY(20px) scale(0.92); filter: blur(8px); letter-spacing: -0.04em; }
  60% { opacity: 1; transform: translateY(0) scale(1.02); filter: blur(0); letter-spacing: 0; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); letter-spacing: 0; }
}
.nutrition__copy-b.is-visible .scene__title,
.nutrition__copy-b.is-visible .eyebrow,
.nutrition__copy-b.is-visible .scene__sub {
  animation: copyOutroIn 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.nutrition__copy-b.is-visible .eyebrow { animation-delay: 0s; }
.nutrition__copy-b.is-visible .scene__title { animation-delay: 0.12s; }
.nutrition__copy-b.is-visible .scene__sub { animation-delay: 0.32s; }
/* Override del transform base sólo cuando entra (animation toma control) */
.nutrition__copy-b.is-visible .scene__title,
.nutrition__copy-b.is-visible .eyebrow,
.nutrition__copy-b.is-visible .scene__sub { transform-origin: center; }
.scene--nutrition .scene__sticky {
  grid-template-columns: 1fr;
  place-items: stretch;
  padding: 0;
  perspective: 1400px;
}
/* iPhone con tamaño estándar (igual que workouts/progress/sleep) */
.scene--nutrition .nutrition__phone {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  transform-origin: center center;
  will-change: transform;
  transition: filter 0.6s ease;
}
.scene--nutrition .iphone-3d--nutrition { width: 340px; }
@media (max-width: 1100px) { .scene--nutrition .iphone-3d--nutrition { width: 300px; } }
@media (max-width: 900px) { .scene--nutrition .iphone-3d--nutrition { width: min(320px, 80vw); } }
/* Dos copies que se intercambian con el scroll — width fija para centrar contenido */
.nutrition__copy { position: absolute; left: 0; right: 0; text-align: center; z-index: 4; padding: 0 24px; opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; pointer-events: none; }
.nutrition__copy .scene__title, .nutrition__copy .scene__sub { margin-left: auto; margin-right: auto; }
.nutrition__copy.is-visible { opacity: 1; pointer-events: auto; }
.nutrition__copy-a { top: 14vh; transform: translateY(8px); }
.nutrition__copy-a.is-visible { transform: translateY(0); }
.nutrition__copy-b { top: 10vh; transform: translateY(-8px); }
.nutrition__copy-b.is-visible { transform: translateY(0); }
.nutrition__copy .scene__title { font-size: clamp(32px, 5vw, 64px); line-height: 1; }
.nutrition__copy .scene__sub { font-size: 15px; opacity: 0.82; margin-top: 14px; max-width: 540px; margin-left: auto; margin-right: auto; }
/* Centrado real: align-items: center en flex column del título */
.nutrition__copy { text-align: center; }
.nutrition__copy .scene__title { align-items: center; text-align: center; }
.nutrition__copy .scene__sub { text-align: center; margin-left: auto; margin-right: auto; }
.nutrition__copy-b .eyebrow { font-size: clamp(16px, 2.2vw, 22px); letter-spacing: 0.24em; margin-bottom: 18px; color: var(--red); font-weight: 600; }

/* Deck 3D de recetas — cards apiladas centradas, JS las anima por scroll */
.recipes {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity 0.5s ease;
  perspective: 1400px;
}
.recipes.is-active { opacity: 1; }
.recipes__deck {
  position: relative; width: 320px; height: 420px;
  transform-style: preserve-3d;
}
.recipe-card__tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #fff;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(230,35,41,0.85); backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(230,35,41,0.4);
}
.recipe-group { position: relative; display: flex; gap: 20px; align-items: stretch; padding-top: 28px; }
.recipe-group__label {
  position: absolute; top: 0; left: 4px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.28em;
  color: var(--red); text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}
.recipe-card {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(20,20,28,0.96), rgba(10,10,15,0.96));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(230,35,41,0.08) inset;
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
  display: flex; flex-direction: column;
}
.recipe-card__img { flex: 1; aspect-ratio: auto; }
.recipe-card__name { font-size: 15px; min-height: 42px; padding: 14px 16px 6px; }
.recipe-card__macros { padding: 0 16px 16px; font-size: 12px; }
.recipe-card__img {
  position: relative; aspect-ratio: 4/3;
  background-size: cover; background-position: center;
}
.recipe-card__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.recipe-card__cal {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
  color: #fff; font-size: 11px; font-weight: 600;
}
.recipe-card__cal .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red-glow); }
.recipe-card__name {
  padding: 12px 14px 6px;
  font-size: 14px; font-weight: 600; color: var(--white);
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 38px;
}
.recipe-card__macros {
  display: flex; gap: 12px; padding: 0 14px 14px;
  font-size: 11px; color: rgba(255,255,255,0.72); font-weight: 600;
}
.recipe-card__macros span { display: inline-flex; align-items: center; gap: 5px; }
.recipe-card__macros i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.recipe-card__macros .m-p { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.5); }
.recipe-card__macros .m-f { background: var(--gold); box-shadow: 0 0 5px rgba(255,204,51,0.5); }
.recipe-card__macros .m-c { background: #60a5fa; box-shadow: 0 0 5px rgba(96,165,250,0.5); }

@media (max-width: 900px) {
  .scene--nutrition { min-height: 540vh; }
  .scene--nutrition .scene__sticky { padding: 0; height: 100vh; }
  /* iPhone más bajo para no chocar con subtítulo del copy */
  .scene--nutrition .nutrition__phone { top: 64%; }
  /* Copy respeta safe area iOS (notch) + navbar */
  .nutrition__copy { top: calc(env(safe-area-inset-top, 0px) + 80px); padding: 0 20px; }
  .nutrition__copy .scene__title { font-size: clamp(28px, 8.5vw, 40px); line-height: 1; }
  .nutrition__copy .scene__sub { font-size: 13px; max-width: 300px; margin-top: 8px; opacity: 0.82; }
  .nutrition__copy .scene__sub--compact { max-width: 280px; font-size: 12.5px; line-height: 1.4; }
  /* Mobile: cards un poco más abajo del centro (no pegadas) */
  .recipes { align-items: center; padding-top: 12vh; padding-bottom: 0; }
  .recipes__deck { width: 280px; height: 360px; }
  .recipe-card__name { font-size: 14px; padding: 12px 14px 4px; }
  .recipe-card__macros { padding: 0 14px 14px; }
}

/* ============== ESC 5 · PROGRESS ============== */
/* ===== LA TRANSFORMACIÓN — wipe antes/después scroll-driven ===== */
.scene--progress { min-height: 420vh; }
.progress__copy { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 80px); left: 0; right: 0; text-align: center; z-index: 4; padding: 0 24px; }
.progress__copy .scene__title { align-items: center; text-align: center; font-size: clamp(30px, 8vw, 56px); }
.progress__stage {
  position: absolute; left: 50%; top: 54%;
  transform: translate(-50%, -50%);
  width: min(360px, 82vw);
  z-index: 3;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.progress__stage.is-hidden { opacity: 0; transform: translate(-50%, -50%) scale(0.92); pointer-events: none; }
.transform-card {
  position: relative;
  width: 100%; aspect-ratio: 3 / 4;
  border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(230,35,41,0.12);
  user-select: none; -webkit-user-select: none;
}
.transform-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.transform-card__after-clip {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.transform-card__line {
  position: absolute; top: 0; bottom: 0; left: 0%;
  width: 3px; background: var(--red);
  box-shadow: 0 0 18px var(--red), 0 0 40px var(--red-glow);
  will-change: left;
  z-index: 3;
}
.transform-card__line-glow {
  position: absolute; top: 0; bottom: 0; left: -14px; width: 28px;
  background: linear-gradient(90deg, transparent, rgba(230,35,41,0.35), transparent);
}
.transform-card__date {
  position: absolute; top: 12px; z-index: 4;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.85);
}
.transform-card__date--l { left: 12px; transition: opacity 0.4s ease; }
.transform-card__date--r { right: 12px; color: var(--red); opacity: 0; transition: opacity 0.4s ease; }
.transform-stats {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px;
}
.tstat { text-align: center; }
.tstat small {
  display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--white-dim); margin-bottom: 4px;
}
.tstat strong {
  font-family: var(--font-display); font-size: clamp(26px, 7vw, 38px);
  color: var(--white); font-weight: 400; letter-spacing: 0.02em;
}
.tstat strong em { font-style: normal; font-size: 0.5em; color: var(--white-dim); }
.tstat--diff span {
  display: inline-block;
  font-family: var(--font-display); font-size: clamp(18px, 5vw, 26px);
  color: #4ade80; letter-spacing: 0.04em;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.25);
  white-space: nowrap;
}
.transform-days {
  margin-top: 14px; text-align: center;
  font-size: 12px; letter-spacing: 0.08em; color: var(--white-dim);
  opacity: 0; transition: opacity 0.6s ease;
}
.transform-days.is-visible { opacity: 0.85; }
/* Móvil: card más compacta para que no tape el título */
@media (max-width: 900px) {
  .progress__copy { top: calc(env(safe-area-inset-top, 0px) + 64px); }
  .progress__copy .scene__title { font-size: clamp(24px, 6.8vw, 34px); }
  .progress__stage { width: min(280px, 70vw); top: 57%; }
  .tstat strong { font-size: clamp(20px, 5.6vw, 28px); }
  .tstat--diff span { font-size: clamp(15px, 4.2vw, 20px); padding: 6px 11px; }
  .transform-stats { margin-top: 14px; gap: 8px; }
}

/* Fase final: iPhone con el registro real */
.progress__phone {
  position: absolute; left: 50%; top: 54%;
  transform: translate(-50%, -50%) translateY(60vh);
  opacity: 0;
  z-index: 3;
  transition: transform 0.7s cubic-bezier(0.22, 0.9, 0.32, 1), opacity 0.5s ease;
  pointer-events: none;
}
.progress__phone.is-active { transform: translate(-50%, -50%) translateY(0); opacity: 1; pointer-events: auto; }
.progress-phone-video {
  position: absolute; top: 11.38%; left: 19.9%;
  width: 58%; height: 74.9%;
  object-fit: cover; object-position: center top;
  border-radius: 26px;
}
.iphone-3d--progress .iphone-3d__screen--content:has(.progress-phone-video) {
  top: 11.38%; left: 19.9%;
  width: 58%; height: 74.9%;
  border-radius: 26px; overflow: hidden; padding: 0;
}
.iphone-3d--progress .iphone-3d__screen--content:has(.progress-phone-video) .progress-phone-video {
  top: 0; left: 0; width: 100%; height: 100%;
}

.scene--progress .scene__sticky {
  background: radial-gradient(ellipse at 50% 40%, rgba(230,35,41,0.10) 0%, transparent 60%);
  display: block; padding: 0;
}
/* Fondo: interior del garage muy sutil, oscurecido para no competir con las fotos */
.progress__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.22;
  filter: brightness(0.5) contrast(1.1) saturate(0.9);
}
.scene--progress .scene__sticky::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--black) 0%, transparent 20%, transparent 78%, var(--black) 100%);
}
.progress__copy, .progress__stage, .progress__phone { z-index: 3; }
.progress { position: relative; display: flex; align-items: center; gap: 30px; }
.progress__phone { flex: 0 0 auto; }
.progress__chart {
  flex: 1; position: relative;
  padding: 24px;
  background: linear-gradient(145deg, #14141d, #0c0c12);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.progress__chart svg { width: 100%; height: 180px; display: block; }
#chartLine {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
}
.progress__kpi {
  position: absolute; top: 20px; right: 28px;
  font-family: var(--font-display); line-height: 1;
  text-align: right;
}
.progress__kpi span { font-size: 40px; color: var(--red); display: block; }
.progress__kpi small { font-size: 11px; color: var(--white-dim); letter-spacing: 0.1em; text-transform: uppercase; }

/* ============== ESC 6 · SLEEP ============== */
.scene--sleep { background: linear-gradient(180deg, #050514 0%, #0A0A0F 100%); position: relative; overflow: hidden; }
.sleep__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 20%, #fff 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 30%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 30% 70%, #fff 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 80%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 50%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 10%, #fff 0%, transparent 100%),
    radial-gradient(ellipse at 50% 100%, rgba(255,204,51,0.06), transparent 60%);
  opacity: 0.6;
  animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle { 50% { opacity: 0.3; } }

/* ===== UNA NOCHE EN UN SCROLL ===== */
/* La sección se queda FIJA un momento (pin) mientras haces scroll, luego pasa
   suave a la siguiente. La luna sigue siendo interactiva (drag), independiente. */
.scene--sleep { min-height: 190vh; }
.scene--sleep .scene__sticky { height: 100vh; display: block; padding: 0; }
/* Capa extra de estrellas finas (paralaje sutil con las del sky) */
.sleep__stars {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 15% 35%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 45%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 25%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 85%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 75%, rgba(255,255,255,0.6) 0%, transparent 100%);
  animation: twinkle 7s ease-in-out infinite reverse;
  transition: opacity 1s ease;
}
.sleep__moon {
  position: absolute; top: 9%; right: 10%; z-index: 1; pointer-events: none;
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fdfdf6 0%, #e8e6d8 55%, #cfcdbd 100%);
  box-shadow: 0 0 40px rgba(253,253,246,0.35), 0 0 120px rgba(253,253,246,0.15);
  transition: opacity 1s ease;
}
.sleep__dawn {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(255,140,60,0.55) 0%, rgba(255,90,60,0.22) 28%, transparent 60%);
  opacity: 0;
  will-change: opacity;
}
.sleep__copy { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 64px); left: 0; right: 0; text-align: center; z-index: 4; padding: 0 24px; }
.sleep__copy .scene__title { align-items: center; text-align: center; font-size: clamp(26px, 7vw, 50px); }
.sleep__sub {
  max-width: 460px; margin: 14px auto 0; text-align: center;
  font-size: clamp(13px, 3.4vw, 16px); line-height: 1.5;
  color: rgba(255,255,255,0.72);
}
.sleep__sub .accent, .sleep__sub b { color: #c7b4fd; }
/* 24H Sleep Clock ring */
.sleep__ring {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: min(340px, 78vw); aspect-ratio: 1;
  z-index: 3;
}
.sleep__ring-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 20px rgba(139,92,246,0.25)); }
.sleep__orb {
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  display: grid; place-content: center;
  border-radius: 50%;
  font-size: 22px;
  background: radial-gradient(circle at 38% 35%, #fdfdf6, #e8e6d8 60%, #cfcdbd);
  box-shadow: 0 0 28px rgba(253,253,246,0.55), 0 0 60px rgba(253,253,246,0.2);
  will-change: transform;
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
.sleep__orb.is-sun {
  background: radial-gradient(circle at 40% 40%, #fff3c4, #fb923c 65%, #f97316);
  box-shadow: 0 0 34px rgba(251,146,60,0.7), 0 0 80px rgba(251,146,60,0.3);
}
.sleep__orb span { line-height: 1; filter: grayscale(0.2); }
/* Luna arrastrable */
.sleep__orb { cursor: grab; touch-action: none; z-index: 6; }
.sleep__orb::before { content: ''; position: absolute; inset: -16px; border-radius: 50%; } /* área de toque amplia */
.sleep__ring.is-dragging { cursor: grabbing; }
.sleep__ring.is-dragging .sleep__orb { cursor: grabbing; }
/* Parpadeo "tócame" al entrar la sección */
.sleep__orb.is-hint { animation: sleepPulse 1.6s ease-in-out infinite; }
@keyframes sleepPulse {
  0%, 100% { box-shadow: 0 0 28px rgba(253,253,246,0.55), 0 0 60px rgba(253,253,246,0.2), 0 0 0 0 rgba(253,253,246,0.5); }
  50%      { box-shadow: 0 0 34px rgba(253,253,246,0.85), 0 0 70px rgba(253,253,246,0.35), 0 0 0 18px rgba(253,253,246,0); }
}
/* Etiqueta pista "arrástrame" cerca del inicio de la luna */
.sleep__hint {
  position: absolute; left: 2%; top: 82%;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.92); white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(139,92,246,0.20); border: 1px solid rgba(139,92,246,0.45);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity 0.5s ease;
}
.sleep__hint.is-visible { opacity: 1; animation: hintBob 1.5s ease-in-out infinite; }
@keyframes hintBob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.sleep__ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
}
.sleep__ring-center small { font-size: 10px; letter-spacing: 0.22em; color: var(--white-dim); }
.sleep__ring-center strong {
  font-family: var(--font-display); font-size: clamp(38px, 11vw, 60px);
  color: #fff; letter-spacing: 0.02em; line-height: 1;
  text-shadow: 0 0 30px rgba(139,92,246,0.4);
}
.sleep__ring-times { font-size: 12px; color: var(--white-dim); letter-spacing: 0.06em; }
.sleep__ring-times em { font-style: normal; color: var(--gold); }
/* Texto dinámico de fase (bajo el anillo) — estilo neón */
.sleep__phase {
  position: absolute; left: 50%; top: calc(52% + min(170px, 39vw) + 26px);
  transform: translateX(-50%);
  z-index: 4; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: clamp(17px, 4.6vw, 24px);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  padding: 11px 24px; border-radius: 999px;
  color: #fff;
  background: rgba(10,6,26,0.55); backdrop-filter: blur(10px);
  border: 1.5px solid rgba(167,139,250,0.9);
  box-shadow:
    0 0 14px rgba(167,139,250,0.55),
    0 0 34px rgba(139,92,246,0.4),
    inset 0 0 12px rgba(167,139,250,0.2);
  text-shadow: 0 0 10px rgba(199,180,253,0.85), 0 0 20px rgba(167,139,250,0.5);
  animation: sleepPhasePulse 2.4s ease-in-out infinite;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
@keyframes sleepPhasePulse {
  50% {
    box-shadow:
      0 0 22px rgba(167,139,250,0.85),
      0 0 52px rgba(139,92,246,0.6),
      inset 0 0 16px rgba(167,139,250,0.3);
    border-color: rgba(199,180,253,1);
  }
}
.sleep__phase-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #c7b4fd;
  box-shadow: 0 0 10px #a78bfa, 0 0 18px #8b5cf6;
  animation: sleepDotPulse 1.4s ease-in-out infinite;
}
@keyframes sleepDotPulse { 50% { opacity: 0.35; transform: scale(0.7); } }
@media (max-width: 900px) { .sleep__phase { top: calc(50% + min(160px, 40vw) + 22px); } }
/* Hipnograma que se dibuja con el scroll */
.sleep__hypno {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
  transform: translateX(-50%);
  width: min(420px, 88vw);
  z-index: 4;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(5,5,20,0.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
}
.hypno-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.hypno-row small {
  flex: 0 0 64px; text-align: right;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white-dim);
}
.hypno-track { position: relative; flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.05); }
.hypno-track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.hypno-track--awake i { background: #FFCC33; box-shadow: 0 0 8px rgba(255,204,51,0.5); }
.hypno-track--rem i { background: #f472b6; box-shadow: 0 0 8px rgba(244,114,182,0.5); }
.hypno-track--light i { background: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,0.5); }
.hypno-track--deep i { background: #8b7cf6; box-shadow: 0 0 8px rgba(139,124,246,0.5); }
/* Velo que se retira de izquierda a derecha revelando el hipnograma */
.sleep__hypno-veil {
  position: absolute; top: 0; right: 0; bottom: 0; left: 18%;
  background: linear-gradient(90deg, transparent 0%, rgba(5,5,20,0.9) 6%, rgba(5,5,20,0.92) 100%);
  will-change: left;
}
@media (max-width: 900px) {
  .sleep__copy { top: calc(env(safe-area-inset-top, 0px) + 58px); }
  .sleep__ring { top: 50%; width: min(320px, 80vw); }
  .sleep__hypno { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); padding: 10px 12px; }
  .hypno-row { margin: 5px 0; }
  .hypno-row small { flex-basis: 56px; }
}

.sleep__screen {
  background: linear-gradient(180deg, #0c0c20 0%, #050510 100%);
  padding: 60px 20px 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.sleep__hdr {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--white-dim); letter-spacing: 0.05em;
}
.sleep__hdr strong { font-family: var(--font-display); font-size: 36px; color: var(--gold); line-height: 1; letter-spacing: 0.04em; }
.hypnogram { width: 100%; height: auto; }
#hypnoPath { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.sleep__stages {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: auto;
}
.sleep__stages div {
  text-align: center; padding: 10px 6px;
  background: rgba(255,255,255,0.04); border-radius: 10px;
}
.sleep__stages strong { font-family: var(--font-display); font-size: 16px; color: var(--gold); display: block; }
.sleep__stages small { font-size: 10px; color: var(--white-dim); letter-spacing: 0.1em; text-transform: uppercase; }

/* ============== ESC 7 · COACHES ============== */
/* Sección pinned: scroll recorre las 5 transformaciones */
.scene--coaches { position: relative; overflow: hidden; min-height: 460vh; }
.scene--coaches .scene__sticky {
  height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.4vh;
  padding: 84px 20px 30px; text-align: center;
}
.coaches__bg { position: absolute; inset: 0; z-index: 0; }
.coaches__bg img, .coaches__bg video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(0.92) contrast(1.06) saturate(1.02);
}
/* El fondo ya trae su gradiente (azul-noche arriba, brasa roja abajo).
   El overlay solo funde los bordes: arriba con la Luna (06), abajo a negro (08),
   y oscurece un poco el centro para que las tarjetas resalten. */
.coaches__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,15,0.55) 0%, transparent 16%, transparent 74%, var(--black) 97%),
    radial-gradient(ellipse 68% 48% at 50% 44%, rgba(10,10,15,0.42) 0%, transparent 72%);
}
.scene--coaches .scene__sticky > * { position: relative; z-index: 3; }

/* Encabezado */
.results__head .scene__title { align-items: center; text-align: center; font-size: clamp(34px, 8vw, 60px); line-height: 0.98; }
.results__sub { font-size: 15px; color: var(--white-dim); margin-top: 10px; }
@media (min-width: 1101px) {
  .results__deck { width: 400px; }
  .results__sub { font-size: 18px; }
}

/* Showcase de transformaciones */
.results { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.results__deck {
  position: relative;
  width: min(340px, 72vw); aspect-ratio: 3 / 4;
  border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(230,35,41,0.14);
  background: #0a0a0f;
}
.results__card { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s ease; }
.results__card.is-active { opacity: 1; }
.results__img, .results__after img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.results__after { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); will-change: clip-path; }
.results__line {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px; z-index: 3;
  background: var(--red); box-shadow: 0 0 18px var(--red), 0 0 40px var(--red-glow);
  will-change: left;
}
.results__tag {
  position: absolute; top: 12px; z-index: 4;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
  transition: opacity 0.4s ease;
}
.results__tag--b { left: 12px; color: rgba(255,255,255,0.85); }
.results__tag--a { right: 12px; color: var(--red); opacity: 0; }

/* Stepper */
.results__stepper { display: flex; gap: 8px; }
.results__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: all 0.35s ease; }
.results__dot.is-active { background: var(--red); box-shadow: 0 0 12px var(--red-glow); transform: scale(1.3); }

/* CTA */
.coaches__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.coaches__pin {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(230,35,41,0.4);
  font-size: 13px; letter-spacing: 0.05em; font-weight: 500;
}

/* ============== ESC 8 · APPLE HEALTH ============== */
.scene--health .scene__sticky {
  flex-direction: column; display: flex; gap: 60px; padding-top: 80px;
}
.health__hub {
  position: relative;
  width: min(800px, 90vw); height: 400px;
}
.health__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.health__line { stroke-dasharray: 600; stroke-dashoffset: 600; }
.health__center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 110px; height: 110px; border-radius: 50%;
  background: linear-gradient(145deg, #1c1c26, #0a0a0f);
  border: 1.5px solid rgba(255,68,88,0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 0 60px rgba(255,68,88,0.3);
  z-index: 5;
}
.health__center small { font-size: 9px; letter-spacing: 0.1em; color: var(--white-dim); }
.health__node {
  position: absolute;
  padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(145deg, #14141d, #0a0a0f);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  opacity: 0; transform: scale(0.8);
}
.health__node strong { font-family: var(--font-display); font-size: 22px; display: block; line-height: 1; color: var(--red); }
.health__node small { font-size: 10px; letter-spacing: 0.12em; color: var(--white-dim); text-transform: uppercase; }
.health__node--tl { top: 60px; left: 80px; }
.health__node--tr { top: 60px; right: 80px; }
.health__node--bl { bottom: 60px; left: 80px; }
.health__node--br { bottom: 60px; right: 80px; }

/* ============== ESC 9 · CTA ============== */
.scene--cta {
  min-height: 100vh; padding: 60px 20px 40px;
  position: relative; overflow: hidden;
  background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}
/* Vignette completo para eliminar cualquier línea de corte del video de fondo */
.scene--cta::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--black) 0%, transparent 15%, transparent 65%, var(--black) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(10,10,15,0.75) 100%);
  z-index: 3; pointer-events: none;
}
.cta__video { opacity: 0.20; mix-blend-mode: screen; filter: brightness(0.55) contrast(1.15); }
.scene--cta .cta__fan, .scene--cta .cta__content { position: relative; z-index: 2; }
/* Carrusel horizontal con iPhone centrado más grande */
.cta__carousel {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 20px 0;
  perspective: 1400px;
}
.cta__carousel::-webkit-scrollbar { display: none; }
.cta__carousel-track {
  display: flex; align-items: center;
  gap: 24px;
  padding: 0 calc(50vw - 110px);
  transform-style: preserve-3d;
}
.cta__phone {
  flex: 0 0 auto;
  position: relative;
  width: 300px; aspect-ratio: 1152 / 2048;
  scroll-snap-align: center;
  transform: scale(0.75) rotateY(0deg);
  opacity: 0.55;
  transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1.15), opacity 0.45s ease, filter 0.45s ease;
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.55));
}
/* Pantalla dentro del iPhone: calibrado del mockup - escala 80% para dejar margen */
.cta__phone-screen {
  position: absolute;
  top: 11.38%; left: 20.40%;
  width: 57.03%; height: 74.51%;
  object-fit: cover;
  border-radius: 22px;
  background: #000;
  transform: scale(0.80);
  transform-origin: center center;
}
/* Video de app dentro del iPhone (galería final) — máscara calibrada del mockup */
.cta__phone-video {
  position: absolute;
  top: 11.38%; left: 19.9%;
  width: 58%; height: 74.9%;
  border-radius: 26px;
  overflow: hidden;
  object-fit: cover; object-position: center top;
  background: #000;
  z-index: 1;
}
.cta__phone-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
.cta__phone.is-center {
  transform: scale(1.15) rotateY(0deg);
  opacity: 1;
  filter: drop-shadow(0 30px 60px rgba(230,35,41,0.35)) drop-shadow(0 20px 40px rgba(0,0,0,0.6));
  z-index: 3;
}
.cta__phone.is-side-left { transform: scale(0.85) rotateY(24deg) translateZ(-30px); opacity: 0.85; z-index: 2; }
.cta__phone.is-side-right { transform: scale(0.85) rotateY(-24deg) translateZ(-30px); opacity: 0.85; z-index: 2; }
.cta__phone.is-far { transform: scale(0.7) rotateY(0deg); opacity: 0.4; z-index: 1; }
@media (max-width: 900px) {
  .cta__phone { width: 230px; }
  .cta__carousel-track { padding: 0 calc(50vw - 115px); gap: 24px; }
  /* Escalado y rotación limpios sin translateX que causen choque */
  .cta__phone.is-side-left {
    transform: scale(0.82) rotateY(28deg) translateZ(-30px);
    transform-origin: right center;
  }
  .cta__phone.is-side-right {
    transform: scale(0.82) rotateY(-28deg) translateZ(-30px);
    transform-origin: left center;
  }
  .cta__phone.is-center { transform: scale(1.05) rotateY(0deg); }
}
.cta__content { text-align: center; max-width: 720px; }
.cta__logo { width: 240px; margin: 0 auto 24px; }
.cta__title {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 120px); line-height: 0.92;
  display: flex; flex-direction: column;
}
.cta__title .accent { color: var(--red); text-shadow: 0 0 60px var(--red-glow); }
.cta__badges {
  margin-top: 36px;
  display: flex; align-items: center; gap: 18px; justify-content: center;
}
.appstore-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; border: 1px solid rgba(255,255,255,0.2);
  padding: 12px 22px; border-radius: 12px;
}
.appstore-badge small { font-size: 10px; color: var(--white-dim); display: block; }
.appstore-badge strong { font-size: 18px; letter-spacing: 0.02em; }
.cta__soon {
  font-size: 11px; letter-spacing: 0.2em; color: var(--gold);
  padding: 6px 12px; border: 1px solid rgba(255,204,51,0.4);
  border-radius: 999px; text-transform: uppercase;
}

/* ============== FOOTER ============== */
.footer {
  padding: 40px 60px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: var(--black);
}
.footer__left { display: flex; flex-direction: column; gap: 8px; }
.footer__left img { width: 140px; opacity: 0.6; }
.footer__left small { font-size: 11px; color: var(--white-dim); letter-spacing: 0.05em; }
.footer__links { display: flex; gap: 24px; font-size: 12px; color: var(--white-dim); }
.footer__links a:hover { color: var(--red); }

/* ============== ULTRA · LOADER ============== */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__logo { position: relative; display: grid; place-items: center; }
.loader__logo img {
  width: 88px; border-radius: 22px;
  box-shadow: 0 0 80px var(--red-glow);
  animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse { 50% { transform: scale(1.05); filter: brightness(1.2); } }
/* Anillo de energía girando alrededor del logo */
.loader__ring {
  position: absolute; width: 132px; height: 132px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--red);
  border-right-color: rgba(230,35,41,0.35);
  animation: loaderSpin 1.1s linear infinite;
  filter: drop-shadow(0 0 12px var(--red-glow));
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
/* Porcentaje grande */
.loader__pct {
  font-family: var(--font-display); font-size: 34px; letter-spacing: 0.06em;
  color: var(--white); line-height: 1; margin: -8px 0;
  font-variant-numeric: tabular-nums;
}
/* Frase motivacional que rota */
.loader__status {
  font-size: 10px; letter-spacing: 0.32em; color: rgba(255,255,255,0.4);
  text-transform: uppercase; min-height: 14px;
  transition: opacity 0.3s ease;
}
.loader__bar {
  width: 200px; height: 2px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden;
}
.loader__bar-fill {
  width: 0%; height: 100%; background: linear-gradient(90deg, var(--red), var(--gold));
  transition: width 0.2s linear;
}
.loader__txt {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.4em;
  color: var(--white-dim);
}

/* ============== ULTRA · CUSTOM CURSOR ============== */
.cursor {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
  mix-blend-mode: difference;
}
.cursor__dot {
  position: absolute; top: 0; left: 0;
  width: 6px; height: 6px; background: #fff; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__ring {
  position: absolute; top: 0; left: 0;
  width: 36px; height: 36px; border: 1.5px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s;
}
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; border-color: var(--red); }
@media (max-width: 900px), (hover: none) { .cursor { display: none; } body { cursor: auto; } }
@media (hover: hover) and (pointer: fine) { html, body { cursor: none; } a, button, input { cursor: none; } }

/* ============== ULTRA · MARQUEE ============== */
.marquee {
  overflow: hidden; padding: 24px 0;
  background: linear-gradient(180deg, transparent, var(--red) 50%, transparent);
  position: relative;
}
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 200px; z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--black), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--black), transparent); }
.marquee__track {
  display: flex; gap: 40px; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px);
  letter-spacing: 0.04em; color: var(--white);
  animation: marquee 50s linear infinite;
  will-change: transform;
}
.marquee__track .dot { color: var(--red); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============== ULTRA · STATS BAR ============== */
.stats {
  padding: 100px 40px;
  background: linear-gradient(180deg, var(--black) 0%, var(--gray-1) 50%, var(--black) 100%);
  border-top: 1px solid rgba(230,35,41,0.15);
  border-bottom: 1px solid rgba(230,35,41,0.15);
}
.stats__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1; color: var(--red);
  text-shadow: 0 0 50px var(--red-glow);
  letter-spacing: 0.02em;
}
.stat__lbl {
  margin-top: 14px;
  font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--white-dim);
}
/* Tira de features (reemplaza métricas infladas) */
.feat { text-align: center; padding: 0 8px; }
.feat__icon {
  width: 58px; height: 58px; margin: 0 auto 16px;
  display: grid; place-content: center;
  border-radius: 16px;
  background: rgba(230,35,41,0.08);
  border: 1px solid rgba(230,35,41,0.22);
  box-shadow: 0 0 30px rgba(230,35,41,0.12);
}
.feat__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.04em; color: var(--white);
  margin-bottom: 8px;
}
.feat__desc {
  font-size: 13px; line-height: 1.5; color: var(--white-dim);
  max-width: 240px; margin: 0 auto;
}
@media (max-width: 900px) {
  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 40px 16px; }
  .feat__desc { font-size: 12px; }
}

/* ============== ULTRA · 3D TILT (phones respond to mouse) ============== */
.phone {
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease-out);
  will-change: transform;
}

/* ============== ULTRA · TEXT SCRAMBLE ============== */
.scramble { display: inline-block; }

/* ============== ULTRA · SECTION VIDEO BG ============== */
.scene__video-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  opacity: 0.28;
  filter: brightness(0.55) contrast(1.15) saturate(0.85);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* En móvil el fondo se pierde con screen+brillo bajo: más notorio */
@media (max-width: 900px) {
  .scene__video-bg {
    opacity: 0.5;
    filter: brightness(0.8) contrast(1.15) saturate(1);
    mix-blend-mode: normal;
  }
}

/* ============== RESPONSIVE ============== */
@media (max-width: 900px) {
  .hero__inner {
    display: flex !important; flex-direction: column;
    padding: calc(var(--nav-h) + 16px) 22px 40px;
    gap: 14px; min-height: auto;
  }
  .scene--hero { min-height: auto; }  /* en móvil sin pin, evita scroll fantasma */
  .hero__content { display: contents; }
  .hero__logo        { order: 0; align-self: center; margin-bottom: 0; }
  .hero__logo img    { width: 220px; }
  .hero__eyebrow     { order: 1; align-self: center; margin-bottom: 0; font-size: 11px; letter-spacing: 0.32em; }
  .hero__title       { order: 2; text-align: center; align-items: center !important; font-size: clamp(48px, 14vw, 80px) !important; margin-bottom: -4px; }
  .hero__phone-wrap  { order: 3; margin: -8px auto 0; }
  .hero__sub         { order: 4; text-align: center; max-width: 480px; margin: 0 auto; font-size: 15px; }
  .hero__ctas        { order: 5; justify-content: center; margin-top: 4px; }
  .hero__scroll      { display: none !important; }
  .iphone-3d         { width: min(330px, 78vw); }
  .scene__sticky {
    grid-template-columns: 1fr !important;
    padding: calc(var(--nav-h) + 20px) 22px 24px;
    gap: 16px;
    height: 100vh;
    overflow: hidden;
    align-items: start;
  }
  .scene--titan { min-height: 280vh; }
  .scene--titan .scene__sticky {
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr !important;
    align-content: start;
  }
  .scene--titan .scene__copy { text-align: center; max-width: 100%; }
  .scene--titan .scene__copy .eyebrow { display: inline-block; margin-bottom: 8px; font-size: 10px; }
  .scene--titan .scene__title { font-size: clamp(32px, 9vw, 48px); line-height: 0.95; }
  .scene--titan .scene__sub { display: none; }
  .scene--titan .iphone-3d--titan { margin: 0 auto; }
  .scene__title { font-size: clamp(36px, 10vw, 56px); }
  .scene__sub { font-size: 14px; }
  .phone { width: 210px; }
  .scene__copy { padding-top: 0; }
  .nav { padding: 0 18px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__brand span { display: none; }
  .macros { right: -10px; }
  .macro { width: 56px; height: 56px; }
  .progress { flex-direction: column; }
  .health__node--tl, .health__node--bl { left: 10px; }
  .health__node--tr, .health__node--br { right: 10px; }
  .cta__fan { height: 260px; }
  .cta__fan-item { width: 120px; height: 260px; }
  .footer { flex-direction: column; gap: 18px; text-align: center; padding: 28px; }
  .btn--ghost { margin-left: 0; }
}

/* =====================================================================
   DESKTOP / LAPTOP (>1100px) — escalado para pantallas grandes.
   Solo min-width:1101px → NO afecta móvil (≤900) ni tablet (901–1100).
   ===================================================================== */
@media (min-width: 1101px) {
  /* — Teléfonos más grandes — */
  .iphone-3d--workout { width: 460px; }
  .scene--nutrition .iphone-3d--nutrition { width: 440px; }
  .iphone-3d--build { width: 360px; }
  .build-carousel { height: min(680px, 74vh); }

  /* — Cards de recetas (deck) más grandes — */
  .recipes__deck { width: 400px; height: 520px; }

  /* — Progreso / transformación más grande — */
  .progress__stage { width: 460px; }

  /* — Anillo de sueño más grande — */
  .sleep__ring { width: 460px; }

  /* — Galería final: teléfonos con video más grandes — */
  .cta__phone { width: 400px; }
  .cta__carousel-track { padding: 0 calc(50vw - 200px); gap: 40px; }
}

/* Pantallas muy grandes (>1600px): un punto más de escala */
@media (min-width: 1600px) {
  .scene--hero .iphone-3d { width: 560px; }
  .iphone-3d--titan { width: 520px; }
  .iphone-3d--workout { width: 500px; }
  .scene--nutrition .iphone-3d--nutrition { width: 480px; }
  .iphone-3d--build { width: 400px; }
  .recipes__deck { width: 440px; height: 572px; }
  .progress__stage { width: 500px; }
  .sleep__ring { width: 500px; }
  .cta__phone { width: 440px; }
  .cta__carousel-track { padding: 0 calc(50vw - 220px); }
}

/* =====================================================================
   DESKTOP — ajustes de layout pedidos por la junta (rediseño laptop).
   Solo >1100px → móvil intacto.
   ===================================================================== */
@media (min-width: 1101px) {
  /* (2) Coach 07: quitar la persona — queda el fondo de garage + CTA */
  .coaches__portrait { display: none !important; }

  /* (3) Progress 05: teléfono del registro más grande (llena el espacio) */
  .iphone-3d--progress { width: 470px; }

  /* (1) Nutrición: fondo de comida uniforme y oscuro → el teléfono NO se
     iguala con el video ni parece sobrepuesto */
  .scene--nutrition .scene__bg--left {
    opacity: 0.20;
    filter: brightness(0.55) contrast(1.05) saturate(1.0);
    mask-image: none; -webkit-mask-image: none;
    object-position: center center;
  }
  .scene--nutrition .scene__sticky {
    background: radial-gradient(ellipse at 32% 50%, rgba(230,35,41,0.06) 0%, transparent 62%);
  }

  /* (4) Nutrición: dos columnas — teléfono/recetas IZQUIERDA, texto DERECHA */
  .scene--nutrition .nutrition__phone { left: 32%; }
  .recipes { justify-content: flex-start; padding-left: 15%; }
  .nutrition__copy {
    left: 55%; right: 5%; top: 0; bottom: 0; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    text-align: left; padding: 0;
  }
  .nutrition__copy-a, .nutrition__copy-b { top: 0; }
  .nutrition__copy .scene__title { align-items: flex-start; text-align: left; }
  .nutrition__copy .scene__sub {
    text-align: left; margin-left: 0; margin-right: 0; max-width: 460px;
  }
  .nutrition__copy-b .eyebrow { text-align: left; }
}

/* =====================================================================
   DESKTOP — tipografía y teléfonos más grandes (hay espacio en laptop).
   Solo >1100px → móvil intacto.
   ===================================================================== */
@media (min-width: 1101px) {
  /* — Títulos de sección más grandes — */
  .scene__title { font-size: clamp(48px, 7.5vw, 116px); }
  .nutrition__copy { left: 53%; }
  .nutrition__copy .scene__title { font-size: 76px; line-height: 0.98; }
  .sleep__copy .scene__title { font-size: 74px; line-height: 0.98; }
  .progress__copy .scene__title { font-size: 82px; line-height: 0.98; }
  .scene--health .scene__title { font-size: 82px; line-height: 0.98; }
  .health__copy-outro .scene__title { font-size: 62px; }
  .builder__copy .scene__title { font-size: 78px; }

  /* — Texto de apoyo y eyebrows un punto más grandes — */
  .scene__sub { font-size: 20px; }
  .hero__sub { font-size: 20px; }
  .nutrition__copy .scene__sub { font-size: 20px; max-width: 500px; }
  .sleep__sub { font-size: 17px; max-width: 500px; }
  .eyebrow { font-size: 14px; letter-spacing: 0.3em; }

  /* — Teléfonos un poco más grandes donde hay espacio — */
  .scene--hero .iphone-3d { width: 540px; }
  .iphone-3d--titan { width: 500px; }
  .iphone-3d--workout { width: 500px; }
  .scene--nutrition .iphone-3d--nutrition { width: 480px; }
}

/* =====================================================================
   DESKTOP — Apple Health (08): sin rectángulo + copies izq/der + títulos.
   Solo >1100px → móvil intacto.
   ===================================================================== */
@media (min-width: 1101px) {
  /* El negro puro (#000) del canvas se vuelve transparente → sin rectángulo,
     solo el neón se funde con el fondo de la página */
  #healthSyncCanvasMobile { mix-blend-mode: screen; }

  /* Copy 1 (intro) IZQUIERDA, copy 2 (outro) DERECHA — centrados vertical */
  .scene--health .scene__copy {
    top: 0; bottom: 0; height: 100%; width: 42%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 5vw; text-align: left;
  }
  .scene--health .health__copy-intro { left: 0; right: auto; align-items: flex-start; text-align: left; }
  .health__copy-intro .scene__title { align-items: flex-start; text-align: left; }
  .health__copy-intro .eyebrow { text-align: left; }
  .scene--health .health__copy-outro { left: auto; right: 0; align-items: flex-end; text-align: right; }
  .health__copy-outro .scene__title { align-items: flex-end; text-align: right; }
  .health__copy-outro .eyebrow { text-align: right; }

  /* Títulos más grandes */
  .scene--health .scene__title { font-size: 88px; line-height: 0.96; }
  .health__copy-outro .scene__title { font-size: 88px; line-height: 0.96; }
}

/* =====================================================================
   iOS: NUNCA mostrar el botón de play que Safari pinta sobre videos
   pausados/bloqueados (modo bajo consumo). Los videos son decorativos
   y arrancan solos por JS.
   ===================================================================== */
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}
video::-webkit-media-controls { display: none !important; }

/* Poster del hero: encima del video (debajo del marco), se desvanece cuando
   el video de verdad reproduce → nunca se ve el play de iOS */
.hero__video-poster {
  z-index: 2; /* video es z-index 2 también; el poster va después en el DOM → encima */
  object-fit: cover;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.hero__video-poster.is-gone { opacity: 0; }

/* =====================================================================
   Fondos 03 y 07 DENTRO del sticky: visibles toda la sección.
   ===================================================================== */
/* 03 · Builder — fondo nuevo, distinguible; la imagen es 35% MÁS ALTA que la
   pantalla y JS la recorre con el scroll → se VE moverse (parallax notorio) */
.builder__bg {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; height: 135%; object-fit: cover; object-position: center top;
  opacity: 0.62;
  filter: brightness(0.85) contrast(1.08) saturate(1.05);
  will-change: transform;
  pointer-events: none;
}
/* Velo suave para que teléfonos/textos sigan mandando */
.scene--builder .scene__sticky::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,15,0.62) 0%, rgba(10,10,15,0.18) 22%, rgba(10,10,15,0.22) 72%, rgba(10,10,15,0.75) 100%),
    radial-gradient(ellipse 70% 52% at 50% 52%, rgba(10,10,15,0.35) 0%, transparent 70%);
}
/* (los teléfonos/copy del builder YA son absolute con su propio z-index —
   no tocar su position, solo el fondo va en z-index 0 y el velo en 1) */

/* 07 · Coaches — imagen VERTICAL LARGA (9:21, extendida por IA): azul-noche
   arriba → garage → brasa roja abajo. Sin recortes: altura natural, y JS la
   recorre COMPLETA de arriba a abajo con el scroll (movimiento evidente). */
.scene--coaches .scene__sticky .coaches__bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.scene--coaches .scene__sticky .coaches__bg img {
  /* 118% (no 132%): una capa de GPU más chica → iOS la compone por hardware
     y el parallax deja de repintar (era lo que hacía pesado el 07 vs el 05) */
  display: block; width: 118%; margin-left: -9%; height: auto;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media (min-width: 901px) {
  .scene--coaches .scene__sticky .coaches__bg img { width: 100%; margin-left: 0; }
}
.scene--coaches .scene__sticky .coaches__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* Se nota el fondo TODA la sección; solo el final funde a negro (empata 08) */
  background:
    linear-gradient(180deg, rgba(10,10,15,0.5) 0%, transparent 15%, transparent 80%, var(--black) 100%),
    radial-gradient(ellipse 66% 46% at 50% 44%, rgba(10,10,15,0.3) 0%, transparent 74%);
}

/* =====================================================================
   LOADER · GALAXIA + ÁTOMO (tema de la app)
   ===================================================================== */
.loader { overflow: hidden; }
/* Estrellas titilando — técnica SUAVE (dot 0% → transparent 100%, como en
   Sleep, que se ve bien): puntos redondos difusos, nada de rayas */
.loader__stars, .loader__stars::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
.loader__stars {
  background:
    radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 68%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 33% 28%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 82%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 15%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 55%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 30%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 75%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 88%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 90%, rgba(255,255,255,0.7) 0%, transparent 100%);
  animation: starTwinkleA 4.5s ease-in-out infinite;
}
.loader__stars::after {
  background:
    radial-gradient(1px 1px at 12% 40%, rgba(230,35,41,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 45%, rgba(255,204,51,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 50%, rgba(230,35,41,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 52%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 60%, rgba(255,255,255,0.45) 0%, transparent 100%);
  animation: starTwinkleB 3.4s ease-in-out infinite;
}
@keyframes starTwinkleA { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes starTwinkleB { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
/* Órbitas de átomo alrededor del logo, con electrón brillante */
.loader__logo { transform-style: preserve-3d; perspective: 500px; }
.loader__orbit {
  position: absolute; width: 168px; height: 168px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  pointer-events: none;
}
.loader__orbit::after {
  content: ''; position: absolute; top: -3.5px; left: 50%; margin-left: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 22px var(--red), 0 0 34px var(--red-glow);
}
.loader__orbit--a { animation: orbitSpinA 2.4s linear infinite; }
.loader__orbit--b { border-color: rgba(230,35,41,0.22); animation: orbitSpinB 3.4s linear infinite; }
.loader__orbit--b::after { background: var(--gold); box-shadow: 0 0 10px var(--gold), 0 0 20px rgba(255,204,51,0.6); }
@keyframes orbitSpinA {
  from { transform: rotateX(64deg) rotate(0deg); }
  to   { transform: rotateX(64deg) rotate(360deg); }
}
@keyframes orbitSpinB {
  from { transform: rotate(58deg) rotateX(70deg) rotate(0deg); }
  to   { transform: rotate(58deg) rotateX(70deg) rotate(-360deg); }
}

/* =====================================================================
   ESC 00 · EL COMERCIAL — apertura de la página (premium, animado)
   ===================================================================== */
.scene--promo {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 76px) 20px 28px;
  background:
    radial-gradient(ellipse 90% 55% at 50% 30%, rgba(230,35,41,0.10) 0%, transparent 60%),
    var(--black);
}
/* Glow respirando detrás del video */
.promo__glow {
  position: absolute; left: 50%; top: 52%;
  width: min(560px, 96vw); aspect-ratio: 9/14;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(230,35,41,0.22) 0%, transparent 65%);
  filter: blur(30px);
  animation: promoBreath 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promoBreath { 0%,100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }

.promo__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; width: 100%;
}
.promo__eyebrow {
  font-family: var(--font-display); font-size: clamp(10px, 2.6vw, 13px);
  letter-spacing: 0.34em; color: var(--red);
  opacity: 0; animation: promoIn 0.9s var(--ease-out) 0.15s forwards;
}
.promo__title {
  font-family: var(--font-display); line-height: 0.95;
  font-size: clamp(34px, 9vw, 84px);
  display: flex; flex-direction: column; align-items: center;
}
.promo__title span { opacity: 0; }
.promo__title span:nth-child(1) { animation: promoIn 0.9s var(--ease-out) 0.3s forwards; }
.promo__title span:nth-child(2) { animation: promoIn 0.9s var(--ease-out) 0.48s forwards; }
.promo__title .accent { color: var(--red); text-shadow: 0 0 50px var(--red-glow); }
@keyframes promoIn {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* El reproductor: tarjeta 9:16 flotando con marco y brillo */
.promo__player {
  position: relative;
  width: min(320px, 74vw);
  aspect-ratio: 720 / 1280;
  border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 90px rgba(0,0,0,0.75), 0 0 70px rgba(230,35,41,0.22);
  opacity: 0;
  animation: promoIn 1s var(--ease-out) 0.7s forwards, promoFloat 6s ease-in-out 1.8s infinite;
}
@keyframes promoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.promo__player video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #000;
}
/* Botón de sonido: píldora glass sobre el video */
.promo__sound {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22);
  background: rgba(10,10,15,0.62); backdrop-filter: blur(10px);
  color: #fff; font-family: var(--font-body, inherit); font-size: 13px; font-weight: 600;
  cursor: pointer; z-index: 3;
  animation: soundPulse 2.2s ease-in-out infinite;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.promo__sound:active { transform: translateX(-50%) scale(0.96); }
.promo__sound.is-on { animation: none; background: rgba(230,35,41,0.85); border-color: rgba(230,35,41,0.9); }
@keyframes soundPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.25); }
  50%     { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
}

/* Indicador de scroll */
.promo__scroll {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.26em;
  color: var(--white-dim); text-transform: uppercase;
  opacity: 0; animation: promoIn 0.9s var(--ease-out) 1.1s forwards;
}
.promo__scroll-arrow { font-size: 18px; color: var(--red); animation: promoBounce 1.6s ease-in-out infinite; }
@keyframes promoBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Desktop: más aire y título más grande */
@media (min-width: 1101px) {
  .promo__player { width: 360px; }
  .promo__inner { gap: 18px; }
}

/* =====================================================================
   PERF · Las animaciones del comercial SOLO corren cuando la sección está
   en pantalla. Fuera de vista se PAUSAN (costaban cuadros a toda la página:
   el glow con blur y el pulso de sombra corrían infinito aunque no se vieran).
   ===================================================================== */
.scene--promo:not(.is-onscreen) .promo__glow,
.scene--promo:not(.is-onscreen) .promo__player,
.scene--promo:not(.is-onscreen) .promo__sound,
.scene--promo:not(.is-onscreen) .promo__scroll-arrow {
  animation-play-state: paused !important;
}
/* El pulso del botón: de box-shadow (repinta cada frame) a un anillo
   compositado (transform+opacity = GPU, costo ~0) */
.promo__sound { animation: none; }
.promo__sound::after {
  content: ''; position: absolute; inset: -3px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.55);
  animation: soundRing 2.2s ease-out infinite;
  pointer-events: none;
}
.promo__sound.is-on::after { display: none; }
@keyframes soundRing {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.scene--promo:not(.is-onscreen) .promo__sound::after { animation-play-state: paused !important; }

/* =====================================================================
   MODO LOW-POWER (html.lowpower) — iPhones viejos / poca RAM/GPU.
   Se quitan los efectos más caros; el contenido y diseño quedan iguales.
   ===================================================================== */
/* blur() gigante del glow del comercial: el más caro de la página */
html.lowpower .promo__glow { display: none; }
/* flotación continua del player (rAF de compositor constante) */
html.lowpower .promo__player { animation: promoIn 1s var(--ease-out) 0.7s forwards; }
/* backdrop-filter: notorio asesino de GPU en iOS viejo → fondos sólidos */
html.lowpower .promo__sound,
html.lowpower .results__tag,
html.lowpower .sleep__hint,
html.lowpower .transform-card__date,
html.lowpower .recipe-card__tag {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(10,10,15,0.88);
}
/* estrellas del loader (2 capas animadas) y cometa fuera */
html.lowpower .loader__stars { display: none; }
/* sombras rojas grandes de los teléfonos → sombra simple */
html.lowpower .iphone-3d {
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.7));
}

/* =====================================================================
   RESPALDO para navegadores SIN aspect-ratio (iOS ≤14, Chrome <88,
   Android viejo): sin esto los contenedores COLAPSAN a altura 0 y la
   página "no renderiza". Truco clásico de padding-top porcentual.
   ===================================================================== */
@supports not (aspect-ratio: 1 / 1) {
  .iphone-3d::before,
  .cta__phone::before,
  .promo__player::before,
  .transform-card::before,
  .results__deck::before,
  .recipe-card__img::before,
  .sleep__ring::before,
  .phone::before {
    content: ''; display: block;
  }
  /* teléfonos 1152/2048 */
  .iphone-3d::before, .cta__phone::before { padding-top: 177.78%; }
  /* player del comercial 720/1280 */
  .promo__player::before { padding-top: 177.78%; }
  /* tarjetas 3:4 */
  .transform-card::before, .results__deck::before { padding-top: 133.33%; }
  /* foto receta 4:3 */
  .recipe-card__img::before { padding-top: 75%; }
  /* anillo de sueño 1:1 */
  .sleep__ring::before { padding-top: 100%; }
  /* phone genérico 9/19.5 */
  .phone::before { padding-top: 216.67%; }
}