/* Vientos de Chuchunko — paleta tomada del Figma */
:root {
  --s: 0.4832; /* factor de escala (lo fija main.js: px reales por px de Figma) */
  --sky: #9fd1e9;
  --cream: #faf1c5;
  --olive: #8e8b34;
  --forest: #233419;
  --earth: #3c2415;
  --plum: #90295b;
  --rust: #bb5227;
  --sun: #f7ba14;
  --pink: #e799bf;
  /* 1 unidad = 1 px del Figma (frames de 2980 px) */
  --u: calc(100vw / 2980);
  color-scheme: light;
}
@media (max-width: 760px) {
  :root { --u: calc(100vw / 1150); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--forest);
  color: var(--forest);
  font-family: 'Poppins', system-ui, sans-serif;
  overflow-x: hidden;
}
img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
.a { position: absolute; }
.a > img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; translate: -50% -50%; }
img.a { width: auto; }

/* ========== logo (compuesto con las piezas del Figma) ========== */
.logo { position: relative; width: 1694px; height: 525px; }
.logo img { position: absolute; }
.logo .logo-text {
  position: absolute; margin: 0; white-space: nowrap;
  font-family: 'Mandali', sans-serif; color: var(--forest);
  font-size: 186.9px; letter-spacing: 18.69px; line-height: normal;
}

/* ========== NAV ========== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(306 * var(--u));
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.nav.on { opacity: 1; visibility: visible; }
.nav > * { pointer-events: auto; }
.nav a { text-decoration: underline; text-underline-offset: .18em; text-transform: uppercase; font-weight: 500; }
.nav-home {
  position: absolute; left: calc(103 * var(--u)); top: calc(85 * var(--u));
  width: calc(434 * var(--u)); height: calc(136 * var(--u));
  display: grid; place-items: center;
  border-radius: 999px; background: var(--forest); color: var(--cream);
  font-size: calc(40 * var(--u));
  transition: background-color .4s, transform .25s cubic-bezier(.3,1.6,.5,1);
}
.nav-links {
  position: absolute; left: calc(645 * var(--u)); top: calc(85 * var(--u));
  width: calc(1717 * var(--u)); height: calc(136 * var(--u));
  border-radius: 999px; background: var(--sky);
  display: flex; align-items: center; justify-content: space-around; padding: 0 calc(110 * var(--u));
  transition: background-color .4s;
}
.nav-links a { font-size: calc(32 * var(--u)); color: var(--forest); }
.nav-links a, .nav-home { will-change: transform; }
.nav-links a:hover, .nav-home:hover { transform: rotate(-3deg) scale(1.06); }
.nav-links a { display: inline-block; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.nav-logo {
  position: absolute; left: calc(2569 * var(--u)); top: calc(110 * var(--u));
  width: calc(292 * var(--u)); height: calc(91 * var(--u)); overflow: hidden; overflow: clip;
}
.nav-logo .logo { transform-origin: 0 0; transform: scale(calc(var(--s, .4) * 0.17237)); }
.nav[data-theme="pink"] .nav-links { background: var(--pink); }
.nav[data-theme="dark"] .nav-home { background: var(--olive); }
.nav[data-theme="dark"] .nav-links { background: var(--sky); }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-home { left: calc(50 * var(--u)); top: calc(50 * var(--u)); width: calc(300 * var(--u)); height: calc(110 * var(--u)); font-size: calc(36 * var(--u)); }
  .nav-logo { left: auto; right: calc(60 * var(--u)); top: calc(62 * var(--u)); }
}

/* ========== MUNDO (intro + plaza + escuelita) ========== */
.mundo { position: relative; }
.mundo-pin {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--sky);
}
.world { position: absolute; left: 0; top: 0; width: 2980px; transform-origin: 0 0; will-change: transform; }
.intro-layer { position: absolute; left: 0; top: 0; width: 2980px; height: 1867px; }
.plaza-layer { position: absolute; left: 0; width: 2980px; height: 2619px; }
.plaza-layer::after { /* el pasto continúa hacia abajo si la pantalla es más alta */
  content: ""; position: absolute; left: 0; right: 0; top: 2600px; height: 3000px; background: var(--olive);
}
.plaza-svg { position: absolute; inset: 0; width: 2980px; height: 2619px; overflow: visible; }
.plaza-svg #pz-root { clip-path: none; }
.kid { cursor: pointer; transform-origin: 50% 100%; }

