/* ==================================================================
   El primer añito de Mateo · el reino en el cielo
   Paleta única: azul rey, amarillo corona, blanco nube y celeste; tinta azul marino.
   Tipografías: Fraunces (títulos y números), Outfit (texto), IM Fell English (decreto y firmas).
   Lenguaje de animación: cortinas de nubes que se apartan, coronas que caen y rebotan,
   estrellas que titilan en la cuenta, estandartes que se despliegan, el pergamino que se desenrolla.
   ================================================================== */

:root{
  --rey:#1D45B8;
  --rey-osc:#14307F;
  --rey-hondo:#0E2466;
  --marino:#0D1B45;
  --marino-suave:#3A4A78;
  --corona:#FFC83D;
  --corona-osc:#E3A012;
  --oro:#FFD66B;
  --oro-claro:#FFF1C4;
  --nube:#FFFFFF;
  --nube-2:#F5F9FF;
  --celeste:#BFE3FF;
  --celeste-2:#E6F3FF;
  --celeste-osc:#8DC4F2;
  --linea:rgba(29,69,184,.16);
  --titulo:'Fraunces',Georgia,'Times New Roman',serif;
  --texto:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pluma:'IM Fell English',Georgia,'Times New Roman',serif;
  --sa-arriba:env(safe-area-inset-top,0px);
  --sa-abajo:env(safe-area-inset-bottom,0px);
  --sa-izq:env(safe-area-inset-left,0px);
  --sa-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(--nube);
  color:var(--marino);
  font-family:var(--texto);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
body.cerrado{overflow:hidden;height:100%}
img{max-width:100%;display:block}
b,strong{font-weight:600}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--corona);outline-offset:3px}

