/* ═══════════════════════════════════════════════════════════
   TANGO MAGENTA — Design System v3.0
   "El primer sistema que respira."

   Architecture:
     I.   Tokens
     II.  Reset & Base
     III. Typography (Bilingual: es-AR + ko)
     IV.  Layout
     V.   Components
     VI.  Interactive
     VII. Animation System (BPM-Synchronized)
     VIII.Ritual
     IX.  Audio Layer
     X.   Utilities & Queries
   ═══════════════════════════════════════════════════════════ */

/* ─── I. Tokens ─── */
:root {
  /* Palette — Film Noir Foundation */
  --void: #000000;
  --smoke: #0d0d0d;
  --wall: #1a1a1a;
  --stone: #262626;
  --ash: #404040;

  /* Event Color — Magenta only appears on interaction */
  --magenta: #E91E63;
  --deep: #880E4F;

  /* Silver Screen — Default state */
  --silver: #c0c0c0;
  --sepia: #8B7355;

  /* Light tones — Cool, not warm */
  --glow: #e8e8e8;
  --dim: rgba(232, 232, 232, 0.45);
  --ghost: rgba(232, 232, 232, 0.08);
  --breath-bg: rgba(255, 255, 255, 0.02);

  /* Sync State — Set by JS */
  --sync: 0;
  --lead-x: 0px;
  --lead-y: 0px;
  --abrazo: 0;
  --abrazo-x: 50%;
  --abrazo-y: 50%;

  /* BPM 70 — Tango Lento */
  --beat: 857ms;
  --half: 428ms;
  --double: 1714ms;
  --breath: 2571ms;
  --phrase: 3428ms;

  /* Motion */
  --approach: cubic-bezier(0.16, 1, 0.3, 1);
  --retreat: cubic-bezier(0.7, 0, 0.84, 0);
  --embrace: cubic-bezier(0.34, 1.56, 0.64, 1);
  --release: cubic-bezier(0.25, 0, 0.5, 1);
  --heartbeat: cubic-bezier(0.4, 0, 0.2, 1);

  /* Type Scale (modular, ratio 1.25) */
  --t-xs: 0.64rem;
  --t-sm: 0.8rem;
  --t-base: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.563rem;
  --t-xl: 1.953rem;
  --t-2xl: 2.441rem;
  --t-3xl: clamp(2.5rem, 12vw, 4.5rem);

  /* Space (fibonacci-inspired) */
  --s-2xs: 4px;
  --s-xs: 8px;
  --s-sm: 13px;
  --s-md: 21px;
  --s-lg: 34px;
  --s-xl: 55px;
  --s-2xl: 89px;
  --s-3xl: 144px;

  /* Layout */
  --max-w: 430px;
  --radius: 12px;
  --radius-lg: 20px;
  --player-h: 28px;

  /* Font Stacks */
  --f-monument: 'Playfair Display', 'Noto Serif KR', serif;
  --f-voice: 'DM Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-code: 'JetBrains Mono', 'D2Coding', monospace;
  --f-ko: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}


/* ─── II. Reset & Base ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  font-family: var(--f-voice);
  font-weight: 300;
  font-size: var(--t-base);
  line-height: 1.6;
  background: var(--void);
  color: var(--glow);
  max-width: var(--max-w);
  margin: 0 auto;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* Film grain texture overlay — enhanced with jitter */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9000;
  opacity: 0.55;
  animation: grain-shift 0.5s steps(1) infinite;
}

/* Film grain micro-jitter */
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
}

/* Film scratch overlay — vertical lines */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 200px,
    rgba(255,255,255,0.012) 200px,
    rgba(255,255,255,0.012) 201px
  );
  pointer-events: none;
  z-index: 9001;
  opacity: 0;
  animation: scratch-flicker 8s linear infinite;
}

@keyframes scratch-flicker {
  0%, 88%, 100% { opacity: 0; }
  90%, 96% { opacity: 1; }
}

/* Vignette effect — cinema darkness at edges */
body {
  background:
    radial-gradient(
      ellipse at center,
      transparent 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    var(--void);
}

::selection {
  background: rgba(233, 30, 99, 0.25);
  color: var(--glow);
}

/* ─── III. Typography ─── */
h1, h2, h3, h4 {
  font-family: var(--f-monument);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p { margin-bottom: 0; }

a {
  color: var(--magenta);
  text-decoration: none;
  transition: opacity var(--half) var(--approach);
}
a:active { opacity: 0.7; }

/* Monument — The main event
   Hard shadow instead of glow for noir aesthetic
   Responds to device motion via --lead-x/y */
.monumento {
  font-family: var(--f-monument);
  font-size: var(--t-3xl);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-align: center;
  line-height: 0.95;
  color: #ffffff;
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.8),
    4px 4px 8px rgba(0, 0, 0, 0.4);
  transform: translate(
    calc(var(--lead-x, 0px) * 0.3),
    calc(var(--lead-y, 0px) * 0.3)
  );
  transition: transform 0.1s ease-out;
}

/* In sync: monument glows magenta */
body.in-sync .monumento {
  color: var(--magenta);
  text-shadow:
    0 0 60px rgba(233, 30, 99, 0.5),
    2px 2px 0 rgba(0, 0, 0, 0.8);
}

/* Drifting: monument fades */
body.drifting .monumento {
  opacity: 0.6;
  filter: blur(1px);
}

/* Susurro — Whisper labels */
.susurro {
  font-size: var(--t-xs);
  color: var(--dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  font-family: var(--f-code);
}

/* Voz — Body copy */
.voz {
  font-size: var(--t-md);
  color: var(--dim);
  font-weight: 300;
  line-height: 1.8;
}

/* Voz in hero — refined serif italic */
.espacio-centro .voz {
  font-family: var(--f-monument);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  line-height: 1.6;
  color: var(--glow);
  opacity: 0.8;
}

/* Korean subtitle layer */
.ko {
  display: block;
  font-family: var(--f-ko);
  font-size: var(--t-sm);
  color: rgba(240, 232, 236, 0.25);
  font-weight: 300;
  margin-top: var(--s-xs);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
}

.ko--inline {
  display: inline;
  margin-top: 0;
  margin-left: var(--s-xs);
}

/* Magenta — Appears only on event (touch/sync)
   Solo: silver (dormant)
   Paired + Sync: magenta (alive) */
.magenta {
  color: var(--silver);
  text-shadow: none;
  transition: color var(--half) var(--approach),
              text-shadow var(--half) var(--approach);
}

/* Event: touch activates magenta */
section:active .magenta,
.tarjeta:active .magenta,
.puerta:active .magenta {
  color: var(--magenta);
  text-shadow: 0 0 20px rgba(233, 30, 99, 0.3);
}

/* Paired + In Sync: magenta lives */
body.in-sync .magenta {
  color: var(--magenta);
  text-shadow: 0 0 25px rgba(233, 30, 99, 0.4);
}

/* Paired but drifting: faded silver */
body.drifting .magenta {
  color: rgba(192, 192, 192, 0.5);
}

/* Code blocks */
.codigo {
  font-family: var(--f-code);
  font-size: var(--t-sm);
  color: var(--dim);
  background: var(--wall);
  padding: var(--s-md);
  border-radius: var(--radius);
  line-height: 2;
  overflow-x: auto;
}


/* ─── IV. Layout ─── */
.espacio {
  min-height: 100dvh;
  padding: var(--s-2xl) var(--s-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.espacio-centro {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s-xl) var(--s-lg);
  text-align: center;
}

.espacio--compact {
  min-height: auto;
  padding: var(--s-xl) var(--s-lg);
}

.linea {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--silver), transparent);
  margin: var(--s-xl) auto;
  opacity: 0.3;
  transition: background var(--beat) var(--approach);
}

/* Paired: linea turns magenta */
body.paired .linea {
  background: linear-gradient(90deg, transparent, var(--magenta), transparent);
  opacity: 0.5;
}

.linea--full {
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--ash), transparent);
}


