/* ==================================================================
   La princesa Emma · primer añito · cuento de hadas 3D pastel
   Paleta única: rosa, lila, lavanda, blanco perla y dorado muy suave;
   tinta ciruela. Forma propia: el espejo ovalado (camafeo).
   Tipografías: Fraunces (cuento, suave), Ballet (firma) y Plus Jakarta Sans (etiquetas).
   Firma: cada sección es una página que gira (CSS 3D) con capitular dorada.
   Lenguaje de animación: polvo de hadas que revela los textos, páginas que giran,
   mariposas que se posan sobre los títulos y destellos.
   ================================================================== */

:root{
  --perla:#FFF9FB;
  --perla-2:#FBF1F6;
  --papel:#FFFDFD;
  --rosa-claro:#FDE8F1;
  --rosa:#F7CADB;
  --rosa-2:#EFAAC6;
  --lila-claro:#F2EAFB;
  --lila:#DDCDF3;
  --lavanda:#BDA9E5;
  --lavanda-tinta:#6B55A5;
  --oro-claro:#F7EACB;
  --oro:#E4CB8F;
  --oro-2:#D3B169;
  --oro-osc:#A9853C;
  --ciruela:#4A2448;
  --ciruela-2:#693B66;
  --ciruela-suave:#7C5A79;
  --linea:rgba(211,177,105,.42);
  --cuento:'Fraunces','Georgia',serif;
  --firma:'Ballet','Fraunces',cursive;
  --ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --seg-ar:env(safe-area-inset-top,0px);
  --seg-ab:env(safe-area-inset-bottom,0px);
  --seg-iz:env(safe-area-inset-left,0px);
  --seg-de: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(--perla);
  color:var(--ciruela);
  font-family:var(--cuento);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.cerrado{overflow:hidden;height:100%}
img{max-width:100%;display:block}
button{font:inherit}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
:focus-visible{outline:2.5px solid var(--lavanda-tinta);outline-offset:3px}

/* ------------------------------------------------------------------
   PORTADA
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:#EBD4EA}
body.abierto .portada{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
/* el mundo (fondo + conejita) se escala junto para que la conejita no "resbale" sobre el sendero */
.portada__mundo{position:absolute;inset:0;transform-origin:50% 62%}
.portada__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* escenario en píxeles del arte, dibujado a su tamaño final (ancho, alto y márgenes los pone hadas.js) */
.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}
.conejita{position:absolute;left:0;top:0;width:190px}
.conejita__img{position:relative;width:100%;height:auto;transform-origin:50% 100%}
/* misma sombra que se pintó en la imagen de inicio del video (princesa2.py, SOMBRA) */
.conejita__sombra{
  position:absolute;
  left:11%;
  width:78%;
  top:92.5%;
  height:10%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(74,36,72,.34) 0%,rgba(74,36,72,.22) 55%,rgba(74,36,72,0) 100%);
  transform-origin:50% 50%;
}
.luciernagas{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.luciernaga{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,#FFFBEA 0%,rgba(255,226,160,.9) 36%,rgba(255,226,160,0) 72%);
  box-shadow:0 0 10px 2px rgba(255,222,150,.45);
}
.revoloteo{position:absolute;left:0;top:0;width:46px;pointer-events:none}
.revoloteo img{width:100%;height:auto;transform-origin:50% 50%}

.portada__cabecera{
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--seg-ar) + clamp(14px,3.4vh,40px));
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 16px;
  pointer-events:none;
}
/* halo perla detrás del título para que se lea sobre las torres del castillo */
.portada__cabecera::before{
  content:'';
  position:absolute;
  left:50%;
  top:-18%;
  width:min(620px,130vw);
  height:136%;
  margin-left:calc(min(620px,130vw) / -2);
  background:radial-gradient(closest-side,rgba(255,249,251,.84) 0%,rgba(255,249,251,.64) 42%,rgba(255,249,251,0) 100%);
  z-index:-1;
}
.portada__sobre{
  font:600 12px/1 var(--ui);
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--ciruela-2);
  margin:0 0 0 .44em;
}
.portada__nombre{
  font-family:var(--firma);
  font-weight:400;
  font-size:clamp(92px,28vw,148px);
  line-height:1.02;
  color:var(--ciruela);
  padding:0 .12em;
  margin:.2em 0 -.06em;
  text-shadow:0 2px 0 rgba(255,255,255,.95),0 0 22px rgba(255,255,255,.95),0 10px 30px rgba(74,36,72,.22);
}
.portada__edad{
  display:flex;
  align-items:center;
  gap:6px;
  font:italic 500 clamp(21px,5.8vw,27px)/1 var(--cuento);
  color:var(--ciruela);
  text-shadow:0 0 12px rgba(255,255,255,.95);
}
.portada__uno{height:1.95em;width:auto;filter:drop-shadow(0 4px 8px rgba(74,36,72,.22))}
.portada__fecha{
  margin-top:12px;
  padding:9px 18px 10px;
  border-radius:999px;
  background:rgba(255,250,252,.93);
  border:1px solid rgba(211,177,105,.7);
  color:var(--ciruela);
  font:600 clamp(13px,3.6vw,15px)/1.2 var(--ui);
  letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(74,36,72,.12);
}

