/* ==================================================================
   ¡Dani cumple 5! · Dulcilandia
   Paleta única de dulces pastel: rosa algodón, menta, limón, lila y
   celeste sobre crema, con tinta ciruela. Forma propia: el marco de
   glaseado con grageas. Lenguaje de animación: gelatina (squash &
   stretch), pegatinas que se pegan con un "pop", confeti por sección,
   polaroids que se reparten como cartas y dígitos de caramelo.
   Tipografías: Sour Gummy (títulos) · M PLUS Rounded 1c (texto) ·
   Gochi Hand (la voz de Dani).
   ================================================================== */

:root{
  --crema:#FFF8EE;
  --crema-2:#FFEFDD;
  --rosa:#F9B4CF;
  --rosa-2:#FDE6EF;
  --chicle:#EE82AE;          /* rosa algodón intenso: solo títulos grandes con contorno */
  --menta:#A8E6CF;
  --menta-2:#E4F6EE;
  --limon:#FFE680;
  --limon-2:#FFF6CF;
  --lila:#CDB4F0;
  --lila-2:#F1E9FC;
  --celeste:#AEDCF7;
  --celeste-2:#E4F3FC;
  --tinta:#4A2345;           /* ciruela oscura: texto (≥ 11:1 sobre crema) */
  --tinta-suave:#744A6C;     /* texto secundario (≥ 6:1 sobre crema) */
  --linea:rgba(74,35,69,.14);
  --titulo:'Sour Gummy','M PLUS Rounded 1c',system-ui,sans-serif;
  --texto:'M PLUS Rounded 1c',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mano:'Gochi Hand','M PLUS Rounded 1c',cursive;
  --arriba:env(safe-area-inset-top,0px);
  --abajo:env(safe-area-inset-bottom,0px);
  --izq:env(safe-area-inset-left,0px);
  --der:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--texto);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
body.cerrado{overflow:hidden;height:100%}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
[hidden]{display:none!important}

/* ------------------------------------------------------------------
   PORTADA
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:#F6DDE8}
body.abierto .portada{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s linear .5s}
.portada__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 62%}
.chispas{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.chispa{
  position:absolute;
  width:14px;
  height:14px;
  background:#fff;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  opacity:0;
}

/* escenario: el JS le da ancho/alto y márgenes a su tamaño final (lección §12, sin transform: scale) */
.escena{position:absolute;left:50%;top:50%;width:752px;height:1344px;margin:-672px 0 0 -376px;z-index:2;visibility:hidden;pointer-events:none}
.escena.lista{visibility:visible}
/* cajas por left/top (esquina superior izquierda); GSAP mueve solo la imagen de adentro */
.deco{position:absolute;left:var(--x);top:var(--y);width:var(--w)}
.deco img{width:100%;height:auto;transform-origin:50% 60%}

.portada__cabecera{
  position:absolute;
  top:calc(var(--arriba) + clamp(22px,4.6vh,52px));
  left:0;
  right:0;
  z-index:4;
  padding:0 18px;
  text-align:center;
  pointer-events:none;
}
.portada__sobre{
  display:inline-block;
  padding:5px 16px 6px;
  border-radius:999px;
  background:var(--crema);
  border:2px solid var(--rosa);
  color:var(--tinta);
  font-family:var(--mano);
  font-size:clamp(17px,4.7vw,21px);
  line-height:1.2;
  rotate:-3deg;
  box-shadow:0 6px 16px rgba(74,35,69,.12);
}
.portada__nombre{
  display:block;
  margin-top:2px;
  font-family:var(--titulo);
  font-weight:900;
  font-variation-settings:'wdth' 118;
  font-size:clamp(92px,28vw,136px);
  line-height:.92;
  color:var(--chicle);
  -webkit-text-stroke:10px var(--crema);
  paint-order:stroke fill;
  text-shadow:0 7px 0 var(--tinta),0 14px 26px rgba(74,35,69,.3);
  transform-origin:50% 100%;
}
.portada__edad{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin-top:2px;
  font-family:var(--titulo);
  font-weight:800;
  font-variation-settings:'wdth' 112;
  font-size:clamp(32px,9vw,44px);
  line-height:1;
  color:var(--tinta);
  -webkit-text-stroke:7px var(--crema);
  paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(249,180,207,.95);
}
/* dígito de caramelo: rayas de bastón de dulce dentro del número */
.caramelo-num{
  display:inline-block;
  font-family:var(--titulo);
  font-weight:900;
  font-variation-settings:'wdth' 120;
  font-size:1.75em;
  line-height:.9;
  background:repeating-linear-gradient(-45deg,var(--chicle) 0 .1em,#FFFFFF .1em .2em);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:3px var(--tinta);
  paint-order:normal;
  text-shadow:none;
  filter:drop-shadow(0 5px 0 var(--tinta)) drop-shadow(0 0 1px var(--crema));
}
.portada__fecha{
  display:inline-block;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(255,248,238,.93);
  border:2px solid var(--rosa);
  color:var(--tinta);
  font-size:clamp(13.5px,3.7vw,16px);
  font-weight:700;
  line-height:1.35;
  text-align:center;
  max-width:92vw;
  box-shadow:0 8px 20px rgba(74,35,69,.14);
}
.portada__fecha--cabecera{display:none}
.portada__fecha--pie{margin-bottom:12px}

/* --- toque: toda la portada es el botón; la píldora lleva la manito y el anillo --- */
.portada__tap{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  border:0;
  padding:0 16px calc(var(--abajo) + clamp(24px,5vh,54px));
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  -webkit-tap-highlight-color:transparent;
}
.portada__pista{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:12px 26px 12px 20px;
  border-radius:999px;
  border:2px solid #fff;
  background:rgba(255,248,238,.94);
  color:var(--tinta);
  font-size:14px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(74,35,69,.18);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:999px;
  border:2.5px solid var(--rosa);
  animation:onda 2.1s ease-out infinite;
  pointer-events:none;
}
@keyframes onda{0%{transform:scale(1);opacity:.95}70%,100%{transform:scale(1.32);opacity:0}}
.pista__mano{width:22px;height:22px;flex:0 0 auto;animation:toque 1.7s ease-in-out infinite}
@keyframes toque{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(4px) scale(.88)}70%{transform:translateY(0) scale(1)}}
.portada__tap:hover .portada__pista,
.portada__tap:focus-visible .portada__pista{background:var(--tinta);color:var(--crema);border-color:var(--rosa)}
@media (hover:none){
  .portada__pista{background:var(--tinta);color:var(--crema);border-color:var(--rosa)}
}