/* ─── V. Components ─── */

/* Card — Responds to device motion and touch */
.tarjeta {
  background: linear-gradient(
    180deg,
    rgba(26, 26, 26, 0.9) 0%,
    rgba(13, 13, 13, 1) 100%
  );
  border: 1px solid var(--ghost);
  border-radius: var(--radius-lg);
  padding: var(--s-lg);
  margin-bottom: var(--s-md);
  transition: border-color var(--beat) var(--approach),
              transform var(--half) var(--approach),
              box-shadow var(--beat) var(--approach),
              filter var(--beat) var(--approach);
  position: relative;
  overflow: hidden;
  transform: translate(
    calc(var(--lead-x, 0px) * 0.15),
    calc(var(--lead-y, 0px) * 0.15)
  );
}

/* Touch burn effect — magenta radiates from touch point */
.tarjeta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--touch-x, 50%) var(--touch-y, 50%),
    rgba(233, 30, 99, 0.3) 0%,
    rgba(233, 30, 99, 0.1) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--half) ease-out;
  pointer-events: none;
}

.tarjeta:active {
  border-color: rgba(233, 30, 99, 0.4);
  transform: scale(0.985) translate(
    calc(var(--lead-x, 0px) * 0.15),
    calc(var(--lead-y, 0px) * 0.15)
  );
  box-shadow:
    inset 0 0 30px rgba(233, 30, 99, 0.05),
    0 0 40px rgba(233, 30, 99, 0.08);
}

.tarjeta:active::before { opacity: 1; }

/* Solo mode: floors 3-5 are blurred (locked) */
body:not(.paired) .tarjeta[data-floor="3"],
body:not(.paired) .tarjeta[data-floor="4"],
body:not(.paired) .tarjeta[data-floor="5"] {
  filter: blur(4px) grayscale(0.5);
  pointer-events: none;
  user-select: none;
}

body:not(.paired) .tarjeta[data-floor="3"]::after,
body:not(.paired) .tarjeta[data-floor="4"]::after,
body:not(.paired) .tarjeta[data-floor="5"]::after {
  content: '파트너가 필요합니다';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: var(--silver);
  font-family: var(--f-ko);
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
  z-index: 10;
}

/* Paired: all floors unlocked */
body.paired .tarjeta {
  filter: none;
  pointer-events: auto;
}

/* In sync: cards glow */
body.in-sync .tarjeta {
  border-color: rgba(233, 30, 99, 0.2);
  box-shadow: 0 0 30px rgba(233, 30, 99, 0.05);
}

/* Drifting: cards fade */
body.drifting .tarjeta {
  opacity: 0.7;
  filter: blur(1px);
}

.tarjeta-titulo {
  font-family: var(--f-monument);
  font-size: var(--t-lg);
  font-weight: 600;
  margin-bottom: var(--s-xs);
  position: relative;
}

.tarjeta-texto {
  font-size: var(--t-base);
  color: var(--dim);
  line-height: 1.7;
  position: relative;
}

/* Card with expanded info */
.tarjeta--expandida {
  border-color: rgba(233, 30, 99, 0.2);
  background: linear-gradient(180deg, var(--smoke), rgba(136, 14, 79, 0.05));
}

/* ─── CAD Floor Plan (1F) — Film Frame ─── */
.cad-plano {
  background: #091209;
  border-color: rgba(200, 225, 210, 0.08);
  padding: var(--s-sm);
}

/* Disable default tarjeta touch effect for cad-plano and film-frame */
.cad-plano:not(.film-frame)::before { display: none; }
.tarjeta.film-frame::before { inset: auto !important; }

.cad-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══ VINTAGE 35mm FILM — Aged Projector Look ═══ */
.film-frame {
  position: relative;
  background: #0c0608 !important;
  border: none !important;
  border-radius: 0;
  padding: 18px var(--s-xs) !important;
  margin: var(--s-md) calc(-1 * var(--s-sm)) !important;
  overflow: visible;
}

/* Authentic 35mm Film Sprocket Strip — Small & Worn */
.film-frame::before,
.film-frame::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: #2a1520;
  z-index: 5;
  opacity: 1 !important;
  pointer-events: none;
  /* Tiny sprocket holes like real 35mm film */
  background-image:
    repeating-linear-gradient(
      90deg,
      #2a1520 0px,
      #2a1520 6px,
      #0c0608 6px,
      #0c0608 10px,
      #2a1520 10px,
      #2a1520 18px
    );
  /* Worn film texture */
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.8),
    inset 0 -1px 1px rgba(60, 30, 40, 0.3);
  /* Film grain effect */
  filter: contrast(1.1) brightness(0.95);
}

