/* =====================================================================
   V3-B · HISTORIA — escenas con scroll entre las secciones de siempre.
   Las secciones originales no se mueven ni se borran: las escenas se insertan entre ellas.
   ===================================================================== */
.h-escena { position:relative; height:var(--alto, 320svh); }
.h-pin { position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center; }
.h-cap { position:absolute; left:clamp(16px, 4vw, 48px); top:clamp(70px, 12svh, 110px); z-index:6; font:400 clamp(18px, 2.6vw, 26px) 'Double Scratch', 'Inter', sans-serif; letter-spacing:.02em; }
.h-cap b { font:800 .62em 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.18em; display:block; opacity:.7; margin-bottom:4px; }

/* ---------- 02 · LA ENERGÍA ---------- */
.h-energia .h-pin { background:var(--jm-negro); color:#fff; }
.h-energia .h-cap { color:var(--jm-amarillo); }
.h-cinta { position:absolute; left:0; white-space:nowrap; font:900 clamp(90px, 19vw, 280px)/.82 'Inter Alargada', 'Inter', Impact, sans-serif; text-transform:uppercase; pointer-events:none; will-change:transform; z-index:1; }
.h-cinta.a { top:6svh; color:transparent; -webkit-text-stroke:2px var(--jm-rosa); }
.h-cinta.b { bottom:4svh; color:var(--jm-rosa); }
.h-fotos { position:relative; z-index:2; width:min(36vw, 420px); aspect-ratio:2 / 3; }
.h-fotos img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:circle(0% at 50% 50%); will-change:clip-path, transform; }
.h-fotos img:first-child { clip-path:circle(75% at 50% 50%); }
.h-fotos::after { content:""; position:absolute; inset:-10px; border:3px solid var(--jm-amarillo); transform:rotate(-2deg); pointer-events:none; }
.h-pie { position:absolute; right:clamp(16px, 4vw, 48px); bottom:clamp(84px, 11svh, 110px); z-index:6; font:800 12px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:.75; }
.h-num { position:absolute; left:clamp(16px, 4vw, 48px); bottom:clamp(62px, 9svh, 84px); z-index:6; font:900 clamp(40px, 6vw, 80px)/.8 'Inter Alargada', 'Inter', Impact, sans-serif; color:var(--jm-amarillo); }
.h-num small { font-size:.4em; color:#fff; opacity:.6; }
.h-energia .h-st { position:absolute; z-index:3; pointer-events:none; will-change:transform; }

/* ---------- 03 · EL VIAJE ---------- */
.h-viaje .h-pin { background:var(--jm-azul); color:#fff; }
.h-viaje .h-cap { color:var(--jm-amarillo); }
.h-ciudades { position:absolute; left:0; right:0; top:50%; text-align:center; will-change:transform; z-index:2; }
.h-ciudades div { font:900 clamp(64px, 13vw, 190px)/.92 'Inter Alargada', 'Inter', Impact, sans-serif; text-transform:uppercase; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.55); transition:color .3s, -webkit-text-stroke-color .3s; }
.h-ciudades div.on { color:var(--jm-amarillo); -webkit-text-stroke-color:var(--jm-amarillo); }
.h-ciudades div small { display:block; font:800 clamp(11px, 1.3vw, 15px) 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.2em; -webkit-text-stroke:0; color:#fff; opacity:0; margin:-4px 0 14px; transition:opacity .3s; }
.h-ciudades div.on small { opacity:.85; }
.h-ruta { position:absolute; inset:0; z-index:1; pointer-events:none; width:100%; height:100%; }
.h-ruta path { fill:none; stroke:var(--jm-amarillo); stroke-width:3; stroke-dasharray:var(--largo); stroke-dashoffset:var(--largo); stroke-linecap:round; }
.h-ruta .estela { stroke:rgba(255,255,255,.18); stroke-dasharray:6 10; stroke-dashoffset:0; }
.h-viajera { position:absolute; z-index:3; width:clamp(54px, 7vw, 90px); left:0; top:0; will-change:transform; pointer-events:none; }
.h-viaje .h-ir { position:absolute; z-index:6; right:clamp(16px, 4vw, 48px); bottom:clamp(18px, 4svh, 40px); }
.h-cifras { position:absolute; z-index:6; left:clamp(16px, 4vw, 48px); bottom:clamp(62px, 9svh, 84px); font:800 12px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.h-cifras b { display:block; font:900 clamp(40px, 6vw, 76px)/.85 'Inter Alargada', 'Inter', Impact, sans-serif; color:var(--jm-amarillo); letter-spacing:0; }

/* ---------- 04 · LA MARCA ---------- */
.h-marca .h-pin { background:var(--jm-rosa); color:var(--jm-azul); transition:background .5s; }
.h-marca .h-cap { color:var(--jm-azul); }
.h-titular { position:relative; z-index:5; margin-top:34svh; text-align:center; font:400 clamp(48px, 9vw, 130px)/.9 'Double Scratch', 'Inter', sans-serif; color:var(--jm-azul); pointer-events:none; }
.h-titular small { display:block; font:800 clamp(11px, 1.3vw, 15px) 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.24em; text-transform:uppercase; color:var(--jm-negro); margin-top:14px; }
.h-collage { position:absolute; inset:0; z-index:3; pointer-events:none; }
.h-collage img { position:absolute; left:50%; top:50%; width:var(--w); will-change:transform; filter:drop-shadow(5px 7px 0 rgba(0,0,0,.18)); }
.h-flyers { position:absolute; left:50%; bottom:-6svh; z-index:4; width:0; height:0; pointer-events:none; }
.h-flyers img { position:absolute; width:clamp(120px, 15vw, 210px); left:0; bottom:0; border:4px solid #fff; box-shadow:6px 8px 0 rgba(0,0,0,.2); transform-origin:50% 120%; will-change:transform; }

/* ---------- 05 · LA EXPERIENCIA (sección original) ---------- */
.h-marcador { display:block; max-width:1100px; margin:0 auto; padding:0 16px 10px; font:400 22px 'Double Scratch', 'Inter', sans-serif; color:var(--jm-morado); }
.h-marcador b { font:800 11px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.18em; color:var(--ink); opacity:.6; margin-right:10px; }

/* ---------- 06 · LO SIGUIENTE ---------- */
.h-final { background:var(--jm-negro); color:#fff; padding:clamp(80px, 14svh, 150px) 16px clamp(70px, 10svh, 110px); text-align:center; position:relative; overflow:hidden; }
.h-final .h-grande { font:900 clamp(80px, 17vw, 250px)/.82 'Inter Alargada', 'Inter', Impact, sans-serif; text-transform:uppercase; margin:0; }
.h-final .h-grande span { display:block; }
.h-final .h-grande span:nth-child(2) { color:var(--jm-verde); }
.h-final .h-prox { margin:26px auto 30px; font:500 clamp(15px, 1.8vw, 19px) 'Inter', system-ui, -apple-system, sans-serif; max-width:640px; opacity:.9; }
.h-final .h-prox b { color:var(--jm-amarillo); }
.h-final .cta-row { justify-content:center; display:flex; flex-wrap:wrap; gap:12px; }
.h-final .btn { background:#fff; color:#0B0B0B; border-color:#fff; box-shadow:4px 4px 0 var(--jm-rosa); }
.h-final .btn.hot { background:var(--jm-verde); border-color:var(--jm-verde); color:#0B0B0B; }
.h-final .h-smile { position:absolute; width:clamp(60px, 8vw, 110px); }

/* ---------- capítulo actual + estrella que cruza ---------- */
.h-indice { position:fixed; left:14px; bottom:14px; z-index:80; font:800 11px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.16em; text-transform:uppercase; background:var(--jm-negro); color:#fff; padding:7px 10px; border:2px solid #fff; opacity:0; transform:translateY(10px); transition:opacity .3s, transform .3s; pointer-events:none; }
.h-indice.on { opacity:1; transform:none; }
.h-indice i { font-style:normal; color:var(--jm-amarillo); margin-right:8px; }
.h-fugaz { position:fixed; z-index:90; width:120px; left:0; top:0; pointer-events:none; opacity:0; }
.h-fugaz.va { animation:fugaz 1s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes fugaz { 0% { opacity:0; transform:translate(-20vw, 90vh) rotate(0) scale(.6); } 15% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translate(105vw, -10vh) rotate(540deg) scale(1.1); } }

@media (max-width:700px) {
  .h-fotos { width:min(64vw, 330px); }
  .h-cinta.a { -webkit-text-stroke-width:1.5px; }
  .h-ciudades div { -webkit-text-stroke-width:1.5px; }
  .h-viaje .h-ir { left:16px; right:96px; bottom:18px; justify-content:center; font-size:12px; padding:11px 10px; }
  .h-cifras { bottom:80px; }
  .h-num { bottom:22px; }
  .h-cinta.b { bottom:11svh; }
  .h-pie { display:none; }
  .h-indice { display:none; }   /* en el móvil cada escena ya lleva su rótulo arriba */
  .h-flyers { bottom:3svh; }
  .h-flyers img { width:clamp(96px, 30vw, 140px); }
}

/* sin movimiento: cada escena es una composición quieta, nada se fija */
@media (prefers-reduced-motion: reduce) {
  .h-escena { height:auto; }
  .h-pin { position:relative; height:auto; min-height:100svh; padding:120px 0 80px; }
  .h-fotos img { clip-path:none !important; position:relative; display:none; }
  .h-fotos img:first-child { display:block; }
  .h-fugaz { display:none; }
}

/* =====================================================================
   V4 · ESCENARIOS
   ===================================================================== */
/* palabras que aparecen una a una */
.pal { display:inline-block; opacity:.08; transform:translateY(.35em); transition:opacity .35s, transform .45s cubic-bezier(.3,1.4,.5,1); }
.pal.on { opacity:1; transform:none; }
.h-frase { position:absolute; z-index:6; margin:0; max-width:min(560px, 86vw); font:800 clamp(22px, 3vw, 38px)/1.12 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:-.02em; }

/* ---------- 02 · EL DIRECTO ---------- */
.h-directo .h-pin { background:#000; color:#fff; }
.h-fondo { position:absolute; inset:-40px; z-index:0; }
.h-fondo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(28px) saturate(1.4) brightness(.55); opacity:0; transition:opacity .6s; }
.h-fondo img.on { opacity:1; }
.h-directo .h-cinta.a { top:auto; bottom:2svh; -webkit-text-stroke:2px var(--jm-rosa); opacity:.9; }
.h-directo .h-cap { color:var(--jm-amarillo); }
.h-directo .h-fotos { width:min(34vw, 46svh, 430px); }
.h-directo .h-fotos::after { border-color:#fff; }
.h-directo .h-frase { left:clamp(16px, 5vw, 70px); top:34svh; max-width:min(380px, 30vw); text-shadow:0 2px 18px #000; }
.h-onair { position:absolute; z-index:6; right:clamp(16px, 4vw, 48px); top:clamp(70px, 12svh, 110px); font:800 12px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.24em; display:flex; align-items:center; gap:8px; padding:7px 11px; border:2px solid var(--jm-rojo); color:#fff; background:rgba(0,0,0,.5); }
.h-onair i { width:10px; height:10px; border-radius:50%; background:var(--jm-rojo); box-shadow:0 0 10px var(--jm-rojo); animation:onair 1.1s steps(2) infinite; }
@keyframes onair { 50% { opacity:.2; } }
.h-plato { position:absolute; z-index:4; width:clamp(120px, 15vw, 210px); aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle, #151515 0 3px, #222 3px 5px); box-shadow:0 0 0 6px #2a2a2a, 0 0 0 9px #000, 0 20px 50px rgba(0,0,0,.6); display:grid; place-items:center; }
.h-plato::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:2px dashed rgba(255,255,255,.18); }
.h-plato .gira { width:62%; aspect-ratio:1; border-radius:50%; background:var(--jm-rosa); display:grid; place-items:center; will-change:transform; box-shadow:inset 0 0 0 4px #000; }
.h-plato .gira svg { width:78%; height:auto; }
.h-plato.izq { right:clamp(16px, 5vw, 80px); top:34svh; }
.h-plato.der { right:clamp(140px, 19vw, 300px); bottom:14svh; }
.h-plato.der .gira { background:var(--jm-azul); }
.h-xfader { position:absolute; z-index:6; left:50%; bottom:clamp(20px, 5svh, 44px); transform:translateX(-50%); display:flex; align-items:center; gap:10px; font:800 11px 'Inter', system-ui, -apple-system, sans-serif; color:#fff; letter-spacing:.2em; }
.h-xfader .carril { position:relative; width:min(220px, 40vw); height:6px; background:#333; border-radius:3px; }
.h-xfader i { position:absolute; top:50%; left:0; width:16px; height:28px; transform:translate(-50%, -50%); background:#fff; border:3px solid #000; box-shadow:0 0 0 2px var(--jm-amarillo); border-radius:3px; }

/* ---------- 03 · LA GIRA ---------- */
.h-gira .h-pin { background:var(--jm-azul); color:#fff; }
.h-gira .h-cap { color:var(--jm-amarillo); }
.h-mapa { position:absolute; z-index:1; left:clamp(16px, 4vw, 56px); top:55%; transform:translateY(-50%); width:min(56vw, 94svh); }
.h-gira .h-cifras { display:none; }
.h-mapa svg { width:100%; height:auto; display:block; border:4px solid #000; box-shadow:10px 12px 0 rgba(0,0,0,.3); background:#fff; }
.h-mapa .ruta { fill:none; stroke:var(--jm-rosa); stroke-width:4; stroke-linecap:round; }
.h-mapa .pin circle { fill:var(--jm-amarillo); stroke:#000; stroke-width:4; transform:scale(0); transition:transform .45s cubic-bezier(.3,1.8,.5,1); }
.h-mapa .pin text { font:900 19px 'Inter Alargada', 'Inter', Impact, sans-serif; fill:#000; paint-order:stroke; stroke:#fff; stroke-width:5px; opacity:0; transition:opacity .3s; }
.h-mapa .pin.on circle { transform:scale(1); }
.h-mapa .pin.on text { opacity:1; }
.h-mapa .pin.casa circle { fill:var(--jm-rojo); }
.h-viajera { position:absolute; z-index:5; left:0; top:0; width:clamp(42px, 5vw, 64px); opacity:0; pointer-events:none; will-change:transform; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.h-viajera svg { width:100%; height:auto; display:block; }
.h-ficha { position:absolute; z-index:6; right:clamp(16px, 4vw, 56px); top:50%; transform:translateY(-50%); width:min(32vw, 400px); }
.h-ficha small { display:block; font:800 12px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.18em; text-transform:uppercase; opacity:.8; }
.h-ficha b { display:block; font:900 clamp(56px, 8vw, 120px)/.86 'Inter Alargada', 'Inter', Impact, sans-serif; text-transform:uppercase; color:var(--jm-amarillo); margin:8px 0 12px; }
.h-ficha span { display:block; font:600 15px/1.45 'Inter', system-ui, -apple-system, sans-serif; }
.h-ficha.nueva b { animation:fichaEntra .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes fichaEntra { from { opacity:0; transform:translateY(24px) skewY(4deg); } }
.h-gira .h-ir { position:absolute; z-index:6; right:120px; bottom:clamp(18px, 4svh, 40px); }

/* ---------- 05 · LA HABITACIÓN ---------- */
.h-hab .h-pin { background:#120a24; color:#fff; }
.h-cuarto { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:50% 64%; will-change:transform; }
.h-luz { --r:140%; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse var(--r) calc(var(--r) * .8) at 50% 60%, transparent 55%, rgba(18,10,36,.92) 100%); }
.h-hab .h-cap { color:var(--jm-morado); text-shadow:0 0 12px rgba(0,0,0,.6); }
.h-hab .h-frase { left:50%; top:16svh; transform:translateX(-50%); text-align:center; text-shadow:0 3px 20px #000; }
.h-entra { position:absolute; z-index:6; left:50%; bottom:12svh; transform:translate(-50%, 30px) scale(.9); opacity:0; pointer-events:none; font-size:20px; padding:16px 26px; transition:opacity .4s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.h-entra.on { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }

/* ---------- 06 · la estrella se despide ---------- */
.h-adios { width:clamp(80px, 9vw, 120px); margin:0 auto 10px; animation:adios 1.6s ease-in-out infinite; transform-origin:50% 90%; }
.h-adios svg { width:100%; height:auto; display:block; }
@keyframes adios { 0%, 100% { transform:rotate(-8deg); } 50% { transform:rotate(8deg) translateY(-6px); } }

/* la estrella fugaz es la cara de la mascota */
div.h-fugaz { width:110px; }
div.h-fugaz svg { width:100%; height:auto; display:block; filter:drop-shadow(0 0 14px rgba(254,252,6,.7)); }

@media (max-width:700px) {
  .h-directo .h-fotos { width:min(70vw, 52svh); }
  .h-directo .h-frase { left:16px; right:16px; top:auto; bottom:18svh; max-width:none; font-size:22px; }
  .h-plato { width:92px; } .h-plato.izq { right:10px; top:17svh; } .h-plato.der { display:none; }
  .h-onair { top:calc(12svh + 56px); bottom:auto; right:auto; left:16px; padding:5px 8px; font-size:10px; }
  .h-xfader { display:none; }
  .h-mapa { left:8px; right:8px; width:auto; top:15svh; transform:none; }
  .h-ficha { right:16px; left:16px; width:auto; top:calc(15svh + (100vw - 16px) * .7 + 22px); bottom:auto; transform:none; }
  .h-ficha b { font-size:54px; margin:4px 0 6px; } .h-ficha span { font-size:13px; }
  .h-gira .h-ir { left:16px; right:96px; bottom:18px; justify-content:center; font-size:12px; padding:11px 10px; }
  .h-gira .h-cifras { display:none; }
  .h-hab .h-frase { top:21svh; width:88vw; font-size:22px; }
  .h-adios { animation-duration:2s; }
}
@media (prefers-reduced-motion: reduce) {
  .pal { opacity:1; transform:none; transition:none; }
  .h-onair i, .h-adios { animation:none; }
  .h-mapa .pin circle { transform:scale(1); transition:none; }
  .h-mapa .ruta { stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
  .h-cuarto { transform:none !important; }
}

/* =====================================================================
   WEB DEFINITIVA
   ===================================================================== */
/* menú: refleja la escena actual */
#nav a.hot.on { background:var(--jm-verde); color:#0B0B0B; }
#nav a { scroll-margin-top:80px; }
section[id], .h-escena { scroll-margin-top:0; }

/* ---------- 02 · QUIÉN ES JAVI ---------- */
.h-quien .h-pin { background:#fff; color:var(--jm-negro); }
.h-quien .h-cap { color:var(--jm-rosa); }
.q-nombre { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:center; pointer-events:none; }
.q-nombre span { display:block; white-space:nowrap; font:900 clamp(120px, 27vw, 420px)/.8 'Inter Alargada', 'Inter', Impact, sans-serif; text-transform:uppercase; will-change:transform; }
.q-javi { color:var(--jm-azul); }
.q-moreno { color:transparent; -webkit-text-stroke:3px var(--jm-azul); }
.q-fotos { position:absolute; z-index:3; right:clamp(16px, 8vw, 140px); top:50%; transform:translateY(-50%); width:min(26vw, 40svh, 360px); aspect-ratio:2 / 3; }
.q-fotos img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:inset(100% 0 0 0); border:5px solid #fff; box-shadow:10px 12px 0 var(--jm-rosa); will-change:clip-path, transform; }
.q-bio { position:absolute; z-index:4; left:clamp(16px, 5vw, 80px); top:50%; transform:translateY(-44%) rotate(-.6deg); width:min(44vw, 560px); margin:0; padding:clamp(16px, 2vw, 26px); background:#fff; border:3px solid var(--jm-negro); box-shadow:8px 9px 0 var(--jm-azul); font:700 clamp(17px, 1.6vw, 24px)/1.38 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:-.01em; }
.q-bio .pal { opacity:.12; }
.q-bio .pal.on { opacity:1; }
.q-datos { position:absolute; z-index:4; left:clamp(16px, 5vw, 80px); bottom:clamp(64px, 9svh, 90px); display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; opacity:0; transform:translateY(16px); transition:opacity .4s, transform .5s cubic-bezier(.3,1.5,.5,1); }
.q-datos.on { opacity:1; transform:none; }
.q-datos li { font:600 13px 'Inter', system-ui, -apple-system, sans-serif; border:2px solid var(--jm-negro); padding:7px 11px; background:#fff; }
.q-datos li:nth-child(odd) { transform:rotate(-1.5deg); } .q-datos li:nth-child(even) { transform:rotate(1.5deg); background:var(--jm-amarillo); }
.q-estrella { position:absolute; z-index:5; right:clamp(16px, 6vw, 110px); top:clamp(70px, 11svh, 100px); width:clamp(70px, 8vw, 120px); will-change:transform; }
.q-estrella svg { width:100%; height:auto; display:block; }

/* ---------- 03 · EN DIRECTO (vídeo) ---------- */
.h-live .h-pin { background:#000; color:#fff; }
.l-videos, .l-clip { position:absolute; inset:0; }
.l-clip { clip-path:polygon(0 0, -20% 0, -40% 100%, 0 100%); will-change:clip-path; }
.l-clip:first-child { clip-path:none; }
.l-clip video { width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.l-sombra { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.75) 100%); pointer-events:none; }
.l-titulo { position:absolute; z-index:3; left:0; right:0; top:50%; margin-top:-.9em; text-align:center; font:900 clamp(90px, 17vw, 260px)/.82 'Inter Alargada', 'Inter', Impact, sans-serif; text-transform:uppercase; pointer-events:none; mix-blend-mode:overlay; color:#fff; will-change:transform; }
.l-titulo span { display:block; }
.h-live .h-cap { color:var(--jm-amarillo); z-index:6; }
.h-live .h-frase { left:clamp(16px, 5vw, 70px); bottom:clamp(110px, 16svh, 160px); top:auto; max-width:min(560px, 80vw); text-shadow:0 2px 18px #000; z-index:6; }
.l-pie { position:absolute; z-index:6; left:clamp(16px, 5vw, 70px); bottom:clamp(60px, 8svh, 86px); display:flex; align-items:baseline; gap:6px; }
.l-num { font:900 clamp(40px, 5vw, 70px)/.8 'Inter Alargada', 'Inter', Impact, sans-serif; color:var(--jm-amarillo); }
.l-pie small { font:800 14px 'Inter', system-ui, -apple-system, sans-serif; opacity:.6; }
.l-pie em { font:600 12px 'Inter', system-ui, -apple-system, sans-serif; font-style:normal; letter-spacing:.12em; text-transform:uppercase; opacity:.75; margin-left:12px; }
.h-live .h-onair, .h-live .h-xfader { z-index:6; }

/* ---------- 05 · UNIVERSO ---------- */
.u-estrella { position:absolute; z-index:4; left:50%; top:46%; width:clamp(150px, 19vw, 280px); transform:translate(-50%,-50%); filter:drop-shadow(8px 10px 0 rgba(0,0,0,.18)); will-change:transform; }
.u-estrella svg { width:100%; height:auto; display:block; }
#universo .h-titular { margin-top:52svh; }
.u-baja { position:absolute; z-index:6; left:50%; bottom:clamp(20px, 5svh, 44px); transform:translate(-50%, 20px); opacity:0; font:400 26px 'Double Scratch', 'Inter', sans-serif; color:var(--jm-azul); text-decoration:none; transition:opacity .4s, transform .5s; }
.u-baja.on { opacity:1; transform:translate(-50%, 0); }

/* marcador de bloque (fechas, booking) */
#muro > .h-marcador, #contratacion > .h-marcador { padding-top:clamp(30px, 6svh, 60px); }

/* ---------- móvil ---------- */
@media (max-width:700px) {
  .q-nombre { justify-content:flex-start; padding-top:22svh; }
  .q-nombre span { font-size:34vw; }
  .q-moreno { -webkit-text-stroke-width:2px; }
  .q-fotos { width:38vw; right:12px; top:15svh; transform:none; }
  .q-bio { left:12px; right:12px; width:auto; top:auto; bottom:110px; transform:none; font-size:15px; line-height:1.38; padding:12px 14px; box-shadow:5px 6px 0 var(--jm-azul); }
  .q-datos { left:12px; right:12px; bottom:64px; gap:6px; } .q-datos li { font-size:11px; padding:5px 8px; }
  .q-bio { bottom:130px !important; }
  .q-estrella { width:56px; top:calc(15svh + 38vw * 1.5 - 30px); right:auto; left:calc(100vw - 38vw - 40px); }
  .l-titulo { font-size:26vw; }
  .h-live .h-frase { bottom:120px; font-size:21px; }
  .l-pie { bottom:72px; } .l-pie em { font-size:10px; }
  .h-live .h-onair { top:calc(12svh + 56px); }
  .u-estrella { width:34vw; top:42%; }
  #universo .h-titular { margin-top:60svh; font-size:52px; padding:0 16px; }
  #universo .h-titular small { font-size:10px; letter-spacing:.14em; line-height:1.5; }
}
@media (max-width:700px) and (max-height:700px) { .q-bio { font-size:14px; bottom:120px; } .q-datos li:nth-child(n+3) { display:none; } }

/* ---------- versión ligera (equipos modestos) ---------- */
html.ligero .h-fondo img { filter:none; }
html.ligero .h-fugaz { display:none; }
@media (prefers-reduced-motion: reduce) {
  .q-fotos img { clip-path:none !important; }
  .q-fotos img:not(:first-child) { display:none; }
  .l-clip { clip-path:none !important; } .l-clip:not(:first-child) { display:none; }
  .u-estrella { transform:translate(-50%,-50%) !important; }
}

/* La gira en el móvil: mapa, ficha y botón juntos (sin hueco), nombres de ciudad legibles */
@media (max-width:700px) {
  .h-gira .h-pin { display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:16px; padding:60px 10px 20px; }
  .h-gira .h-mapa, .h-gira .h-ficha, .h-gira .h-ir { position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; transform:none; width:auto; }
  .h-gira .h-ficha { min-height:120px; padding:0 6px; }
  .h-gira .h-ir { align-self:stretch; margin-right:86px; }
  .h-mapa .pin text { font-size:30px; stroke-width:7px; }
  .h-mapa .pin circle { r:12; }
}

/* ---------- 03b · COCO BONGO · CANCÚN ---------- */
.h-coco .h-pin { background:#000; color:#fff; }
.c-clips, .c-clip { position:absolute; inset:0; }
.c-clip { overflow:hidden; will-change:clip-path; }
.c-clip:not(:first-child) { clip-path:inset(32% 32% 32% 32% round 40px); opacity:0; }
.c-clip video { width:100%; height:100%; object-fit:cover; display:block; background:#000; will-change:transform; }
.c-titulo { position:absolute; z-index:3; left:0; right:0; top:50%; margin-top:-.85em; text-align:center; font:900 clamp(100px, 19vw, 300px)/.82 'Inter Alargada', 'Inter', Impact, sans-serif; text-transform:uppercase; pointer-events:none; color:transparent; -webkit-text-stroke:3px var(--jm-amarillo); will-change:transform; }
.c-titulo span { display:block; }
.c-titulo span:last-child { color:var(--jm-amarillo); -webkit-text-stroke:0; mix-blend-mode:normal; }
.h-coco .h-cap { color:var(--jm-amarillo); z-index:6; }
.c-chapa { position:absolute; z-index:6; right:clamp(16px, 4vw, 48px); top:clamp(70px, 12svh, 110px); font:800 12px 'Inter', system-ui, sans-serif; letter-spacing:.2em; text-transform:uppercase; background:var(--jm-verde); color:#0B0B0B; padding:7px 11px; transform:rotate(3deg); box-shadow:3px 3px 0 #000; }
.h-coco .h-frase { left:clamp(16px, 5vw, 70px); bottom:clamp(110px, 16svh, 160px); top:auto; max-width:min(560px, 80vw); text-shadow:0 2px 18px #000; z-index:6; }
.c-num { font:900 clamp(40px, 5vw, 70px)/.8 'Inter Alargada', 'Inter', Impact, sans-serif; color:var(--jm-amarillo); }
@media (max-width:700px) {
  .c-titulo { font-size:27vw; -webkit-text-stroke-width:2px; }
  .h-coco .h-frase { bottom:120px; font-size:21px; }
  .c-chapa { top:calc(12svh + 56px); right:auto; left:16px; font-size:10px; }
}
@media (prefers-reduced-motion: reduce) { .c-clip:not(:first-child) { display:none; } }

/* aviso si el móvil bloquea la reproducción automática (p. ej. modo de bajo consumo) */
.v-toca { position:absolute; z-index:7; left:50%; top:50%; transform:translate(-50%,-50%); font:800 16px 'Inter', system-ui, sans-serif; letter-spacing:.04em; text-transform:uppercase; background:var(--jm-amarillo); color:#0B0B0B; border:3px solid #0B0B0B; box-shadow:5px 5px 0 var(--jm-rosa); padding:14px 20px; cursor:pointer; }
.v-toca[hidden] { display:none; }