/* --- el viaje: video a pantalla completa, textos en placas y la foto que cae en el marco --- */
.viaje{position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden;pointer-events:none}
.viaje__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#F6DDE8}
.viaje__texto{
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--arriba) + 11%);
  width:fit-content;
  max-width:min(92%,660px);
  margin:0 auto;
  padding:12px 22px 14px;
  border-radius:26px;
  background:rgba(74,35,69,.64);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 12px 30px rgba(74,35,69,.24),inset 0 0 0 2px rgba(255,255,255,.35);
  color:var(--crema);
  text-align:center;
  font-family:var(--titulo);
  font-weight:700;
  font-variation-settings:'wdth' 108;
  font-size:clamp(24px,6.6vw,40px);
  line-height:1.12;
  opacity:0;
  z-index:4;
}
.viaje__texto--final{top:auto;bottom:calc(var(--abajo) + 8%);font-size:clamp(31px,9vw,58px);padding:12px 22px 16px;white-space:nowrap}
.viaje__texto--final span{display:block;margin-bottom:4px;font-family:var(--mano);font-weight:400;font-size:.46em;color:var(--limon)}
.viaje__foto{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;opacity:0;z-index:4;transform-origin:50% 100%}
.viaje__foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 0 0 5px var(--crema),0 0 0 9px rgba(249,180,207,.95),0 18px 36px rgba(74,35,69,.28)}

.velo{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#FFFFFF 0%,var(--crema) 42%,var(--rosa-2) 100%)}

/* --- volver --- */
.volver-fijo{
  position:fixed;
  top:calc(var(--arriba) + 12px);
  left:calc(var(--izq) + 12px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:8px 18px 8px 12px;
  border-radius:999px;
  border:2px solid var(--rosa);
  background:rgba(255,248,238,.95);
  color:var(--tinta);
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background-color .3s ease,color .3s ease,opacity .4s ease,visibility 0s;
}
.volver-fijo svg{width:16px;height:16px}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--tinta);color:var(--crema)}
body.cerrado .volver-fijo{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}