.film-frame::before {
  top: 0;
  bottom: auto !important;
  border-bottom: 1px solid rgba(80, 40, 55, 0.5);
}
.film-frame::after {
  bottom: 0;
  top: auto !important;
  border-top: 1px solid rgba(80, 40, 55, 0.5);
}

/* Hide old side sprockets */
.film-sprockets { display: none !important; }

/* Film code — Faded vintage print */
.film-code {
  position: absolute;
  top: 1px;
  right: 4px;
  text-align: right;
  z-index: 7;
  opacity: 0.6;
  pointer-events: none;
}

.film-code-num {
  display: block;
  font-family: var(--f-code);
  font-size: 0.65rem;
  font-weight: 400;
  color: #8b4560;
  line-height: 1;
  letter-spacing: 0.02em;
}

.film-code-label {
  display: block;
  font-family: var(--f-code);
  font-size: 0.35rem;
  font-weight: 400;
  color: #6b3548;
  letter-spacing: 0.1em;
}
}

/* Vignette for cinema feel */
.film-frame .cad-svg {
  position: relative;
  z-index: 3;
  width: 110%;
  margin-left: -5%;
  filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.6));
}

/* Corner crop marks — film registration */
.film-frame .susurro {
  position: relative;
  z-index: 4;
}

.film-frame .susurro::before,
.film-frame .susurro::after {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(200, 225, 210, 0.2);
  z-index: 4;
  pointer-events: none;
}

.film-frame .susurro::before {
  top: -8px;
  left: -8px;
  border-right: none;
  border-bottom: none;
}

.film-frame .susurro::after {
  top: -8px;
  right: -8px;
  border-left: none;
  border-bottom: none;
}

/* Zoom-in animation on scroll reveal */
/* Override .revelar transition to prevent conflict */
.film-frame.revelar {
  opacity: 0;
  transform: scale(0.75);
  transition: none;
}

.film-frame.revelar.visible {
  animation: film-zoom-in 1.8s var(--approach) forwards;
}

@keyframes film-zoom-in {
  0% {
    transform: scale(0.75);
    opacity: 0;
    filter: blur(4px);
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1.05);
    opacity: 1;
    filter: blur(0);
  }
}

/* ─── Stone Tablet Carousel (Manifesto) ─── */
.tablet-section {
  padding: var(--s-xxl) 0;
  overflow: hidden;
}

.tablet-carousel {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.tablet-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.tablet {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-md);
  box-sizing: border-box;
}

.tablet-block {
  width: 100%;
  max-width: 340px;
  min-height: 440px;
  background: url('../Stone.png') center 30% / cover no-repeat;
  border-radius: 6px;
  padding: 50px 28px 45px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 8px 40px rgba(0, 0, 0, 0.4);
}

.tablet-block::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.tablet-numeral {
  position: relative;
  display: block;
  font-family: var(--f-monument);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: rgba(255, 210, 120, 0.7);
  margin-bottom: 20px;
  text-shadow: 0 0 8px rgba(255, 180, 60, 0.25);
}

.tablet-numeral::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255, 200, 100, 0.25);
  margin: 12px auto 0;
}

.tablet-text {
  position: relative;
  font-family: var(--f-monument);
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.8;
  color: rgba(245, 235, 220, 0.95);
  letter-spacing: 0.01em;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.5);
}

.tablet-glow {
  color: #ffcc66;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(255, 180, 60, 0.35);
}

.tablet-ko {
  position: relative;
  display: block;
  font-family: 'Noto Serif KR', serif;
  font-size: 0.75rem;
  color: rgba(230, 210, 180, 0.6);
  margin-top: 20px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.tablet-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--s-lg);
}

.tablet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(200, 170, 120, 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.tablet-dot.active {
  background: rgba(255, 200, 100, 0.6);
  transform: scale(1.5);
}

/* Door (Button/Link) */
.puerta {
  display: inline-block;
  padding: var(--s-sm) var(--s-lg);
  background: transparent;
  border: 1px solid rgba(233, 30, 99, 0.2);
  border-radius: var(--radius);
  color: var(--glow);
  font-family: var(--f-voice);
  font-size: var(--t-base);
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  transition: all var(--half) var(--approach);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.puerta:active {
  background: rgba(233, 30, 99, 0.08);
  border-color: var(--magenta);
  transform: scale(0.96);
}

.puerta--principal {
  padding: var(--s-md) var(--s-xl);
  border-color: rgba(233, 30, 99, 0.4);
  font-size: var(--t-md);
  letter-spacing: 0.05em;
}

.puerta--secundaria {
  border-color: rgba(255, 213, 79, 0.2);
  color: var(--gold);
  font-size: var(--t-sm);
}

.puerta--secundaria:active {
  background: rgba(255, 213, 79, 0.05);
  border-color: var(--gold);
}

/* Info line */
.info-linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-xs) 0;
}

.info-linea + .info-linea {
  border-top: 1px solid var(--ghost);
}

.info-clave {
  font-family: var(--f-code);
  font-size: var(--t-xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.info-valor {
  font-family: var(--f-code);
  font-size: var(--t-sm);
  color: var(--glow);
}

.info-valor--vivo { color: #4CAF50; }
.info-valor--magenta { color: var(--magenta); }
.info-valor--gold { color: var(--gold); }

/* Academy info block */
.academia-info {
  margin-top: var(--s-lg);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--ghost);
}

.academia-dato {
  display: flex;
  align-items: baseline;
  gap: var(--s-sm);
  margin-bottom: var(--s-sm);
  font-size: var(--t-sm);
  color: var(--dim);
}

.academia-dato-icono {
  font-size: var(--t-base);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.academia-dato-texto {
  flex: 1;
  line-height: 1.5;
}

.academia-dato--destacado .academia-dato-texto {
  color: var(--glow);
  font-weight: 400;
}

/* Pricing */
.precio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-sm) var(--s-md);
  background: var(--wall);
  border-radius: var(--radius);
  margin-bottom: var(--s-xs);
}

.precio-nombre {
  font-size: var(--t-sm);
  color: var(--glow);
  flex: 1;
}

.precio-monto {
  font-family: var(--f-monument);
  font-size: var(--t-md);
  color: var(--magenta);
  font-weight: 600;
  margin-left: var(--s-md);
}

/* Coupon */
.cupon {
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.06), rgba(136, 14, 79, 0.1));
  border: 1px solid rgba(233, 30, 99, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--s-lg);
  text-align: center;
  margin-top: var(--s-md);
  position: relative;
  overflow: hidden;
}