/* ------------------------------------------------------------------
   PORTADA
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:#8FC2F4}
body.abierto .portada{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s ease,visibility 0s linear .5s;
}
/* escenario dibujado a su tamaño final (ancho/alto y coordenadas en px desde reino.js) */
.escena{
  position:absolute;
  left:50%;
  top:50%;
  width:756px;
  height:1344px;
  margin:-672px 0 0 -378px;
  transform-origin:50% 60%;
  z-index:1;
  visibility:hidden;
}
.escena.lista{visibility:visible}
.escena__fondo{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
/* cajas por left/top (esquina superior izquierda); GSAP mueve la imagen de adentro */
.deco{position:absolute;left:var(--x);top:var(--y);width:var(--w);pointer-events:none}
.deco img{width:100%;height:auto}
.deco--globo img{filter:drop-shadow(0 10px 14px rgba(20,48,127,.22))}
.chispas{position:absolute;inset:0;pointer-events:none}
.chispa{
  position:absolute;
  width:var(--t,14px);
  height:var(--t,14px);
  margin:calc(var(--t,14px) / -2) 0 0 calc(var(--t,14px) / -2);
  background:radial-gradient(circle,#FFFFFF 0%,#FFF1C4 35%,#FFC83D 70%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}

.portada__cabecera{
  position:absolute;
  top:calc(var(--sa-arriba) + clamp(16px,3.6vh,44px));
  left:0;
  right:0;
  z-index:4;
  text-align:center;
  padding:0 16px;
  pointer-events:none;
}
.portada__titulo{margin:0;font-weight:inherit;display:flex;flex-direction:column;align-items:center}
.portada__anito{display:inline-flex;align-items:flex-end;justify-content:center;gap:clamp(2px,.6vh,6px)}
.portada__uno{height:clamp(84px,13vh,136px);width:auto;filter:drop-shadow(0 8px 14px rgba(20,48,127,.3))}
.portada__anito-txt{height:clamp(36px,5.6vh,58px);width:auto;margin-bottom:clamp(10px,1.7vh,18px);filter:drop-shadow(0 5px 10px rgba(20,48,127,.25))}
.portada__nombre{
  display:block;
  margin-top:clamp(-6px,-.6vh,-2px);
  font-family:var(--titulo);
  font-weight:900;
  font-size:clamp(54px,10.2vh,104px);
  line-height:.95;
  letter-spacing:-.01em;
  color:#FFFFFF;
  /* borde azul rey de 3 px (sombras en 8 direcciones) + sombra de caída: legible sobre el cielo */
  text-shadow:
    3px 0 0 var(--rey),-3px 0 0 var(--rey),0 3px 0 var(--rey),0 -3px 0 var(--rey),
    2px 2px 0 var(--rey),-2px 2px 0 var(--rey),2px -2px 0 var(--rey),-2px -2px 0 var(--rey),
    0 7px 0 var(--rey-osc),0 14px 26px rgba(14,36,102,.45);
}

/* --- toque --- */
.portada__tap{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:0 16px calc(var(--sa-abajo) + clamp(22px,5vh,54px));
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.portada__tap:focus-visible{outline:none}
.portada__fecha{
  display:inline-block;
  margin-bottom:12px;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--marino);
  font-weight:600;
  font-size:clamp(14px,3.8vw,16px);
  letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(20,48,127,.18);
  max-width:92vw;
}
.portada__pista{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:13px 26px 13px 20px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.9);
  background:var(--rey);
  color:#FFFFFF;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-5px;
  border-radius:999px;
  border:2px solid rgba(255,200,61,.95);
  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(--corona);color:var(--marino)}
/* en pantallas táctiles el botón nace en su estado llamativo */
@media (hover:none){
  .portada__pista{background:var(--corona);color:var(--marino)}
}

.velo{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 45%,#FFFFFF 0%,#F3F9FF 38%,#D7ECFF 70%,#AFD6FA 100%);
}

/* --- el viaje: video a pantalla completa; placas legibles y la foto encima --- */
.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:#8FC2F4}
.viaje__placa{
  position:absolute;
  left:6%;
  right:6%;
  top:calc(var(--sa-arriba) + 9%);
  max-width:560px;
  margin:0 auto;
  padding:14px 22px 16px;
  border-radius:24px;
  background:rgba(14,36,102,.64);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 26px rgba(14,36,102,.24),inset 0 0 0 1.5px rgba(255,255,255,.5);
  color:#FFFFFF;
  text-align:center;
  font-family:var(--titulo);
  font-weight:800;
  font-size:clamp(25px,6.8vw,40px);
  line-height:1.15;
  text-shadow:0 2px 10px rgba(14,36,102,.45);
  opacity:0;
  visibility:hidden;
  z-index:4;
}
.viaje__placa--final{top:auto;bottom:calc(var(--sa-abajo) + 6%);font-size:clamp(24px,6.4vw,38px)}
.viaje__placa--final span{display:block;font-family:var(--pluma);font-style:italic;font-weight:400;color:var(--oro);font-size:.82em;margin-bottom:2px}
.viaje__foto{
  position:absolute;
  left:var(--fx,0);
  top:var(--fy,0);
  width:var(--fd,200px);
  height:var(--fd,200px);
  border-radius:50%;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  z-index:3;
  box-shadow:0 0 0 3px rgba(255,214,107,.95),0 0 44px 10px rgba(255,241,196,.6);
}
.viaje__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* sin video (respaldo): la foto al centro de la pantalla */
.viaje--sin-video .viaje__foto{left:50%;top:44%;width:min(62vw,300px);height:min(62vw,300px);margin:calc(min(62vw,300px) / -2) 0 0 calc(min(62vw,300px) / -2)}
.viaje__destellos{position:absolute;inset:0;pointer-events:none;z-index:4}

/* --- volver --- */
.volver-fijo{
  position:fixed;
  top:calc(var(--sa-arriba) + 12px);
  left:calc(var(--sa-izq) + 12px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:10px 18px 10px 12px;
  border-radius:999px;
  border:2px solid var(--corona);
  background:rgba(255,255,255,.94);
  color:var(--rey-osc);
  font-family:var(--texto);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(14,36,102,.18);
  transition:background-color .35s ease,color .35s ease,opacity .4s ease;
}
.volver-fijo svg{width:16px;height:16px}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--rey);color:#FFFFFF}
body:not(.abierto) .volver-fijo{opacity:0;visibility:hidden;pointer-events:none}

/* --- música flotante: la carita del león con barras que bailan --- */
.musica-flotante{
  position:fixed;
  right:calc(var(--sa-der) + 14px);
  bottom:calc(var(--sa-abajo) + 14px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:52px;
  padding:5px 16px 5px 5px;
  border-radius:999px;
  border:2px solid var(--corona);
  background:rgba(20,48,127,.9);
  color:var(--corona);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .4s ease,visibility 0s linear .4s,transform .4s ease,background-color .35s ease;
}
html.musica .musica-flotante{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,visibility 0s,transform .4s ease,background-color .35s ease}
.musica-flotante img{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#FFF1C4 0%,#FFC83D 100%);object-fit:contain;padding:2px}
.musica-flotante:hover,.musica-flotante:focus-visible{background:var(--rey)}
.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: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 sonido{0%,100%{height:6px}50%{height:18px}}
.musica-flotante:not(.musica-flotante--tocando){color:rgba(255,214,107,.6)}
.musica-flotante:not(.musica-flotante--tocando) img{filter:grayscale(.5) brightness(.9)}

/* ------------------------------------------------------------------
   INVITACIÓN
   ------------------------------------------------------------------ */
.reino{position:relative;z-index:1;opacity:0;transition:opacity .6s ease}
body.abierto .reino{opacity:1}
.seccion{position:relative;overflow:hidden;padding:clamp(86px,17vw,136px) 20px clamp(74px,13vw,116px)}
.cabeza{position:relative;z-index:4;text-align:center;max-width:680px;margin:0 auto 30px}
.cabeza__corona{display:block;width:60px;height:auto;margin:0 auto 12px;filter:drop-shadow(0 6px 10px rgba(20,48,127,.25))}
.rotulo{
  margin:0 0 10px;
  font-family:var(--texto);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--rey);
}
.rotulo--claro{color:var(--oro)}
.rotulo--chico{margin-top:6px}
.titulo{
  margin:0;
  font-family:var(--titulo);
  font-weight:800;
  font-size:clamp(34px,9vw,56px);
  line-height:1.04;
  letter-spacing:-.005em;
  color:var(--marino);
}
.titulo--claro{color:#FFFFFF}
.texto{margin:0 0 14px;font-size:16.5px;line-height:1.7;color:var(--marino-suave)}
.texto b{color:var(--marino)}

/* --- cortinas de nubes: cerradas tapan el encabezado y se apartan al entrar --- */
.cortina{position:absolute;left:0;right:0;top:0;height:clamp(170px,36vw,300px);pointer-events:none;z-index:5}
.cortina__nube{position:absolute;top:-62px;width:clamp(230px,58%,640px);height:auto;filter:drop-shadow(0 12px 18px rgba(20,48,127,.14))}
.cortina__nube--izq{left:-22%}
.cortina__nube--der{right:-22%}

/* --- figuras que flotan (la caja quieta, la imagen de adentro se mueve) --- */
.flota img{width:100%;height:auto}

/* ============================ EL PRINCIPITO ============================ */
.principito{background:linear-gradient(180deg,#D5EBFF 0%,#EBF6FF 34%,#FFFFFF 100%);padding-top:clamp(120px,24vw,170px)}
.principito__dentro{position:relative;z-index:2;max-width:1040px;margin:0 auto;display:grid;gap:34px;justify-items:center;text-align:center}
.principito__figura{position:relative;width:min(76vw,330px)}
.medallon{position:relative;width:100%;aspect-ratio:626/802}
/* la foto va debajo del marco: el aro dorado tapa su borde (abertura medida en principe2.py) */
.medallon__foto{position:absolute;left:17.3%;top:33.05%;width:65%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 40%}
.medallon__marco{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 16px 24px rgba(20,48,127,.26))}
.principito__leon{position:absolute;right:-18%;bottom:-8%;width:44%}
.principito__texto{max-width:560px}
.principito__nombre{margin:0;font-family:var(--titulo);font-weight:900;font-size:clamp(64px,18vw,112px);line-height:.92;color:var(--rey)}
.principito__edad{display:inline-flex;align-items:center;gap:12px;margin:14px 0 20px}
.principito__edad b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:68px;
  height:68px;
  border-radius:50%;
  background:var(--rey);
  border:3px solid var(--corona);
  color:var(--corona);
  font-family:var(--titulo);
  font-weight:900;
  font-size:40px;
  line-height:1;
  box-shadow:0 8px 18px rgba(20,48,127,.25);
}
.principito__edad span{text-align:left;font-weight:600;font-size:14px;line-height:1.25;letter-spacing:.16em;text-transform:uppercase;color:var(--marino)}
.firma{margin:12px 0 0;font-family:var(--pluma);font-style:italic;font-size:19px;color:var(--marino-suave)}
.firma span{display:block;font-size:27px;line-height:1.2;color:var(--rey)}

/* ============================ DECRETO REAL ============================ */
.decreto{
  background:
    radial-gradient(circle,rgba(255,214,107,.16) 1.5px,transparent 2px) 0 0/34px 34px,
    radial-gradient(ellipse 85% 60% at 50% 38%,#2C5CD8 0%,var(--rey) 46%,var(--rey-osc) 100%);
  color:#FFFFFF;
}
.pergamino{position:relative;z-index:2;width:min(94vw,520px);margin:0 auto}
.pergamino__rollo{position:relative;z-index:2;display:block;width:100%;height:auto;filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))}
.pergamino__rollo--arriba{margin-bottom:-4%}
.pergamino__rollo--abajo{margin-top:-4%}
.pergamino__papel{
  position:relative;
  z-index:1;
  width:78.75%;
  margin-left:10.67%;
  padding:clamp(38px,9vw,50px) clamp(18px,5.4vw,30px) clamp(64px,15vw,84px);
  background:url(assets/pergamino-papel.webp) 50% 50%/100% 100% no-repeat;
  color:#1A2452;
}
.pergamino__texto{position:relative}
.pergamino__texto p,.pergamino__lista{margin:0 0 12px;font-family:var(--pluma);font-style:italic;font-size:clamp(17.5px,4.7vw,20px);line-height:1.5}
.pergamino__texto b{font-weight:400;color:var(--rey-osc);text-decoration:underline;text-decoration-color:rgba(227,160,18,.7);text-underline-offset:3px}
.pergamino__encabezado{text-align:center;font-size:clamp(28px,7.6vw,36px)!important;line-height:1.1!important;color:var(--rey-osc);margin-bottom:14px!important}
.pergamino__lista{padding:0;list-style:none;counter-reset:ley}
.pergamino__lista li{position:relative;padding-left:30px;margin-bottom:8px;counter-increment:ley}
.pergamino__lista li::before{content:counter(ley,upper-roman) '.';position:absolute;left:0;top:0;color:var(--corona-osc);font-style:normal;font-family:var(--titulo);font-weight:700;font-size:.9em}
.pergamino__fecha{font-size:clamp(15.5px,4.1vw,17.5px)!important;color:#3A4A78}
.pergamino__firma{margin:4px 0 0!important;font-size:clamp(28px,7.4vw,36px)!important;color:var(--rey-osc);padding-left:4%}
.pergamino__sello{position:absolute;right:5%;bottom:2.5%;width:27%;z-index:3}
.pergamino__sello img{width:100%;height:auto;transform:rotate(-9deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}
.decreto__leon{display:none}

/* ============================ EL GRAN DÍA ============================ */
.gran-dia{background:var(--rey-hondo);color:#FFFFFF;text-align:center;padding-top:clamp(80px,15vw,120px)}
.gran-dia__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gran-dia__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,36,102,.55) 0%,rgba(14,36,102,0) 34%),radial-gradient(ellipse 90% 70% at 50% 46%,rgba(14,36,102,.38) 0%,rgba(14,36,102,.72) 100%)}
.gran-dia .rotulo,.fecha__dia{text-shadow:0 1px 2px rgba(14,36,102,.9),0 2px 14px rgba(14,36,102,.95)}
.fecha__mes{text-shadow:0 2px 12px rgba(14,36,102,.8)}
.gran-dia__contenido{position:relative;z-index:2}
.titilan{position:absolute;inset:0;pointer-events:none;z-index:1}
.titila{position:absolute;width:var(--t,22px);height:auto}
.fecha{display:flex;flex-direction:column;align-items:center;margin:0 auto 22px}
.fecha__dia{font-size:15px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--oro);padding-left:.34em}
.fecha__num{
  font-family:var(--titulo);
  font-weight:900;
  font-size:clamp(118px,35vw,196px);
  line-height:.9;
  color:#FFFFFF;
  text-shadow:0 6px 0 var(--rey),0 0 42px rgba(255,214,107,.45);
}
.fecha__mes{font-family:var(--titulo);font-weight:700;font-size:clamp(26px,7vw,36px);line-height:1.2;color:#FFFFFF}
.fecha__hora{margin-top:14px;padding:9px 20px;border-radius:999px;background:var(--corona);color:var(--marino);font-weight:700;font-size:16px}
.cuenta{display:flex;justify-content:center;gap:clamp(8px,2.8vw,18px);margin:4px auto 0}
.cuenta__dato{
  position:relative;
  width:clamp(72px,20.5vw,106px);
  aspect-ratio:1;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.24) 0%,rgba(255,255,255,.07) 62%);
  border:2px solid rgba(255,214,107,.8);
  box-shadow:inset 0 0 20px rgba(255,214,107,.18),0 10px 22px rgba(0,0,0,.2);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.cuenta__n{font-family:var(--titulo);font-weight:800;font-size:clamp(28px,8vw,42px);line-height:1;color:#FFFFFF;font-variant-numeric:tabular-nums}
.cuenta__t{margin-top:5px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.cuenta__estrella{position:absolute;right:-8%;top:-8%;width:34%;height:auto;pointer-events:none}
.gran-dia__hoy{font-family:var(--titulo);font-weight:800;font-size:clamp(26px,7vw,36px);color:var(--corona)}

/* ============================ EL PROGRAMA ============================ */
.programa{background:linear-gradient(180deg,#FFFFFF 0%,#EEF6FF 100%)}
.estandartes{position:relative;z-index:2;max-width:1040px;margin:0 auto}
.estandartes__vara{display:none}
.estandartes__lista{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px;max-width:430px}
.estandarte{position:relative;padding-top:10px}
.estandarte:last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 7px)}
/* varita dorada de cada estandarte */
.estandarte::before{
  content:'';
  position:absolute;
  left:-7%;
  right:-7%;
  top:0;
  height:11px;
  border-radius:6px;
  background:linear-gradient(180deg,#FFF0B8 0%,#F2BE3A 55%,#B98616 100%);
  box-shadow:0 3px 6px rgba(120,80,10,.25);
  z-index:2;
}
.estandarte__tela{
  position:relative;
  padding:3px 3px 0;
  background:linear-gradient(180deg,#FFE08A 0%,var(--corona-osc) 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);
  transform-origin:50% 0;
}
.estandarte__dentro{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:16px 10px 44px;
  background:linear-gradient(180deg,var(--rey) 0%,var(--rey-osc) 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 3px),50% calc(88% - 2px),0 calc(100% - 3px));
  text-align:center;
  color:#FFFFFF;
  min-height:100%;
}
.estandarte__dentro img{width:66px;height:66px;object-fit:contain;margin-bottom:4px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.estandarte__dentro b{font-family:var(--titulo);font-weight:700;font-size:17px;line-height:1.15;color:var(--corona)}
.estandarte__dentro span{font-size:15px;font-weight:500;line-height:1.3;color:#FFFFFF}

/* ============================ EL CASTILLO · lugar ============================ */
.castillo{background:linear-gradient(180deg,#EEF6FF 0%,#D6EBFF 100%)}
.lugar{
  position:relative;
  z-index:2;
  display:block;
  max-width:470px;
  margin:96px auto 0;
  padding:150px 22px 28px;
  border-radius:30px;
  border:2px solid rgba(29,69,184,.14);
  background:#FFFFFF;
  color:var(--marino);
  text-align:center;
  text-decoration:none;
  box-shadow:0 18px 40px rgba(20,48,127,.14);
  transition:background-color .35s ease,border-color .35s ease;
}
.lugar__castillo{position:absolute;left:50%;top:-104px;width:176px;margin-left:-88px}
.lugar__castillo img{width:100%;height:auto;transition:transform .6s ease;filter:drop-shadow(0 14px 18px rgba(20,48,127,.22))}
.lugar__cuerpo{display:flex;flex-direction:column;align-items:center}
.lugar__nombre{font-family:var(--titulo);font-weight:800;font-size:clamp(26px,7.2vw,34px);line-height:1.1;color:var(--rey-osc)}
.lugar__dir{margin-top:8px;font-size:16px;color:var(--marino-suave)}
.lugar__hora{margin-top:10px;font-size:16px;color:var(--marino)}
.lugar__hora b{color:var(--rey)}
.lugar__ir{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  margin-top:20px;
  padding:13px 26px 13px 20px;
  border-radius:999px;
  background:var(--rey);
  color:#FFFFFF;
  font-weight:600;
  font-size:15px;
  letter-spacing:.06em;
  transition:background-color .35s ease,color .35s ease;
}
.lugar:hover,.lugar:focus-visible{background:var(--nube-2);border-color:var(--corona)}
.lugar:hover .lugar__castillo img,.lugar:focus-visible .lugar__castillo img{transform:scale(1.04)}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:var(--corona);color:var(--marino)}
@media (hover:none){.lugar__ir{background:var(--corona);color:var(--marino)}}

/* ============================ LA FAMILIA REAL ============================ */
.familia{background:#FFFFFF}
.arbol{position:relative;z-index:2;width:min(94vw,580px);aspect-ratio:10/10.4;margin:0 auto}
.arbol__cordones{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arbol__cordones path{fill:none;stroke:var(--corona-osc);stroke-width:.7;stroke-linecap:round}
.arbol__vara{
  position:absolute;
  left:4%;
  right:4%;
  top:17%;
  height:12px;
  border-radius:6px;
  background:linear-gradient(180deg,#FFF0B8 0%,#F2BE3A 55%,#B98616 100%);
  box-shadow:0 3px 6px rgba(120,80,10,.25);
  transform-origin:50% 50%;
}
.arbol__corona{position:absolute;left:50%;top:3.5%;width:18%;margin-left:-9%;height:auto;z-index:2}
.arbol__estandarte{
  position:absolute;
  top:19%;
  width:40%;
  padding:18px 8px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:linear-gradient(180deg,var(--rey) 0%,var(--rey-osc) 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  box-shadow:inset 0 0 0 3px var(--corona);
  transform-origin:50% 0;
}
.arbol__estandarte--izq{left:5%}
.arbol__estandarte--der{right:5%}
.arbol__rol{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.arbol__nombre{margin-top:4px;font-family:var(--titulo);font-weight:800;font-size:clamp(18px,5vw,26px);line-height:1.1;color:#FFFFFF}
.arbol__principe{position:absolute;left:50%;top:61%;width:36%;margin-left:-18%;display:flex;flex-direction:column;align-items:center;text-align:center}
.arbol__principe .arbol__rol{color:var(--rey)}
.arbol__principe .arbol__nombre{color:var(--marino);font-size:clamp(22px,6vw,30px)}
.arbol__foto{display:block;width:78%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid var(--corona);box-shadow:0 0 0 6px rgba(255,200,61,.22),0 14px 24px rgba(20,48,127,.22);margin-bottom:8px}
.arbol__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* ============================ EL ÁLBUM REAL ============================ */
.album{background:linear-gradient(180deg,var(--rey-osc) 0%,var(--rey-hondo) 100%);color:#FFFFFF}
.album__intro{position:relative;z-index:2;text-align:center;max-width:520px;margin:-12px auto 30px;font-size:16.5px;color:#DCE8FF}
.crece{position:relative;z-index:2;list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;max-width:460px}
.crece__paso{text-align:center}
.crece__foto{
  display:block;
  width:80%;
  margin:0 auto 12px;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  border:4px solid var(--corona);
  box-shadow:0 0 0 6px rgba(255,200,61,.18),0 14px 26px rgba(0,0,0,.3);
}
.crece__foto img{width:100%;height:100%;object-fit:cover}
.crece__paso b{display:block;font-family:var(--titulo);font-weight:800;font-size:19px;color:var(--corona)}
.crece__paso>span:last-child{display:block;margin-top:4px;font-size:14.5px;line-height:1.4;color:#DCE8FF}
.album__sub{position:relative;z-index:2;margin:60px 0 20px;text-align:center;font-family:var(--titulo);font-weight:700;font-size:clamp(26px,6.6vw,34px);color:#FFFFFF}
.galeria{
  position:relative;
  z-index:2;
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:10px 17vw 26px;
  margin:0 -20px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.galeria::-webkit-scrollbar{display:none}
.foto{position:relative;flex:0 0 66vw;max-width:320px;margin:0;scroll-snap-align:center;transition:opacity .45s ease}
.foto__marco{display:block;aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:5px solid #FFFFFF;box-shadow:0 16px 30px rgba(0,0,0,.35)}
.foto__marco img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.foto figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:12px;
  width:max-content;
  max-width:88%;
  margin:0 auto;
  padding:6px 14px;
  border-radius:999px;
  background:var(--corona);
  color:var(--marino);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease;
}
.puntos{position:relative;z-index:2;display:flex;justify-content:center;gap:0;margin-top:4px}
.punto{width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.punto::before{content:'';width:9px;height:9px;border-radius:50%;border:1.5px solid var(--oro);transition:background-color .35s ease}
.punto--activo::before{background:var(--corona)}

/* ============================ REGALOS ============================ */
.regalos{background:#FFFFFF}
.regalos__intro{position:relative;z-index:2;text-align:center;max-width:520px;margin:-10px auto 26px;font-size:16.5px;color:var(--marino-suave)}
.tesoros{position:relative;z-index:2;list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:520px}
.tesoros li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px 10px 16px;
  border-radius:22px;
  background:var(--celeste-2);
  border:1.5px solid rgba(29,69,184,.1);
  color:var(--marino);
  font-weight:600;
  font-size:15px;
  line-height:1.3;
  text-align:center;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.tesoros__ico{display:flex;align-items:center;justify-content:center;width:80px;height:80px}
.tesoros__ico img{max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 6px 8px rgba(20,48,127,.18))}
.lluvia{
  position:relative;
  z-index:2;
  overflow:hidden;
  max-width:560px;
  margin:44px auto 0;
  padding:30px 22px 30px;
  border-radius:30px;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,#2C5CD8 0%,var(--rey) 45%,var(--rey-osc) 100%);
  color:#FFFFFF;
  text-align:center;
  box-shadow:0 20px 44px rgba(20,48,127,.25);
}
.lluvia__sobres{position:absolute;inset:0;pointer-events:none;z-index:1}
.sobre-cae{position:absolute;top:-70px;width:var(--t,52px);height:auto;opacity:.95}
.lluvia__dentro{position:relative;z-index:2}
.lluvia__leon{width:118px;height:auto;margin:0 auto 6px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28))}
.lluvia__texto{max-width:400px;margin:0 auto 18px;font-size:16px;color:#E4EEFF}
.lluvia__qr{display:inline-block;margin:0;padding:14px 14px 12px;border-radius:24px;background:#FFFFFF;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.lluvia__qr img{width:min(220px,58vw);height:auto}
.lluvia__qr figcaption{max-width:220px;margin:10px auto 0;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--rey-osc)}

/* ============================ CONFIRMAR ============================ */
.confirmar{background:radial-gradient(ellipse 85% 60% at 50% 0%,#2C5CD8 0%,var(--rey) 42%,var(--rey-hondo) 100%);color:#FFFFFF;text-align:center}
.confirmar__texto{position:relative;z-index:2;max-width:460px;margin:-6px auto 24px;font-size:16.5px;color:#E4EEFF}
.confirmar__texto b{color:var(--corona)}
.contador{position:relative;z-index:2;display:flex;width:max-content;max-width:100%;flex-direction:column;gap:12px;margin:0 auto 26px;padding:18px 18px;border-radius:26px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,214,107,.5)}
.contador__fila{display:grid;grid-template-columns:82px 48px 54px 48px;align-items:center;gap:8px}
.contador__que{text-align:left;font-weight:600;font-size:16px}
.contador__btn{
  width:48px;
  height:48px;
  padding:0;
  border-radius:50%;
  border:2px solid var(--oro);
  background:transparent;
  color:#FFFFFF;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease;
}
.contador__btn svg{width:22px;height:22px}
.contador__btn:hover,.contador__btn:focus-visible{background:var(--corona);color:var(--marino)}
.contador__n{font-family:var(--titulo);font-weight:800;font-size:30px;line-height:1;color:var(--corona);text-align:center}
.confirmar .boton{position:relative;z-index:2}
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:14px 28px;
  border:0;
  border-radius:999px;
  font-family:var(--texto);
  font-size:16px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .35s ease,color .35s ease;
}
.boton svg{width:22px;height:22px}
.boton--confirmar{background:var(--corona);color:var(--marino)}
.boton--confirmar:hover,.boton--confirmar:focus-visible{background:#FFFFFF;color:var(--rey-osc)}
.boton--claro{background:var(--rey);color:#FFFFFF}
.boton--claro:hover,.boton--claro:focus-visible{background:var(--corona);color:var(--marino)}

/* ============================ LA CANCIÓN ============================ */
.cancion{background:linear-gradient(180deg,#EAF5FF 0%,#FFFFFF 100%);text-align:center}
.cajita{position:relative;z-index:2;display:block;width:min(230px,58vw);margin:4px auto 0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:24px}
.cajita img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 16px 24px rgba(20,48,127,.26))}
.cajita__notas{position:absolute;left:-10%;right:-10%;top:-40%;height:70%;pointer-events:none;z-index:2}
.nota{position:absolute;bottom:0;width:22px;height:22px;color:var(--rey)}
.cancion__obra{position:relative;z-index:2;margin:20px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px}
.cancion__obra b{font-family:var(--titulo);font-weight:800;font-size:clamp(24px,6.4vw,30px);color:var(--marino)}
.cancion__obra span{font-size:15px;color:var(--marino-suave)}
.cancion__pista{position:relative;z-index:2;margin:6px 0 0;font-size:15px;color:var(--marino-suave)}
.cancion__pista a{color:var(--rey)}
.yt-oculto{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px}

/* ============================ CIERRE ============================ */
.cierre{background:linear-gradient(180deg,#D5EBFF 0%,#A9D2F8 100%);text-align:center;padding-top:clamp(130px,26vw,180px)}
.cierre__globos{position:absolute;inset:0;pointer-events:none;z-index:1}
.cierre__globo{position:absolute;height:auto}
.cierre__globo--a{left:4%;top:30%;width:clamp(54px,14vw,96px)}
.cierre__globo--b{right:5%;top:18%;width:clamp(44px,11vw,80px)}
.cierre__leon{position:relative;z-index:2;width:min(44vw,200px);height:auto;margin:0 auto 10px;filter:drop-shadow(0 14px 20px rgba(20,48,127,.25))}
.cierre__titulo{position:relative;z-index:2;margin:0 0 6px;font-family:var(--titulo);font-weight:900;font-size:clamp(34px,9.4vw,58px);line-height:1.05;color:var(--rey-osc)}
.cierre__firma{position:relative;z-index:2;margin:0 0 26px;font-family:var(--pluma);font-style:italic;font-size:32px;color:var(--rey)}
.cierre .boton{position:relative;z-index:2}

/* ============================ CRÉDITOS ============================ */
.creditos{
  background:#FFFFFF;
  border-top:1px solid var(--linea);
  padding:clamp(42px,8vw,60px) 24px calc(var(--sa-abajo) + 96px);
  text-align:center;
}
.creditos__pregunta{margin:0 0 18px;font-family:var(--titulo);font-weight:700;font-size:clamp(20px,5.2vw,25px);line-height:1.25;color:var(--marino)}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:13px 26px;
  border-radius:999px;
  background:var(--rey);
  color:#FFFFFF;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  letter-spacing:.03em;
  box-shadow:none;
  transition:background-color .35s ease,color .35s ease;
}
.creditos__wa svg{width:20px;height:20px}
.creditos__wa:hover,.creditos__wa:focus-visible{background:var(--corona);color:var(--marino);box-shadow:none}
.creditos__correo{
  display:table;
  position:relative;
  margin:10px auto 0;
  padding:12px 0;
  color:var(--rey);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
}
.creditos__correo::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .4s 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:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--rey)}
.creditos__lema{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--marino-suave)}

/* ------------------------------------------------------------------
   PORTADA HORIZONTAL (escena 16:9): el carruaje a la izquierda del camino,
   la fecha y el botón a su derecha, hacia donde saluda el león
   ------------------------------------------------------------------ */
@media (min-aspect-ratio:1/1){
  .escena{width:1344px;height:756px;margin:-378px 0 0 -672px}
  .portada__cabecera{top:calc(var(--sa-arriba) + clamp(12px,2.6vh,34px))}
  .portada__uno{height:clamp(70px,15vh,128px)}
  .portada__anito-txt{height:clamp(30px,6.4vh,54px)}
  .portada__nombre{font-size:clamp(48px,11vh,100px)}
  .portada__tap{padding-left:32vw;padding-bottom:calc(var(--sa-abajo) + clamp(18px,4.5vh,44px))}
  .viaje__placa{top:calc(var(--sa-arriba) + 7%);max-width:640px}
  .viaje__placa--final{top:auto;bottom:calc(var(--sa-abajo) + 5%)}
}

/* ------------------------------------------------------------------
   ESCRITORIO
   ------------------------------------------------------------------ */
@media (min-width:768px){
  .seccion{padding:clamp(96px,10vw,124px) 40px clamp(70px,7.5vw,96px)}
  .cortina__nube{width:36%;top:-110px}
  .cortina__nube--izq{left:-8%}
  .cortina__nube--der{right:-8%}

  .principito__dentro{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:center;justify-items:start;text-align:left;gap:72px}
  .principito__figura{width:380px}
  .principito__leon{right:-20%;bottom:-6%;width:42%}

  .decreto__leon{display:block;position:absolute;left:max(3%,calc(50% - 470px));bottom:9%;width:170px;z-index:2}

  .estandartes__vara{
    display:block;
    position:relative;
    height:14px;
    width:100%;
    border-radius:7px;
    background:linear-gradient(180deg,#FFF0B8 0%,#F2BE3A 55%,#B98616 100%);
    box-shadow:0 4px 8px rgba(120,80,10,.25);
    transform-origin:50% 50%;
  }
  .estandartes__vara::before,.estandartes__vara::after{content:'';position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF6D0 0%,#F2BE3A 55%,#B98616 100%)}
  .estandartes__vara::before{left:-13px}
  .estandartes__vara::after{right:-13px}
  .estandartes__lista{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;max-width:none;padding:0 12px}
  .estandarte{padding-top:0}
  .estandarte::before{display:none}
  .estandarte:last-child{grid-column:auto;width:auto;justify-self:stretch}
  .estandarte__dentro{padding:24px 12px 62px}
  .estandarte__dentro img{width:88px;height:88px}
  .estandarte__dentro b{font-size:19px}
  .estandarte__dentro span{font-size:16px}

  .arbol{width:min(94vw,760px);aspect-ratio:10/8}
  .arbol__vara{top:17%}
  .arbol__corona{width:13%;margin-left:-6.5%;top:1.5%}
  .arbol__estandarte{width:31%;top:19.5%;padding:22px 10px 46px}
  .arbol__estandarte--izq{left:8%}
  .arbol__estandarte--der{right:8%}
  .arbol__principe{top:52%;width:28%;margin-left:-14%}

  .crece{grid-template-columns:repeat(4,minmax(0,1fr));max-width:980px;gap:24px}
  .crece::before{content:'';position:absolute;left:12%;right:12%;top:calc((100% - 0px) * 0 + 19%);border-top:3px dotted rgba(255,214,107,.7);z-index:-1}

  .galeria{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:34px 28px;
    overflow:visible;
    padding:0 0 12px;
    margin:0 auto;
    max-width:980px;
  }
  .foto{flex:none;max-width:none}
  .puntos{display:none}
  /* hover: se apagan las otras y crece la FOTO de adentro; la caja nunca se mueve */
  .galeria:has(.foto:hover) .foto{opacity:.45}
  .galeria:has(.foto:hover) .foto:hover{opacity:1}
  .galeria .foto:hover .foto__marco img{transform:scale(1.07)}
  .galeria .foto:hover figcaption{background:#FFFFFF;color:var(--rey-osc)}

  .tesoros{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px;gap:16px}
  .tesoros li:hover{background:var(--rey);border-color:var(--rey);color:#FFFFFF}
  .lluvia{padding:36px 40px}
}

@media (min-width:1100px){
  .principito__dentro{gap:96px}
  .estandartes__lista{gap:22px}
}

@media (max-width:370px){
  .contador__fila{grid-template-columns:70px 46px 48px 46px;gap:6px}
  .contador__btn{width:46px;height:46px}
  .estandarte__dentro b{font-size:15.5px}
  .estandarte__dentro span{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .portada__pista::before,.pista__mano,.musica-flotante__ondas i{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* ------------------------------------------------------------------
   PANTALLAS GRANDES (revisión 2026-09-28): título y llamado a tocar más grandes
   ------------------------------------------------------------------ */
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .portada__nombre{font-size:clamp(48px,11.6vh,126px)}
  .portada__uno{height:clamp(70px,13.4vh,144px)}
  .portada__anito-txt{height:clamp(30px,5.6vh,60px)}
}
@media (min-width:1100px){
  .portada__pista{min-height:60px;padding:16px 34px 16px 26px;font-size:15.5px;gap:12px}
  .pista__mano{width:26px;height:26px}
}