/* --- el toque: toda la portada es el botón; la píldora va junto a la conejita (hadas.js la coloca) --- */
.portada__tap{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.portada__pista{
  position:absolute;
  left:50%;
  top:auto;
  bottom:calc(var(--seg-ab) + 22px);
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 22px 0 16px;
  border-radius:999px;
  background:rgba(74,36,72,.88);
  border:1.5px solid rgba(255,255,255,.85);
  color:#fff;
  font:700 12.5px/1 var(--ui);
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  visibility:hidden;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.portada__pista.lista{visibility:visible}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.9);
  animation:onda 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes onda{0%{transform:scale(1);opacity:.95}70%,100%{transform:scale(1.28);opacity:0}}
.pista__mano{width:22px;height:22px;flex:0 0 auto;animation:toque 1.8s 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(--rosa);color:var(--ciruela);border-color:#fff;box-shadow:0 0 0 6px rgba(247,202,219,.4)}
.portada__tap:focus-visible{outline:none}
/* en pantallas táctiles no hay hover: la píldora nace en su estado llamativo */
@media (hover:none){
  .portada__pista{background:var(--rosa);color:var(--ciruela);border-color:#fff;box-shadow:0 0 0 6px rgba(247,202,219,.45),0 10px 24px rgba(74,36,72,.22)}
  .portada__pista::before{border-color:rgba(255,255,255,.95)}
}

.velo{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 45%,#FFFFFF 0%,#FFF7FB 38%,#F7E1EC 72%,#EAD6F0 100%);
}

/* --- EL RECORRIDO: video a pantalla completa, textos en placas y la foto en el espejo --- */
.viaje{position:absolute;inset:0;z-index:6;opacity:0;visibility:hidden;pointer-events:none}
.viaje__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
.viaje__texto{
  position:absolute;
  left:5%;
  right:5%;
  top:calc(var(--seg-ar) + 7%);
  bottom:auto;
  max-width:620px;
  margin:0 auto;
  padding:13px 22px 15px;
  border-radius:24px;
  background:rgba(74,36,72,.64);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  box-shadow:0 12px 30px rgba(74,36,72,.22),inset 0 0 0 1.5px rgba(247,234,203,.5);
  color:#fff;
  text-align:center;
  font:italic 500 clamp(22px,6.1vw,33px)/1.28 var(--cuento);
  text-shadow:0 2px 10px rgba(74,36,72,.45);
  opacity:0;
  visibility:hidden;
  z-index:3;
}
.viaje__texto--final{
  top:auto;
  bottom:calc(var(--seg-ab) + 86px);
  font-size:clamp(20px,5.4vw,28px);
  padding:12px 24px 16px;
  background:rgba(74,36,72,.7);
}
.viaje__texto--final small{
  display:block;
  font:700 11.5px/1 var(--ui);
  font-style:normal;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--oro-claro);
  padding-left:.38em;
  text-shadow:none;
}
.viaje__texto--final span{
  display:block;
  font-family:var(--firma);
  font-style:normal;
  font-size:2.5em;
  line-height:1.25;
  padding-top:.12em;
  color:#fff;
}
/* la foto de Emma dentro del cristal del espejo: hadas.js la coloca cuadro a cuadro (ESPEJO) */
.viaje__espejo{
  position:absolute;
  left:0;
  top:0;
  width:10px;
  height:10px;
  border-radius:50%;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  z-index:2;
  -webkit-mask-image:radial-gradient(closest-side,#000 82%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(closest-side,#000 82%,rgba(0,0,0,0) 100%);
}
.viaje__espejo img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.viaje__brillo{
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.42) 46%,rgba(255,255,255,0) 60%) -120% 0/60% 100% no-repeat,
    radial-gradient(closest-side,rgba(255,255,255,0) 58%,rgba(221,205,243,.62) 100%);
  animation:reflejo 3.4s ease-in-out infinite;
}
@keyframes reflejo{0%,30%{background-position:-120% 0,0 0}75%,100%{background-position:240% 0,0 0}}
.viaje.sin-video .viaje__espejo{box-shadow:0 0 0 6px #fff,0 0 0 9px var(--oro),0 0 60px 20px rgba(255,255,255,.8)}

/* polvo de hadas: capa fija para las chispas */
.polvo-capa{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.chispa{
  position:absolute;
  left:0;
  top:0;
  width:9px;
  height:9px;
  margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:radial-gradient(circle,#FFFFFF 0%,#FFF1C4 34%,rgba(255,229,160,0) 70%);
}
.chispa--rosa{background:radial-gradient(circle,#FFFFFF 0%,#FFD6E6 36%,rgba(247,176,205,0) 70%)}
.chispa--lila{background:radial-gradient(circle,#FFFFFF 0%,#E6DAFA 36%,rgba(200,180,240,0) 70%)}
.chispa--estrella{
  width:12px;
  height:12px;
  margin:-6px 0 0 -6px;
  border-radius:0;
  background:linear-gradient(135deg,#FFFFFF 0%,#FBE7B2 50%,#E4CB8F 100%);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}

/* --- música flotante: la carita de la conejita con barras que bailan --- */
.musica-flotante{
  position:fixed;
  right:calc(var(--seg-de) + 14px);
  bottom:calc(var(--seg-ab) + 14px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:52px;
  padding:5px 15px 5px 5px;
  border:1.5px solid rgba(211,177,105,.8);
  border-radius:999px;
  background:rgba(255,250,252,.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--ciruela);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  box-shadow:0 8px 22px rgba(74,36,72,.16);
  transition:opacity .4s ease,visibility 0s linear .4s,transform .4s ease,background-color .35s ease,border-color .35s ease;
}
/* en la portada (sin viaje) va arriba a la derecha para no pisar la píldora de toque */
body.cerrado:not(.viajando) .musica-flotante{top:calc(var(--seg-ar) + 12px);bottom:auto}
html.musica .musica-flotante{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,visibility 0s,transform .4s ease,background-color .35s ease,border-color .35s ease}
.musica-flotante img{width:40px;height:40px;border-radius:50%;background:var(--rosa-claro);object-fit:cover}
.musica-flotante:hover,.musica-flotante:focus-visible{background:var(--rosa);border-color:#fff}
.musica-flotante__ondas{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.musica-flotante__ondas i{display:block;width:3px;height:6px;border-radius:2px;background:currentColor}
.musica-flotante--tocando .musica-flotante__ondas i{animation:onda-sonido .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 onda-sonido{0%,100%{height:6px}50%{height:18px}}
.musica-flotante:not(.musica-flotante--tocando){color:var(--ciruela-suave)}
.musica-flotante:not(.musica-flotante--tocando) img{filter:saturate(.5) brightness(.95)}

/* --- volver --- */
.volver-fijo{
  position:fixed;
  top:calc(var(--seg-ar) + 12px);
  left:calc(var(--seg-iz) + 12px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 18px 0 12px;
  border:1.5px solid rgba(211,177,105,.75);
  border-radius:999px;
  background:rgba(255,250,252,.93);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--ciruela);
  font:700 12px/1 var(--ui);
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(74,36,72,.12);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,opacity .4s ease;
}
.volver-fijo svg{width:16px;height:16px}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--ciruela);color:#fff;border-color:var(--ciruela)}
body.cerrado .volver-fijo{opacity:0;visibility:hidden;pointer-events:none}

/* ------------------------------------------------------------------
   EL CUENTO
   ------------------------------------------------------------------ */
.cuento{position:relative;z-index:1;opacity:0;transition:opacity .7s ease}
body.abierto .cuento{opacity:1}

.cap{
  position:relative;
  overflow:hidden;
  padding:clamp(64px,13vw,104px) 14px clamp(44px,9vw,84px);
  background:
    radial-gradient(60% 40% at 12% 8%,rgba(221,205,243,.55) 0%,rgba(221,205,243,0) 70%),
    radial-gradient(55% 38% at 92% 92%,rgba(247,202,219,.6) 0%,rgba(247,202,219,0) 70%),
    var(--perla);
}
.cap:nth-of-type(even){
  background:
    radial-gradient(60% 40% at 88% 6%,rgba(247,202,219,.55) 0%,rgba(247,202,219,0) 70%),
    radial-gradient(55% 40% at 8% 94%,rgba(221,205,243,.6) 0%,rgba(221,205,243,0) 70%),
    var(--perla-2);
}
.cap:first-of-type{padding-top:calc(var(--seg-ar) + 76px)}
/* estrellitas del papel pintado */
.cap::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(211,177,105,.55) 0 1.2px,transparent 2px),
    radial-gradient(circle at 70% 60%,rgba(189,169,229,.6) 0 1.2px,transparent 2px),
    radial-gradient(circle at 40% 85%,rgba(239,170,198,.6) 0 1px,transparent 1.8px);
  background-size:160px 160px,210px 210px,130px 130px;
}

/* --- el libro: la página (hoja) y la hoja que gira (pasa) --- */
.libro{
  position:relative;
  max-width:680px;
  margin:0 auto;
  perspective:2000px;
  perspective-origin:50% min(38%,40vh);
}
.libro--ancho{max-width:1060px}
.hoja{
  position:relative;
  padding:clamp(40px,9vw,66px) clamp(20px,6vw,58px) clamp(58px,10vw,76px);
  border-radius:6px 22px 22px 6px;
  background:
    radial-gradient(120% 55% at 50% 0%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 62%),
    linear-gradient(90deg,rgba(74,36,72,.075) 0,rgba(74,36,72,0) 26px),
    var(--papel);
  box-shadow:
    0 0 0 1px rgba(211,177,105,.4),
    3px 3px 0 #F7ECF2,
    3px 3px 0 1px rgba(211,177,105,.22),
    6px 6px 0 #F2E4EC,
    6px 6px 0 1px rgba(211,177,105,.16),
    0 24px 50px rgba(74,36,72,.13);
}
/* filete dorado interior */
.hoja::before{
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid rgba(211,177,105,.5);
  border-radius:3px 15px 15px 3px;
  pointer-events:none;
}
.hoja__cabeza{text-align:center;margin-bottom:22px}
.hoja__cabeza::after{
  content:'';
  display:block;
  width:188px;
  height:18px;
  margin:12px auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 188 18'%3E%3Cpath d='M4 9h62M122 9h62' stroke='%23D3B169' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='72' cy='9' r='2' fill='%23D3B169'/%3E%3Ccircle cx='116' cy='9' r='2' fill='%23D3B169'/%3E%3Cpath d='M94 15.5c-6-4-10.5-6.8-10.5-10.6 0-2.4 1.9-4 4.1-4 2.2 0 3.6 1.1 4.2 2.6h.4c.6-1.5 2-2.6 4.2-2.6 2.2 0 4.1 1.6 4.1 4 0 3.8-4.5 6.6-10.5 10.6z' fill='%23EFAAC6' stroke='%23C79A55' stroke-width='.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hoja__cap{
  margin:0 0 10px;
  font:700 11.5px/1 var(--ui);
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--lavanda-tinta);
  padding-left:.36em;
}
.titulo{
  margin:0;
  font-family:var(--cuento);
  font-weight:600;
  font-variation-settings:'SOFT' 100,'opsz' 96;
  font-size:clamp(31px,8.6vw,46px);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--ciruela);
  text-wrap:balance;
}
.titulo__t{position:relative;display:inline-block}
/* la mariposa que se posa en la esquina del título */
.posada{
  position:absolute;
  right:-.62em;
  top:-.72em;
  width:clamp(34px,9vw,44px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:2;
}
.posada img{width:100%;height:auto;transform-origin:50% 50%;filter:drop-shadow(0 4px 6px rgba(74,36,72,.18))}
.hoja__folio{
  position:absolute;
  left:0;
  right:0;
  bottom:22px;
  margin:0;
  text-align:center;
  font:italic 500 15px/1 var(--cuento);
  color:var(--oro-osc);
}
.hoja__folio::before,.hoja__folio::after{content:'—';margin:0 10px;color:var(--oro)}

.parrafo{
  display:flow-root;   /* contiene la capitular flotante (si sobresaliera, la máscara del polvo la recortaría) */
  margin:0 0 18px;
  font:400 clamp(16.5px,4.35vw,18.5px)/1.72 var(--cuento);
  font-variation-settings:'SOFT' 50;
  color:var(--ciruela);
  text-wrap:pretty;
}
.parrafo b{font-weight:650}
.parrafo--centro{text-align:center}
/* capitular dorada (letra iluminada del cuento) */
.capitular{
  float:left;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.72em;
  height:1.72em;
  margin:.24em .42em 0 0;
  font-weight:700;
  font-size:2.25em;
  line-height:1;
  font-variation-settings:'SOFT' 100,'opsz' 144;
  color:#F4E2AE;
  text-shadow:0 1px 0 #A9853C,0 0 14px rgba(244,226,174,.5);
  border-radius:8px;
  background:radial-gradient(circle at 30% 24%,#7C4879 0%,#5A2D57 45%,#4A2448 100%);
  box-shadow:inset 0 0 0 2px #E4CB8F,inset 0 0 0 4px #4A2448,inset 0 0 0 5px rgba(228,203,143,.55),0 6px 14px rgba(74,36,72,.22);
  overflow:hidden;
}
.capitular::after{
  content:'';
  position:absolute;
  top:-60%;
  left:-90%;
  width:55%;
  height:220%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:rotate(22deg);
  animation:destello 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes destello{0%,62%{left:-90%}82%,100%{left:150%}}
.parrafo--centro .capitular{float:none;display:inline-flex;vertical-align:-.3em;width:1.5em;height:1.5em;font-size:1.8em;margin:0 .14em 0 0}

/* la hoja que gira: se ve primero la portadilla del capítulo; al llegar, la página gira
   sobre el lomo y se deshace en polvo de hadas (hadas.js: pasarPagina). Solo con html.hadas */
.pasa{display:none}
html.hadas .pasa{
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:min(100%,100vh);
  z-index:6;
  transform-origin:0 50%;
  transform-style:preserve-3d;
  cursor:pointer;
}
.pasa__cara{
  position:absolute;
  inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  border-radius:6px 22px 22px 6px;
  overflow:hidden;
}
.pasa__cara--frente{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:clamp(56px,16vh,150px) 26px 40px;
  text-align:center;
  background:
    radial-gradient(80% 50% at 50% 36%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 72%),
    linear-gradient(90deg,rgba(74,36,72,.09) 0,rgba(74,36,72,0) 30px),
    linear-gradient(180deg,var(--rosa-claro) 0%,var(--lila-claro) 100%);
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.35),inset 0 0 0 11px rgba(211,177,105,.75),inset 0 0 0 15px rgba(255,255,255,.35),inset 0 0 0 16px rgba(211,177,105,.45),0 18px 40px rgba(74,36,72,.16);
}
/* la cara de atrás va de espaldas con rotateY(180deg), nunca con una reflexión (LECCIONES §8) */
.pasa__cara--dorso{
  transform:rotateY(180deg);
  background:linear-gradient(270deg,rgba(74,36,72,.12) 0,rgba(74,36,72,0) 40%),#F5E9F0;
}
.pasa__num{font:700 12px/1 var(--ui);letter-spacing:.42em;text-transform:uppercase;color:var(--lavanda-tinta);padding-left:.42em}
.pasa__img{width:min(40%,190px);height:auto;max-height:30vh;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(74,36,72,.18))}
.pasa__img--ancha{width:min(58%,270px)}
.pasa__titulo{
  font:600 clamp(30px,8.6vw,44px)/1.1 var(--cuento);
  font-variation-settings:'SOFT' 100,'opsz' 96;
  color:var(--ciruela);
  max-width:11em;
  text-wrap:balance;
}
.pasa__titulo::after{content:'';display:block;width:64px;height:2px;margin:16px auto 0;background:linear-gradient(90deg,rgba(211,177,105,0),var(--oro-2),rgba(211,177,105,0))}

/* polvo de hadas que revela los textos: máscara que avanza (hadas.js anima --m1/--m2) */
html.hadas .polvo-caja:not(.polvo--visto){opacity:0}
html.hadas .polvo:not(.polvo--visto){
  -webkit-mask-image:linear-gradient(100deg,#000 var(--m1,-45%),rgba(0,0,0,0) var(--m2,0%));
  mask-image:linear-gradient(100deg,#000 var(--m1,-45%),rgba(0,0,0,0) var(--m2,0%));
}

/* ----------------------------- I · LA PRINCESA ----------------------------- */
.princesa{display:flex;flex-direction:column;align-items:center}
.espejo{position:relative;width:min(290px,74%);aspect-ratio:900/1299;margin:0 auto 6px}
.espejo__foto{position:absolute;left:15.3%;top:18.4%;width:69.4%;height:65.6%;object-fit:cover;object-position:50% 32%;border-radius:50%}
.espejo__brillo{
  position:absolute;
  left:15.3%;
  top:18.4%;
  width:69.4%;
  height:65.6%;
  border-radius:50%;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.45) 47%,rgba(255,255,255,0) 62%) -140% 0/70% 100% no-repeat;
  animation:reflejo-espejo 7s ease-in-out infinite;
}
@keyframes reflejo-espejo{0%,55%{background-position:-140% 0}85%,100%{background-position:260% 0}}
.espejo__marco{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 14px 22px rgba(74,36,72,.2))}
.princesa__texto{width:100%}
.princesa__nombre{
  margin:0;
  font-family:var(--firma);
  font-size:clamp(76px,22vw,112px);
  line-height:1.05;
  text-align:center;
  color:var(--ciruela);
}
.princesa__edad{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:-6px 0 24px;
  font:italic 500 clamp(21px,5.6vw,25px)/1 var(--cuento);
  color:var(--ciruela-2);
}
.princesa__edad img{height:58px;width:auto;filter:drop-shadow(0 6px 10px rgba(74,36,72,.18))}
.ficha{
  list-style:none;
  margin:22px 0 0;
  padding:8px 16px;
  border-radius:18px;
  background:linear-gradient(160deg,var(--lila-claro) 0%,#FFFFFF 100%);
  border:1px solid rgba(189,169,229,.55);
}
.ficha li{display:flex;align-items:center;gap:14px;padding:10px 0;font:500 15.5px/1.4 var(--ui);color:var(--ciruela)}
.ficha li+li{border-top:1px dashed rgba(107,85,165,.25)}
.ficha img{width:44px;height:44px;object-fit:contain;flex:none}
.ficha b{display:block;font:700 11px/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--lavanda-tinta)}
.firma{margin:26px 0 0;text-align:center;font:italic 400 17px/1.3 var(--cuento);color:var(--ciruela-2)}
.firma span{display:block;margin-top:4px;font-family:var(--firma);font-style:normal;font-size:clamp(40px,11vw,52px);line-height:1.25;color:var(--ciruela)}

/* ----------------------------- II · EL GRAN DÍA ----------------------------- */
.vineta{
  position:relative;
  width:100%;
  max-width:460px;
  aspect-ratio:4/5;
  margin:6px auto 0;
  border-radius:999px 999px 28px 28px;
  overflow:hidden;
  background:#EAD5EC center/cover no-repeat;
  box-shadow:0 0 0 4px #fff,0 0 0 6px var(--oro),0 0 0 7px rgba(169,133,60,.35),0 20px 44px rgba(74,36,72,.2);
}
/* el póster se pide recién al abrir la invitación (no compite con la portada) */
body.abierto .vineta{background-image:url('assets/castillo-luciernagas-poster.jpg')}
.vineta__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vineta::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(74,36,72,0) 26%,rgba(74,36,72,.42) 48%,rgba(74,36,72,.72) 70%,rgba(74,36,72,.86) 100%);
  pointer-events:none;
}
.fecha{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 16px 28px;
  text-align:center;
  color:#fff;
}
.fecha__dia{font:700 13.5px/1 var(--ui);letter-spacing:.42em;text-transform:uppercase;color:#FFF3D6;padding-left:.42em;text-shadow:0 1px 2px rgba(74,36,72,.9),0 0 14px rgba(74,36,72,.75)}
.fecha__num{
  font-family:var(--cuento);
  font-weight:700;
  font-variation-settings:'SOFT' 100,'opsz' 144;
  font-size:clamp(104px,32vw,156px);
  line-height:.95;
  color:#fff;
  text-shadow:0 5px 0 rgba(74,36,72,.4),0 0 34px rgba(255,236,200,.6);
}
.fecha__mes{font:italic 500 clamp(21px,5.8vw,27px)/1.25 var(--cuento);color:#fff;text-shadow:0 2px 10px rgba(74,36,72,.6)}
.fecha__hora{
  margin-top:14px;
  padding:9px 20px 10px;
  border-radius:999px;
  background:var(--oro-claro);
  color:var(--ciruela);
  font:700 14.5px/1 var(--ui);
  letter-spacing:.04em;
  box-shadow:0 0 0 3px rgba(255,255,255,.45);
}
.cuenta__rotulo{margin:32px 0 14px;text-align:center;font:700 12px/1 var(--ui);letter-spacing:.38em;text-transform:uppercase;color:var(--lavanda-tinta);padding-left:.38em}
.cuenta{display:flex;justify-content:center;gap:clamp(8px,2.8vw,18px)}
.cuenta[hidden],.cuenta__hoy[hidden]{display:none}
.cuenta__dato{display:flex;flex-direction:column;align-items:center}
.numpag{position:relative;width:clamp(66px,18.5vw,90px);height:clamp(72px,20vw,98px);perspective:520px}
.numpag__base,.numpag__hoja{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px 14px 14px 6px;
  background:
    linear-gradient(90deg,rgba(74,36,72,.08) 0,rgba(74,36,72,0) 12px),
    linear-gradient(180deg,#FFFFFF 0%,var(--rosa-claro) 100%);
  box-shadow:0 0 0 1px rgba(211,177,105,.6),2px 2px 0 #F2E4EC,2px 2px 0 1px rgba(211,177,105,.25),0 10px 20px rgba(74,36,72,.1);
  font-family:var(--cuento);
  font-weight:700;
  font-variation-settings:'SOFT' 100,'opsz' 72;
  font-size:clamp(30px,8.6vw,42px);
  line-height:1;
  color:var(--ciruela);
  font-variant-numeric:tabular-nums lining-nums;
}
.numpag__hoja{
  transform-origin:0 50%;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  visibility:hidden;
}
.cuenta__t{margin-top:10px;font:700 11px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--ciruela-2);padding-left:.24em}
.cuenta__hoy{margin:12px 0 0;text-align:center;font:600 28px/1.2 var(--cuento);color:var(--ciruela)}

/* ----------------------------- III · LA TARDE EN EL REINO ----------------------------- */
.programa{list-style:none;margin:6px 0 0;padding:0;position:relative}
.programa::before{
  content:'';
  position:absolute;
  left:calc(5.7em + 12px);
  top:14px;
  bottom:14px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--oro) 0%,var(--rosa-2) 50%,var(--lavanda) 100%);
  opacity:.8;
}
.programa li{
  position:relative;
  display:grid;
  grid-template-columns:5.7em 1fr;
  column-gap:30px;
  align-items:start;
  padding:13px 0;
}
.programa li::before{
  content:'';
  position:absolute;
  left:calc(5.7em + 3px);
  top:19px;
  width:20px;
  height:20px;
  background:linear-gradient(135deg,#FFFFFF 0%,#F7E6B8 45%,var(--oro-2) 100%);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 4px rgba(228,203,143,.9));
}
.programa__hora{font:700 23px/1 var(--cuento);font-variation-settings:'SOFT' 100;color:var(--ciruela);text-align:right;padding-top:3px}
.programa__hora small{display:block;margin-top:5px;font:700 10.5px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--lavanda-tinta)}
.programa__que{font:500 15px/1.45 var(--ui);color:var(--ciruela-2)}
.programa__que b{display:block;margin-bottom:2px;font:600 19.5px/1.25 var(--cuento);color:var(--ciruela)}

/* ----------------------------- IV · EL CASTILLO ----------------------------- */
.lugar{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  max-width:460px;
  margin:4px auto 0;
  padding:22px 20px 24px;
  border-radius:26px;
  text-align:center;
  text-decoration:none;
  color:var(--ciruela);
  background-color:#FFF6FA;
  border:1.5px solid rgba(211,177,105,.65);
  box-shadow:0 14px 30px rgba(74,36,72,.1);
  transition:background-color .35s ease,border-color .35s ease;
}
.lugar:hover,.lugar:focus-visible{background-color:var(--lila-claro);border-color:var(--lavanda)}
.lugar__img{position:relative;width:min(170px,50%);margin-bottom:8px}
.lugar__img::before{
  content:'';
  position:absolute;
  left:-20%;
  right:-20%;
  top:10%;
  bottom:-6%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,190,.9),rgba(255,236,190,0));
  opacity:.35;
  transition:opacity .45s ease;
}
.lugar:hover .lugar__img::before,.lugar:focus-visible .lugar__img::before{opacity:1}
.lugar__img img{position:relative;width:100%;height:auto;filter:drop-shadow(0 10px 16px rgba(74,36,72,.18))}
.lugar__cuerpo{display:flex;flex-direction:column;align-items:center;gap:4px}
.lugar__nombre{font:600 clamp(21px,5.6vw,25px)/1.2 var(--cuento);font-variation-settings:'SOFT' 100}
.lugar__dir{font:500 15px/1.45 var(--ui);color:var(--ciruela-2)}
.lugar__hora{margin-top:2px;font:700 15px/1.45 var(--ui);color:var(--ciruela)}
.lugar__ir{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  margin-top:12px;
  padding:0 24px 0 18px;
  border-radius:999px;
  background:var(--ciruela);
  color:#fff;
  font:700 13px/1 var(--ui);
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease;
}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:var(--rosa);color:var(--ciruela)}
@media (hover:none){
  .lugar__ir{background:var(--rosa);color:var(--ciruela);box-shadow:0 0 0 5px rgba(247,202,219,.45)}
  .lugar__img::before{opacity:.8}
}

/* ----------------------------- V · LOS REYES DEL CUENTO ----------------------------- */
.reyes{position:relative;width:100%;max-width:430px;aspect-ratio:360/470;margin:6px auto 0}
.reyes__mascara{fill:none;stroke:#fff;stroke-width:20;stroke-linecap:round}
.reyes__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.reyes__perlas{fill:none;stroke:var(--oro-2);stroke-width:5.5;stroke-linecap:round;stroke-dasharray:.1 9.5}
.reyes__hilo{fill:none;stroke:rgba(211,177,105,.55);stroke-width:1.3}
.rey{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center}
.rey--emma{left:34%;top:0;width:32%}
.rey--mama{left:0;top:42%;width:36%}
.rey--papa{left:64%;top:42%;width:36%}
.rey__camafeo{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--oro),0 0 0 7px rgba(169,133,60,.35),0 12px 24px rgba(74,36,72,.2);
}
.rey__camafeo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.rey__corona{width:76%;height:auto;aspect-ratio:1/1;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 10px 14px rgba(74,36,72,.18))}
.rey__rol{margin-top:10px;font:700 11px/1.3 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--lavanda-tinta);padding-left:.22em}
.rey__nombre{font-family:var(--firma);font-size:clamp(32px,8.6vw,42px);line-height:1.35;color:var(--ciruela)}
.reyes__lema{position:absolute;left:0;right:0;top:auto;bottom:4px;margin:0;text-align:center;font:italic 500 17px/1.3 var(--cuento);color:var(--ciruela-2)}

/* ----------------------------- VI · UN AÑO DE MAGIA ----------------------------- */
.galeria{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:16px 16% 22px;
  margin:0 calc(clamp(20px,6vw,58px) * -1 + 12px);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.galeria::-webkit-scrollbar{display:none}
.camafeo{
  flex:0 0 68%;
  max-width:300px;
  margin:0;
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:opacity .4s ease;
}
.camafeo__marco{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3/4;
  border-radius:50%;
  overflow:hidden;
  background:var(--rosa-claro);
  box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--oro),0 0 0 7px rgba(169,133,60,.35),0 16px 30px rgba(74,36,72,.16);
}
.camafeo__marco img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.camafeo__marco::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.4) 47%,rgba(255,255,255,0) 62%) -140% 0/70% 100% no-repeat;
  transition:background-position .9s ease;
  pointer-events:none;
}
.camafeo figcaption{
  margin-top:16px;
  padding:7px 16px;
  border-radius:999px;
  background:var(--lila-claro);
  border:1px solid rgba(189,169,229,.6);
  font:700 11.5px/1.2 var(--ui);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ciruela);
  text-align:center;
  transition:background-color .35s ease,color .35s ease;
}
.puntos{display:flex;justify-content:center;gap:0;margin-top:6px}
.punto{width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.punto::before{content:'';width:9px;height:9px;border-radius:50%;border:1.5px solid var(--lavanda-tinta);transition:background-color .3s ease,transform .3s ease}
.punto--activo::before{background:var(--lavanda-tinta)}

/* ----------------------------- VII · LOS DESEOS ----------------------------- */
.deseos{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:12px}
.deseo{
  display:grid;
  grid-template-columns:60px 1fr 36px;
  align-items:center;
  gap:14px;
  padding:10px 14px 10px 10px;
  border-radius:20px;
  background:#FFFFFF;
  border:1px solid rgba(211,177,105,.45);
  box-shadow:0 8px 18px rgba(74,36,72,.06);
}
.deseo__ico{width:60px;height:60px;object-fit:contain}
.deseo__txt{font:500 14.5px/1.35 var(--ui);color:var(--ciruela-2)}
.deseo__txt b{display:block;font:600 19.5px/1.2 var(--cuento);font-variation-settings:'SOFT' 100;color:var(--ciruela)}
.deseo__estrella{position:relative;display:block;width:34px;height:34px}
.deseo__estrella svg{width:100%;height:100%;fill:var(--oro);stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 6px rgba(228,203,143,.85))}
.sobres{
  position:relative;
  overflow:hidden;
  max-width:460px;
  margin:28px auto 0;
  padding:26px 20px 26px;
  border-radius:26px;
  text-align:center;
  background:linear-gradient(170deg,var(--lila-claro) 0%,#FFFFFF 55%,var(--rosa-claro) 100%);
  border:1.5px solid rgba(189,169,229,.65);
}
.sobres__lluvia{position:absolute;inset:0;z-index:0;pointer-events:none}
.sobre-cae{position:absolute;left:0;top:-60px;width:34px;opacity:.55}
.sobres__ico,.sobres__titulo,.sobres__texto,.sobres__qr,.sobres__nota{position:relative;z-index:1}
.sobres__ico{width:92px;height:auto;margin:0 auto 8px;filter:drop-shadow(0 8px 12px rgba(74,36,72,.15))}
.sobres__titulo{margin:0 0 6px;font:600 25px/1.2 var(--cuento);font-variation-settings:'SOFT' 100;color:var(--ciruela)}
.sobres__texto{margin:0 auto 16px;max-width:320px;font:500 15px/1.5 var(--ui);color:var(--ciruela-2)}
.sobres__qr{width:min(210px,60vw);height:auto;margin:0 auto;border-radius:14px;box-shadow:0 0 0 7px #fff,0 0 0 8.5px var(--oro),0 14px 26px rgba(74,36,72,.16)}
.sobres__nota{margin:18px auto 0;max-width:300px;font:700 13px/1.45 var(--ui);color:var(--ciruela)}

/* ----------------------------- VIII · CONFIRMAR ----------------------------- */
.contadores{display:flex;justify-content:center;flex-wrap:wrap;gap:16px clamp(18px,6vw,40px);margin:8px 0 26px}
.contador{display:flex;flex-direction:column;align-items:center;gap:10px}
.contador__t{font:700 12px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--lavanda-tinta);padding-left:.26em}
.contador__fila{display:flex;align-items:center;gap:10px;padding:5px;border-radius:999px;background:#FFFFFF;border:1.5px solid rgba(211,177,105,.6)}
.contador__btn{
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:var(--lila-claro);
  color:var(--ciruela);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .3s ease,color .3s ease;
}
.contador__btn svg{width:20px;height:20px}
.contador__btn:hover,.contador__btn:focus-visible{background:var(--ciruela);color:#fff}
.contador__btn:disabled{opacity:.38;cursor:default;background:var(--lila-claro);color:var(--ciruela)}
.contador__n{min-width:1.7em;text-align:center;font:700 27px/1 var(--cuento);font-variation-settings:'SOFT' 100;color:var(--ciruela);font-variant-numeric:tabular-nums}
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  font:700 14px/1.2 var(--ui);
  letter-spacing:.05em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.boton svg{width:20px;height:20px;flex:none}
.boton--wa{display:flex;width:max-content;max-width:100%;margin:0 auto;background:var(--ciruela);color:#fff}
.boton--wa:hover,.boton--wa:focus-visible{background:var(--rosa);color:var(--ciruela)}
.boton--claro{background:#FFFFFF;color:var(--ciruela);border:1.5px solid var(--oro)}
.boton--claro:hover,.boton--claro:focus-visible{background:var(--ciruela);color:#fff;border-color:var(--ciruela)}

/* ----------------------------- IX · LA CANCIÓN ----------------------------- */
.cajita{
  position:relative;
  display:block;
  width:min(210px,56vw);
  margin:8px auto 4px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.cajita__halo{
  position:absolute;
  left:-25%;
  right:-25%;
  top:5%;
  bottom:-10%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(247,202,219,.85) 0%,rgba(221,205,243,.45) 50%,rgba(221,205,243,0) 100%);
  opacity:.45;
  transition:opacity .45s ease;
}
.cajita:hover .cajita__halo,.cajita:focus-visible .cajita__halo,.cap--cancion.tocando .cajita__halo{opacity:1}
.cajita__img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 14px 20px rgba(74,36,72,.2))}
.cajita__notas{position:absolute;inset:0;z-index:2;pointer-events:none}
.cajita__notas i{
  position:absolute;
  bottom:62%;
  width:20px;
  height:24px;
  opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M8 3v13.2a4 4 0 1 0 2 3.5V8.5l7-2.2V2.6z' fill='%23C79A55'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cajita__notas i:nth-child(1){left:18%}
.cajita__notas i:nth-child(2){left:40%}
.cajita__notas i:nth-child(3){left:62%}
.cajita__notas i:nth-child(4){left:80%}
.cap--cancion.tocando .cajita__notas i{animation:nota 3s ease-out infinite}
.cap--cancion.tocando .cajita__notas i:nth-child(2){animation-delay:.75s}
.cap--cancion.tocando .cajita__notas i:nth-child(3){animation-delay:1.5s}
.cap--cancion.tocando .cajita__notas i:nth-child(4){animation-delay:2.25s}
@keyframes nota{0%{opacity:0;transform:translate(0,10px) scale(.6) rotate(-10deg)}20%{opacity:1}100%{opacity:0;transform:translate(14px,-90px) scale(1.1) rotate(14deg)}}
.cancion__titulo{margin:18px 0 4px;text-align:center;font:italic 600 clamp(22px,6vw,27px)/1.25 var(--cuento);color:var(--ciruela)}
.cancion__autor{margin:0;text-align:center;font:500 14.5px/1.45 var(--ui);color:var(--ciruela-2)}
.cancion__pista{margin:14px 0 0;text-align:center;font:700 13px/1.4 var(--ui);color:var(--lavanda-tinta)}
.cancion__pista a{color:inherit}
.yt-oculto{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px}

/* ----------------------------- FIN ----------------------------- */
.fin{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:clamp(72px,14vw,120px) 20px clamp(64px,11vw,96px);
  background:
    radial-gradient(ellipse 85% 55% at 50% 100%,rgba(247,202,219,.95) 0%,rgba(247,202,219,0) 72%),
    radial-gradient(ellipse 60% 40% at 50% 0%,rgba(221,205,243,.8) 0%,rgba(221,205,243,0) 72%),
    var(--perla);
}
.fin__polvo{position:absolute;inset:0;pointer-events:none}
.fin__cuento{margin:0 auto 6px;max-width:14em;font-family:var(--firma);font-size:clamp(40px,11vw,64px);line-height:1.3;color:var(--ciruela);text-wrap:balance}
.fin__conejita{width:min(190px,48vw);height:auto;margin:8px auto 12px;transform-origin:50% 100%;filter:drop-shadow(0 16px 22px rgba(74,36,72,.2))}
.fin__texto{margin:0 auto;max-width:22em;font:italic 400 clamp(17px,4.6vw,20px)/1.5 var(--cuento);color:var(--ciruela-2)}
.fin__nombre{margin:0;font-family:var(--firma);font-size:clamp(70px,20vw,110px);line-height:1.2;color:var(--ciruela)}
.fin__fin{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 30px}
.fin__fin::before,.fin__fin::after{content:'';width:54px;height:1.5px;background:linear-gradient(90deg,rgba(211,177,105,0),var(--oro-2))}
.fin__fin::after{transform:scaleX(-1)}
.fin__fin span{font:700 13px/1 var(--ui);letter-spacing:.5em;text-transform:uppercase;color:var(--oro-osc);padding-left:.5em}

/* ----------------------------- PIE ----------------------------- */
.creditos{
  background:var(--perla-2);
  border-top:1px solid var(--linea);
  padding:clamp(40px,8vw,58px) 24px calc(clamp(38px,7vw,52px) + var(--seg-ab) + 56px);
  text-align:center;
}
.creditos__pregunta{margin:0 0 18px;font:600 clamp(20px,5.2vw,24px)/1.3 var(--cuento);font-variation-settings:'SOFT' 100;color:var(--ciruela)}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 26px;
  border-radius:999px;
  background:var(--ciruela);
  color:#fff;
  text-decoration:none;
  font:700 14px/1 var(--ui);
  letter-spacing:.04em;
  box-shadow:none;
  transition:background-color .35s ease,color .35s ease;
}
.creditos__wa svg{width:19px;height:19px}
.creditos__wa:hover,.creditos__wa:focus-visible{background:var(--rosa);color:var(--ciruela);box-shadow:none}
.creditos__correo{
  display:table;
  margin:20px auto 0;
  padding-bottom:3px;
  font:600 14.5px/1.3 var(--ui);
  color:var(--ciruela-2);
  text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;
  transition:background-size .35s ease;
}
.creditos__correo:hover,.creditos__correo:focus-visible{background-size:100% 1.5px}
.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:600 17px/1.2 var(--cuento);letter-spacing:.06em;color:var(--ciruela)}
.creditos__lema{font:500 11px/1.4 var(--ui);letter-spacing:.14em;color:var(--ciruela-2)}

/* ------------------------------------------------------------------
   ESCRITORIO
   ------------------------------------------------------------------ */
@media (min-width:768px){
  .escena{width:1344px;height:752px;margin:-376px 0 0 -672px}
  .portada__cabecera{top:clamp(14px,3vh,34px)}
  .portada__nombre{font-size:clamp(96px,11vw,140px)}
  .portada__pista{bottom:auto}
  .viaje__texto{top:8%;max-width:700px;font-size:clamp(26px,2.6vw,34px)}
  .viaje__texto--final{top:auto;bottom:7%;font-size:clamp(22px,2.1vw,28px)}
  .cap{padding-left:28px;padding-right:28px}
  .cap:first-of-type{padding-top:96px}
  .libro{max-width:760px}
  .libro--ancho{max-width:1060px}
  .princesa{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:44px;align-items:center}
  .espejo{width:100%;margin:0}
  .princesa__nombre,.princesa__edad{text-align:left;justify-content:flex-start}
  .firma{text-align:left}
  .vineta{max-width:620px;aspect-ratio:16/11;border-radius:320px 320px 28px 28px}
  .programa{max-width:560px;margin-left:auto;margin-right:auto}
  .deseos{grid-template-columns:1fr 1fr;gap:14px}
  .galeria{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:34px 26px;
    overflow:visible;
    padding:8px 0 10px;
    margin:0 auto;
    max-width:900px;
  }
  .camafeo{flex:none;max-width:none;grid-column:span 2}
  /* 7 fotos: 4 arriba y 3 centradas abajo */
  .camafeo:nth-child(5){grid-column:2 / span 2}
  .puntos{display:none}
  /* hover: se apagan las otras y se agranda la FOTO, nunca la caja */
  .galeria:has(.camafeo:hover) .camafeo{opacity:.5}
  .galeria:has(.camafeo:hover) .camafeo:hover{opacity:1}
  .camafeo:hover .camafeo__marco img{transform:scale(1.06)}
  .camafeo:hover .camafeo__marco::after{background-position:260% 0}
  .camafeo:hover figcaption{background:var(--ciruela);color:#fff}
  .reyes{max-width:470px}
}
@media (min-width:1100px){
  .libro{max-width:800px}
}

/* ------------------------------------------------------------------
   LIBRO ABIERTO (≥1100 px): a la izquierda la página ilustrada; la hoja
   gira sobre el lomo central, cae sobre ella y se deshace en polvo de hadas
   ------------------------------------------------------------------ */
.hoja-izq{display:none}
@media (min-width:1100px){
  .libro{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;max-width:1180px}
  .libro--ancho{display:block;max-width:1060px}
  .hoja-izq{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:18px;
    position:relative;
    padding:clamp(90px,15vh,150px) 56px 64px;
    text-align:center;
    border-radius:22px 6px 6px 22px;
    background:
      radial-gradient(85% 55% at 50% 46%,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 72%),
      linear-gradient(270deg,rgba(74,36,72,.11) 0,rgba(74,36,72,0) 34px),
      linear-gradient(180deg,var(--lila-claro) 0%,var(--rosa-claro) 100%);
    box-shadow:
      0 0 0 1px rgba(211,177,105,.4),
      -3px 3px 0 #F2E7F5,
      -3px 3px 0 1px rgba(211,177,105,.22),
      -6px 6px 0 #ECDFF0,
      -6px 6px 0 1px rgba(211,177,105,.16),
      0 24px 50px rgba(74,36,72,.13);
  }
  .hoja-izq::before{content:'';position:absolute;inset:10px;border:1px solid rgba(211,177,105,.5);border-radius:15px 3px 3px 15px;pointer-events:none}
  .hoja-izq__num{
    font-family:var(--cuento);
    font-weight:700;
    font-variation-settings:'SOFT' 100,'opsz' 144;
    font-size:104px;
    line-height:1;
    padding:0 .08em;
    background:linear-gradient(180deg,#F5E3AE 0%,#D8B66C 52%,#A9853C 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hoja-izq__img{width:min(60%,290px);height:auto;max-height:330px;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(74,36,72,.18))}
  .hoja-izq__frase{font-family:var(--firma);font-size:40px;line-height:1.35;color:var(--ciruela);max-width:11em}
  .hoja{border-radius:6px 22px 22px 6px}
  html.hadas .pasa{left:50%;width:50%}
  html.hadas .libro--ancho .pasa{left:0;width:100%}
  /* en el pliego la página derecha es más angosta: su contenido va a una columna */
  .princesa{display:flex;flex-direction:column;align-items:center}
  /* en el pliego el espejo con Emma pasa a la página izquierda */
  .princesa .espejo{display:none}
  .espejo--izq{width:min(330px,80%);margin:0}
  .princesa__nombre,.princesa__edad{text-align:center;justify-content:center}
  .firma{text-align:center}
  .vineta{max-width:440px;aspect-ratio:4/5;border-radius:999px 999px 28px 28px}
  .deseos{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .portada__pista::before,.pista__mano,.capitular::after,.espejo__brillo,.viaje__brillo,.musica-flotante__ondas i,.cap--cancion.tocando .cajita__notas i{animation:none!important}
  .cuento,.portada{transition-duration:.01ms}
}

/* ------------------------------------------------------------------
   PANTALLAS GRANDES (revisión 2026-09-28): el nombre y el llamado a tocar
   se ven desde lejos
   ------------------------------------------------------------------ */
@media (min-width:1100px){
  .portada__nombre{font-size:clamp(96px,11.5vw,184px)}
  .portada__pista{min-height:58px;padding:0 30px 0 22px;font-size:14.5px;gap:12px}
  .pista__mano{width:26px;height:26px}
}