.cupon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(233, 30, 99, 0.03), transparent 30%);
  animation: cupon-brillo 8s linear infinite;
}

@keyframes cupon-brillo {
  to { transform: rotate(360deg); }
}

.cupon-label {
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: var(--s-xs);
  position: relative;
  z-index: 1;
}

.cupon-oferta {
  font-family: var(--f-monument);
  font-size: var(--t-xl);
  color: var(--glow);
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.cupon-sub {
  font-size: var(--t-sm);
  color: var(--dim);
  margin-top: var(--s-2xs);
  position: relative;
  z-index: 1;
}


/* ─── VI. Interactive ─── */

/* Secret (long press reveal) */
[data-secreto] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.secreto-contenido {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--breath) var(--approach),
              opacity var(--beat) var(--approach);
}

[data-secreto].secreto-visible .secreto-contenido {
  max-height: 200px;
  opacity: 1;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Tap highlight kill */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}


/* ─── VII. Animation System ─── */

/* Heartbeat pulse */
@keyframes latido {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.01); }
}

.latido {
  animation: latido var(--double) var(--heartbeat) infinite;
}

/* Breathing */
@keyframes respirar {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.015); opacity: 1; }
}

.respirar {
  animation: respirar var(--breath) ease-in-out infinite;
}

/* Appear */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal */
.revelar {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--beat) var(--approach),
              transform var(--beat) var(--approach);
}

.revelar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveals */
.revelar:nth-child(2) { transition-delay: 80ms; }
.revelar:nth-child(3) { transition-delay: 160ms; }
.revelar:nth-child(4) { transition-delay: 240ms; }
.revelar:nth-child(5) { transition-delay: 320ms; }

/* Float in from sides */
.revelar--izq {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity var(--beat) var(--approach),
              transform var(--beat) var(--approach);
}
.revelar--der {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--beat) var(--approach),
              transform var(--beat) var(--approach);
}
.revelar--izq.visible,
.revelar--der.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal */
.revelar--escala {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--beat) var(--approach),
              transform var(--beat) var(--approach);
}
.revelar--escala.visible {
  opacity: 1;
  transform: scale(1);
}

/* Glow pulse for important elements */
@keyframes pulso-magenta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); }
  50% { box-shadow: 0 0 40px rgba(233, 30, 99, 0.15); }
}

.pulso {
  animation: pulso-magenta var(--breath) ease-in-out infinite;
}

/* ─── VII-B. Ribbon (인연의 실 — Thread of Fate) ─── */

.ribbon-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.8s var(--release);
}

.ribbon-container.visible {
  opacity: 1;
}

.ribbon-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ribbon-path {
  fill: none;
  stroke: var(--silver);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--beat) var(--approach);
}

/* Paired: ribbon turns magenta based on sync */
body.paired .ribbon-path {
  stroke: var(--magenta);
}

body.in-sync .ribbon-path {
  opacity: 0.25;
}

body.drifting .ribbon-path {
  stroke: var(--silver);
  opacity: 0.05;
}

/* Ambient glow — soft, barely there */
.ribbon-path--ambient {
  stroke-width: 6;
  opacity: 0.03;
  filter: url(#ribbon-ambient);
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 0.08s linear;
}

/* Main ribbon — dim, flicker reveals it */
.ribbon-path--main {
  stroke-width: 1.2;
  opacity: 0.12;
  filter: url(#ribbon-glow);
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 0.08s linear;
}

/* Silk threads — ghost-thin */
.ribbon-path--thread {
  stroke-width: 0.4;
  opacity: 0.08;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 0.08s linear;
}

/* Partner echo — barely visible */
.ribbon-path--echo {
  stroke-width: 0.6;
  opacity: 0.06;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  transition: stroke-dashoffset 0.08s linear;
}

/* Flicker effect — 점등 (lights turning on/off) */
@keyframes ribbon-flicker {
  0%, 100% { opacity: 0.08; }
  15% { opacity: 0.2; }
  30% { opacity: 0.05; }
  45% { opacity: 0.18; }
  60% { opacity: 0.03; }
  75% { opacity: 0.22; }
  90% { opacity: 0.1; }
}

.ribbon-path--main.alive {
  animation: ribbon-flicker 4s ease-in-out infinite;
}

.ribbon-path--thread.alive {
  animation: ribbon-flicker 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* ─── VII-C. Dance Video Section ─── */

.danza-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: var(--s-lg) 0;
}

.danza-video-wrap {
  position: relative;
  width: 78%;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  max-height: 38vh;
  overflow: visible;
  border-radius: 0;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.danza-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Vintage film color grade */
  filter: sepia(0.08) contrast(1.05) brightness(0.98);
}

/* ═══ VINTAGE 35mm FILM — Worn Projector Strip ═══ */
.danza-video-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: #2a1520;
  border-bottom: 1px solid rgba(80, 40, 55, 0.5);
  /* Tiny authentic sprocket holes */
  background-image:
    repeating-linear-gradient(
      90deg,
      #2a1520 0px,
      #2a1520 6px,
      #0c0608 6px,
      #0c0608 10px,
      #2a1520 10px,
      #2a1520 18px
    );
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  filter: contrast(1.1) brightness(0.95);
}

.danza-video-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: #2a1520;
  border-top: 1px solid rgba(80, 40, 55, 0.5);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 8px,
      #0a0408 8px,
      #2a1520 0px,
      #2a1520 6px,
      #0c0608 6px,
      #0c0608 10px,
      #2a1520 10px,
      #2a1520 18px
    );
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.8);
  filter: contrast(1.1) brightness(0.95);
}

