/* Intro de Huddle AI: vídeo de Nero con subtítulos cinéticos y, si el vídeo
 * falla, el paseo por la oficina en código (escenario + personajes).
 * Portado de la v3 tal cual funciona; solo se ha reestilizado el botón de sonido y el título. */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--cielo-2); overflow: hidden; }
.intro[hidden] { display: none; }
.intro-escenario { position: absolute; inset: 0; }
.intro-saltar { position: absolute; top: 20px; right: 20px; z-index: 5; background: rgba(43,36,64,.55); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; font: 600 .9rem var(--body); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.intro-saltar:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .intro-saltar:hover { background: rgba(43,36,64,.75); } }
.intro-titulo { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); text-align: center; z-index: 4; opacity: 0; transition: opacity 500ms var(--ease-out); pointer-events: none; }
.intro-titulo.visible { opacity: 1; }
.intro-titulo .mk { width: clamp(64px, 10vh, 96px); height: auto; margin: 0 auto 6px; }
.intro-palabra { font: 800 clamp(2.6rem, 7.5vh, 4.4rem) var(--display); letter-spacing: -0.04em; line-height: 1; color: var(--ink); display: inline-flex; align-items: baseline; gap: .12em; }
.intro-palabra span { display: inline-block; opacity: 0; transform: translateY(16px); }
.intro-palabra .ai { color: var(--lila-deep); font-weight: 500; }
.intro-lema { margin: 8px 0 0; color: var(--ink-2); font: 500 1.15rem var(--body); opacity: 0; }