.clouds { position: absolute; inset: 0; }
.cloud { position: absolute; will-change: transform; }
.cloud svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cloud.flip svg { transform: scaleX(-1); }
.intro-logo { position: absolute; left: 643px; top: 648px; }
.intro-logo .letter { transform-origin: 50% 85%; }


/* escuelita */
.esc {
  position: absolute; inset: 0; background: var(--olive); visibility: hidden; opacity: 0;
}
.esc-stage { position: absolute; left: 0; top: 0; width: 2980px; height: 1803px; transform-origin: 0 0; }
.esc-map { position: absolute; inset: 0; pointer-events: none; }
.esc-map > * { pointer-events: auto; }
.car { transform-origin: 50% 100%; }
.car .car-body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.car img { width: 100%; height: 100%; }
.car:focus-visible { outline: 6px dashed var(--cream); outline-offset: 10px; border-radius: 40px; }
.esc-copy { position: absolute; left: 192px; top: 424px; width: 1180px; color: var(--cream); }
.esc-title {
  margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 150px; letter-spacing: 15px; line-height: normal; white-space: nowrap;
}
.esc-title span { display: inline-block; transform-origin: 50% 100%; }
.esc-title { width: max-content; }
.esc-text {
  margin: 82px 0 0; width: 1067px; font-weight: 500; font-size: 45px; letter-spacing: 4.5px; line-height: normal;
}
.esc-text b { font-weight: 700; }
.fly { position: absolute; left: 0; top: 0; width: 10px; height: 10px; opacity: 0; pointer-events: none; z-index: 3; }
.fly svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* copia móvil (textos fuera del escenario escalado) */
.copy-m { display: none; }
@media (max-width: 760px) {
  .copy-m { display: block; }
  .esc .copy-m { position: absolute; left: 0; right: 0; top: 0; padding: 22vw 7vw 0; pointer-events: none; }
  .copy-m .esc-copy { position: static; width: auto; }
  .copy-m .esc-title { font-size: 9.6vw; letter-spacing: .08em; }
  .copy-m .esc-text { width: auto; margin-top: 3.5vw; font-size: 3.7vw; letter-spacing: .06em; line-height: 1.45; }
}

/* ========== ESCENAS GENÉRICAS ========== */
.layer { position: absolute; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; }
.layer .stage-box { position: absolute; inset: 0; }
.stage { position: absolute; left: 0; top: 0; width: 2980px; transform-origin: 0 0; }