/* Caption overlay — vintage faded */
.danza-caption {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 4;
  pointer-events: none;
}

.danza-caption .susurro {
  color: rgba(180, 140, 155, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  font-weight: 400;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
}

/* ─── VII-D. Fingerprint Portal (Huella) ─── */

.huella-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-sm);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--half) var(--approach);
}

.huella-link:active {
  transform: scale(0.94);
}

/* Fingerprint Portal — Grayscale by default, magenta on event */
.huella-svg {
  width: 100px;
  height: 117px;
  filter: drop-shadow(0 0 20px rgba(192, 192, 192, 0.2))
          grayscale(1) contrast(1.1);
  transition: filter var(--beat) var(--approach);
}

/* Touch: fingerprint comes alive */
.huella-link:active .huella-svg {
  filter: drop-shadow(0 0 30px rgba(233, 30, 99, 0.6))
          drop-shadow(0 0 80px rgba(233, 30, 99, 0.2))
          grayscale(0);
}

/* Paired: always magenta */
body.paired .huella-svg {
  filter: drop-shadow(0 0 20px rgba(233, 30, 99, 0.3))
          grayscale(0);
}

.huella-ridge {
  fill: none;
  stroke: var(--silver);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: huella-draw var(--double) var(--approach) forwards;
  transition: stroke var(--half) var(--approach);
}

/* Touch: ridges turn magenta */
.huella-link:active .huella-ridge {
  stroke: var(--magenta);
}

/* Paired: ridges always magenta */
body.paired .huella-ridge {
  stroke: var(--magenta);
}

.huella-ridge--1 { opacity: 0.35; animation-delay: 0ms; }
.huella-ridge--2 { opacity: 0.5; animation-delay: 120ms; }
.huella-ridge--3 { opacity: 0.65; animation-delay: 240ms; }
.huella-ridge--4 { opacity: 0.8; animation-delay: 360ms; }
.huella-ridge--5 { opacity: 0.95; animation-delay: 480ms; }

@keyframes huella-draw {
  to { stroke-dashoffset: 0; }
}

/* Shimmer effect — traveling highlight along ridges */
.huella-ridge--3,
.huella-ridge--4,
.huella-ridge--5 {
  animation: huella-draw var(--double) var(--approach) forwards,
             huella-shimmer 3.4s ease-in-out infinite;
}

@keyframes huella-shimmer {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 6px rgba(233, 30, 99, 0.8)); }
}

.huella-core {
  fill: var(--silver);
  opacity: 0;
  animation: huella-core-pulse var(--breath) ease-in-out infinite;
  animation-delay: 600ms;
  transition: fill var(--half) var(--approach);
}

/* Core turns magenta on touch or paired */
.huella-link:active .huella-core,
body.paired .huella-core {
  fill: var(--magenta);
}

@keyframes huella-core-pulse {
  0%, 100% { opacity: 0.5; r: 4; }
  50% { opacity: 1; r: 6; }
}

.huella-label {
  font-family: var(--f-ko);
  font-size: var(--t-sm);
  color: var(--dim);
  letter-spacing: 0.05em;
  opacity: 0.5;
  transition: opacity var(--half) var(--approach);
}

.huella-link:active .huella-label {
  opacity: 1;
}

/* Idle state */
body.respirando .monumento {
  animation: respirar var(--breath) ease-in-out infinite;
}

body.respirando .susurro {
  opacity: 0.2;
  transition: opacity var(--breath) ease;
}


/* ─── VIII. Ritual ─── */
.ritual {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-lg);
  opacity: 1;
  transition: opacity 1.8s var(--release);
}

.ritual.despierta {
  opacity: 0;
  pointer-events: none;
}

.ritual-texto {
  font-family: var(--f-monument);
  font-size: var(--t-md);
  color: var(--glow);
  opacity: 0;
  animation: aparecer var(--breath) var(--approach) forwards;
  animation-delay: 2.5s;
}

.ritual-saltar {
  position: absolute;
  bottom: var(--s-xl);
  font-size: var(--t-xs);
  color: rgba(240, 232, 236, 0.15);
  border: none;
  background: none;
  padding: var(--s-sm) var(--s-md);
  cursor: pointer;
  opacity: 0;
  animation: aparecer 0.5s ease forwards;
  animation-delay: 1s;
  transition: color 0.3s ease;
  font-family: var(--f-ko);
  letter-spacing: 0;
}

.ritual-saltar:active {
  color: rgba(240, 232, 236, 0.5);
}


/* ─── IX. Audio Layer (CNN Breaking Ticker) ─── */
.reproductor {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-w);
  height: var(--player-h);
  background: #0c0c0c;
  z-index: 50;
  overflow: hidden;
  border-top: 1px solid #222;
}

/* YouTube player is hidden via container div inline styles (1px, opacity:0) */
/* iframe must remain rendered for playback to work */

/* CNN-Style Ticker Bar */
.ticker {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Red "LIVE" badge — exactly like CNN
   Solo: gray (distant)
   Paired: red (alive)
   In-sync: magenta (connected) */
.ticker-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: #444;
  flex-shrink: 0;
  position: relative;
  transition: background var(--half) var(--approach);
}

/* Paired: badge turns red */
body.paired .ticker-badge {
  background: #cc0000;
}

/* In sync: badge turns magenta */
body.in-sync .ticker-badge {
  background: var(--magenta);
}

.ticker-badge::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(to right, #444, transparent);
  transition: background var(--half) var(--approach);
}

body.paired .ticker-badge::after {
  background: linear-gradient(to right, #cc0000, transparent);
}

body.in-sync .ticker-badge::after {
  background: linear-gradient(to right, var(--magenta), transparent);
}

.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: cnn-blink 1.5s step-end infinite;
}

@keyframes cnn-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.ticker-label {
  font-family: var(--f-code);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  text-transform: uppercase;
}

/* Scrolling text area — CNN lower third */
.ticker-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  background: #0c0c0c;
  padding-left: 12px;
}

.ticker-text {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--f-code);
  font-size: 0.6rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.03em;
  animation: cnn-scroll 22s linear infinite;
  will-change: transform;
}

.ticker-text b {
  color: #fff;
  font-weight: 700;
}