/* vídeo */
.intro-video, .intro-ultimo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.intro.con-video .intro-video { display: block; background: #F2DDE8; }
.intro.con-video .intro-ultimo:not([hidden]) { display: block; }
.intro.con-video .intro-escenario { display: none; }
.intro.con-video { background: #F2DDE8; }
.intro-video::cue { opacity: 0; }   /* la pista nativa queda para lectores de pantalla; los visibles son los cinéticos */

/* título final sobre el último fotograma: logo a la izquierda, nombre a la derecha, abajo, sin tapar a Nero */
.intro.con-video .intro-titulo { display: grid; grid-template-columns: auto auto; column-gap: 18px; align-items: center; text-align: left; top: auto; bottom: 7%; }
.intro.con-video .intro-titulo .mk { grid-row: 1 / 3; margin: 0; width: clamp(84px, 14vh, 128px); filter: drop-shadow(0 10px 24px rgba(43,36,64,.18)); }
.intro.con-video .intro-palabra { grid-column: 2; font-size: clamp(2.4rem, 7vh, 4rem); text-shadow: 0 2px 18px rgba(255,255,255,.8); }
.intro.con-video .intro-lema { grid-column: 2; margin-top: 2px; text-shadow: 0 1px 12px rgba(255,255,255,.9); }

/* botón de sonido: pastilla de tinta con halo coral que respira */
.intro-play { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 14px; padding: 18px 28px 18px 22px; border: 0; border-radius: 999px; background: rgba(43,36,64,.86); color: #fff; font: 600 1.05rem var(--body); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px -12px rgba(43,36,64,.5); transition: transform 160ms var(--ease-out), background-color 200ms ease; animation: play-late 2.4s ease-in-out infinite; }
.intro-play::before { content: ""; width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.intro-play:active { transform: translateX(-50%) scale(.97); }
.intro-play[hidden] { display: none; }
.intro:has(.intro-titulo.visible) .intro-play { opacity: 0; pointer-events: none; transition: opacity 300ms ease; }   /* al salir el título final, el botón de sonido se retira */
@keyframes play-late { 0%, 100% { box-shadow: 0 18px 50px -12px rgba(43,36,64,.5), 0 0 0 0 rgba(255,122,89,.45); } 50% { box-shadow: 0 18px 50px -12px rgba(43,36,64,.5), 0 0 0 12px rgba(255,122,89,0); } }
@media (max-width: 600px) { .intro-play { padding: 14px 20px 14px 18px; font-size: .95rem; bottom: 10%; } }

/* subtítulos cinéticos: rectos, letra del titular, se leen palabra a palabra */
.capa-subs { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.sub { position: absolute; max-width: min(50vw, 620px); transform: translate(-50%, -50%); font-family: var(--display); font-weight: 900; font-size: calc(var(--tam, 1) * clamp(1.5rem, 4.2vw, 3.4rem)); line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: .04em .26em; text-shadow: 0 2px 0 rgba(255,255,255,.6), 0 12px 32px rgba(255,255,255,.7); }
.sub span { display: inline-block; color: rgba(43,36,64,.28); opacity: 0; transition: opacity 260ms var(--ease-out), transform 520ms var(--ease-out), color 180ms ease; transition-delay: calc(var(--i, 0) * 45ms); }
.sub.anim-sube span { transform: translateY(.6em); }
.sub.anim-escala span { transform: scale(.7); }
.sub.anim-despliega span { transform: translateX(-.4em) skewX(-8deg); }
.sub.visible span { opacity: 1; transform: none; }
.sub span.dicha { color: var(--tinta); }
.sub span.ahora { color: var(--tinta); transform: translateY(-.08em) scale(1.06); text-shadow: 0 2px 0 rgba(255,255,255,.6), 0 0 24px var(--brillo); }
.sub.fuera span { opacity: 0; transform: translateY(-.35em); transition-duration: 220ms, 300ms; transition-delay: calc(var(--i, 0) * 14ms); }
.sub-coral { --tinta: #E05A36; --brillo: rgba(255,122,89,.55); } .sub-lila { --tinta: #6B4FE0; --brillo: rgba(142,108,255,.55); } .sub-cielo { --tinta: #2E5BD6; --brillo: rgba(159,200,255,.7); } .sub-menta { --tinta: #178C6A; --brillo: rgba(159,227,207,.7); } .sub-sol { --tinta: #B8780A; --brillo: rgba(255,211,107,.7); } .sub-rosa { --tinta: #C9476F; --brillo: rgba(247,166,184,.7); }
@media (max-width: 700px) { .sub { max-width: 84vw; font-size: calc(var(--tam, 1) * 1.4rem); } }

/* ---- intro de reserva en código: escenario, capas, personajes ---- */
.escenario-host { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cielo-1) 0%, var(--cielo-2) 48%, var(--cielo-3) 78%, var(--bruma) 100%); }
.escenario { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.escenario .fondo, .escenario .mundo { position: absolute; left: 0; top: 0; height: 720px; }
.escenario .mundo { transform-origin: 0 0; will-change: transform; }
.capa { position: absolute; left: 0; top: 0; will-change: transform; }
.capa svg, .pj svg { max-width: none; }
.capa.cielo svg, .capa.colinas svg, .capa.muebles svg { display: block; overflow: visible; }
.capa.cielo .orbe { animation: flotar var(--t, 9s) ease-in-out var(--d, 0s) infinite alternate; filter: blur(6px); }
@keyframes flotar { from { transform: translateY(0); } to { transform: translateY(-26px); } }
.capa.bruma { width: 5200px; height: 720px; pointer-events: none; background: linear-gradient(180deg, transparent 72%, rgba(220,228,255,0) 80%, rgba(220,228,255,.75) 92%, #DCE4FF 100%); }
.capa.gente { width: 5200px; height: 720px; }
.capa.muebles .vapor { animation: vapor 2.2s ease-in-out infinite; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }
.pj { position: absolute; left: 0; top: 0; width: 140px; height: 240px; will-change: transform; }
.pj svg { overflow: visible; }
.pj .todo { transform-box: fill-box; transform-origin: 50% 100%; animation: flotar-alma 3.4s ease-in-out infinite; }
@keyframes flotar-alma { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.pj .pierna, .pj .brazo { transform-box: fill-box; }
.pj .brazo { transform-origin: 50% 8%; transition: transform 420ms var(--ease-out); }
.pj .pierna { transform-origin: 50% 4%; }
.pj .pecho { animation: pecho 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pecho { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
.pj .chispas circle { animation: chispa-sube 3s ease-in-out infinite; }
.pj .chispas circle:nth-child(2) { animation-delay: .8s; } .pj .chispas circle:nth-child(3) { animation-delay: 1.6s; } .pj .chispas circle:nth-child(4) { animation-delay: 2.2s; }
@keyframes chispa-sube { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.pj .cabeza-g { transform-box: fill-box; transform-origin: 50% 90%; transition: transform 360ms var(--ease-out); }
.pj .cabeza { animation: respirar 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes respirar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(1.2deg); } }
.pj .prop .vapor { animation: vapor 2s ease-in-out infinite; }
.pj .torso { transform-box: fill-box; transform-origin: 50% 100%; }
.pj.camina .todo { animation: andar-alma 440ms ease-in-out infinite; }
.pj.camina .pierna.izq { animation: paso 440ms ease-in-out infinite; }
.pj.camina .pierna.der { animation: paso 440ms ease-in-out -220ms infinite; }
@keyframes paso { 0% { transform: rotate(26deg); } 50% { transform: rotate(-26deg); } 100% { transform: rotate(26deg); } }
.pj.camina .brazo.izq { animation: balanceo 440ms ease-in-out -220ms infinite; }
.pj.camina .brazo.der { animation: balanceo 440ms ease-in-out infinite; }
@keyframes andar-alma { 0%, 100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes balanceo { 0% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } 100% { transform: rotate(-14deg); } }
.pj.corre .todo { animation: andar-alma 260ms ease-in-out infinite; }
.pj.corre .tronco { transform: rotate(10deg); transform-box: fill-box; transform-origin: 50% 100%; }
.pj.corre .pierna.izq { animation: paso-largo 260ms ease-in-out infinite; }
.pj.corre .pierna.der { animation: paso-largo 260ms ease-in-out -130ms infinite; }
@keyframes paso-largo { 0% { transform: rotate(40deg); } 50% { transform: rotate(-40deg); } 100% { transform: rotate(40deg); } }
.pj.corre .brazo.izq { animation: balanceo 260ms ease-in-out -130ms infinite; }
.pj.corre .brazo.der { animation: balanceo 260ms ease-in-out infinite; }
.pj.saluda .brazo.der { animation: saludo 1100ms ease-in-out 2; }
@keyframes saludo { 0% { transform: rotate(0); } 25% { transform: rotate(-150deg); } 45% { transform: rotate(-120deg); } 65% { transform: rotate(-150deg); } 85% { transform: rotate(-125deg); } 100% { transform: rotate(0); } }
.pj.brinda .brazo.der { transform: rotate(-80deg); }
.pj.bosteza .cabeza-g { transform: rotate(-7deg) translateY(3px); }
.pj.bosteza .todo { animation: flotar-alma 4.5s ease-in-out infinite; }
.pj.asiente .cabeza-g { animation: asentir 700ms ease-in-out 2; }
@keyframes asentir { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg) translateY(3px); } }
.pj.choca .brazo.der { transform: rotate(-120deg); }
.pj.abre .brazo.izq { transform: rotate(80deg); }
.pj.abre .brazo.der { transform: rotate(-80deg); }
.pj.abraza .brazo.izq { transform: rotate(125deg) translateY(2px); }
.pj.abraza .brazo.der { transform: rotate(-125deg) translateY(2px); }
.pj.abraza .cabeza-g { transform: rotate(-4deg); }
.pj.abraza-der .brazo.der { transform: rotate(-118deg); }
.pj.abraza-der .cabeza-g { transform: rotate(6deg) translateX(3px); }
.pj.abraza-izq .brazo.izq { transform: rotate(118deg); }
.escenario .bocadillo { position: absolute; transform: translate(-50%, -100%) scale(.96); font-size: 20px; font-family: var(--display); font-weight: 700; padding: 12px 18px; border-radius: 22px; max-width: 300px; background: #fff; color: var(--ink); box-shadow: 0 10px 24px -10px rgba(43,36,64,.35); opacity: 0; transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out); }
.escenario .bocadillo.visible { opacity: 1; transform: translate(-50%, calc(-100% - 10px)) scale(1); }
.escenario .bocadillo.soso { color: var(--ink-3); font-weight: 500; }
.escenario .bocadillo.prisa { color: var(--coral-deep); font-style: italic; }
.escenario .bocadillo.frio { color: #1f9a73; }
.escenario .bocadillo.grande { font-size: 26px; color: #E05A36; }
@media (prefers-reduced-motion: reduce) { .capa.cielo .orbe, .pj .cabeza, .capa.muebles .vapor { animation: none; } }

/* vídeo con subtítulos y título ya quemados: sin capa de subtítulos ni título encima */
.intro.quemado .capa-subs, .intro.quemado .intro-titulo { display: none; }
.intro.quemado .intro-play { bottom: auto; top: 20px; left: 20px; transform: none; padding: 12px 20px 12px 16px; font-size: .95rem; }
.intro.quemado .intro-play:active { transform: scale(.97); }
.intro.quemado .intro-video { object-fit: contain; background: #F2DDE8; }