/* Cirquito: colores sacados de su logo y sus publicaciones de Instagram (02/11). Se ajustan cuando llegue el logo original.
   Vuelta 7: las secciones son quietas y se leen igual con o sin JS. `.con-escena` solo toca la portada y el lienzo del unicornio. */
:root {
  --morado: #22085F; --morado2: #34137A; --fucsia: #E6178C; --rosa: #FF7FBF; --lila: #8D6BE8; --lila-claro: #E7DBFF;
  --lima: #C8EE5A; --amarillo: #FFC629; --naranja: #F7780F; --azul: #4FA8F7; --blanco: #FFFDFE;
  --titulo: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif; --texto: 'Nunito', 'Segoe UI', sans-serif; --marca: 'Pacifico', 'Brush Script MT', cursive;   /* su manuscrita rosa de Instagram (vuelta 10) */
  --salida: cubic-bezier(.23, 1, .32, 1);
  --seguro: env(safe-area-inset-bottom);
  --fondo-portada: radial-gradient(120% 80% at 72% 42%, #FFFDFE 0, #FFE6F2 42%, #E9DAFF 100%);
  /* un cielo de fantasía sobre el mismo color: nubes lejanas y un arcoíris suave detrás del unicornio */
  --centro-portada: 50%;
  --fantasia:
    radial-gradient(ellipse 34vw 10vw at 8% 34%, #ffffffb0 0, #fff0 72%),
    radial-gradient(ellipse 30vw 9vw at 92% 30%, #ffffffb8 0, #fff0 72%),
    radial-gradient(ellipse 22vw 7vw at 30% 62%, #ffffff80 0, #fff0 72%),
    var(--fondo-portada);   /* sin el arcoíris: menos cargado (Violeta, 06/11) */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #FFF0F7; }
body { margin: 0; background: #FFF0F7; color: var(--morado); font: 700 17px/1.4 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
b { font-weight: 900; }
img { display: block; max-width: 100%; height: auto; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.icono { width: 1.25em; height: 1.25em; flex: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

.titulo { font: 800 clamp(52px, 13.4vw, 168px)/.92 var(--titulo); letter-spacing: -.045em; margin: 0; }
/* Como en sus piezas: título grueso y la palabra clave en manuscrita rosa. */
em { font-style: normal; font-family: var(--marca); font-weight: 400; letter-spacing: 0; color: var(--acento, var(--fucsia)); }
.titulo em { font-size: .92em; line-height: 1; }
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.logo g { transform-box: fill-box; transform-origin: center; }
.logo .carpa { color: #1A1414; }
.palabra { display: inline-block; position: relative; }
.junto { white-space: nowrap; }
.garabato, .cuerda { position: absolute; left: -2%; width: 104%; overflow: visible; fill: none; stroke-linecap: round; pointer-events: none; }
.garabato { bottom: -.1em; height: .24em; stroke: var(--rosa); stroke-width: 4.5; }
.cuerda { bottom: -.12em; height: .2em; stroke: var(--lima); stroke-width: 3.5; }
.resalta { padding: 0 .14em; margin: 0 -.05em; border-radius: .26em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(var(--res, var(--amarillo)), var(--res, var(--amarillo))) no-repeat 0 62% / 100% 86%; }

/* ——— barra: la píldora con la sección de ahora marcada ——— */
.barra { position: fixed; z-index: 6; top: 12px; left: 0; right: 0; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.barra > * { pointer-events: auto; }
.menu { display: none; position: relative; background: #fff; border-radius: 999px; padding: 5px; box-shadow: 0 2px 14px rgba(52, 19, 122, .14); }
.menu a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; font: 800 14px/1 var(--texto); text-decoration: none; border-radius: 999px; transition: color .2s var(--salida); }
.menu a.activo { color: #fff; }
.menu-marca { position: absolute; left: 0; top: 5px; height: 36px; width: 80px; background: var(--fucsia); border-radius: 999px; transition: transform .26s var(--salida), opacity .16s var(--salida); }
/* el interruptor: solo el rayito, sobre un riel transparente que deja ver lo que hay atrás */
.rapido { position: relative; flex: none; width: 60px; height: 44px; padding: 0; background: none; border: 0; color: var(--morado); cursor: pointer; }
.rapido::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; bottom: 6px; border-radius: 999px; background: rgba(255, 255, 255, .24); border: 1.5px solid rgba(52, 19, 122, .24); transition: background-color .2s var(--salida); }
.rapido-bola { position: absolute; left: 3px; top: 9px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 5px rgba(52, 19, 122, .25); transition: transform .2s var(--salida), background-color .2s var(--salida), color .2s var(--salida); }
.rapido-bola svg { width: 15px; height: 15px; }
.rapido[aria-checked=true]::before { background: rgba(230, 23, 140, .3); }
.rapido[aria-checked=true] .rapido-bola { transform: translateX(28px); background: var(--fucsia); color: #fff; }
html:not(.con-escena) .rapido { display: none; }

/* ——— botones ——— */
.wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; background: var(--fucsia); color: #fff; font: 900 17px/1 var(--texto); text-decoration: none; cursor: pointer; border: 0; padding: 0 28px; height: 58px; box-shadow: 0 10px 26px rgba(230, 23, 140, .34); transition: transform .16s var(--salida), box-shadow .16s var(--salida); }
.wa:active { transform: scale(.97); }
.wa-fija { position: fixed; z-index: 5; left: 14px; right: 14px; bottom: calc(14px + var(--seguro)); height: 56px; transition: transform .25s var(--salida), opacity .2s var(--salida); }
.wa-fija.oculta { transform: translateY(110%); opacity: 0; pointer-events: none; }
.wa-grande { width: 100%; }
.wa-claro { background: var(--amarillo); color: var(--morado); box-shadow: 0 10px 26px rgba(34, 8, 95, .3); width: 100%; }
.secundario { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 16px; flex: 1; background: #fff; color: var(--morado); border: 0; border-radius: 999px; font: 900 15px/1.1 var(--texto); text-decoration: none; cursor: pointer; text-align: center; transition: transform .14s var(--salida); }
.secundario:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .wa:hover { transform: translateY(-2px); }
  .secundario:hover { transform: translateY(-2px); }
  .menu a:not(.activo):hover { color: var(--fucsia); }
  .indice a:hover { transform: translateX(6px); }
}

/* ——— la pantalla de carga: solo transform y opacity, para que siga saltando aunque el 3D esté trabajando ——— */
.carga { display: none; }
.con-escena .carga { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: var(--fantasia); transition: opacity .42s var(--salida) .12s; }
.carga-escena { position: relative; width: min(58vw, 50svh, 400px); aspect-ratio: 1; }
.carga-uni { position: absolute; left: 11%; bottom: 36%; width: 78%; height: auto; transform-origin: 50% 96%; animation: carga-salto 1s cubic-bezier(.3, 0, .7, 1) infinite; will-change: transform; }
.carga-tambor { position: absolute; left: 13%; bottom: 0; width: 74%; height: auto; animation: carga-golpe 1s linear infinite; transform-origin: 50% 100%; will-change: transform; }
.carga-sombra { position: absolute; z-index: 1; left: 26%; bottom: 31%; width: 48%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 8, 95, .4), transparent); animation: carga-sombra 1s linear infinite; }
.carga-uni { z-index: 2; }
@keyframes carga-salto {
  0%, 100% { transform: translateY(0) scale(1.08, .9); }
  14% { transform: translateY(-8%) scale(.94, 1.08); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  50% { transform: translateY(-42%) scale(1); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  88% { transform: translateY(-5%) scale(.95, 1.07); }
}
@keyframes carga-golpe { 0%, 100% { transform: scale(1.03, .95); } 16%, 88% { transform: none; } }
@keyframes carga-sombra { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .45; } }
/* al terminar, salta para arriba y sale de la pantalla: abajo lo espera el tambor de verdad */
.carga.sale { opacity: 0; pointer-events: none; }
.carga.sale .carga-uni { animation: carga-vuela .46s cubic-bezier(.3, 0, .8, .4) forwards; }
.carga.sale .carga-tambor { animation: carga-baja .4s cubic-bezier(.5, 0, 1, .6) forwards; }
.carga.sale .carga-sombra { opacity: 0; animation: none; }
@keyframes carga-vuela { 0% { transform: translateY(0) scale(1.06, .92); } 18% { transform: translateY(-10%) scale(.92, 1.1); } 100% { transform: translateY(-110vh) scale(1); } }
@keyframes carga-baja { to { transform: translateY(70vh); } }
/* lo demás aparece de a poco cuando se va la pantalla de carga */
.barra, .con-escena .por-txt > * { transition: opacity .5s var(--salida), transform .6s var(--salida); }
.con-escena .por-txt > :nth-child(2) { transition-delay: .06s; }
.con-escena .por-txt > :nth-child(3) { transition-delay: .14s; }
.con-escena .por-txt > :nth-child(4) { transition-delay: .22s; }
.cargando .barra { opacity: 0; transform: translateY(-20px); }
.cargando .por-txt > * { opacity: 0; transform: translateY(20px); }

/* ——— lo que se mueve solo en cada mundo: sol, nubes, luna, estrellas. Corre solo en la sección a la vista ——— */
.vida { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* una animación en pausa igual ocupa la placa de video: las de cada sección existen solo cuando está a la vista */
.vida * { animation-name: none !important; }
.vivo > .vida * { animation-name: var(--anima) !important; }
.rapido-activo .vida * { animation-name: none !important; }
.con-escena .panel[data-clave]:not(.vivo) > .escena, .con-escena .panel[data-clave]:not(.vivo) > .vida { visibility: hidden; }
.nube { --anima: derivar; position: absolute; display: block; aspect-ratio: 900 / 460; background: url(assets/escenas/nube.webp) center / contain no-repeat; animation: derivar var(--dur, 46s) ease-in-out infinite alternate; }
.n1 { left: 44%; top: 14%; width: min(21vw, 340px); --de: -5vw; --a: 7vw; --dur: 38s; }
.n2 { left: 66%; top: 25%; width: min(14vw, 230px); --de: 3vw; --a: -6vw; --dur: 52s; opacity: .9; }
.n3 { left: 8%; top: 44%; width: min(12vw, 200px); --de: -3vw; --a: 5vw; --dur: 44s; opacity: .85; }
@keyframes derivar { from { transform: translateX(var(--de, -4vw)); } to { transform: translateX(var(--a, 4vw)); } }
.sol { position: absolute; display: block; right: clamp(40px, 15vw, 340px); top: clamp(70px, 9svh, 110px); width: clamp(120px, 12.5vw, 220px); aspect-ratio: 1; }
.sol > i { position: absolute; display: block; }
.sol-halo { --anima: latir; inset: -62%; border-radius: 50%; background: radial-gradient(closest-side, #FFF3B0E6 0, #FFE27A66 36%, #FFE27A00 72%); animation: latir 3.6s ease-in-out infinite; }
.sol-rayos { --anima: girar; inset: -18%; background: url(assets/escenas/sol-rayos.webp) center / contain no-repeat; animation: girar 34s linear infinite; }
.sol-disco { inset: 4%; background: url(assets/escenas/sol-disco.webp) center / contain no-repeat; }
.sol-tarde { right: clamp(30px, 10vw, 240px); }
@keyframes latir { 0%, 100% { transform: scale(.94); opacity: .78; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }
.luna { position: absolute; display: block; right: clamp(40px, 17vw, 360px); top: clamp(76px, 10svh, 116px); width: clamp(110px, 11vw, 190px); aspect-ratio: 1; }
.luna > i { position: absolute; display: block; }
.luna-halo { --anima: latir; inset: -70%; border-radius: 50%; background: radial-gradient(closest-side, #FFF1BF66 0, #FFF1BF22 44%, #FFF1BF00 72%); animation: latir 6s ease-in-out infinite; }
.luna-disco { inset: 0; background: url(assets/escenas/luna.webp) center / contain no-repeat; }
.estrellas { --anima: titilar; position: absolute; display: block; inset: 0 0 34%; animation: titilar 3.4s ease-in-out infinite; background-repeat: no-repeat; }
.e1 { background-image: radial-gradient(1.6px 1.6px at 6% 14%, #fff 99%, #0000), radial-gradient(2px 2px at 18% 52%, #fff 99%, #0000), radial-gradient(1.4px 1.4px at 30% 70%, #fff 99%, #0000), radial-gradient(2.2px 2.2px at 44% 22%, #fff 99%, #0000), radial-gradient(1.6px 1.6px at 56% 58%, #fff 99%, #0000), radial-gradient(2px 2px at 66% 12%, #FFE9A8 99%, #0000), radial-gradient(1.5px 1.5px at 78% 62%, #fff 99%, #0000), radial-gradient(2.2px 2.2px at 92% 30%, #fff 99%, #0000), radial-gradient(1.4px 1.4px at 97% 72%, #fff 99%, #0000); }
.e2 { animation-delay: -1.1s; animation-duration: 4.3s; background-image: radial-gradient(2.4px 2.4px at 11% 34%, #FFE9A8 99%, #0000), radial-gradient(1.6px 1.6px at 24% 12%, #fff 99%, #0000), radial-gradient(1.8px 1.8px at 37% 46%, #fff 99%, #0000), radial-gradient(1.4px 1.4px at 49% 74%, #fff 99%, #0000), radial-gradient(2.4px 2.4px at 60% 36%, #fff 99%, #0000), radial-gradient(1.6px 1.6px at 72% 20%, #fff 99%, #0000), radial-gradient(1.8px 1.8px at 84% 8%, #fff 99%, #0000), radial-gradient(2px 2px at 88% 52%, #FFE9A8 99%, #0000); }
.e3 { animation-delay: -2.3s; animation-duration: 5.1s; background-image: radial-gradient(1.4px 1.4px at 3% 62%, #fff 99%, #0000), radial-gradient(1.8px 1.8px at 15% 80%, #fff 99%, #0000), radial-gradient(2.6px 2.6px at 33% 8%, #fff 99%, #0000), radial-gradient(1.5px 1.5px at 41% 60%, #fff 99%, #0000), radial-gradient(1.8px 1.8px at 53% 16%, #FFE9A8 99%, #0000), radial-gradient(1.4px 1.4px at 63% 80%, #fff 99%, #0000), radial-gradient(2px 2px at 75% 42%, #fff 99%, #0000), radial-gradient(1.5px 1.5px at 95% 16%, #fff 99%, #0000); }
@keyframes titilar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.frente { z-index: 0; }
.foco { --anima: foco; position: absolute; display: block; top: -6%; width: clamp(180px, 24vw, 460px); height: 104%; transform-origin: 50% 0; background: url(assets/escenas/foco.webp) center / 100% 100% no-repeat; animation: foco 7s ease-in-out infinite alternate; }
.f1 { right: 40%; --g1: -9deg; --g2: 5deg; }
.f2 { right: 14%; --g1: 7deg; --g2: -6deg; animation-duration: 8.5s; }
.f3 { right: -2%; --g1: 10deg; --g2: -3deg; animation-duration: 6.2s; }
@keyframes foco { from { transform: rotate(var(--g1, -6deg)); } to { transform: rotate(var(--g2, 6deg)); } }
/* papelitos que cuelgan en la fiesta */
.papel { --anima: hamaca; position: absolute; display: block; width: clamp(60px, 7vw, 120px); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(var(--c1) 0 15deg, var(--c2) 15deg 30deg); box-shadow: 0 10px 18px rgba(120, 0, 80, .28); transform-origin: 50% -30%; animation: hamaca 4.4s ease-in-out infinite alternate; }
.papel::before { content: ''; position: absolute; left: calc(50% - 1px); bottom: 100%; width: 2px; height: 60vh; background: #A80F6B; }
.p1 { right: 34%; top: 22%; --c1: #FFC629; --c2: #FFE27A; }
.p2 { right: 13%; top: 28%; --c1: #4FA8F7; --c2: #A9D5FF; animation-duration: 5.2s; }
.p3 { right: 4%; top: 13%; width: clamp(44px, 5vw, 86px); --c1: #B9E640; --c2: #E2F69C; animation-duration: 3.8s; }
@keyframes hamaca { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
/* en el índice las nubes van a los costados: el medio es del unicornio */
.i1 { left: 5%; top: 15%; width: min(17vw, 280px); --de: -2vw; --a: 3vw; --dur: 40s; }
.i2 { right: 7%; top: 19%; width: min(15vw, 240px); --de: 2vw; --a: -3vw; --dur: 48s; }
.i3 { right: 24%; top: 9%; width: min(9vw, 150px); --de: -2vw; --a: 2vw; --dur: 58s; opacity: .85; }
.arcoiris { position: absolute; display: block; left: 50%; bottom: -46svh; width: 118svh; aspect-ratio: 1; margin-left: -59svh; border-radius: 50%; background: radial-gradient(closest-side, #fff0 66%, #FF7FBF66 69%, #FFC62966 75%, #C8EE5A66 81%, #4FA8F766 87%, #8D6BE866 93%, #8D6BE800 98%); }
.banco { position: absolute; left: -60%; bottom: 0; width: 220%; max-width: none; height: auto; transform: translateY(38%); pointer-events: none; }

/* ——— portada, de corrido: sin JS, sin WebGL o con "reducir movimiento" ——— */
#mundo, .circulo { display: none; }
#portada { padding: 84px 20px 40px; background: var(--fondo-portada); }
.poster { margin: 16px auto; max-width: 420px; mix-blend-mode: multiply; }
.nombre-portada { margin: 0 auto 12px; width: min(62vw, 340px); }
.rota { display: flex; flex-wrap: wrap; gap: .3em; margin: 0; font: 400 clamp(44px, 9vw, 96px)/1 var(--marca); }
.por-baja { margin: 10px 0 0; font-size: clamp(19px, 2vw, 26px); font-weight: 800; line-height: 1.22; }
.wa-portada { margin-top: 14px; }

/* ——— portada con el juguete 3D: el nombre, en globos, y el unicornio están en el lienzo; acá van el cielo y el texto, que se ubica debajo del nombre ——— */
.con-escena #mundo { display: block; position: fixed; z-index: 3; top: 0; left: 0; width: 100vw; height: 100lvh; pointer-events: none; }
/* la portada termina donde el círculo tapó todo; la frase ya está debajo, sin un tramo vacío en el medio */
.con-escena #portada { position: relative; z-index: 2; height: 180svh; padding: 0; background: none; }
.con-escena #cuerpo { margin-top: -100svh; }
.con-escena .fija { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--fantasia); }
.con-escena .poster { display: none; }
/* Su logo arriba, en el lugar del nombre en globos. app.js lo mueve al bajar y lo arma en la entrada. */
.con-escena .nombre-portada { --logo-w: min(54vw, 25svh * 1.16); position: absolute; z-index: 1; left: 50%; top: 64px; width: var(--logo-w); margin: 0 0 0 calc(var(--logo-w) / -2); will-change: transform, opacity; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (min-width: 900px) { .con-escena .nombre-portada { --logo-w: min(34svh * 1.16, 30vw); top: 74px; } }
.con-escena .por-txt { position: absolute; z-index: 1; left: 20px; right: 20px; top: var(--bajo-nombre, 20svh); text-align: center; }
.con-escena .rota { position: relative; display: block; height: 1em; font-size: clamp(48px, 13vw, 128px); color: var(--fucsia); }
/* Circo, Danza, Teatro: una por vez, solo con CSS */
.con-escena .rota-p { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; opacity: 0; animation: rota 10.8s infinite backwards; }
.con-escena .rota-p:nth-child(2) { animation-delay: 3.6s; }
.con-escena .rota-p:nth-child(3) { animation-delay: 7.2s; }
@keyframes rota {
  0% { opacity: 0; transform: translateY(.2em); }
  3%, 34% { opacity: 1; transform: none; }
  37%, 100% { opacity: 0; transform: translateY(-.14em); }
}
/* una animación de CSS sigue gastando aunque no se vea */
.con-escena .apagada { visibility: hidden; }
.apagada .rota-p, .rapido-activo .rota-p { animation: none; }
.rapido-activo .rota-p:first-child { opacity: 1; }
.con-escena .por-baja { margin-top: 8px; text-wrap: balance; }
.con-escena .wa-portada { display: none; margin: 0; }
.con-escena .circulo { display: block; position: absolute; left: 50%; top: 56%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; border-radius: 50%; background: #22085F; transform: scale(0); will-change: transform; }

/* ——— la frase, con sus fotos alrededor ——— */
#cuerpo { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 84px 16px calc(84px + var(--seguro)); background: radial-gradient(90% 70% at 50% 45%, #3A1690 0, #22085F 70%); color: #fff; overflow: clip; }
.collage { position: absolute; inset: 0; }
.ficha { position: absolute; margin: 0; border-radius: clamp(18px, 2vw, 30px); overflow: hidden; box-shadow: 0 24px 60px rgba(10, 2, 40, .45); }
.ficha img { width: 100%; height: 100%; object-fit: cover; }
[data-f=pelota] { left: 4%; top: 72px; width: 26vw; aspect-ratio: 900/1100; transform: rotate(-5deg); }
[data-f=carpa] { right: 3%; top: 92px; width: 33vw; aspect-ratio: 4/3; transform: rotate(4deg); }
[data-f=sol] { left: 5%; bottom: calc(92px + var(--seguro)); width: 38vw; aspect-ratio: 5/4; transform: rotate(3deg); }
[data-f=torta] { right: 6%; bottom: calc(84px + var(--seguro)); width: 33vw; aspect-ratio: 1; transform: rotate(-4deg); }
.frase { position: relative; z-index: 1; margin: 0; max-width: 11em; text-align: center; font: 800 clamp(42px, 11.4vw, 150px)/.98 var(--titulo); letter-spacing: -.04em; text-shadow: 0 4px 34px rgba(22, 4, 70, .6); }
.piso { display: inline-block; }
.c-juega { color: var(--amarillo); } .c-crea { color: var(--rosa); } .c-desafia { color: var(--lima); }

/* ——— propuestas: cada panel se queda fijo y el siguiente le pasa por arriba. Solo CSS ——— */
.pila { position: relative; }
.panel { position: sticky; top: 0; display: flex; flex-direction: column; height: 100svh; padding: 76px 20px calc(16px + var(--seguro)); overflow: clip; background: linear-gradient(180deg, var(--fondo, #FFF4FA), var(--fondo2, #FFC9E2) 62%); color: var(--tinta, var(--morado)); }
.panel-indice { align-items: center; text-align: center; padding-top: calc(76px + min(20vw, 8.6svh) * 1.92); background: linear-gradient(180deg, #8FCBFF 0, #CDE8FF 44%, #FFE6F2 100%); }
.panel-indice .titulo, .panel-indice .indice { position: relative; z-index: 1; }
.panel h3 { margin: 0; font: 800 clamp(44px, 11vw, 148px)/.94 var(--titulo); letter-spacing: -.036em; }
.panel h3 em { display: block; margin-top: .04em; padding-bottom: .12em; font-size: .9em; line-height: 1.12; }   /* la manuscrita baja: aire para que no pise el renglón de abajo */
.panel p { margin: 12px 0 0; font-size: clamp(19px, 2.3vw, 34px); font-weight: 800; line-height: 1.2; }
.panel-txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
/* Cada propuesta: su foto desenfocada de fondo (con el color del panel encima) y la misma, nítida, en un marco a un tamaño en que se ve bien. */
.panel[data-clave] { gap: 16px; padding-top: calc(70px + min(20vw, 8.6svh) * 1.92); background: linear-gradient(180deg, color-mix(in srgb, var(--fondo) 80%, transparent), color-mix(in srgb, var(--fondo2) 88%, transparent) 70%), var(--foto) center / cover, var(--fondo2); }
.panel .foto { position: relative; z-index: 1; flex: 0 1 auto; width: 100%; max-width: 640px; aspect-ratio: var(--ar, 4/3); max-height: 33svh; margin: 4px 0 0; border-radius: 24px; overflow: hidden; background: color-mix(in srgb, var(--fondo2) 60%, #fff); box-shadow: 0 20px 44px rgba(20, 0, 50, .3); }
.panel .foto img { width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; user-select: none; }
.con-escena .panel.vivo .foto img { animation: acercar 16s ease-in-out infinite alternate; }
@keyframes acercar { from { transform: scale(1.01); } to { transform: scale(1.07); } }
.dato { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 13%, transparent); font-size: clamp(14px, 1.2vw, 18px) !important; line-height: 1.2 !important; }
.escena { position: absolute; inset: 0; display: block; }
.escena img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.indice { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; width: 100%; max-width: 420px; text-align: left; }
.indice a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 5px 16px 5px 6px; border-radius: 999px; background: #fff; font: 800 clamp(17px, 1.5vw, 22px)/1.1 var(--texto); text-decoration: none; transition: transform .16s var(--salida); }
.indice img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }

/* ——— empezar: cuatro plataformas de juguete, y el unicornio salta de una a otra ——— */
#empezar { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding: 84px 16px calc(92px + var(--seguro)); overflow: clip; background: linear-gradient(180deg, #A98BF4 0, #D9C8FF 46%, #FFE6F2 100%); }
#empezar .titulo { position: relative; z-index: 1; font-size: clamp(50px, 13vw, 140px); }
.pasos { position: relative; z-index: 1; flex: 1; list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(40px, 6.4svh, 62px); }
.paso { --c: var(--fucsia); --c2: #B80E6F; --t: #fff; display: flex; align-items: center; gap: 12px; width: 76%; min-height: 76px; padding: 12px 16px; border-radius: 24px; color: var(--t); background: linear-gradient(180deg, var(--c), var(--c2)); box-shadow: inset 0 6px 0 rgba(255, 255, 255, .34), inset 0 -9px 0 rgba(30, 5, 80, .16), 0 16px 30px rgba(52, 19, 122, .26); transform-origin: 50% 100%; }
.paso strong { font: 800 clamp(21px, 5.6vw, 30px)/1 var(--titulo); letter-spacing: -.03em; }
.paso:nth-child(even) { align-self: flex-end; }
.paso-2 { --c: var(--amarillo); --c2: #F2A60B; --t: var(--morado); }
.paso-3 { --c: var(--lima); --c2: #93CB2A; --t: var(--morado); }
.paso-4 { --c: var(--azul); --c2: #2379D6; --t: #fff; }
.paso-icono { width: 40px; height: 40px; flex: none; color: #fff; }
.globo { display: inline-flex; flex: none; gap: 5px; padding: 12px 13px; border-radius: 18px 18px 4px 18px; background: #fff; color: var(--morado); }
.globo i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tilde { width: 44px; height: 44px; flex: none; fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.sello { display: inline-block; flex: none; padding: 7px 10px; background: #fff; color: var(--fucsia); border-radius: 10px; font: 900 14px/1 var(--texto); transform: rotate(-5deg); white-space: nowrap; }

/* ——— el lugar: un escenario con el telón abierto ——— */
#lugar { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding: 96px calc(9% + 12px) calc(84px + var(--seguro)); background: radial-gradient(90% 70% at 50% 40%, #4A1FA6 0, #2A1064 62%, #1C0A47 100%); color: #fff; overflow: clip; }
.telon { position: absolute; top: 0; bottom: 0; width: 9%; background: linear-gradient(90deg, rgba(90, 3, 60, .55) 0, transparent 22%, rgba(255, 255, 255, .1) 44%, transparent 60%, rgba(90, 3, 60, .55) 100%) 0 0 / 11vw 100%, linear-gradient(180deg, #F12E9B, #BE0D74); }
.telon-izq { left: 0; } .telon-der { right: 0; }
.cenefa { position: absolute; left: 0; right: 0; top: 0; height: 84px; background: radial-gradient(circle at 50% 0, #8A0C58 42px, transparent 43px) 0 0 / 84px 84px repeat-x; }
.pasa { position: relative; margin: 0; text-align: center; font: 800 clamp(84px, 24vw, 170px)/.88 var(--titulo); letter-spacing: -.05em; text-shadow: 0 8px 40px rgba(60, 2, 40, .4); }
.salas { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; margin-top: 18px; }
.sala { position: relative; margin: 0; min-height: 150px; border-radius: 22px; overflow: hidden; background: #34137A; }
.sala img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sala figcaption, .retrato figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--morado); font: 800 12px/1.1 var(--texto); }

/* ——— quiénes ——— */
#quienes { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 16px; align-content: start; min-height: 100svh; padding: 78px 20px calc(84px + var(--seguro)); background: radial-gradient(110% 80% at 30% 25%, #FFFBEA 0, #FFEFC4 48%, #FFD7C2 100%); }
.tiempo { grid-column: 1 / -1; font-size: clamp(50px, 13.6vw, 168px); }
.retrato { position: relative; justify-self: start; margin: 16px 0 0; width: min(38vw, 190px); border-radius: 30px; overflow: hidden; transform: rotate(-3deg); }
.firma { margin-top: 16px; }
.quien { margin: 12px 0 0; font: 800 clamp(26px, 3vw, 44px)/1 var(--titulo); letter-spacing: -.03em; }
.anios { margin: 4px 0 0; font-size: clamp(17px, 1.6vw, 22px); font-weight: 800; color: #B8146F; }
.cita { grid-column: 1 / -1; margin: 14px 0 0; font: 700 clamp(25px, 3vw, 46px)/1.14 var(--titulo); letter-spacing: -.025em; }

/* ——— contacto ——— */
#contacto { position: relative; padding: 90px 20px 0; background: linear-gradient(170deg, #F12E9B, #D30E7E); color: #fff; overflow: hidden; }
.contacto-caja { display: grid; gap: 22px; }
#contacto .titulo { font-size: clamp(46px, 10.4vw, 124px); }
.cartel { position: relative; display: inline-block; margin-top: 26px; padding: 12px 22px; background: var(--amarillo); color: var(--morado); border-radius: 18px; font: 800 clamp(40px, 6.6vw, 92px)/1 var(--titulo); letter-spacing: -.035em; box-shadow: 0 12px 26px rgba(34, 8, 95, .28); }
.cartel strong { font-weight: 800; }
.cadena { position: absolute; top: -26px; width: 4px; height: 26px; background: var(--morado); border-radius: 2px; }
.cadena:nth-child(1) { left: 22%; } .cadena:nth-child(2) { right: 22%; }
.bajada { margin: 14px 0 0; font-size: clamp(20px, 2vw, 28px); font-weight: 800; line-height: 1.2; }
.acciones { margin-top: 20px; display: grid; gap: 10px; max-width: 520px; }
.fila-acciones { display: flex; gap: 8px; }
.mapa { width: 100%; min-height: 240px; height: 100%; border: 0; border-radius: 26px; background: #fff; }
.mapa:not([src]) { background: #ffffff55; }
.redes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; }
.redes a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 800; text-decoration: none; }
.marca-gigante { margin: 118px -20px 0; padding-bottom: calc(82px + var(--seguro)); font: 400 23vw/1.12 var(--marca); text-align: center; color: var(--morado); white-space: nowrap; overflow: hidden; }
.marca-gigante svg { display: block; width: 90%; height: auto; margin: 0 auto; overflow: visible; }

/* ——— la hoja del formulario ——— */
.hoja { position: fixed; inset: 0; z-index: 8; display: grid; align-items: end; justify-items: center; visibility: hidden; opacity: 0; transition: opacity .2s var(--salida), visibility .2s; }
.hoja.abierta { visibility: visible; opacity: 1; }
.hoja-tapa { position: absolute; inset: 0; background: rgba(34, 8, 95, .55); }
.hoja-caja { position: relative; display: grid; gap: 12px; width: 100%; max-width: 560px; padding: 22px 20px calc(22px + var(--seguro)); background: #fff; color: var(--morado); border-radius: 28px 28px 0 0; transform: translateY(24px); transition: transform .28s var(--salida); }
.hoja.abierta .hoja-caja { transform: none; }
.hoja h3 { margin: 0; font: 800 32px/1 var(--titulo); letter-spacing: -.03em; }
.hoja label { display: grid; gap: 4px; font-weight: 800; }
.hoja input, .hoja textarea { width: 100%; padding: 13px 14px; border: 2px solid #D7C7F5; border-radius: 14px; font: 700 17px var(--texto); color: var(--morado); }
.cerrar { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; font-size: 30px; color: var(--morado); cursor: pointer; }
.trampa { position: absolute; left: -9999px; }
.estado-form { margin: 0; min-height: 1.3em; font-weight: 800; color: #B8146F; }
.aviso-form { margin: 0; font-size: 14px; font-weight: 600; }

/* ——— celular: el texto va arriba; el sol, la luna y las nubes, debajo de él ——— */
@media (max-width: 899px) {
  .sol, .sol-tarde { right: 7%; top: 29svh; width: 21vw; }
  .luna { right: 9%; top: 27svh; width: 20vw; }
  .n1 { left: 4%; top: 31svh; width: 30vw; }
  .n2 { left: 46%; top: 37svh; width: 20vw; }
  .n3 { left: 22%; top: 41svh; width: 15vw; }
  .i1 { left: -4%; top: 9svh; width: 26vw; }
  .i2 { right: -3%; top: 13svh; width: 24vw; }
  .i3 { right: 26%; top: 5svh; width: 12vw; }
  #empezar .n1 { left: auto; right: 3%; top: 19svh; width: 26vw; }
  #empezar .n2 { left: 2%; top: 42svh; width: 18vw; }
  .p1 { right: 62%; top: 33%; } .p2 { right: 8%; top: 37%; } .p3 { right: 36%; top: 30%; }
  .foco { width: 50vw; }
  .f1 { right: 46%; } .f2 { right: 22%; } .f3 { right: -10%; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .panel-indice { padding-top: calc(66px + min(20vw, 8.6svh) * 1.92); }
  .indice { grid-template-columns: 1fr 1fr; gap: 6px; }
  .indice a { min-height: 46px; font-size: 14px; gap: 7px; padding: 4px 8px 4px 4px; }
  .indice img { width: 34px; height: 34px; }
  .panel .foto { max-height: 24svh; }
  .pasos { gap: 40px; }
  .paso { min-height: 62px; }
}

/* ——— compu ——— */
@media (min-width: 900px) {
  :root { --centro-portada: 54%; }
  .barra { top: 16px; padding: 0 22px; }
  .menu { display: flex; position: absolute; left: 50%; transform: translateX(-50%); }
  .wa-fija { display: none; }

  .con-escena .por-txt { left: clamp(30px, 5vw, 96px); right: auto; width: min(31vw, 560px); text-align: left; }
  .con-escena .rota { font-size: clamp(60px, 7.2vw, 128px); }
  .con-escena .por-baja { font-size: clamp(19px, 1.5vw, 28px); }
  .con-escena .wa-portada { display: inline-flex; margin-top: 20px; }

  #cuerpo { padding: 96px 30px 40px; }
  .frase { top: 6svh; max-width: 10.5em; font-size: clamp(56px, 5.6vw, 150px); }   /* deja lugar arriba para el unicornio */
  [data-f=pelota] { left: 3.5%; top: 13%; width: 12.5vw; }
  [data-f=carpa] { right: 3.5%; top: 15%; width: 15.5vw; }
  [data-f=sol] { left: 5%; bottom: 7%; width: 15vw; }
  [data-f=torta] { right: 6%; bottom: 6%; width: 12.5vw; }

  .panel { display: block; padding: 96px clamp(30px, 4.6vw, 90px) 40px; }
  .banco { left: 0; width: 100%; }
  .panel-txt { width: 54%; }
  .panel h3 { font-size: clamp(56px, 7.4vw, 132px); }
  .panel[data-clave] { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); align-items: center; gap: 4vw; padding: 96px clamp(30px, 4.6vw, 90px) 40px; }
  .panel[data-clave] .panel-txt { width: auto; padding-top: min(8.6vw, 17svh, 150px); }   /* lugar arriba del título para el unicornio */
  .panel[data-clave] h3 { font-size: clamp(52px, 5.4vw, 100px); }
  .panel .foto { justify-self: end; width: 100%; max-width: 680px; max-height: 68vh; border-radius: 34px; }
  .escena img { object-position: 100% 100%; }
  .panel-indice { display: flex; flex-direction: column; justify-content: flex-start; padding-top: calc(72px + min(8.6vw, 17svh, 150px) * 1.9); }
  .panel-indice .titulo { font-size: clamp(64px, 8.6vw, 158px); }
  .indice { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1420px; }
  .indice a { white-space: nowrap; padding-right: 24px; }

  #empezar { padding: 92px clamp(30px, 4.6vw, 90px) 0; }
  #empezar .titulo { position: absolute; left: clamp(30px, 4.6vw, 90px); top: 92px; width: 8.6em; font-size: clamp(56px, 6.6vw, 128px); }
  .pasos { margin: 0; flex-direction: row; align-items: flex-end; justify-content: stretch; gap: 14px; }
  .paso { flex: 1; width: auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; padding: clamp(18px, 1.7vw, 30px); border-radius: 30px 30px 0 0; box-shadow: inset 0 8px 0 rgba(255, 255, 255, .34), 0 16px 30px rgba(52, 19, 122, .22); }
  .paso:nth-child(even) { align-self: auto; }
  .paso-1 { height: 26svh; } .paso-2 { height: 37svh; } .paso-3 { height: 48svh; } .paso-4 { height: 59svh; }
  .paso strong { font-size: clamp(26px, 2.7vw, 46px); }
  .paso-icono, .tilde { width: clamp(44px, 3.8vw, 66px); height: clamp(44px, 3.8vw, 66px); }
  .sello { font-size: 18px; padding: 9px 13px; }

  #lugar { padding-bottom: 34px; }
  .pasa { font-size: clamp(90px, 9vw, 170px); }
  .salas { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: auto; grid-template-rows: 1fr 1fr; }
  .sala:first-child { grid-row: span 2; }
  .sala:last-child { grid-column: span 2; }

  #quienes { grid-template-columns: 1fr clamp(240px, 24vw, 380px); grid-template-rows: auto 1fr; column-gap: 40px; padding: 96px clamp(30px, 4.6vw, 90px) 40px; }
  .tiempo { grid-column: 1; font-size: clamp(70px, 10.4vw, 190px); }
  .retrato { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; align-self: center; justify-self: end; }
  .firma { grid-column: 1; grid-row: 2; margin: 0; }
  .cita { grid-column: 1; grid-row: 2; align-self: end; max-width: 26em; margin: 0; }

  .contacto-caja { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .marca-gigante { font-size: 23vw; padding-bottom: 0; margin-top: 120px; }
  .hoja { align-items: center; }
  .hoja-caja { border-radius: 28px; }
}