.ticker-text .sep {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #cc0000;
  border-radius: 1px;
  margin: 0 12px;
  vertical-align: middle;
  transform: rotate(45deg);
}

@keyframes cnn-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Ticker Play Button */
.ticker-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  background: var(--wall);
  border: none;
  border-left: 1px solid #333;
  color: var(--silver);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.7rem;
  transition: background var(--half) var(--approach),
              color var(--half) var(--approach);
}

.ticker-play:active {
  background: rgba(233, 30, 99, 0.2);
  color: var(--magenta);
}

.ticker-play.playing {
  color: var(--magenta);
}

/* Solo mode: ticker is distant/gray */
body:not(.paired) .ticker {
  opacity: 0.5;
  filter: grayscale(0.5);
}

body:not(.paired) .ticker-text {
  color: rgba(255, 255, 255, 0.4);
}

/* Paired: ticker is alive */
body.paired .ticker {
  opacity: 1;
  filter: none;
}

/* In sync: ticker glows */
body.in-sync .ticker {
  box-shadow: 0 -2px 20px rgba(233, 30, 99, 0.2);
}

/* Beat pulse indicator */
body.beat .ticker-dot {
  transform: scale(1.8);
  transition: transform 0.1s ease-out;
}

/* Beat pulse overlay */
.beat-pulse {
  position: fixed;
  inset: 0;
  border: 2px solid var(--magenta);
  opacity: 0;
  animation: pulse-expand var(--beat) ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes pulse-expand {
  0% {
    opacity: 0.3;
    transform: scale(0.98);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Hidden audio element for actual playback */
.reproductor audio {
  display: none;
}

body.con-reproductor {
  padding-bottom: var(--player-h);
}

body.con-reproductor .pie {
  padding-bottom: calc(var(--s-2xl) + var(--player-h));
}


/* ─── IX-B. Abrazo (Two-Finger Embrace) ─── */

/* When two fingers touch = abrazo (embrace)
   Magenta radiates from the embrace point */
body.abrazando::before {
  content: '';
  position: fixed;
  left: var(--abrazo-x, 50%);
  top: var(--abrazo-y, 50%);
  width: calc(100px + var(--abrazo, 0) * 300px);
  height: calc(100px + var(--abrazo, 0) * 300px);
  background: radial-gradient(
    circle,
    rgba(233, 30, 99, calc(var(--abrazo, 0) * 0.4)) 0%,
    rgba(233, 30, 99, calc(var(--abrazo, 0) * 0.1)) 40%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: width 0.2s ease-out, height 0.2s ease-out;
}

/* During abrazo, the world softens */
body.abrazando .monumento {
  filter: blur(0);
  opacity: calc(0.3 + var(--abrazo, 0) * 0.7);
}

body.abrazando .tarjeta {
  filter: blur(calc(3px - var(--abrazo, 0) * 3px));
}

/* ─── IX-C. Sync Visualization ─── */

/* Ghost traces from previous sessions */
.ghost-traces {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.ghost-path {
  fill: none;
  stroke: var(--magenta);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ghost-draw 20s ease-out forwards;
}

@keyframes ghost-draw {
  to { stroke-dashoffset: 0; }
}

/* Sync bridge between two fingerprints */
.sync-visualizer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-md);
}

.sync-bridge {
  width: calc(20px + var(--sync, 0) * 80px);
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--magenta),
    transparent 20%,
    transparent 80%,
    var(--magenta)
  );
  opacity: var(--sync, 0);
  transition: all 0.3s ease;
}

body.in-sync .sync-bridge {
  background: var(--magenta);
  box-shadow: 0 0 20px var(--magenta);
}

/* Partner invitation overlay */
.portal-solo {
  text-align: center;
}

.portal-paired {
  text-align: center;
}

.invite-code {
  font-family: var(--f-code);
  font-size: var(--t-lg);
  color: var(--glow);
  letter-spacing: 0.1em;
  margin-top: var(--s-md);
  padding: var(--s-sm) var(--s-md);
  background: var(--smoke);
  border: 1px solid var(--ghost);
  border-radius: var(--radius);
}

.partner-code {
  font-family: var(--f-code);
  font-size: var(--t-base);
  color: var(--glow);
  background: var(--smoke);
  border: 1px solid var(--ghost);
  border-radius: var(--radius);
  padding: var(--s-sm) var(--s-md);
  margin-top: var(--s-sm);
  text-align: center;
  width: 200px;
}

.partner-code:focus {
  border-color: var(--magenta);
  outline: none;
}

.sync-status {
  font-family: var(--f-ko);
  font-size: var(--t-sm);
  color: var(--dim);
  margin-top: var(--s-sm);
}

body.in-sync .sync-status {
  color: var(--magenta);
}

/* ─── IX-D. Partner Guide ─── */

.guide-container {
  max-width: 100%;
  padding: 0 var(--s-md);
}

.guide-titulo {
  font-family: var(--f-monument);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 400;
  color: var(--glow);
  text-align: center;
  margin: var(--s-md) 0 var(--s-md);
  letter-spacing: -0.01em;
}

.guide-steps {
  display: flex;
  gap: var(--s-sm);
  margin-bottom: var(--s-xl);
}

.guide-step {
  flex: 1;
  text-align: center;
  padding: var(--s-md) var(--s-xs);
  background: var(--smoke);
  border: 1px solid var(--ghost);
  border-radius: var(--radius);
  transition: border-color var(--half) var(--approach),
              background var(--half) var(--approach);
}

.guide-step:hover,
.guide-step.active {
  border-color: rgba(233, 30, 99, 0.3);
  background: rgba(233, 30, 99, 0.03);
}

.guide-step-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto var(--s-xs);
  color: var(--silver);
  transition: color var(--half) var(--approach);
}

.guide-step:hover .guide-step-icon,
.guide-step.active .guide-step-icon {
  color: var(--magenta);
}

.guide-step-icon svg {
  width: 100%;
  height: 100%;
}

.guide-step-title {
  font-family: var(--f-ko);
  font-size: var(--t-sm);
  color: var(--glow);
  margin-bottom: var(--s-2xs);
  font-weight: 500;
}

.guide-step-desc {
  font-family: var(--f-voice);
  font-size: var(--t-xs);
  color: var(--dim);
  line-height: 1.4;
}