/* --- música flotante: la carita de Globi con barras que bailan --- */
.musica-flotante{
  position:fixed;
  right:calc(var(--der) + 14px);
  bottom:calc(var(--abajo) + 14px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  padding:5px 16px 5px 5px;
  border-radius:999px;
  border:2px solid var(--rosa);
  background:rgba(74,35,69,.86);
  color:var(--limon);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  translate:0 12px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:opacity .4s ease,visibility 0s linear .4s,translate .4s ease,background-color .3s ease;
}
html.musica .musica-flotante{opacity:1;visibility:visible;translate:0 0;transition:opacity .4s ease,visibility 0s,translate .4s ease,background-color .3s ease}
.musica-flotante img{width:40px;height:40px;border-radius:50%;background:var(--rosa-2);object-fit:cover}
.musica-flotante:hover,.musica-flotante:focus-visible{background:var(--tinta)}
.musica-flotante__ondas{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.musica-flotante__ondas i{display:block;width:3.5px;height:6px;border-radius:2px;background:currentColor}
.musica-flotante--tocando .musica-flotante__ondas i{animation:barras .9s ease-in-out infinite}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(2){animation-delay:.15s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(3){animation-delay:.3s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(4){animation-delay:.45s}
@keyframes barras{0%,100%{height:6px}50%{height:18px}}
.musica-flotante:not(.musica-flotante--tocando){color:rgba(255,230,128,.55)}
.musica-flotante:not(.musica-flotante--tocando) img{filter:grayscale(.5)}

/* ------------------------------------------------------------------
   CUERPO
   ------------------------------------------------------------------ */
.dulcilandia{position:relative;z-index:1;opacity:0;transition:opacity .6s ease}
body.abierto .dulcilandia{opacity:1}
.sec{
  position:relative;
  overflow:hidden;
  padding:clamp(76px,15vw,124px) max(22px,var(--der)) clamp(70px,13vw,112px) max(22px,var(--izq));
  text-align:center;
}
/* borde de glaseado: una fila de ondas del color de la sección anterior */
.sec--ondas::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:22px;
  background:radial-gradient(circle at 50% 0,var(--antes) 13px,transparent 13.5px) 0 0/34px 22px repeat-x;
  pointer-events:none;
  z-index:1;
}
.confeti-capa{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.papelito{position:absolute;left:0;top:0;width:8px;height:12px;border-radius:2px;will-change:transform}

.rotulo{
  display:inline-block;
  margin:0;
  padding:7px 16px 8px;
  border-radius:999px;
  background:var(--limon);
  color:var(--tinta);
  font-size:12px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.2;
  rotate:-2deg;
  box-shadow:0 6px 14px rgba(74,35,69,.1);
}
.titulo{
  max-width:17ch;
  margin:16px auto 0;
  font-family:var(--titulo);
  font-weight:800;
  font-variation-settings:'wdth' 110;
  font-size:clamp(34px,9.4vw,58px);
  line-height:1.04;
  color:var(--tinta);
  text-shadow:0 4px 0 var(--rosa);
}

/* --- botones --- */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:13px 28px;
  border-radius:999px;
  border:2px solid var(--tinta);
  background:var(--tinta);
  color:var(--crema);
  font-size:15px;
  font-weight:800;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.boton svg{width:20px;height:20px;flex:0 0 auto}
.boton:hover,.boton:focus-visible{background:var(--chicle);border-color:var(--chicle);color:var(--tinta)}
.boton--suave{background:var(--crema);color:var(--tinta);border-color:var(--rosa)}
.boton--suave:hover,.boton--suave:focus-visible{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}
.boton--claro{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.boton--claro:hover,.boton--claro:focus-visible{background:var(--tinta);color:var(--crema)}

/* ------------------------------------------------------------------
   MARCO DE GLASEADO (la forma propia): ondas rosadas + grageas + foto
   ------------------------------------------------------------------ */
.glaseado{position:relative;aspect-ratio:1;margin:0 auto}
.glaseado--grande{width:min(300px,74vw)}
.glaseado--chico{width:132px}
.glaseado__borde{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.glaseado__onda{fill:var(--rosa);stroke:#FFFFFF;stroke-width:3;stroke-linejoin:round}
.glaseado__foto{position:absolute;inset:11.5%;width:77%;height:77%;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 5px var(--crema),0 10px 24px rgba(74,35,69,.2)}

/* ------------------------------------------------------------------
   1 · LA CUMPLEAÑERA
   ------------------------------------------------------------------ */
.dani{
  background:
    radial-gradient(circle at 12% 18%,rgba(249,180,207,.35) 0 90px,transparent 91px),
    radial-gradient(circle at 92% 72%,rgba(168,230,207,.35) 0 120px,transparent 121px),
    var(--crema);
  padding-top:calc(var(--arriba) + 96px);
}
.dani__dentro{display:grid;gap:34px;justify-items:center;max-width:1000px;margin:0 auto}
.dani__figura{position:relative;width:min(340px,86vw);padding:22px 0 10px}
.pegatina{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(74,35,69,.18))}
.pegatina--chupetin{width:78px;left:-2px;top:-6px;rotate:-16deg}
.pegatina--cupcake{width:84px;right:-6px;bottom:-4px;rotate:10deg}
.pegatina--gomita{width:56px;right:4px;top:12px;rotate:14deg}
.dani__texto{max-width:560px}
.dani__nombre{
  margin:10px 0 0;
  font-family:var(--titulo);
  font-weight:900;
  font-variation-settings:'wdth' 118;
  font-size:clamp(92px,27vw,150px);
  line-height:.9;
  color:var(--chicle);
  -webkit-text-stroke:10px var(--crema);
  paint-order:stroke fill;
  text-shadow:0 7px 0 var(--tinta),0 14px 26px rgba(74,35,69,.22);
}
.dani__edad{display:inline-flex;align-items:center;gap:12px;margin:6px 0 0;font-family:var(--mano);font-size:22px;line-height:1.05;text-align:left;color:var(--tinta)}
.dani__edad .caramelo-num{font-size:84px}
.dani__carta{
  margin:22px auto 0;
  padding:20px 22px 22px;
  border-radius:22px;
  background:#FFFFFF;
  border:2.5px dashed var(--rosa);
  font-family:var(--mano);
  font-size:clamp(20px,5.4vw,23px);
  line-height:1.45;
  color:var(--tinta);
  text-align:left;
  rotate:-1deg;
  box-shadow:0 12px 28px rgba(74,35,69,.08);
}
.dani__carta b{font-weight:400;background:linear-gradient(transparent 55%,var(--limon) 55%);padding:0 2px}
.dani__firma{margin:22px 0 0;font-size:15px;font-weight:500;color:var(--tinta-suave)}
.dani__firma span{display:inline-block;margin-top:2px;font-family:var(--titulo);font-weight:800;font-size:26px;color:var(--tinta)}

/* ------------------------------------------------------------------
   2 · EL DÍA MÁS DULCE · fecha y cuenta (sobre video corto)
   ------------------------------------------------------------------ */
.dia{background:linear-gradient(180deg,var(--celeste-2) 0%,var(--lila-2) 55%,var(--rosa-2) 100%);color:var(--tinta)}
.dia__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.dia__velo{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,248,238,.28) 0%,rgba(255,248,238,.12) 40%,rgba(255,248,238,.35) 100%)}
.dia::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:22px;
  background:radial-gradient(circle at 50% 100%,var(--menta-2) 13px,transparent 13.5px) 0 100%/34px 22px repeat-x;
  z-index:2;
  pointer-events:none;
}
.dia__contenido{position:relative;z-index:3;max-width:760px;margin:0 auto}
.dia .rotulo{background:var(--crema)}
.fecha{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(360px,100%);
  margin:22px auto 0;
  padding:22px 20px 26px;
  border-radius:36px;
  background:rgba(255,248,238,.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:3px solid #FFFFFF;
  box-shadow:0 18px 40px rgba(74,35,69,.16);
}
.fecha__dia{font-family:var(--titulo);font-weight:800;font-size:28px;line-height:1.1;color:var(--tinta)}
.fecha__num{
  font-family:var(--titulo);
  font-weight:900;
  font-variation-settings:'wdth' 122;
  font-size:clamp(118px,34vw,160px);
  line-height:.9;
  margin:4px 0 6px;
  background:repeating-linear-gradient(-45deg,var(--chicle) 0 .1em,#FFFFFF .1em .2em);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:4px var(--tinta);
  filter:drop-shadow(0 7px 0 var(--tinta));
}
.fecha__mes{font-family:var(--titulo);font-weight:700;font-size:22px;line-height:1.2;color:var(--tinta)}
.fecha__hora{display:inline-block;margin-top:14px;padding:9px 20px;border-radius:999px;background:var(--tinta);color:var(--crema);font-size:16px;font-weight:800;letter-spacing:.02em}
.dia__faltan{display:inline-block;margin:30px 0 0;padding:6px 18px;border-radius:999px;background:rgba(255,248,238,.92);font-family:var(--titulo);font-weight:800;font-size:22px;color:var(--tinta)}
/* dígitos de caramelo: cada unidad es un caramelo envuelto */
.cuenta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 6px;max-width:330px;margin:20px auto 0}
.caramelo{position:relative;display:flex;flex-direction:column;align-items:center;isolation:isolate}
.caramelo__envoltura{
  position:relative;
  display:block;
  width:92px;
  height:92px;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,0) 8%),
    repeating-conic-gradient(from 8deg,var(--c1) 0 20deg,var(--c2) 20deg 40deg);
  box-shadow:inset 0 -6px 0 rgba(74,35,69,.12),0 10px 20px rgba(74,35,69,.16);
}
/* las puntas del papel del caramelo, a cada lado */
.caramelo__envoltura::before,.caramelo__envoltura::after{
  content:'';
  position:absolute;
  top:50%;
  width:30px;
  height:44px;
  margin-top:-22px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  opacity:.9;
  z-index:-1;
}
.caramelo__envoltura::before{left:-22px;clip-path:polygon(0 0,100% 38%,100% 62%,0 100%,18% 50%)}
.caramelo__envoltura::after{right:-22px;clip-path:polygon(100% 0,0 38%,0 62%,100% 100%,82% 50%)}
.caramelo__n{
  position:absolute;
  top:15px;
  left:50%;
  width:62px;
  height:62px;
  margin-left:-31px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--crema);
  font-family:var(--titulo);
  font-weight:900;
  font-size:30px;
  line-height:1;
  color:var(--tinta);
  box-shadow:inset 0 2px 5px rgba(74,35,69,.12);
  transform-origin:50% 90%;
}
.caramelo__t{margin-top:10px;padding:3px 12px;border-radius:999px;background:rgba(255,248,238,.92);font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
.caramelo--rosa{--c1:var(--rosa);--c2:#FFFFFF}
.caramelo--menta{--c1:var(--menta);--c2:#FFFFFF}
.caramelo--limon{--c1:var(--limon);--c2:#FFFFFF}
.caramelo--lila{--c1:var(--lila);--c2:#FFFFFF}
.dia__hoy{margin:24px auto 0;display:inline-block;padding:12px 26px;border-radius:999px;background:var(--tinta);color:var(--crema);font-family:var(--titulo);font-weight:800;font-size:26px}

/* ------------------------------------------------------------------
   3 · EL MENÚ DE LA FIESTA · programa
   ------------------------------------------------------------------ */
.menu{background:var(--menta-2)}
.menu .rotulo{background:var(--rosa)}
.menu__lista{list-style:none;margin:30px auto 0;padding:0;display:grid;gap:16px;max-width:520px;text-align:left}
.menu__item{
  position:relative;
  display:grid;
  grid-template-columns:76px 1fr;
  grid-template-rows:auto auto auto;
  column-gap:14px;
  align-items:center;
  padding:14px 18px 16px 12px;
  border-radius:24px;
  background:#FFFFFF;
  border:2px solid rgba(168,230,207,.9);
  box-shadow:0 10px 22px rgba(74,35,69,.07);
}
/* muesca de ticket a la izquierda */
.menu__item::before{content:'';position:absolute;left:-9px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--menta-2);border-right:2px solid rgba(168,230,207,.9)}
.menu__ico{grid-row:1 / 4;width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(74,35,69,.16))}
.menu__hora{justify-self:start;padding:2px 10px;border-radius:999px;background:var(--limon-2);font-size:13px;font-weight:800;color:var(--tinta)}
.menu__que{font-family:var(--titulo);font-weight:800;font-size:22px;line-height:1.15;margin-top:4px}
.menu__det{font-size:15px;color:var(--tinta-suave);line-height:1.35}

/* ------------------------------------------------------------------
   4 · ¿DÓNDE ES LA FIESTA? · la tarjeta entera abre el mapa
   ------------------------------------------------------------------ */
.donde{background:var(--limon-2);--antes:var(--menta-2)}
.donde .rotulo{background:var(--menta)}
.lugar{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  max-width:560px;
  margin:30px auto 0;
  padding:22px 22px 24px 16px;
  border-radius:30px;
  background:#FFFFFF;
  border:2.5px solid var(--limon);
  color:inherit;
  text-decoration:none;
  text-align:left;
  box-shadow:0 14px 30px rgba(74,35,69,.1);
  transition:background-color .3s ease,border-color .3s ease;
}
.lugar__pin{flex:0 0 auto;width:74px}
.lugar__pin img{width:100%;height:auto;rotate:-10deg;filter:drop-shadow(0 8px 10px rgba(74,35,69,.18))}
.lugar__cuerpo{display:flex;flex-direction:column;gap:3px;min-width:0}
.lugar__nombre{font-family:var(--titulo);font-weight:900;font-size:clamp(25px,7vw,32px);line-height:1.08}
.lugar__dir{font-size:15.5px;color:var(--tinta-suave)}
.lugar__hora{margin-top:4px;font-size:15.5px;color:var(--tinta)}
.lugar__hora b{font-weight:800}
.lugar__ir{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  min-height:46px;
  margin-top:12px;
  padding:10px 20px 10px 14px;
  border-radius:999px;
  border:2px solid var(--tinta);
  background:transparent;
  color:var(--tinta);
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  transition:background-color .3s ease,color .3s ease;
}
.lugar__ir .pista__mano{width:20px;height:20px}
.lugar:hover,.lugar:focus-visible{background:var(--rosa-2);border-color:var(--rosa)}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:var(--tinta);color:var(--crema)}
@media (hover:none){.lugar__ir{background:var(--tinta);color:var(--crema)}}
.donde__nota{max-width:420px;margin:18px auto 0;font-size:14.5px;color:var(--tinta-suave)}

/* ------------------------------------------------------------------
   5 · MIS PAPÁS · globos inflados de amor (gráfico reactivo)
   ------------------------------------------------------------------ */
.papas{background:var(--celeste-2);--antes:var(--limon-2)}
.papas .rotulo{background:var(--lila)}
.familia{position:relative;width:min(360px,100%);aspect-ratio:360 / 380;margin:24px auto 0}
.familia__hilos{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.familia__hilo{fill:none;stroke:var(--tinta);stroke-width:2.2;stroke-linecap:round;opacity:.55}
.familia__globo{position:absolute;top:0;width:42%;transform-origin:50% 96%}
.familia__globo img{width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(74,35,69,.16))}
.familia__globo--mama{left:6%}
.familia__globo--papa{right:6%}
.familia__nombre{
  position:absolute;
  left:0;
  right:0;
  top:26%;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:var(--titulo);
  font-weight:900;
  font-size:clamp(22px,6.4vw,28px);
  line-height:1.02;
  color:var(--tinta);
}
.familia__nombre small{font-family:var(--texto);font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.familia__dani{position:absolute;left:50%;top:62%;width:132px;margin-left:-66px;display:flex;flex-direction:column;align-items:center}
.familia__yo{margin-top:8px;padding:4px 16px;border-radius:999px;background:var(--tinta);color:var(--crema);font-family:var(--titulo);font-weight:800;font-size:18px}

/* ------------------------------------------------------------------
   6 · MIS FOTOS · polaroids sobre la mesa (carrusel en celular)
   ------------------------------------------------------------------ */
.fotos{background:var(--rosa-2);--antes:var(--celeste-2)}
.fotos .rotulo{background:var(--celeste)}
.mesa{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:22px 18vw 28px;
  margin:10px -22px 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.mesa::-webkit-scrollbar{display:none}
.polaroid{flex:0 0 64vw;max-width:300px;margin:0;scroll-snap-align:center;transition:opacity .4s ease}
.polaroid__carta{
  padding:10px 10px 0;
  border-radius:6px;
  background:#FFFFFF;
  rotate:var(--r,0deg);
  box-shadow:0 12px 26px rgba(74,35,69,.16);
}
.polaroid__foto{overflow:hidden;border-radius:3px;aspect-ratio:4 / 5;background:var(--crema-2)}
.polaroid__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.polaroid figcaption{padding:10px 4px 14px;font-family:var(--mano);font-size:20px;line-height:1.2;color:var(--tinta);text-align:center;transition:color .3s ease}
.puntos{display:flex;justify-content:center;gap:4px;margin-top:6px}
.punto{width:32px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.punto::before{content:'';width:10px;height:10px;border-radius:50%;border:2px solid var(--chicle);transition:background-color .3s ease}
.punto--activo::before{background:var(--chicle)}

/* ------------------------------------------------------------------
   7 · ¡SOPLA LAS VELAS! (la firma de esta plantilla)
   ------------------------------------------------------------------ */
.velas{background:var(--lila-2);--antes:var(--rosa-2)}
.velas .rotulo{background:var(--rosa)}
.velas__intro{max-width:420px;margin:14px auto 0;font-size:16px;color:var(--tinta-suave)}
.velas__escena{position:relative;width:min(330px,80vw);margin:56px auto 0}
.velas__globi{position:absolute;width:34%;left:-10%;bottom:2%;pointer-events:none;z-index:2;filter:drop-shadow(0 10px 14px rgba(74,35,69,.18))}
.torta{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:24px}
.torta:focus-visible{outline:3px dashed var(--chicle);outline-offset:8px}
.torta__img{width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(74,35,69,.18))}
.torta__llamas{position:absolute;inset:0;pointer-events:none}
/* cada vela: caja por left/top en la mecha; la llama (GSAP) y su parpadeo (CSS) en elementos distintos */
.vela{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:0;height:0}
.llama{position:absolute;left:-9px;bottom:-3px;width:18px;height:32px;transform-origin:50% 100%}
.llama i{
  position:absolute;
  inset:0;
  border-radius:50% 50% 45% 45% / 62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 72%,#FFFFFF 0 16%,#FFF1A8 30%,#FFC75F 58%,rgba(255,150,80,.25) 78%,rgba(255,150,80,0) 82%);
  box-shadow:0 0 18px 6px rgba(255,214,102,.55);
  transform-origin:50% 100%;
  animation:parpadeo 1.1s ease-in-out infinite alternate;
}
.vela:nth-child(2) .llama i{animation-delay:-.3s}
.vela:nth-child(3) .llama i{animation-delay:-.6s}
.vela:nth-child(4) .llama i{animation-delay:-.2s}
.vela:nth-child(5) .llama i{animation-delay:-.8s}
@keyframes parpadeo{0%{transform:scale(1,1) skewX(0)}35%{transform:scale(.92,1.08) skewX(3deg)}70%{transform:scale(1.05,.95) skewX(-3deg)}100%{transform:scale(.96,1.05) skewX(1deg)}}
.humo{position:absolute;left:-7px;bottom:10px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.85);pointer-events:none}
.velas__deseo{
  margin:26px 0 0;
  font-family:var(--titulo);
  font-weight:900;
  font-variation-settings:'wdth' 115;
  font-size:clamp(44px,12vw,72px);
  line-height:1;
  color:var(--chicle);
  -webkit-text-stroke:8px var(--crema);
  paint-order:stroke fill;
  text-shadow:0 6px 0 var(--tinta);
}
.velas__botones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
#btn-mic{position:relative;overflow:hidden}
#btn-mic::after{content:'';position:absolute;left:0;bottom:0;height:5px;width:calc(var(--nivel,0) * 1%);background:var(--chicle);transition:width .1s linear}

/* ------------------------------------------------------------------
   8 · MI LISTA DE DESEOS · regalos + lluvia de sobres con QR de ejemplo
   ------------------------------------------------------------------ */
.deseos{background:var(--crema);--antes:var(--lila-2)}
.deseos__globi{width:min(128px,34vw);height:auto;margin:0 auto 10px;filter:drop-shadow(0 10px 14px rgba(74,35,69,.16))}
.deseos__intro{max-width:440px;margin:14px auto 0;font-size:16.5px;color:var(--tinta-suave)}
.regalos{list-style:none;margin:28px auto 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:440px}
.regalo{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px 16px;border-radius:24px;background:#FFFFFF;border:2px solid var(--rosa-2);box-shadow:0 10px 22px rgba(74,35,69,.07)}
.regalo img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(74,35,69,.16))}
.regalo span{font-family:var(--titulo);font-weight:800;font-size:20px;line-height:1.1}
.deseos__talla{display:inline-block;margin:22px 0 0;padding:8px 18px;border-radius:999px;background:var(--menta-2);font-weight:800;font-size:15px}
.sobres{
  position:relative;
  overflow:hidden;
  max-width:440px;
  margin:34px auto 0;
  padding:30px 22px 26px;
  border-radius:32px;
  background:linear-gradient(180deg,var(--rosa-2) 0%,#FFFFFF 70%);
  border:2.5px solid var(--rosa);
  box-shadow:0 16px 34px rgba(74,35,69,.1);
}
.sobres__lluvia{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sobres__lluvia img{position:absolute;left:0;top:0;width:34px;height:auto;opacity:.9}
.sobres>*:not(.sobres__lluvia){position:relative}
.sobres__ico{width:74px;margin:0 auto}
.sobres__titulo{margin:10px 0 0;font-family:var(--titulo);font-weight:900;font-size:28px;line-height:1.1}
.sobres__texto{margin:8px auto 0;max-width:320px;font-size:15.5px;color:var(--tinta-suave)}
.sobres__qr{width:min(220px,62vw);margin:18px auto 0;border-radius:18px;background:#FFFFFF;padding:10px;box-shadow:0 10px 24px rgba(74,35,69,.14)}
.sobres__nota{display:inline-block;margin:16px 0 0;padding:8px 14px;border-radius:14px;background:var(--limon-2);font-size:13.5px;font-weight:700;line-height:1.35}

/* ------------------------------------------------------------------
   9 · ¿VIENES A MI FIESTA? · confirmar
   ------------------------------------------------------------------ */
.confirmar{background:var(--menta-2);--antes:var(--crema)}
.confirmar .rotulo{background:var(--rosa)}
.confirmar__texto{max-width:460px;margin:14px auto 0;font-size:16.5px;color:var(--tinta-suave)}
.confirmar__texto b{color:var(--tinta)}
.contadores{display:grid;gap:12px;max-width:380px;margin:26px auto 0}
.contador{display:grid;grid-template-columns:1fr 50px 58px 50px;align-items:center;gap:8px;padding:10px 12px 10px 20px;border-radius:999px;background:#FFFFFF;border:2px solid rgba(168,230,207,.95)}
.contador__t{text-align:left;font-family:var(--titulo);font-weight:800;font-size:21px}
.contador__btn{width:50px;height:50px;padding:0;border-radius:50%;border:2px solid var(--tinta);background:var(--crema);color:var(--tinta);cursor:pointer;display:grid;place-items:center;transition:background-color .3s ease,color .3s ease}
.contador__btn svg{width:22px;height:22px}
.contador__btn:hover,.contador__btn:focus-visible{background:var(--tinta);color:var(--crema)}
.contador__n{font-family:var(--titulo);font-weight:900;font-size:32px;line-height:1;text-align:center;display:block;transform-origin:50% 90%}
.boton--wa{margin-top:24px}

/* ------------------------------------------------------------------
   10 · LA CANCIÓN · el chupetín gira mientras suena
   ------------------------------------------------------------------ */
.cancion{background:var(--limon-2);--antes:var(--menta-2)}
.cancion .rotulo{background:var(--lila)}
.cancion__artista{margin:8px 0 0;font-size:13px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave)}
.cancion__escena{position:relative;width:min(230px,58vw);margin:26px auto 0}
.cancion__escena .disco{margin-top:0}
.pegatina--macaron{width:64px;left:-70px;top:18%;rotate:-12deg}
.pegatina--algodon{width:58px;right:-66px;top:4%;rotate:12deg}
.disco{position:relative;display:flex;flex-direction:column;align-items:center;width:min(230px,58vw);margin:26px auto 0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.disco:focus-visible{outline:3px dashed var(--chicle);outline-offset:6px;border-radius:24px}
.disco__halo{position:absolute;left:-12%;top:-12%;width:124%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(249,180,207,.6) 0%,rgba(249,180,207,0) 68%);opacity:0;transition:opacity .4s ease}
.cancion.tocando .disco__halo{opacity:1}
.disco__caramelo{position:relative;z-index:1;display:block;width:100%;aspect-ratio:1}
.disco__img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(74,35,69,.2))}
/* el palito del chupetín va en CSS: así el disco gira sobre su propio centro */
.disco__palito{display:block;width:16px;height:min(104px,26vw);margin-top:-14px;border-radius:0 0 9px 9px;background:linear-gradient(90deg,#E6DDD5 0%,#FFFFFF 45%,#DCD2CA 100%);box-shadow:0 10px 16px rgba(74,35,69,.12)}
.disco__boton{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:var(--tinta);color:var(--crema);display:grid;place-items:center;box-shadow:0 0 0 5px rgba(255,248,238,.9);transition:background-color .3s ease,color .3s ease}
.disco__boton svg{width:28px;height:28px}
.disco__pausa{display:none}
.cancion.tocando .disco__play{display:none}
.cancion.tocando .disco__pausa{display:block}
.disco:hover .disco__boton,.disco:focus-visible .disco__boton{background:var(--chicle);color:var(--tinta)}
.cancion__pista{margin:18px 0 0;font-size:15px;color:var(--tinta-suave)}
.cancion__pista a{color:var(--tinta);font-weight:800}
.yt-oculto{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px}

/* ------------------------------------------------------------------
   11 · CIERRE
   ------------------------------------------------------------------ */
.cierre{background:linear-gradient(180deg,var(--rosa-2) 0%,var(--lila-2) 100%);--antes:var(--limon-2);padding-bottom:clamp(64px,12vw,100px)}
.cierre__globos{position:absolute!important;inset:0;z-index:1!important;pointer-events:none}
.cierre__globos img{position:absolute;width:74px;height:auto}
.cierre__globos img:nth-child(1){left:6%;top:18%}
.cierre__globos img:nth-child(2){right:8%;top:10%;width:62px}
.cierre__globos img:nth-child(3){right:14%;bottom:18%;width:58px}
.cierre__globi{width:min(180px,44vw);height:auto;margin:0 auto}
.cierre__titulo{max-width:14ch;margin:14px auto 0;font-family:var(--titulo);font-weight:900;font-variation-settings:'wdth' 112;font-size:clamp(38px,10.4vw,64px);line-height:1.02;color:var(--tinta);text-shadow:0 4px 0 var(--rosa)}
.cierre__firma{margin:10px 0 22px;font-family:var(--mano);font-size:30px;color:var(--tinta)}

/* ------------------------------------------------------------------
   PIE (común)
   ------------------------------------------------------------------ */
.creditos{
  background:var(--crema-2);
  padding:clamp(40px,8vw,58px) max(24px,var(--der)) calc(var(--abajo) + clamp(40px,8vw,56px)) max(24px,var(--izq));
  text-align:center;
}
.creditos__pregunta{max-width:26ch;margin:0 auto 18px;font-family:var(--titulo);font-weight:800;font-size:clamp(21px,5.4vw,25px);line-height:1.2;color:var(--tinta)}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:13px 26px;
  border-radius:999px;
  background:var(--tinta);
  color:var(--crema);
  text-decoration:none;
  font-size:14.5px;
  font-weight:800;
  letter-spacing:.03em;
  box-shadow:none;
  transition:background-color .3s ease,color .3s ease;
}
.creditos__wa svg{width:20px;height:20px}
.creditos__wa:hover,.creditos__wa:focus-visible{background:var(--chicle);color:var(--tinta);box-shadow:none}
.creditos__correo{position:relative;display:table;margin:14px auto 0;padding:12px 2px;font-size:14.5px;font-weight:700;line-height:20px;color:var(--tinta);text-decoration:none}
.creditos__correo::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .45s ease}
.creditos__correo:hover::after,.creditos__correo:focus-visible::after{transform:scaleX(1)}
.creditos__extras{display:none}
.creditos__marca{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:3px}
.creditos__logo{font-family:var(--titulo);font-weight:800;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta)}
.creditos__lema{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--tinta-suave)}

/* ------------------------------------------------------------------
   CELULAR MUY ANGOSTO (360 px)
   ------------------------------------------------------------------ */
@media (max-width:374px){
  .contador{grid-template-columns:1fr 46px 50px 46px;padding-left:16px}
  .contador__btn{width:46px;height:46px}
  .menu__item{grid-template-columns:64px 1fr}
  .menu__ico{width:62px;height:62px}
  .lugar{gap:12px;padding-left:12px}
  .lugar__pin{width:58px}
}

/* ------------------------------------------------------------------
   PORTADA EN PANTALLAS APAISADAS (escritorio): título a la izquierda
   ------------------------------------------------------------------ */
@media (min-width:768px) and (orientation:landscape){
  .portada__cabecera{top:calc(var(--arriba) + 11vh);left:max(4.5vw,var(--izq));right:auto;width:min(46vw,620px);padding:0;text-align:left}
  .portada__nombre{font-size:clamp(120px,13.5vw,196px)}
  .portada__edad{font-size:clamp(40px,4.4vw,60px)}
  .portada__fecha--cabecera{display:inline-block;margin-top:22px;font-size:17px}
  .portada__fecha--pie{display:none}
  .portada__tap{padding-bottom:calc(var(--abajo) + 30px)}
  .viaje__texto{top:9%;font-size:clamp(30px,3.2vw,44px)}
  /* la placa final va solo abajo: un absoluto con fondo nunca lleva top y bottom juntos (lección §13) */
  .viaje__texto--final{top:auto;bottom:7%;font-size:clamp(40px,4.4vw,62px)}
}

/* ------------------------------------------------------------------
   ESCRITORIO (secciones)
   ------------------------------------------------------------------ */
@media (min-width:768px){
  .sec{padding-left:max(44px,var(--izq));padding-right:max(44px,var(--der))}
  .dani{padding-top:130px}
  .dani__dentro{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:center;justify-items:start;gap:64px}
  .dani__figura{width:380px}
  .glaseado--grande{width:340px}
  .dani__texto{text-align:left}
  .dani__carta{margin-left:0}
  .cuenta{grid-template-columns:repeat(4,minmax(0,1fr));max-width:640px;gap:10px}
  .menu__lista{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px;gap:20px 26px}
  .familia{width:560px;aspect-ratio:560 / 430}
  .familia__globo{width:30%}
  .familia__globo--mama{left:12%}
  .familia__globo--papa{right:12%}
  .familia__dani{top:60%}
  .mesa{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:40px 30px;max-width:1060px;margin:30px auto 0;padding:0 0 10px;overflow:visible}
  .polaroid{grid-column:span 2;max-width:none}
  .polaroid:nth-child(5){grid-column:2 / span 2}
  .puntos{display:none}
  /* hover: se apagan las otras y se agranda la FOTO de adentro; la caja nunca se mueve */
  .mesa:has(.polaroid:hover) .polaroid{opacity:.5}
  .mesa:has(.polaroid:hover) .polaroid:hover{opacity:1}
  .polaroid:hover .polaroid__foto img{transform:scale(1.07)}
  .polaroid:hover figcaption{color:var(--chicle)}
  .velas__escena{width:380px}
  .velas__globi{width:40%;left:-44%;bottom:8%}
  .pegatina--macaron{width:92px;left:-120px}
  .pegatina--algodon{width:84px;right:-112px}
  .deseos__globi{width:150px}
  .regalos{grid-template-columns:repeat(4,minmax(0,1fr));max-width:820px}
  .cierre__globos img:nth-child(1){left:14%;top:22%;width:96px}
  .cierre__globos img:nth-child(2){right:16%;top:14%;width:80px}
  .cierre__globos img:nth-child(3){right:22%;bottom:22%;width:74px}
}
@media (min-width:1100px){
  .dani__dentro{gap:90px}
}

/* ------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .portada__pista::before,.pista__mano,.llama i,.musica-flotante--tocando .musica-flotante__ondas i{animation:none}
  .polaroid__foto img,.creditos__correo::after{transition:none}
}

/* ------------------------------------------------------------------
   PANTALLAS GRANDES (revisión 2026-09-28): el llamado a tocar nace
   llamativo también con mouse (el hover lo invierte) y se ve desde lejos
   ------------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
  .portada__pista{background:var(--tinta);color:var(--crema);border-color:var(--rosa)}
  .portada__tap:hover .portada__pista,
  .portada__tap:focus-visible .portada__pista{background:var(--rosa);color:var(--tinta);border-color:#fff}
}
@media (min-width:1100px){
  .portada__pista{min-height:60px;padding:16px 34px 16px 26px;font-size:16px;gap:12px}
  .pista__mano{width:26px;height:26px}
}