/* estrella */
.estrella { background: var(--olive); }
.star-wrap { display: grid; place-items: center; cursor: grab; touch-action: pan-y; }
.star-wrap:active { cursor: grabbing; }
.star-wrap > .star { position: relative; left: auto; top: auto; translate: none; width: 2980px; height: 2604px; will-change: transform; }
.star-copy { position: absolute; left: 437px; top: 854px; width: 2203px; text-align: center; color: var(--cream); pointer-events: none; }
.star-title {
  margin: 0; font-family: 'Poppins', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 150px; line-height: 228px; letter-spacing: 0;
}
.star-title .ln { display: block; }
.star-title .w { display: inline-block; }
.star-title .nw { white-space: nowrap; }
.hl { position: relative; display: inline-block; padding: 0 22px; pointer-events: auto; cursor: default; }
.hl::before {
  content: ""; position: absolute; inset: -6px 0 -4px; border-radius: 999px; z-index: -1;
  transform-origin: 0 50%; transform: scaleX(var(--hl, 0));
}
.hl-y::before { background: var(--sun); }
.hl-p::before { background: var(--pink); }
.hl .w { position: relative; }
.star-title { isolation: isolate; }
.star-sub { margin: 48px auto 0; width: 1421px; font-size: 48px; line-height: normal; }
.pill-btn {
  display: inline-grid; place-items: center; margin-top: 76px;
  width: 434px; height: 136px; border-radius: 999px;
  background: var(--cream); color: var(--forest);
  font-weight: 500; font-size: 32px; text-transform: uppercase; text-underline-offset: .18em;
  pointer-events: auto; transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.pill-btn:hover { transform: rotate(-4deg) scale(1.06); }
@media (max-width: 760px) {
  .estrella .copy-m { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
  .copy-m .star-copy { position: static; width: 88vw; }
  .copy-m .star-title { font-size: 5.5vw; line-height: 1.6; }
  .copy-m .hl { padding: 0 .9vw; }
  .copy-m .star-sub { width: auto; margin-top: 3vw; font-size: 3.3vw; }
  .copy-m .pill-btn { width: 32vw; height: 10vw; font-size: 3vw; margin-top: 4vw; }
}

/* bloques */
.bloques { background: var(--olive); touch-action: pan-y; }
.blocks { position: absolute; inset: 0; }
.block { position: absolute; left: 0; top: 0; will-change: transform; }
.block img { width: 100%; height: 100%; }
.block.flip img { transform: scaleX(-1); }
.block .lbl {
  position: absolute; left: 50%; top: 50%; margin: 0; white-space: nowrap;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 100px; letter-spacing: 10px;
  color: var(--cream); text-transform: uppercase; pointer-events: none;
}
.hand {
  position: absolute; left: 0; top: 0; width: 1429.4px; height: 1117.2px;
  pointer-events: none; z-index: 25; will-change: transform; transform-origin: 0 0;
}
.hand img { position: relative; width: 100%; height: 100%; }
/* el antebrazo sigue más allá del borde del dibujo, para que nunca se vea cortado */
.hand-arm {
  position: absolute; left: -2500px; top: 700px; width: 2600px; height: 2400px;
  background: #D79C78; clip-path: polygon(2516.2px 51.9px, 2548.0px 404.9px, 162.0px 2256.0px, 67.0px 1815.6px);
}
.bloques.playing, .bloques.playing * { cursor: none; }
.bloques.playing a { cursor: pointer; }

/* valle */
.valle { background: var(--sky); }
.valle .stage-box { cursor: pointer; }
.bloques .stage-box { touch-action: pan-y; }
/* lomas y agua: elipses en CSS (antes SVG de 3000 px; Safari los volvía a rasterizar en cada cuadro) */
.v-ground .ell, .ch-water .ell, #ch-ground .ell { display: block; width: 100%; height: 100%; border-radius: 50%; transform: rotate(-0.33deg); }
.bld, .win { transform-origin: 50% 100%; }
.dandelion-hit { border-radius: 50%; }
.dandelion-hit:focus-visible { outline: 8px dashed var(--cream); outline-offset: 10px; }
.seeds { position: absolute; inset: 0; pointer-events: none; }
.seed { position: absolute; }
.seed img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.v-kid { transform-origin: 30% 95%; }
.seed-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.seed-layer .seed img { width: 100%; height: 100%; }

/* chuchunko */
.chuchunko { background: var(--sky); }
.ch-title {
  margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 313.1px; letter-spacing: 31.3px; line-height: normal; color: var(--plum);
}
.ch-title span { position: absolute; top: 470px; display: block; transform-origin: 50% 100%; cursor: default; }
.ch-title .g { color: var(--forest); }
.ch-title .o { color: var(--rust); }
.ch-sub {
  position: absolute; right: calc(2980px - 2221px); top: 804px; margin: 0; white-space: nowrap;
  font-weight: 500; font-style: italic; font-size: 64px; letter-spacing: 6.4px; color: var(--plum);
}
.ch-sub em { color: var(--rust); }
.ch-text {
  position: absolute; left: 969px; top: 1205px; width: 1802px; margin: 0; text-align: right;
  font-size: 45px; letter-spacing: 4.5px; line-height: normal; color: var(--cream);
}
@media (max-width: 760px) {
  .chuchunko { background: var(--forest); }
  .chuchunko .stage-box { background: var(--sky); }
  .chuchunko .copy-m { padding: 0 7vw 12vw; background: var(--forest); }
  .copy-m .ch-sub { position: static; white-space: normal; text-align: center; font-size: 4.6vw; padding: 2vw 0 2vw; margin: 0 -7vw; background: transparent; color: var(--cream); }
  .copy-m .ch-sub em { color: var(--pink); }
  .copy-m .ch-text { position: static; width: auto; text-align: left; font-size: 3.7vw; line-height: 1.5; letter-spacing: .05em; padding-top: 6vw; }
}

/* video */
.video { background: var(--forest); padding: calc(467 * var(--u)) calc(251 * var(--u)) calc(260 * var(--u)); }
.video-frame {
  position: relative; display: grid; place-items: center; align-content: center; gap: calc(50 * var(--u));
  aspect-ratio: 2477 / 1519; width: 100%;
  border-radius: calc(60 * var(--u)); background: var(--earth); text-decoration: none; overflow: hidden;
}
.video-frame::before {
  content: ""; position: absolute; inset: calc(28 * var(--u)); border-radius: calc(40 * var(--u));
  border: calc(6 * var(--u)) solid rgba(250, 241, 197, .25);
}
.video-play {
  width: calc(300 * var(--u)); height: calc(300 * var(--u)); border-radius: 50%; background: var(--cream);
  display: grid; place-items: center; transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.video-play svg { width: 50%; height: 50%; fill: var(--forest); translate: 6% 0; }
.video-label { color: var(--cream); font-weight: 500; font-size: calc(40 * var(--u)); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .2em; }
.video-frame:hover .video-play { transform: scale(1.12) rotate(-6deg); }

/* preguntas */
.faq { background: var(--forest); padding: calc(80 * var(--u)) 0 calc(400 * var(--u)); }
.faq-list { list-style: none; margin: 0 auto; padding: 0; width: calc(1591 * var(--u)); display: grid; gap: calc(38 * var(--u)); }
.faq-item { min-height: calc(274 * var(--u)); display: grid; perspective: calc(3000 * var(--u)); outline: none; cursor: default; }
.faq-card { position: relative; display: grid; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.5,1.6,.45,1); }
.faq-q, .faq-a {
  grid-area: 1 / 1; margin: 0; padding: calc(40 * var(--u)) calc(150 * var(--u)); min-height: calc(274 * var(--u));
  display: grid; place-items: center; text-align: center;
  border-radius: 999px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-family: 'Montserrat', sans-serif; color: #000;
}
.faq-q { background: var(--pink); font-weight: 700; font-size: calc(50 * var(--u)); letter-spacing: calc(5 * var(--u)); }
.faq-a { background: var(--cream); font-weight: 500; font-size: calc(42 * var(--u)); letter-spacing: calc(4 * var(--u)); transform: rotateX(180deg); }
.faq-item.open .faq-card { transform: rotateX(180deg); }
@media (hover: hover) { .faq-item:hover .faq-card { transform: rotateX(180deg); } }
.faq-item:focus-visible .faq-card { transform: rotateX(180deg); }
.faq-item:nth-child(4) { translate: calc(7 * var(--u)) 0; }
@media (max-width: 760px) {
  .faq { padding: calc(160 * var(--u)) 0 calc(360 * var(--u)); }
  .faq-list { width: calc(1060 * var(--u)); gap: calc(30 * var(--u)); }
  .faq-item, .faq-q, .faq-a { min-height: calc(230 * var(--u)); }
  .faq-item:nth-child(4) { translate: none; }
  .faq-q, .faq-a { padding: 0 calc(70 * var(--u)); }
  .faq-q { font-size: calc(40 * var(--u)); letter-spacing: .04em; }
  .faq-a { font-size: calc(36 * var(--u)); letter-spacing: .03em; }
  .video { padding: calc(260 * var(--u)) calc(60 * var(--u)) calc(200 * var(--u)); }
}

/* footer */
.footer {
  position: relative; margin-top: calc(-164 * var(--u));
  background: var(--earth); color: #fff; border-radius: calc(164 * var(--u)) calc(164 * var(--u)) 0 0;
  height: calc(456 * var(--u)); font-weight: 300;
}
.ft-logo { position: absolute; left: calc(117 * var(--u)); top: calc(112 * var(--u)); width: 322.8px; height: 237.3px; transform-origin: 0 0; transform: scale(var(--s, .4)); }
.ft-logo img { position: absolute; }
.ft-logo span { position: absolute; left: 58.1px; top: 3.1px; font-weight: 500; font-size: 33.8px; letter-spacing: 3.38px; color: var(--forest); }
.ft-info { position: absolute; left: calc(545 * var(--u)); top: calc(119 * var(--u)); }
.ft-info p { margin: 0; white-space: nowrap; }
.ft-name { font-weight: 500; font-size: calc(45 * var(--u)); letter-spacing: calc(4.5 * var(--u)); }
.ft-place { margin-top: calc(18 * var(--u)) !important; font-size: calc(36 * var(--u)); letter-spacing: calc(3.6 * var(--u)); }
.ft-year { margin-top: calc(40 * var(--u)) !important; font-size: calc(24 * var(--u)); letter-spacing: calc(2.4 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); }
.ft-year img { width: calc(22 * var(--u)); height: auto; }
.ft-btn {
  position: absolute; left: calc(1463 * var(--u)); top: calc(142 * var(--u));
  width: calc(508 * var(--u)); height: calc(136 * var(--u)); border-radius: 999px;
  display: grid; place-items: center; background: var(--olive); color: var(--cream); text-decoration: none;
  font-weight: 700; font-size: calc(45 * var(--u)); letter-spacing: calc(4.5 * var(--u)); text-transform: uppercase;
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.ft-btn:hover { transform: rotate(-3deg) scale(1.05); }
.ft-contact { position: absolute; left: calc(2142 * var(--u)); top: calc(123 * var(--u)); margin: 0; padding: 0; list-style: none; display: grid; gap: calc(37 * var(--u)); }
.ft-contact li { display: flex; align-items: center; gap: calc(21 * var(--u)); }
.ft-contact img { width: calc(63 * var(--u)); height: calc(63 * var(--u)); }
.ft-contact a { text-decoration: none; font-size: calc(36 * var(--u)); letter-spacing: calc(3.6 * var(--u)); }
.ft-contact a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .footer { height: auto; padding: calc(110 * var(--u)) calc(80 * var(--u)) calc(140 * var(--u)); display: grid; gap: calc(60 * var(--u)); justify-items: start; }
  .footer > * { position: static !important; }
  .ft-logo { width: calc(322.8px * var(--s, .33)); height: calc(237.3px * var(--s, .33)); }
}

@media (prefers-reduced-motion: reduce) {
}

/* ---------- pistas junto a los objetos ---------- */
.hint {
  margin: 0; white-space: nowrap; pointer-events: none;
  font-family: 'Mandali', sans-serif; font-size: 78px; letter-spacing: 3px; line-height: 1;
  color: var(--forest); display: flex; align-items: flex-start; gap: 18px;
  opacity: 0;
}
.hint svg { width: 150px; height: 100px; margin-top: 30px; overflow: visible; }
.hint svg path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hint svg.flipx { transform: scaleX(-1); }
.hint-light { color: var(--cream); }
.hint-blow { align-items: center; }
.hint-blow svg { margin-top: 0; transform: scaleX(-1) rotate(-20deg); }
.hint-blow i { width: 30px; height: 30px; border-radius: 50%; border: 5px solid currentColor; transition: background-color .3s; }
.hint-blow i.done { background: currentColor; }
.hint-blow span { margin-right: 10px; }

/* FAQ: título */
.faq-title {
  margin: 0 auto calc(90 * var(--u)); width: calc(1591 * var(--u)); text-align: center;
  font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: calc(90 * var(--u)); letter-spacing: calc(9 * var(--u)); color: var(--cream);
}
.faq-title span { display: block; margin-top: calc(24 * var(--u)); font-family: 'Mandali', sans-serif; font-weight: 400; text-transform: none; font-size: calc(46 * var(--u)); letter-spacing: calc(2 * var(--u)); color: var(--pink); }
@media (max-width: 760px) { .faq-title { width: calc(1060 * var(--u)); font-size: calc(70 * var(--u)); } .faq-title span { font-size: calc(40 * var(--u)); } }

/* móvil: textos de las capas */
@media (max-width: 760px) {
  .estrella .copy-m { z-index: 2; }
  .chuchunko .copy-m { position: absolute; left: 0; right: 0; bottom: 0; }
  .bloques .copy-m, .valle .copy-m { display: none; }
}

/* viaje: el escenario no se desplaza; los gestos avanzan capítulos */
html.journey-lock, html.journey-lock body { overflow: hidden; overscroll-behavior: none; }
html.journey-lock .mundo-pin { touch-action: none; }
.mundo-pin .layer, .esc { will-change: opacity; }
@media (max-width: 760px) {
  .world, .mundo-pin .layer, .esc, .star-wrap > .star,
  .cloud, .block, .wi { will-change: auto; }
}

/* señal para continuar: flecha hacia abajo */
.cue {
  position: absolute; left: 50%; bottom: 3.4vh; z-index: 40; translate: -50% 0;
  display: grid; justify-items: center; gap: 6px;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s;
}
.cue.on { opacity: 1; visibility: visible; }
.cue svg {
  width: 46px; height: 46px; padding: 11px; border-radius: 50%;
  background: var(--cream); box-shadow: 0 0 0 2px var(--forest);
  fill: none; stroke: var(--forest); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  animation: cue-bob 1.8s ease-in-out infinite;
}
.cue:hover svg { background: #fff8d8; }
.cue-label { font-family: 'Mandali', sans-serif; font-size: 17px; letter-spacing: .04em; color: var(--forest); background: var(--cream); padding: 1px 10px; border-radius: 999px; }
.cue-label:empty { display: none; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .cue svg { animation: none; } }
.veil { position: fixed; inset: 0; z-index: 70; background: var(--cream); opacity: 0; visibility: hidden; pointer-events: none; }

/* valle: botón para soplar, en el centro del diente de león */
.blow-btn {
  display: grid; place-items: center; align-content: center; gap: 14px; border-radius: 50%;
  background: var(--cream); color: var(--forest); box-shadow: 0 0 0 10px var(--forest);
  font-family: 'Mandali', sans-serif; font-size: 72px; line-height: 1; opacity: 0; z-index: 3;
}
.blow-btn::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 10px solid var(--cream);
  animation: blow-ring 1.8s ease-out infinite; pointer-events: none;
}
/* el anillo crece con inset y se apaga con el color del borde, no con transform/opacity: una animación
   acelerada aquí obliga a Safari a guardar todo el escenario del valle como capa (cientos de MB en iPhone) */
@keyframes blow-ring { 0% { inset: -10px; border-color: rgba(250, 241, 197, .9); } 100% { inset: -92px; border-color: rgba(250, 241, 197, 0); } }
.blow-btn:hover { background: #fff8d8; }
.blow-btn:focus-visible { outline: 10px dashed var(--cream); outline-offset: 24px; }
.blow-dots { display: flex; gap: 14px; }
.blow-dots i { width: 26px; height: 26px; border-radius: 50%; border: 5px solid currentColor; transition: background-color .3s; }
.blow-dots i.done { background: currentColor; }
.v-land { position: absolute; inset: 0; }

/* máscaras de línea para los párrafos */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wi { display: inline-block; will-change: transform; }
.blow-txt { font-size: 58px; line-height: .95; text-align: center; }

/* ---------- menú en celular ---------- */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav-toggle {
    display: grid; place-items: center; position: absolute; left: calc(380 * var(--u)); top: calc(50 * var(--u));
    height: calc(110 * var(--u)); padding: 0 calc(46 * var(--u)); border-radius: 999px;
    background: var(--sky); color: var(--forest); font-weight: 500; font-size: calc(36 * var(--u)); text-transform: uppercase; letter-spacing: .04em;
  }
  .nav[data-theme="pink"] .nav-toggle { background: var(--pink); }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    left: calc(50 * var(--u)); right: calc(50 * var(--u)); top: calc(190 * var(--u)); width: auto; height: auto;
    padding: 20px 24px; border-radius: 22px;
  }
  .nav.open .nav-links a { font-size: 16px; }
}
.nav-links a { font-size: max(11px, calc(32 * var(--u))); }
.nav-home { font-size: max(12px, calc(40 * var(--u))); }

/* ---------- video ---------- */
.video-frame { background: #000; }
.video-frame::before { z-index: 1; pointer-events: none; }
.video-poster { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; cursor: pointer; }
.video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-poster .video-play { position: relative; z-index: 2; }
.video-poster:hover .video-play { transform: scale(1.1) rotate(-6deg); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-external { display: block; width: max-content; margin: calc(40 * var(--u)) auto 0; color: var(--cream); font-weight: 500; font-size: max(13px, calc(34 * var(--u))); letter-spacing: .1em; text-transform: uppercase; text-underline-offset: .25em; }

/* ---------- ¡Anímate! ---------- */
.flow-scene { position: relative; overflow: hidden; }
.flow-scene .stage-box { position: relative; overflow: hidden; }
.animate { background: var(--earth); }
.an-splash img { width: 100%; height: 100%; }
.an-title {
  position: absolute; left: 180px; top: 352px; margin: 0; width: 1156px;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 180px; letter-spacing: 18px; text-transform: uppercase; color: var(--cream); line-height: normal;
}
.an-text { position: absolute; left: 209px; top: 610px; width: 1082px; margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 48px; letter-spacing: 4.8px; line-height: normal; color: var(--cream); }
.an-painter { position: absolute; inset: 0; transform-origin: 2900px -300px; }
@media (max-width: 760px) {
  .animate { display: flex; flex-direction: column; }
  .animate .copy-m { order: -1; padding: 16vw 7vw 4vw; }
  .copy-m .an-title { position: static; width: auto; font-size: 11vw; letter-spacing: .08em; }
  .copy-m .an-text { position: static; width: auto; margin-top: 3vw; font-size: 4vw; letter-spacing: .04em; line-height: 1.45; }
}

/* ---------- pie de página (lámina ¡Anímate!) ---------- */
.footer { background: var(--rust); }
.ft-logo span { white-space: nowrap; }
.ft-contact a { color: var(--cream); }
.ft-at { display: grid; place-items: center; width: calc(63 * var(--u)); height: calc(63 * var(--u)); color: var(--cream); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: calc(62 * var(--u)); line-height: 1; }
.ft-contact li:last-child a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 760px) {
  .ft-logo { width: 322.8px !important; height: 237.3px !important; margin: 0 calc(322.8px * (var(--s) - 1)) calc(237.3px * (var(--s) - 1)) 0; }
  .ft-at { width: 22px; height: 22px; font-size: 22px; }
}

/* ---------- celular: otros ajustes ---------- */
@media (max-width: 760px) {
  .copy-m .ch-sub { letter-spacing: .04em; }
  .chuchunko .copy-m { padding-bottom: 96px; overflow: auto; }
  .valle { background: linear-gradient(var(--sky) 50%, var(--olive) 50%); }
  .blow-btn { width: 420px !important; height: 420px !important; margin: -70px 0 0 -70px; }
  .blow-txt { font-size: 92px; }
}

/* ========== LOADER (logo flotando mientras carga la página) ========== */
html.vl-on, html.vl-on body { overflow: hidden; }
.vl {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--sky);
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.vl-cloud { width: min(240px, 46vw); animation: vl-float 2.4s ease-in-out infinite; }
.vl-logo { display: block; width: 100%; height: auto; overflow: visible; }
.vl-wind { display: flex; gap: 10px; }
.vl-wind i {
  display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--cream);
  animation: vl-dot 1.2s ease-in-out infinite;
}
.vl-wind i:nth-child(2) { animation-delay: .15s; }
.vl-wind i:nth-child(3) { animation-delay: .3s; }
.vl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vl-out { opacity: 0; visibility: hidden; }
.vl-out .vl-cloud { animation: none; transform: translateY(-40px) scale(1.08); transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes vl-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}
@keyframes vl-dot {
  0%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vl-cloud, .vl-wind i { animation: none; }
}

/* iPhone: ninguna capa gráfica forzada (Safari las guarda sin escalar y cierra la pestaña por memoria) */
.ios-lite *, .ios-lite *::before, .ios-lite *::after { will-change: auto !important; }