.guide-step-ko {
  display: block;
  font-size: 0.6rem;
  margin-top: var(--s-2xs);
  opacity: 0.5;
}

/* Demo Animation */
.guide-demo {
  background: var(--wall);
  border-radius: var(--radius-lg);
  padding: var(--s-lg);
  margin-bottom: var(--s-lg);
  text-align: center;
}

.demo-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-md);
  margin: var(--s-lg) 0;
}

.demo-phone {
  width: 60px;
  height: 100px;
  background: var(--smoke);
  border: 2px solid var(--ash);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, border-color var(--half) var(--approach);
}

.demo-phone--lead {
  transform-origin: center;
}

.demo-phone--follow {
  transform-origin: center;
}

.demo-screen {
  text-align: center;
}

.demo-dot {
  width: 8px;
  height: 8px;
  background: var(--silver);
  border-radius: 50%;
  margin: 0 auto var(--s-2xs);
  transition: background var(--half) var(--approach),
              box-shadow var(--half) var(--approach);
}

.demo-phone span {
  font-family: var(--f-ko);
  font-size: 0.6rem;
  color: var(--dim);
}

.demo-sync-line {
  width: 40px;
  height: 2px;
  background: var(--ash);
  border-radius: 1px;
  position: relative;
  transition: background var(--half) var(--approach),
              box-shadow var(--half) var(--approach);
}

/* Demo Active State */
.guide-demo.active .demo-phone {
  border-color: var(--magenta);
}

.guide-demo.active .demo-dot {
  background: var(--magenta);
  box-shadow: 0 0 12px var(--magenta);
}

.guide-demo.active .demo-sync-line {
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
}

.guide-demo.active .demo-phone--lead {
  animation: demo-tilt-lead 2s ease-in-out infinite;
}

.guide-demo.active .demo-phone--follow {
  animation: demo-tilt-follow 2s ease-in-out infinite;
}

@keyframes demo-tilt-lead {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

@keyframes demo-tilt-follow {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

.guide-demo-hint {
  font-family: var(--f-ko);
  font-size: var(--t-xs);
  color: var(--dim);
  margin-bottom: var(--s-md);
}

.guide-demo-btn {
  font-family: var(--f-ko);
  padding: var(--s-xs) var(--s-lg);
  font-size: var(--t-sm);
}

/* Invite Code Box — Compact & Refined */
.guide-invite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  background: rgba(20, 12, 16, 0.8);
  border: 1px solid rgba(80, 40, 55, 0.4);
  border-radius: 6px;
  padding: var(--s-xs) var(--s-sm);
  margin-bottom: var(--s-sm);
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.guide-invite .susurro {
  display: none;
}

.guide-invite-code {
  font-family: var(--f-code);
  font-size: var(--t-sm);
  color: rgba(180, 100, 130, 0.9);
  letter-spacing: 0.12em;
  font-weight: 400;
}

.guide-copy-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(80, 40, 55, 0.3);
  border-radius: 4px;
  color: rgba(140, 80, 100, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--half) var(--approach);
}

.guide-copy-btn:active {
  background: rgba(140, 60, 90, 0.15);
  border-color: rgba(140, 60, 90, 0.5);
  color: rgba(180, 100, 130, 0.9);
}

.guide-copy-btn svg {
  width: 14px;
  height: 14px;
}

.guide-copy-btn.copied {
  background: rgba(60, 120, 60, 0.15);
  border-color: rgba(80, 140, 80, 0.5);
  color: rgba(120, 180, 120, 0.8);
}

/* Partner Join — Compact */
.guide-join {
  display: flex;
  gap: var(--s-2xs);
  margin-bottom: var(--s-sm);
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.guide-join .susurro {
  display: none;
}

.guide-partner-input {
  flex: 1;
  text-transform: lowercase;
  font-size: var(--t-xs);
  padding: var(--s-xs) var(--s-sm);
  background: rgba(20, 12, 16, 0.8);
  border: 1px solid rgba(80, 40, 55, 0.4);
}

.guide-join-btn {
  font-family: var(--f-ko);
  padding: var(--s-xs) var(--s-sm);
  font-size: var(--t-xs);
  background: rgba(100, 40, 60, 0.3);
  border: 1px solid rgba(140, 60, 90, 0.4);
  color: rgba(180, 120, 140, 0.9);
}
  font-size: var(--t-sm);
  flex-shrink: 0;
}

/* Connection Status */
.guide-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  padding: var(--s-sm);
}

.guide-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ash);
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.guide-status-text {
  font-family: var(--f-ko);
  font-size: var(--t-xs);
  color: var(--dim);
}

/* Status States */
.guide-status.connecting .guide-status-dot {
  background: #FFC107;
}

.guide-status.connecting .guide-status-text {
  color: #FFC107;
}

.guide-status.connected .guide-status-dot {
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
  animation: none;
}

.guide-status.connected .guide-status-text {
  color: var(--magenta);
}

/* Hide old portal invite elements when guide is present */
#portal .partner-code,
#portal #inviteCode {
  display: none;
}

/* ─── IX-E. Ritual Extension ─── */

/* Motion permission button (iOS) */
.ritual-motion-btn {
  font-family: var(--f-ko);
  font-size: var(--t-base);
  color: var(--glow);
  background: transparent;
  border: 1px solid rgba(233, 30, 99, 0.3);
  border-radius: var(--radius);
  padding: var(--s-sm) var(--s-lg);
  margin-top: var(--s-xl);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease, border-color 0.3s ease;
}

.ritual-motion-btn:active {
  border-color: var(--magenta);
  background: rgba(233, 30, 99, 0.1);
}

/* Ritual instruction text */
.ritual-instruction {
  font-family: var(--f-ko);
  font-size: var(--t-sm);
  color: var(--dim);
  margin-top: var(--s-md);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ═══ ENDING CREDITS — Award-Winning Presentation ═══ */
.ending-credits {
  position: relative;
  padding: var(--s-2xl) 0;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(10, 5, 8, 0.8) 20%,
    rgba(10, 5, 8, 0.95) 50%,
    rgba(10, 5, 8, 0.8) 80%,
    transparent 100%
  );
}

/* Curtain reveal */
.credits-curtain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, #0a0508 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Stage container */
.credits-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin-bottom: var(--s-lg);
  perspective: 1200px;
}

/* Spotlight effect */
.spotlight {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 240, 220, 0.08) 0%,
    rgba(200, 180, 160, 0.03) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  animation: spotlight-breathe 4s ease-in-out infinite;
}

@keyframes spotlight-breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* The Shoes — Hero Image */
.credits-shoes {
  position: relative;
  z-index: 2;
}

.shoes-hero {
  width: 180px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8))
          drop-shadow(0 0 60px rgba(80, 50, 60, 0.3));
  animation: shoes-float 6s ease-in-out infinite;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.5s ease;
}

.credits-shoes:hover .shoes-hero {
  transform: translateY(-10px) scale(1.05) rotateY(5deg);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.9))
          drop-shadow(0 0 80px rgba(140, 80, 100, 0.4));
}

@keyframes shoes-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(1deg); }
  50% { transform: translateY(-4px) rotate(0deg); }
  75% { transform: translateY(-10px) rotate(-1deg); }
}

/* Reflection */
.shoes-reflection {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%) scaleY(-1) perspective(500px) rotateX(30deg);
  width: 180px;
  height: 100px;
  background: url('shoes.png') center top / contain no-repeat;
  opacity: 0.15;
  filter: blur(3px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent 70%);
  pointer-events: none;
}

/* Floor shadow */
.shoes-shadow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 70%);
  border-radius: 50%;
  animation: shadow-pulse 6s ease-in-out infinite;
}

@keyframes shadow-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
  25% { transform: translateX(-50%) scale(0.9); opacity: 0.5; }
  75% { transform: translateX(-50%) scale(0.85); opacity: 0.45; }
}

/* Floating particles */
.credits-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Credits Text — Cinema Style */
.credits-text {
  position: relative;
  z-index: 2;
  padding: 0 var(--s-lg);
}

.credits-tagline {
  font-family: var(--f-monument);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(200, 180, 170, 0.7);
  letter-spacing: 0.15em;
  margin-bottom: var(--s-2xs);
  animation: text-fade-in 1s ease-out 0.5s both;
}

.credits-tagline-ko {
  display: block;
  font-family: var(--f-ko);
  font-size: 0.7rem;
  color: rgba(160, 140, 130, 0.5);
  margin-bottom: var(--s-md);
  animation: text-fade-in 1s ease-out 0.7s both;
}

.credits-divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 140, 150, 0.4), transparent);
  margin: var(--s-md) auto;
  animation: text-fade-in 1s ease-out 0.9s both;
}

.credits-role {
  font-family: var(--f-code);
  font-size: 0.55rem;
  color: rgba(140, 120, 110, 0.5);
  letter-spacing: 0.3em;
  margin-bottom: var(--s-3xs);
  animation: text-fade-in 1s ease-out 1.1s both;
}

.credits-name {
  font-family: var(--f-monument);
  font-size: 0.8rem;
  color: rgba(200, 180, 170, 0.8);
  letter-spacing: 0.08em;
  margin-bottom: var(--s-sm);
  animation: text-fade-in 1s ease-out 1.3s both;
}

@keyframes text-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── X. Utilities & Queries ─── */

/* Footer */
.pie {
  padding: var(--s-2xl) var(--s-lg);
  text-align: center;
}

.pie-marca {
  font-family: var(--f-monument);
  font-size: var(--t-lg);
  color: var(--silver);
  margin-bottom: var(--s-xs);
  letter-spacing: -0.02em;
  transition: color var(--beat) var(--approach);
}

/* Paired: footer glows magenta */
body.paired .pie-marca {
  color: var(--magenta);
}

.pie-copy {
  font-size: var(--t-xs);
  color: var(--dim);
  font-family: var(--f-code);
}

/* Gate */
.puerta-secreta {
  position: fixed;
  inset: 0;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.clave-input {
  display: flex;
  gap: var(--s-xs);
  justify-content: center;
  margin-top: var(--s-xl);
}

.clave-digito {
  width: 48px;
  height: 56px;
  background: var(--smoke);
  border: 1px solid var(--ash);
  border-radius: var(--radius);
  color: var(--glow);
  font-family: var(--f-monument);
  font-size: var(--t-lg);
  text-align: center;
  outline: none;
  transition: border-color var(--half) var(--approach),
              box-shadow var(--half) var(--approach);
}

.clave-digito:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 20px rgba(233, 30, 99, 0.12);
}

/* Spacing utilities */
.mt-sm { margin-top: var(--s-sm); }
.mt-md { margin-top: var(--s-md); }
.mt-lg { margin-top: var(--s-lg); }
.mt-xl { margin-top: var(--s-xl); }
.mb-sm { margin-bottom: var(--s-sm); }
.mb-md { margin-bottom: var(--s-md); }
.gap-sm { gap: var(--s-sm); }
.gap-md { gap: var(--s-md); }

/* Desktop frame */
@media (min-width: 431px) {
  body {
    border-left: 1px solid var(--wall);
    border-right: 1px solid var(--wall);
    box-shadow: 0 0 120px rgba(233, 30, 99, 0.02);
  }
}

/* Safe areas */
@supports (padding-top: env(safe-area-inset-top)) {
  .espacio-centro:first-of-type {
    padding-top: calc(var(--s-xl) + env(safe-area-inset-top));
  }
  body.con-reproductor {
    padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ritual { display: none; }
  .revelar { opacity: 1; transform: none; }
  body::before { display: none; }
  .ribbon-container { display: none; }
  .ribbon-path { stroke-dashoffset: 0 !important; }
}

/* High contrast */
@media (prefers-contrast: high) {
  :root {
    --dim: rgba(240, 232, 236, 0.7);
    --ghost: rgba(240, 232, 236, 0.25);
  }
  .tarjeta { border-color: var(--ash); }
}

/* Print */
@media print {
  body { background: #fff; color: #000; max-width: 100%; }
  body::before, .ritual, .reproductor { display: none; }
  .magenta { color: #c2185b; }
  .tarjeta { border: 1px solid #ddd; break-inside: avoid; }
}