/* ==================================================================
   Pasaporte a mis XV · Ariana — Egipto de leyenda al atardecer
   Paleta única: lapislázuli, turquesa, oro y arena marfil.
   Tipografías: Gilda Display (nombres y títulos), Forum (rótulos),
   Commissioner (texto) y Noto Sans Egyptian Hieroglyphs (jeroglíficos).
   Formas propias: el cartucho (óvalo real), la estela (arco) y el pórtico.
   Lenguaje: arena que se escurre y descubre los textos, jeroglíficos que se
   encienden en oro, puertas de piedra que se deslizan, reflejos de agua y
   un brillo de oro que recorre los bordes.
   ================================================================== */

@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --noche:#0A1030;
  --noche-2:#0E1640;
  --lapis-osc:#101B4C;
  --lapis:#16246A;
  --lapis-2:#1F3388;
  --turquesa:#2BA89E;
  --turquesa-claro:#79D5CA;
  --oro:#D8AF5D;
  --oro-claro:#EBCB86;
  --oro-vivo:#F8E6B4;
  --oro-osc:#9C7431;
  --bronce:#74531C;
  --arena:#F1E6CD;
  --arena-2:#E6D4AF;
  --marfil:#FBF6EA;
  --tinta:#111A45;
  --tinta-suave:#3A4470;
  --texto:#EEE8DA;
  --texto-suave:#C9C3B2;
  --display:'Gilda Display','Didot','Bodoni 72','Times New Roman',serif;
  --caps:'Forum','Gilda Display',serif;
  --sans:'Commissioner','Segoe UI',system-ui,-apple-system,sans-serif;
  --glifo:'Noto Sans Egyptian Hieroglyphs','Segoe UI Historic','Noto Sans',sans-serif;
  --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);
  --degradado-oro:linear-gradient(180deg,#FFF4D6 0%,#F4D692 42%,#D3A24E 78%,#B8863A 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--noche)}
body{
  background:var(--noche);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.cerrado{overflow:hidden;height:100%}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:600;color:var(--oro-vivo)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}
[hidden]{display:none!important}

/* ------------------------------------------------------------------
   PORTADA · el Nilo al atardecer (el fotograma 0 del video)
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:var(--noche)}
body.abierto .portada{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
.portada__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* el resplandor que respira detrás del escarabajo */
.aura{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle var(--aura-r,200px) at var(--aura-x,50%) var(--aura-y,40%),rgba(255,226,166,.42) 0%,rgba(255,214,150,.14) 42%,rgba(255,214,150,0) 72%);
  mix-blend-mode:screen;
  opacity:.45;
}
/* el escarabajo: caja por left/top/width/height en píxeles reales (sin transform: nítido) */
.escena{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
.portada.lista .escena{visibility:visible}
.escarabajo{position:absolute;left:0;top:0;width:0;height:0}
.escarabajo__vuelo{position:absolute;inset:0;perspective:1100px}
.escarabajo__ala,.escarabajo__cuerpo{position:absolute;top:0;height:100%;display:block}
.escarabajo__ala img,.escarabajo__cuerpo img{display:block;width:100%;height:100%}
/* cortes del arte (tools/arte/egipcia2.py): alas de 37,21 % y cuerpo con solape de 1,22 % */
.escarabajo__ala--i{left:0;width:37.21%;transform-origin:100% 46%}
.escarabajo__ala--d{left:62.79%;width:37.21%;transform-origin:0 46%}
.escarabajo__cuerpo{left:35.99%;width:28.02%;z-index:1}
/* polvo de oro que sube */
.polvo{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.mota{
  position:absolute;
  bottom:-10px;
  width:var(--t,3px);
  height:var(--t,3px);
  border-radius:50%;
  background:#FFE7B0;
  box-shadow:0 0 6px 1px rgba(255,214,140,.8);
  opacity:0;
  animation:subir-mota var(--d,12s) linear var(--r,0s) infinite;
}
@keyframes subir-mota{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.9}
  50%{opacity:.35}
  70%{opacity:.85}
  100%{transform:translate3d(var(--x,20px),-105vh,0);opacity:0}
}

/* cabecera: "Mis XV" y el nombre encima del escarabajo (vertical) o a su izquierda (horizontal) */
.portada__cabecera{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% - var(--e-top,34vh) + clamp(6px,1.6vh,18px));
  z-index:5;
  padding:0 max(18px,var(--izq)) 0 max(18px,var(--der));
  text-align:center;
  pointer-events:none;
  visibility:hidden;
}
.portada.lista .portada__cabecera,.portada.lista .portada__fecha{visibility:visible}
.portada__titular{display:flex;flex-direction:column;align-items:center}
.portada__xv{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-family:var(--caps);
  font-size:clamp(19px,5.8vw,27px);
  line-height:1.2;
  letter-spacing:.34em;
  color:var(--oro-vivo);
  text-shadow:0 2px 12px rgba(5,9,32,.9);
}
.portada__xv > span:not(.portada__raya){margin-right:-.34em}
.portada__raya{display:block;width:clamp(26px,9vw,64px);height:1px;background:linear-gradient(90deg,rgba(235,203,134,0),var(--oro-claro))}
.portada__raya:last-child{background:linear-gradient(90deg,var(--oro-claro),rgba(235,203,134,0))}
.portada__nombre{
  margin:.04em 0 0;
  padding:0 .06em .08em;
  font-family:var(--display);
  font-weight:400;
  /* nunca más alto que el espacio libre sobre el escarabajo */
  font-size:min(23vw,10.6vh,136px,calc(var(--e-top,300px) * .5));
  line-height:1;
  letter-spacing:.01em;
  color:var(--oro-vivo);
  background:var(--degradado-oro);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 12px rgba(5,9,32,.8));
}
/* la fecha: en vertical va sobre el agua, justo encima del llamado a tocar */
.portada__fecha{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(var(--abajo) + clamp(24px,5.6vh,56px) + 70px);
  z-index:5;
  width:fit-content;
  max-width:calc(100% - 32px);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:3px 12px;
  padding:9px 20px 10px;
  border:1px solid rgba(235,203,134,.8);
  border-radius:999px;
  background:rgba(10,16,48,.58);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--oro-vivo);
  font-size:clamp(13.5px,3.8vw,16px);
  font-weight:500;
  line-height:1.35;
  letter-spacing:.02em;
  text-align:center;
  pointer-events:none;
  visibility:hidden;
}
.portada__sep{display:inline-block;width:5px;height:5px;transform:rotate(45deg);background:var(--oro)}
.portada__fecha .solo-anio{display:none}
html.horizontal .portada__fecha .solo-anio{display:inline}

/* horizontal (escritorio, celular echado): nombre a la izquierda del escarabajo, fecha a la derecha */
html.horizontal .portada__cabecera{top:0;bottom:0;padding:0}
html.horizontal .portada__titular{
  position:absolute;
  right:calc(100% - var(--e-left,40vw) + 2.6vw);
  top:var(--e-mid,40vh);
  transform:translateY(-50%);
  align-items:flex-end;
  text-align:right;
  width:calc(var(--e-left,40vw) - 5vw);
}
html.horizontal .portada__xv{font-size:clamp(17px,1.9vw,34px);gap:14px}
html.horizontal .portada__xv .portada__raya:last-child{display:none}
html.horizontal .portada__nombre{font-size:clamp(56px,min(9.4vw,19vh),188px)}
html.horizontal .portada__fecha{
  left:calc(var(--e-right,60vw) + 2.6vw);
  right:auto;
  top:var(--e-mid,40vh);
  bottom:auto;
  transform:translateY(-50%);
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin:0;
  padding:16px 26px 17px 24px;
  border-radius:22px;
  font-size:clamp(14px,1.3vw,24px);
  text-align:left;
}
html.horizontal .portada__sep{width:44px;height:1px;transform:none;background:linear-gradient(90deg,var(--oro),rgba(216,175,93,0))}

/* el toque: botón a pantalla completa, píldora abajo con la manito */
.portada__tap{
  position:absolute;
  inset:0;
  z-index:6;
  width:100%;
  border:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:0 16px calc(var(--abajo) + clamp(24px,5.6vh,56px));
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.portada__tap:focus-visible{outline:none}
.portada__pista{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 26px 0 20px;
  border:1px solid var(--oro-vivo);
  border-radius:999px;
  /* nace llamativa (dorada) con dedo y con mouse; el hover la invierte */
  background:linear-gradient(180deg,#F6DC9C 0%,#DDB564 100%);
  color:var(--tinta);
  font-family:var(--caps);
  font-size:17px;
  letter-spacing:.06em;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-6px;
  border:1px solid rgba(248,230,180,.9);
  border-radius:999px;
  animation:anillo 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes anillo{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.14,1.5);opacity:0}}
.pista__mano{width:23px;height:23px;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)}}
@media (hover:hover) and (pointer:fine){
  .portada__tap:hover .portada__pista,
  .portada__tap:focus-visible .portada__pista{background:rgba(10,16,48,.74);color:var(--oro-vivo);border-color:var(--oro-vivo)}
}
.portada__tap:focus-visible .portada__pista{background:rgba(10,16,48,.74);color:var(--oro-vivo)}
@media (min-width:1100px){
  .portada__pista{min-height:62px;padding:0 36px 0 28px;font-size:19.5px;gap:13px}
  .pista__mano{width:27px;height:27px}
}
@media (min-width:1600px){
  .portada__pista{min-height:70px;padding:0 44px 0 34px;font-size:22px;gap:14px}
  .pista__mano{width:30px;height:30px}
}
@media (orientation:landscape) and (max-height:500px){
  .portada__tap{padding-bottom:calc(var(--abajo) + 12px)}
  .portada__pista{min-height:46px}
}

.velo{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 46%,#22306E 0%,#111A45 48%,var(--noche) 82%);
}

/* ------------------------------------------------------------------
   EL VIAJE · video, foto en el cartucho y textos en placas
   ------------------------------------------------------------------ */
.viaje{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden;pointer-events:none}
.viaje__video,.viaje__fin{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--noche)}
.viaje__fin{opacity:0}
/* la foto toma la forma exacta del interior del cartucho (medida en el video) */
.viaje__foto{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  opacity:0;
  z-index:1;
  -webkit-mask:url(assets/cartucho-mascara.png) center/100% 100% no-repeat;
  mask:url(assets/cartucho-mascara.png) center/100% 100% no-repeat;
}
.viaje__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.viaje__foto::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(40,24,6,0) 62%,rgba(40,24,6,.34) 100%);
}
.viaje__foto::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(ellipse at 50% 45%,rgba(255,246,220,.95) 0%,rgba(255,220,150,.6) 50%,rgba(255,220,150,0) 82%);
  opacity:0;
}
.viaje__foto--luz::before{animation:destello 1.5s ease-out 1}
@keyframes destello{0%{opacity:1}100%{opacity:0}}

/* placas: lapislázuli translúcido con doble filete dorado */
.viaje__texto,.viaje__final,.viaje__placa{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.viaje__texto{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 11%);
  z-index:2;
  margin:0;
  padding:13px 18px 14px;
  text-align:center;
  text-wrap:balance;
  border-radius:16px;
  background:rgba(10,16,48,.64);
  box-shadow:inset 0 0 0 1px rgba(235,203,134,.75),inset 0 0 0 5px rgba(10,16,48,.1),inset 0 0 0 6px rgba(235,203,134,.3);
  font-family:var(--display);
  font-size:clamp(23px,6.6vw,38px);
  line-height:1.22;
  color:var(--oro-vivo);
  opacity:0;
}
.viaje__final{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 3%);
  z-index:2;
  padding:10px 16px 14px;
  text-align:center;
  border-radius:18px;
  background:rgba(10,16,48,.66);
  box-shadow:inset 0 0 0 1px rgba(235,203,134,.75),inset 0 0 0 5px rgba(10,16,48,.1),inset 0 0 0 6px rgba(235,203,134,.3);
  opacity:0;
}
.viaje__placa{margin:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.viaje__nombre{
  display:block;
  font-family:var(--display);
  font-size:clamp(46px,13.5vw,72px);
  line-height:1.04;
  color:var(--oro-vivo);
  background:var(--degradado-oro);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.viaje__invita{display:block;margin-top:2px;font-family:var(--caps);font-size:clamp(15px,4.4vw,19px);letter-spacing:.12em;color:var(--arena)}
.viaje__invita b{font-weight:400;color:var(--oro-vivo)}

html.horizontal .viaje__texto{
  left:0;
  right:0;
  width:fit-content;
  max-width:86vw;
  margin:0 auto;
  bottom:calc(var(--abajo) + 7%);
  padding:13px 36px 15px;
  font-size:clamp(26px,3vw,46px);
}
/* horizontal: una sola placa ancha al pie, bajo el cartucho (las antorchas y las columnas quedan a la vista) */
html.horizontal .viaje__final{
  left:0;
  right:0;
  bottom:calc(var(--abajo) + 5%);
  width:fit-content;
  max-width:88vw;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0 1.4em;
  padding:12px 40px 15px;
  border-radius:20px;
}
html.horizontal .viaje__nombre{font-size:clamp(44px,4.4vw,84px)}
html.horizontal .viaje__invita{margin:0;padding-left:1.1em;border-left:1px solid rgba(235,203,134,.6);font-size:clamp(16px,1.5vw,26px);letter-spacing:.1em;line-height:1.5;text-align:left}
html.horizontal .viaje__invita b{display:block;font-family:var(--display);font-size:1.5em;letter-spacing:.03em;line-height:1.15}

/* ------------------------------------------------------------------
   BOTONES FIJOS · volver y música
   ------------------------------------------------------------------ */
.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:0 18px 0 12px;
  border:1px solid rgba(235,203,134,.7);
  border-radius:999px;
  background:rgba(10,16,48,.76);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--oro-vivo);
  font-family:var(--caps);
  font-size:15px;
  letter-spacing:.08em;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,opacity .4s ease,visibility 0s;
}
.volver-fijo svg{width:16px;height:16px}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--oro);color:var(--tinta)}
body.cerrado .volver-fijo{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}

.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:54px;
  padding:5px 16px 5px 6px;
  border:1px solid rgba(235,203,134,.75);
  border-radius:999px;
  background:rgba(10,16,48,.8);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--oro-claro);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .4s ease,visibility 0s linear .4s,transform .4s ease,background-color .35s ease,border-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,border-color .35s ease}
/* durante el viaje los textos van abajo: el botón se aparta; con la portada abierta va arriba a la derecha */
html.musica.viajando .musica-flotante{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
body.cerrado .musica-flotante{top:calc(var(--arriba) + 12px);bottom:auto}
.musica-flotante:hover,.musica-flotante:focus-visible{background:var(--lapis);border-color:var(--oro-vivo)}
.musica-flotante__sol{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(248,214,140,.55) 0%,rgba(216,175,93,.2) 45%,rgba(10,16,48,0) 70%);
}
.musica-flotante__sol img{width:34px;height:auto}
.musica-flotante--tocando .musica-flotante__sol{animation:latir 1.6s ease-in-out infinite}
@keyframes latir{0%,100%{box-shadow:0 0 0 0 rgba(248,214,140,.0)}50%{box-shadow:0 0 14px 2px rgba(248,214,140,.45)}}
.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:rgba(235,203,134,.6)}
.musica-flotante:not(.musica-flotante--tocando) .musica-flotante__sol img{filter:grayscale(.6) brightness(.8)}

/* ------------------------------------------------------------------
   CUERPO · piezas comunes
   ------------------------------------------------------------------ */
.templo{position:relative;z-index:1;opacity:0;transition:opacity .7s ease}
body.abierto .templo{opacity:1}
section{position:relative;overflow:hidden;isolation:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.rotulo{
  position:relative;
  margin:0 0 10px;
  font-family:var(--caps);
  font-size:17px;
  line-height:1.4;
  letter-spacing:.2em;
  color:var(--oro-claro);
  text-align:center;
}
.rotulo--tinta{color:var(--bronce)}
.rotulo--chico{margin-top:28px}
.titulo{
  position:relative;
  text-wrap:balance;
  margin:0 auto 20px;
  max-width:13em;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(40px,11.4vw,62px);
  line-height:1.06;
  color:var(--oro-vivo);
  text-align:center;
}
.titulo--tinta{color:var(--tinta)}
/* arena que se escurre: el texto aparece de arriba hacia abajo mientras caen granos */
html.arena-lista .arena:not(.arena--vista){
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--p,0%) - 22%),rgba(0,0,0,0) var(--p,0%));
  mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--p,0%) - 22%),rgba(0,0,0,0) var(--p,0%));
}
.granos{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.grano{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:#EBD39C;box-shadow:0 0 4px rgba(255,220,150,.6)}
.grano--claro{background:#B8904E;box-shadow:none}
/* jeroglíficos que se encienden en oro */
.friso{
  margin:14px 0 6px;
  font-family:var(--glifo);
  font-size:30px;
  line-height:1.2;
  letter-spacing:.16em;
  color:rgba(216,175,93,.3);
  text-align:center;
}
.friso .g{display:inline-block;transition:color .45s ease,text-shadow .9s ease}
.friso .g.on{color:var(--oro-vivo);text-shadow:0 0 14px rgba(255,210,130,.85),0 0 2px rgba(255,244,214,.9)}
/* estrellas del cielo nocturno (fondo de las secciones oscuras) */
.estrellas{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%,#FFF3D2 60%,transparent 62%),
    radial-gradient(1px 1px at 27% 64%,#FFF3D2 60%,transparent 62%),
    radial-gradient(1.4px 1.4px at 44% 12%,#FFF3D2 60%,transparent 62%),
    radial-gradient(1px 1px at 61% 42%,#FFF3D2 60%,transparent 62%),
    radial-gradient(1.3px 1.3px at 78% 22%,#FFF3D2 60%,transparent 62%),
    radial-gradient(1px 1px at 89% 71%,#FFF3D2 60%,transparent 62%),
    radial-gradient(1.2px 1.2px at 6% 84%,#FFF3D2 60%,transparent 62%),
    radial-gradient(1px 1px at 52% 88%,#FFF3D2 60%,transparent 62%),
    radial-gradient(1.1px 1.1px at 35% 38%,#FFF3D2 60%,transparent 62%),
    radial-gradient(1px 1px at 71% 93%,#FFF3D2 60%,transparent 62%);
  background-size:340px 380px;
  animation:titilar 7s ease-in-out infinite alternate;
}
@keyframes titilar{0%{opacity:.35}100%{opacity:.7}}

/* el cartucho pequeño: un nombre en jeroglíficos dentro del óvalo real */
.cartucho-mini{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:4px 20px 4px 18px;
  border:2px solid var(--oro);
  border-radius:999px;
  box-shadow:inset 0 0 0 3px rgba(10,16,48,.0),inset 0 0 0 4px rgba(216,175,93,.45);
}
.cartucho-mini::after{
  /* la barra del cartucho (el nudo de la cuerda) */
  content:'';
  position:absolute;
  right:-9px;
  top:18%;
  bottom:18%;
  width:5px;
  border-radius:2px;
  background:var(--oro);
}
.cartucho-mini .glifos{font-family:var(--glifo);font-size:26px;line-height:1.25;letter-spacing:.06em;color:var(--oro-vivo)}
.cartucho-mini--grande{min-height:64px;padding:6px 26px 6px 24px}
.cartucho-mini--grande .glifos{font-size:34px}

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 28px;
  border:1px solid var(--oro);
  border-radius:999px;
  background:transparent;
  color:var(--oro-vivo);
  font-family:var(--caps);
  font-size:17px;
  letter-spacing:.06em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.boton svg{width:21px;height:21px;flex:0 0 auto}
.boton:hover,.boton:focus-visible{background:var(--oro);color:var(--tinta)}
.boton--tinta{border-color:var(--oro-osc);color:var(--tinta)}
.boton--tinta:hover,.boton--tinta:focus-visible{background:var(--tinta);color:var(--oro-vivo);border-color:var(--tinta)}

/* brillo de oro que recorre los bordes (se pausa fuera de la vista) */
.brillo-borde{position:relative;isolation:isolate}
.brillo-borde::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:inherit;
  padding:1.6px;
  pointer-events:none;
  background:conic-gradient(from var(--ang),rgba(255,236,190,0) 0deg,rgba(255,236,190,0) 240deg,rgba(255,248,222,.95) 296deg,rgba(236,198,112,.9) 318deg,rgba(255,236,190,0) 352deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:recorre 5.5s linear infinite;
  animation-play-state:paused;
}
.brillo-borde.brilla::after{animation-play-state:running}
@keyframes recorre{to{--ang:360deg}}

/* puertas de piedra que se deslizan (solo si hay animación: sin JS no tapan nada) */
.puertas{display:none}
html.con-puertas .puertas{display:block;position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;border-radius:inherit}
html.con-puertas .puertas.abiertas{display:none}
.puerta{
  position:absolute;
  top:0;
  bottom:0;
  width:50.6%;
  background:#D9C49A url(assets/piedra.webp) center/cover;
  box-shadow:inset 0 0 0 1px rgba(92,66,28,.35),inset 0 0 30px rgba(92,66,28,.3);
}
.puerta--i{left:0;background-position:78% 50%}
.puerta--d{right:0;background-position:22% 50%}
.puerta::before{
  /* columna de jeroglíficos tallada en la hoja */
  content:'𓋹 𓆣 𓇳 𓊽';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:1.2em;
  font-family:var(--glifo);
  font-size:clamp(16px,4vw,26px);
  line-height:1.5;
  text-align:center;
  white-space:normal;
  word-break:break-all;
  color:rgba(92,66,28,.42);
  text-shadow:0 1px 0 rgba(255,244,220,.55);
}
.puerta--i::after,.puerta--d::after{
  /* la costura entre las dos hojas */
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,rgba(92,66,28,.15),rgba(92,66,28,.55),rgba(92,66,28,.15));
}
.puerta--i::after{right:0}
.puerta--d::after{left:0}

/* ------------------------------------------------------------------
   LA QUINCEAÑERA
   ------------------------------------------------------------------ */
.ariana{
  padding:calc(var(--arriba) + 84px) 24px 88px;
  background:
    radial-gradient(ellipse 70% 42% at 50% 20%,rgba(216,175,93,.2) 0%,rgba(216,175,93,0) 70%),
    linear-gradient(180deg,var(--noche) 0%,var(--lapis-osc) 70%,var(--noche-2) 100%);
}
.ariana__dentro{display:grid;gap:34px;justify-items:center;max-width:1060px;margin:0 auto}
.retrato{position:relative;width:min(64vw,270px);aspect-ratio:760/1478;margin:0}
.retrato__foto{
  /* el hueco del marco (medido en el arte): la foto va detrás y el aro de oro la enmarca */
  position:absolute;
  left:15.8%;
  top:10.6%;
  width:68.4%;
  height:78.9%;
  overflow:hidden;
  border-radius:999px;
  background:var(--lapis);
}
.retrato__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.retrato__marco{position:absolute;inset:0;width:100%;height:100%;z-index:1;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.retrato__brillo{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  -webkit-mask:url(assets/marco-cartucho.webp) center/100% 100% no-repeat;
  mask:url(assets/marco-cartucho.webp) center/100% 100% no-repeat;
  background:linear-gradient(115deg,rgba(255,250,232,0) 36%,rgba(255,250,232,.85) 47%,rgba(255,236,190,.3) 52%,rgba(255,250,232,0) 62%) no-repeat;
  background-size:300% 100%;
  background-position:140% 0;
  mix-blend-mode:screen;
  animation:barrido 7s ease-in-out 2s infinite;
}
@keyframes barrido{0%{background-position:140% 0}30%,100%{background-position:-40% 0}}
.ariana__texto{text-align:center;max-width:560px}
.ariana__nombre{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(76px,25vw,136px);
  line-height:1;
  color:var(--oro-vivo);
  background:var(--degradado-oro);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-bottom:.06em;
}
.friso--nombre{font-size:34px;margin-top:6px}
.ariana__fecha{margin:10px 0 0;font-size:18px;line-height:1.6;color:var(--texto)}
.ariana__fecha b{display:inline-block;margin-top:4px;font-family:var(--caps);font-weight:400;font-size:19px;letter-spacing:.12em;color:var(--oro-claro)}
.ariana__frase{margin:18px auto 0;max-width:26em;font-size:17px;color:var(--texto-suave);text-wrap:balance}

/* ------------------------------------------------------------------
   EL PAPIRO QUE SE TRADUCE
   ------------------------------------------------------------------ */
.papiro-sec{
  padding:90px 18px 86px;
  text-align:center;
  color:var(--tinta);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,#FFFBF1 0%,rgba(255,251,241,0) 70%),
    linear-gradient(180deg,var(--arena) 0%,var(--arena-2) 100%);
}
.papiro-sec__guia{margin:-6px auto 0;max-width:26em;font-size:16.5px;color:var(--tinta-suave);text-wrap:balance}
.papiro{
  position:relative;
  max-width:640px;
  margin:28px auto 0;
  padding:clamp(40px,11vw,70px) clamp(26px,8vw,64px) clamp(38px,10vw,62px);
  background:url(assets/papiro.webp) center/100% 100% no-repeat;
  filter:drop-shadow(0 14px 22px rgba(92,66,28,.22));
}
.papiro__texto{
  margin:0;
  text-align:left;
  font-family:var(--display);
  font-size:clamp(19px,5.2vw,23px);
  line-height:1.62;
  color:var(--tinta);
  hyphens:manual;
}
.papiro__texto .pal{display:inline-block;white-space:nowrap}
.papiro__texto .l{position:relative;display:inline-block;color:var(--tinta);transition:color .45s ease}
/* antes de traducir: cada letra es un jeroglífico (del mismo ancho de la letra: el texto no se reacomoda) */
.papiro--glifos .papiro__texto .l:not(.tr){color:transparent}
.papiro__texto .l--signo::before{display:none}
.papiro__texto .l::before{
  content:attr(data-g);
  position:absolute;
  left:50%;
  top:50%;
  font-family:var(--glifo);
  font-size:.92em;
  line-height:1;
  color:#7B5A21;
  transform:translate(-50%,-46%);
  opacity:0;
  transition:opacity .4s ease,transform .5s ease,color .4s ease;
  pointer-events:none;
}
.papiro--glifos .papiro__texto .l:not(.tr)::before{opacity:1}
.papiro__texto .l.tr::before{opacity:0;transform:translate(-50%,-110%) scale(.5)}
.papiro__texto .l.tr{animation:letra-oro .9s ease-out 1}
@keyframes letra-oro{0%{color:#B8862F;text-shadow:0 0 12px rgba(236,190,90,.9)}100%{color:var(--tinta);text-shadow:0 0 0 rgba(236,190,90,0)}}
.papiro__firma{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:18px}
.papiro__firma .cartucho-mini{border-color:#9C7431}
.papiro__firma .cartucho-mini::after{background:#9C7431}
.papiro__firma .glifos{color:#6E4E18}
.papiro__nombre{font-family:var(--display);font-size:38px;line-height:1;color:var(--tinta)}
.papiro-sec__boton{margin-top:26px}

/* ------------------------------------------------------------------
   MI FAMILIA · el pórtico del templo
   ------------------------------------------------------------------ */
.familia{
  padding:92px 18px 90px;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%,rgba(43,168,158,.14),rgba(43,168,158,0) 70%),
    linear-gradient(180deg,var(--noche-2) 0%,var(--noche) 100%);
}
.porticos{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"emblema emblema" "centro centro" "izq der" "base base";
  gap:18px 12px;
  max-width:980px;
  margin:18px auto 0;
  align-items:end;
}
.porticos__emblema{grid-area:emblema;display:flex;justify-content:center}
.escarabajo--mini{position:relative;left:auto;top:auto;width:min(52vw,250px);height:auto;aspect-ratio:1000/745}
.porticos__centro{grid-area:centro;display:flex;flex-direction:column;align-items:center;gap:6px}
.porticos__ariana{font-family:var(--display);font-size:36px;line-height:1;color:var(--oro-vivo)}
.torre{
  /* la torre del pórtico: trapecio de piedra que se levanta del suelo (--alza de 0 a 1) */
  --alza:1;
  position:relative;
  min-height:218px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 14px 26px;
  background:linear-gradient(180deg,rgba(243,233,209,.8),rgba(236,222,190,.74)),#E7D6B2 url(assets/piedra.webp) center/cover;
  clip-path:polygon(calc(9% * var(--alza)) calc((1 - var(--alza)) * 100%),calc(100% - 9% * var(--alza)) calc((1 - var(--alza)) * 100%),100% 100%,0 100%);
}
.torre::before{
  /* filete dorado tallado */
  content:'';
  position:absolute;
  inset:10px 16px 10px;
  border:1px solid rgba(156,116,49,.7);
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  pointer-events:none;
}
.torre--i{grid-area:izq}
.torre--d{grid-area:der}
.torre__texto{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.torre__rol{font-family:var(--caps);font-size:15.5px;letter-spacing:.16em;color:#6E4E18;margin-bottom:6px}
.torre__nombre{font-family:var(--display);font-size:clamp(19px,5.2vw,26px);line-height:1.15;color:var(--tinta)}
.torre__y{font-family:var(--display);font-size:18px;line-height:1.2;color:#8A6A2E}
.porticos__base{
  grid-area:base;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:16px 18px 18px;
  border-top:1px solid rgba(216,175,93,.55);
  border-bottom:1px solid rgba(216,175,93,.55);
}
.porticos__base .torre__rol{color:var(--oro-claro)}
.porticos__base .torre__nombre{color:var(--oro-vivo);font-size:28px}
.familia__invitan{margin:30px auto 0;max-width:24em;font-size:18px;color:var(--texto);text-wrap:balance}
.torre .torre__texto > *,.porticos__base > *,.porticos__centro > *{transition:opacity .6s ease}

/* ------------------------------------------------------------------
   LA FECHA · el Nilo en bucle y la cuenta regresiva
   ------------------------------------------------------------------ */
.fecha-sec{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:86px 18px;background:var(--noche) center/cover no-repeat}
.fecha-sec__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fecha-sec__velo{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 58% at 50% 50%,rgba(10,16,48,.35) 0%,rgba(10,16,48,.62) 100%),
    linear-gradient(180deg,rgba(10,16,48,.7) 0%,rgba(10,16,48,.15) 45%,rgba(10,16,48,.72) 100%);
}
.fecha-sec__dentro{position:relative;z-index:1;text-align:center;width:100%;max-width:640px}
.fecha{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(86vw,350px);
  margin:6px auto 0;
  padding:30px 20px 30px;
  border-radius:999px 999px 26px 26px;
  background:rgba(10,16,48,.5);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  box-shadow:inset 0 0 0 1px rgba(235,203,134,.6),inset 0 0 0 7px rgba(10,16,48,.15),inset 0 0 0 8px rgba(235,203,134,.25);
  overflow:hidden;
}
.fecha__dia{margin-top:16px;font-family:var(--caps);font-size:19px;letter-spacing:.3em;color:var(--arena);margin-right:-.3em}
.fecha__num{
  font-family:var(--display);
  font-size:clamp(124px,36vw,178px);
  line-height:.95;
  color:var(--oro-vivo);
  background:var(--degradado-oro);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:lining-nums;
}
/* reflejo en el agua: el número invertido, desvanecido y ondulando */
.fecha__reflejo{
  /* se ve la parte de abajo de las cifras (la que toca el agua), invertida y desvaneciéndose */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:.4em;
  margin-top:-.06em;
  overflow:hidden;
  font-family:var(--display);
  font-size:clamp(124px,36vw,178px);
  line-height:.95;
  color:#EFCF88;
  opacity:.5;
  transform:scaleY(-1);
  -webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 50%,transparent 100%);
  mask-image:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 50%,transparent 100%);
  filter:url(#ondas) blur(.8px);
  pointer-events:none;
  user-select:none;
}
.fecha__reflejo span{display:block}
.fecha__mes{margin-top:2px;font-family:var(--display);font-size:clamp(22px,6.6vw,35px);line-height:1.15;color:var(--arena);white-space:nowrap}
.fecha__hora{
  margin-top:16px;
  padding:9px 22px 10px;
  border-radius:999px;
  background:var(--oro);
  color:var(--tinta);
  font-family:var(--caps);
  font-size:18px;
  letter-spacing:.08em;
}
.cuenta{display:flex;justify-content:center;gap:clamp(7px,2.4vw,16px)}
.cuenta__dato{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:clamp(70px,19.5vw,96px);
  padding:12px 6px 10px;
  border-radius:999px 999px 14px 14px;
  border:1px solid rgba(235,203,134,.55);
  background:rgba(10,16,48,.55);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.cuenta__n{font-family:var(--display);font-size:clamp(34px,10vw,50px);line-height:1;color:var(--oro-vivo);font-variant-numeric:tabular-nums lining-nums;min-width:1.4em}
.cuenta__t{margin-top:6px;font-family:var(--caps);font-size:15px;letter-spacing:.12em;color:var(--arena)}
.cuenta__hoy{margin:12px 0 0;font-family:var(--display);font-size:40px;color:var(--oro-vivo)}

/* ------------------------------------------------------------------
   LA CEREMONIA Y LA RECEPCIÓN · toda la tarjeta es el botón al mapa
   ------------------------------------------------------------------ */
.lugares{
  padding:90px 18px 90px;
  text-align:center;
  color:var(--tinta);
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%,rgba(216,175,93,.22),rgba(216,175,93,0) 70%),
    linear-gradient(180deg,var(--arena-2) 0%,var(--arena) 100%);
}
.lugares__lista{display:grid;gap:22px;max-width:980px;margin:30px auto 0}
.lugar{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:34px 20px 30px;
  border-radius:180px 180px 22px 22px;
  overflow:hidden;
  text-decoration:none;
  color:var(--tinta);
  background:linear-gradient(180deg,#FFFCF4 0%,#F6EBD3 100%);
  box-shadow:inset 0 0 0 1px rgba(156,116,49,.55),inset 0 0 0 7px #FBF4E4,inset 0 0 0 8px rgba(156,116,49,.3);
  transition:background-color .4s ease;
}
.lugar__ico{position:relative;width:auto;height:66px;margin:6px 0 8px;filter:drop-shadow(0 8px 12px rgba(92,66,28,.28))}
.lugar__tipo{font-family:var(--caps);font-size:16px;letter-spacing:.18em;color:var(--bronce)}
.lugar__nombre{font-family:var(--display);font-size:clamp(30px,8.4vw,40px);line-height:1.1;color:var(--tinta);text-wrap:balance}
.lugar__sitio{font-size:17px;font-weight:600;color:var(--tinta)}
.lugar__dir{font-size:16px;line-height:1.5;color:var(--tinta-suave)}
.lugar__hora{margin-top:8px;font-size:16px;line-height:1.5;color:var(--tinta-suave)}
.lugar__hora b{color:var(--tinta)}
.lugar__ir{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  margin-top:16px;
  padding:0 24px 0 18px;
  border-radius:999px;
  border:1px solid var(--tinta);
  color:var(--tinta);
  font-family:var(--caps);
  font-size:17px;
  letter-spacing:.06em;
  transition:background-color .35s ease,color .35s ease;
}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:var(--tinta);color:var(--oro-vivo)}
.lugar:hover,.lugar:focus-visible{background:linear-gradient(180deg,#FFFFFF 0%,#F9F0DC 100%)}
@media (hover:none){
  .lugar__ir{background:var(--tinta);color:var(--oro-vivo)}
}

/* ------------------------------------------------------------------
   EL ITINERARIO · estelas que se encienden
   ------------------------------------------------------------------ */
.itinerario{
  padding:92px 18px 92px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,rgba(216,175,93,.14),rgba(216,175,93,0) 70%),
    linear-gradient(180deg,var(--noche) 0%,var(--lapis-osc) 100%);
}
.estelas{position:relative;list-style:none;margin:30px auto 0;padding:0;max-width:560px;display:grid;gap:14px}
.estelas::before{
  /* el Nilo que une las estelas: una línea turquesa con reflejos que corren */
  content:'';
  position:absolute;
  left:41px;
  top:30px;
  bottom:30px;
  width:2px;
  background:linear-gradient(180deg,rgba(121,213,202,0),rgba(121,213,202,.65) 8%,rgba(121,213,202,.65) 92%,rgba(121,213,202,0));
}
.estela{
  position:relative;
  display:grid;
  grid-template-columns:84px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px;
  align-items:center;
  padding:14px 16px 14px 0;
  text-align:left;
}
.estela__ico{
  grid-row:1 / span 2;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:84px;
  height:96px;
  border-radius:42px 42px 10px 10px;
  background:linear-gradient(180deg,#22326F 0%,#141F52 100%);
  box-shadow:inset 0 0 0 1px rgba(216,175,93,.55),inset 0 0 0 5px rgba(10,16,48,.2),inset 0 0 0 6px rgba(216,175,93,.25);
  transition:box-shadow .8s ease;
}
.estela__ico img{max-width:58px;max-height:66px;width:auto;height:auto;filter:brightness(.6) saturate(.6);transition:filter .9s ease}
.estela.on .estela__ico{box-shadow:inset 0 0 0 1px rgba(248,230,180,.9),inset 0 0 0 5px rgba(10,16,48,.2),inset 0 0 0 6px rgba(216,175,93,.55),0 0 26px rgba(248,214,140,.35)}
.estela.on .estela__ico img{filter:brightness(1.05) saturate(1) drop-shadow(0 0 8px rgba(255,214,140,.6))}
.estela__glifo{
  position:absolute;
  left:-4px;
  top:6px;
  z-index:2;
  font-family:var(--glifo);
  font-size:22px;
  line-height:1;
  color:rgba(216,175,93,.35);
  transition:color .5s ease,text-shadow .9s ease;
}
.estela.on .estela__glifo{color:var(--oro-vivo);text-shadow:0 0 12px rgba(255,210,130,.9)}
.estela__hora{align-self:end;font-family:var(--caps);font-size:17px;letter-spacing:.12em;color:var(--turquesa-claro)}
.estela__que{align-self:start;font-family:var(--display);font-size:clamp(23px,6.4vw,29px);line-height:1.18;color:var(--oro-vivo);text-wrap:balance}

/* ------------------------------------------------------------------
   CÓDIGO DE VESTIMENTA
   ------------------------------------------------------------------ */
.vestimenta{
  padding:92px 18px 86px;
  text-align:center;
  color:var(--tinta);
  background:linear-gradient(180deg,var(--marfil) 0%,var(--arena) 100%);
}
.atuendos{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:600px;margin:26px auto 0;align-items:start}
.atuendo{margin:0;display:flex;flex-direction:column;align-items:center}
.atuendo__nicho{
  position:relative;
  width:100%;
  max-width:250px;
  height:min(78vw,370px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:22px 10px 14px;
  overflow:hidden;
  border-radius:999px 999px 16px 16px;
  background:linear-gradient(180deg,#F7EEDA 0%,#E6D2A8 100%);
  box-shadow:inset 0 0 0 1px rgba(156,116,49,.6),inset 0 0 0 6px #F7EEDA,inset 0 0 0 7px rgba(156,116,49,.3);
}
.atuendo__nicho img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(40,28,10,.22))}
.atuendo figcaption{margin-top:12px;display:flex;flex-direction:column;align-items:center}
.atuendo figcaption b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;color:var(--tinta)}
.atuendo figcaption span{font-size:16px;line-height:1.45;color:var(--tinta-suave);text-wrap:balance}
.reservado{display:flex;align-items:center;justify-content:center;gap:16px;max-width:30em;margin:20px auto 0;padding:10px 10px;text-align:left}
.reservado p{margin:0;font-size:17px;color:var(--tinta-suave)}
.reservado b{color:var(--lapis)}
.reservado__muestra{
  flex:0 0 auto;
  width:54px;
  height:54px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#3A55B8 0%,#1F3388 45%,#101B4C 100%);
  box-shadow:0 0 0 3px var(--marfil),0 0 0 4px var(--oro),0 0 0 7px var(--marfil),0 0 0 8px rgba(156,116,49,.4);
}
.tonos{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 24px;list-style:none;margin:26px 0 0;padding:0}
.tonos li{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--caps);font-size:15px;letter-spacing:.1em;color:var(--tinta-suave)}
.tono{display:block;width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(17,26,69,.2),0 0 0 5px var(--arena),0 0 0 6px rgba(156,116,49,.5)}
.tono--oro{background:linear-gradient(135deg,#9C7431 0%,#EBCB86 45%,#FFF1CC 55%,#D8AF5D 100%)}

/* ------------------------------------------------------------------
   GALERÍA · las cámaras del templo
   ------------------------------------------------------------------ */
.galeria-sec{
  padding:92px 18px 70px;
  text-align:center;
  background:linear-gradient(180deg,var(--noche-2) 0%,var(--noche) 100%);
}
.galeria{
  display:flex;
  gap:20px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:16px 13vw 18px;
  margin:10px -18px 0;
  scrollbar-width:none;
}
.galeria::-webkit-scrollbar{display:none}
.lamina{position:relative;flex:0 0 74vw;max-width:340px;margin:0;scroll-snap-align:center;transition:opacity .45s ease}
.lamina__foto{
  position:relative;
  aspect-ratio:820/1098;
  overflow:hidden;
  border-radius:999px 999px 18px 18px;
  background:var(--lapis-osc);
  box-shadow:0 0 0 1px rgba(216,175,93,.65),0 0 0 6px var(--noche),0 0 0 7px rgba(216,175,93,.35);
}
.lamina__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.lamina figcaption{margin-top:16px;font-family:var(--caps);font-size:17px;letter-spacing:.12em;color:var(--oro-claro);transition:color .35s ease}
.puntos{display:flex;justify-content:center;margin-top:8px}
.punto{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.punto::before{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;transform:rotate(45deg);border:1px solid var(--oro);transition:background-color .35s ease}
.punto--activo::before{background:var(--oro)}

/* ------------------------------------------------------------------
   MESA DE REGALOS · lluvia de sobres
   ------------------------------------------------------------------ */
.regalos{
  padding:92px 18px 92px;
  text-align:center;
  color:var(--tinta);
  background:linear-gradient(180deg,var(--arena) 0%,var(--arena-2) 100%);
}
.regalos__intro{margin:0 auto;max-width:30em;color:var(--tinta-suave);text-wrap:balance}
.regalos__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;list-style:none;margin:34px auto 0;padding:0;max-width:820px}
.regalo{display:flex;flex-direction:column;align-items:center;text-align:center}
.regalo__nicho{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  max-width:190px;
  height:170px;
  padding:22px 12px 16px;
  overflow:hidden;
  border-radius:999px 999px 14px 14px;
  background:linear-gradient(180deg,#1E2E68 0%,#111A45 100%);
  box-shadow:inset 0 0 0 1px rgba(216,175,93,.7),inset 0 0 0 6px #16246A,inset 0 0 0 7px rgba(216,175,93,.35);
}
.regalo__nicho img{max-height:120px;width:auto;max-width:82%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.4));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.regalo b{display:block;margin-top:12px;font-family:var(--display);font-weight:400;font-size:23px;line-height:1.15;color:var(--tinta)}
.regalo small{display:block;margin-top:2px;font-size:15px;line-height:1.4;color:var(--tinta-suave)}
.sobres{
  position:relative;
  max-width:560px;
  margin:56px auto 0;
  padding:40px 24px 34px;
  overflow:hidden;
  border-radius:200px 200px 24px 24px;
  color:var(--texto);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(216,175,93,.22),rgba(216,175,93,0) 70%),
    linear-gradient(180deg,var(--lapis) 0%,var(--noche-2) 100%);
  box-shadow:inset 0 0 0 1px rgba(216,175,93,.7),inset 0 0 0 7px var(--lapis),inset 0 0 0 8px rgba(216,175,93,.3);
}
.sobres__lluvia{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sobre-cae{
  position:absolute;
  top:-60px;
  width:var(--t,34px);
  height:auto;
  opacity:.22;
  animation:caer var(--d,9s) linear var(--r,0s) infinite;
}
@keyframes caer{0%{transform:translate3d(0,0,0) rotate(var(--g0,-12deg))}100%{transform:translate3d(var(--x,20px),760px,0) rotate(var(--g1,18deg))}}
.sobres.pausa .sobre-cae{animation-play-state:paused}
.sobres > *:not(.sobres__lluvia){position:relative;z-index:1}
.sobres__ico{width:92px;height:auto;margin:0 auto 6px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))}
.sobres__titulo{margin:0;font-family:var(--display);font-weight:400;font-size:38px;line-height:1.1;color:var(--oro-vivo)}
.sobres__texto{margin:8px auto 0;max-width:24em;font-size:16.5px;color:var(--texto-suave);text-wrap:balance}
.sobres__qr{margin:22px auto 0;display:flex;flex-direction:column;align-items:center}
.sobres__qr img{width:190px;height:190px;padding:10px;border-radius:14px;background:var(--marfil);box-shadow:0 0 0 1px rgba(216,175,93,.6),0 0 0 6px var(--lapis),0 0 0 7px var(--oro)}
.sobres__qr figcaption{margin-top:16px;max-width:19em;font-size:15px;line-height:1.5;color:var(--texto-suave);text-wrap:balance}

/* ------------------------------------------------------------------
   CONFIRMAR · la visa de ingreso
   ------------------------------------------------------------------ */
.confirmar{
  padding:92px 16px 92px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%,rgba(43,168,158,.16),rgba(43,168,158,0) 70%),
    linear-gradient(180deg,var(--lapis-osc) 0%,var(--noche) 100%);
}
.confirmar__texto{margin:0 auto;max-width:28em;color:var(--texto-suave);text-wrap:balance}
.visa{
  position:relative;
  max-width:640px;
  margin:30px auto 26px;
  padding:22px 18px 18px;
  border-radius:22px;
  overflow:hidden;
  text-align:left;
  color:var(--tinta);
  background:linear-gradient(160deg,#FFFBF1 0%,#F2E6CA 100%);
  box-shadow:inset 0 0 0 1px rgba(156,116,49,.5),0 24px 50px rgba(0,0,0,.35);
}
.visa__fondo{
  /* guilloche de seguridad: ondas finas en turquesa y oro */
  position:absolute;
  inset:0;
  opacity:.5;
  pointer-events:none;
  background:
    repeating-radial-gradient(circle at 12% 110%,rgba(43,168,158,0) 0 9px,rgba(43,168,158,.22) 9px 10px),
    repeating-radial-gradient(circle at 92% -10%,rgba(216,175,93,0) 0 11px,rgba(216,175,93,.26) 11px 12px);
}
.visa__holograma{
  position:absolute;
  right:-6%;
  bottom:-8%;
  width:62%;
  max-width:360px;
  opacity:.1;
  pointer-events:none;
  filter:grayscale(.2);
}
.visa > *:not(.visa__fondo):not(.visa__holograma){position:relative;z-index:1}
.visa__cabeza{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;border-bottom:1px solid rgba(156,116,49,.45)}
.visa__pais{font-family:var(--caps);font-size:15px;letter-spacing:.18em;color:var(--bronce)}
.visa__tipo{font-family:var(--display);font-size:clamp(22px,6vw,28px);line-height:1.15;color:var(--tinta)}
.visa__cuerpo{display:grid;gap:14px;padding:14px 0 6px}
.visa__cartucho{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 2px}
.cartucho-mini--visa{min-width:170px;max-width:100%;min-height:64px;border-color:#9C7431;background:rgba(255,251,241,.6)}
.cartucho-mini--visa::after{background:#9C7431}
.cartucho-mini--visa .glifos{color:#6E4E18;font-size:28px;letter-spacing:.04em;word-break:break-all;white-space:normal;text-align:center}
.visa__cartucho-pie{font-family:var(--caps);font-size:14px;letter-spacing:.12em;color:var(--bronce)}
.visa__campos{display:grid;gap:10px}
.campo{display:grid;gap:2px}
.campo__rotulo{font-family:var(--caps);font-size:14.5px;letter-spacing:.14em;color:var(--bronce)}
.campo__valor{font-size:17px;font-weight:600;color:var(--tinta)}
.campo__entrada{
  width:100%;
  min-height:50px;
  padding:10px 14px;
  border:1px solid rgba(156,116,49,.7);
  border-radius:12px;
  background:rgba(255,255,255,.75);
  color:var(--tinta);
  font-family:var(--display);
  font-size:21px;
  transition:border-color .3s ease,background-color .3s ease;
}
.campo__entrada::placeholder{color:#6B624C;opacity:1}
.campo__entrada:focus{outline:none;border-color:var(--lapis);background:#FFFFFF}
.contador{display:flex;align-items:center;gap:14px}
.contador__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid var(--oro-osc);
  border-radius:50%;
  background:rgba(255,255,255,.6);
  color:var(--tinta);
  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(--tinta);color:var(--oro-vivo)}
.contador__n{min-width:6.5em;text-align:center;font-size:16px;color:var(--tinta-suave)}
.contador__n b{font-family:var(--display);font-weight:400;font-size:34px;line-height:1;color:var(--tinta)}
.visa__mrz{
  margin:14px 0 0;
  padding-top:10px;
  border-top:1px dashed rgba(156,116,49,.5);
  font-family:'Courier New',ui-monospace,monospace;
  font-size:clamp(10.5px,2.9vw,14px);
  line-height:1.5;
  letter-spacing:.06em;
  color:#4A4F6E;
  word-break:break-all;
}
.boton--wa{background:var(--oro);border-color:var(--oro);color:var(--tinta);min-height:54px}
.boton--wa:hover,.boton--wa:focus-visible{background:var(--oro-vivo);border-color:var(--oro-vivo);color:var(--tinta)}

/* ------------------------------------------------------------------
   MI CANCIÓN · el escarabajo empuja al sol
   ------------------------------------------------------------------ */
.cancion{
  padding:92px 18px 90px;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 44% at 50% 58%,rgba(216,175,93,.2),rgba(216,175,93,0) 70%),
    linear-gradient(180deg,var(--noche) 0%,var(--noche-2) 100%);
}
.cancion .titulo{margin-bottom:2px}
.cancion__artista{margin:0;font-family:var(--caps);font-size:19px;letter-spacing:.22em;color:var(--arena)}
.sol{
  position:relative;
  display:block;
  width:min(60vw,250px);
  aspect-ratio:1;
  margin:34px auto 0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sol__rayos{
  position:absolute;
  inset:-16%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,222,150,.0) 0deg 7deg,rgba(255,222,150,.28) 7deg 9deg);
  -webkit-mask:radial-gradient(circle,transparent 46%,#000 50%,#000 58%,transparent 72%);
  mask:radial-gradient(circle,transparent 46%,#000 50%,#000 58%,transparent 72%);
  opacity:.45;
  transition:opacity .6s ease;
}
.cancion.tocando .sol__rayos{opacity:1;animation:girar 24s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.sol__disco{
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%,#FFF6DA 0%,#F6D892 26%,#DDB05A 58%,#A87A30 100%);
  box-shadow:0 0 0 1px rgba(255,240,200,.6),0 0 40px rgba(255,200,110,.35);
  transition:box-shadow .6s ease;
}
.sol:hover .sol__disco,.sol:focus-visible .sol__disco,.cancion.tocando .sol__disco{box-shadow:0 0 0 1px rgba(255,240,200,.8),0 0 70px 10px rgba(255,200,110,.5)}
.sol__escarabajo{position:absolute;left:50%;bottom:-2%;width:76%;margin-left:-38%;height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.sol__reflejo{
  display:block;
  width:min(60vw,250px);
  height:46px;
  margin:4px auto 0;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,rgba(248,214,140,.45) 0%,rgba(248,214,140,.12) 45%,rgba(248,214,140,0) 72%);
  filter:url(#ondas);
}
.cancion__pista{margin:12px 0 0;font-size:16px;color:var(--texto-suave)}
.cancion__pista a{color:var(--oro-claro)}
.yt-oculto{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px}

/* ------------------------------------------------------------------
   CIERRE · el santuario con la foto en el cartucho
   ------------------------------------------------------------------ */
.cierre{background:var(--noche);text-align:center}
/* la escena guarda la proporción exacta del arte: la foto se coloca en % sobre el cartucho (sin recortes) */
.cierre__escena{position:relative;width:100%;aspect-ratio:1080/1920;margin:0 auto;overflow:hidden}
.cierre__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cierre__foto{
  position:absolute;
  left:33.8%;
  top:25.16%;
  width:32.4%;
  height:42.97%;
  -webkit-mask:url(assets/cartucho-mascara.png) center/100% 100% no-repeat;
  mask:url(assets/cartucho-mascara.png) center/100% 100% no-repeat;
}
.cierre__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.cierre__velo{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:34%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,16,48,0) 0%,rgba(10,16,48,.7) 55%,var(--noche) 100%);
}
.cierre__texto{position:relative;z-index:2;margin-top:-18vw;padding:0 20px 88px}
.cierre__titulo{
  margin:0 auto;
  max-width:11em;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(44px,12.6vw,76px);
  line-height:1.05;
  color:var(--oro-vivo);
  text-wrap:balance;
}
.cierre__frase{margin:14px auto 0;max-width:24em;font-size:18px;color:var(--texto);text-wrap:balance}
.cierre__firma{
  margin:18px 0 26px;
  font-family:var(--display);
  font-size:56px;
  line-height:1;
  color:var(--oro-vivo);
  background:var(--degradado-oro);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@media (orientation:landscape){
  .cierre__escena{aspect-ratio:1920/1080;width:min(100%,calc(90vh * 1920 / 1080))}
  .cierre__foto{left:43.9%;top:22.87%;width:12.24%;height:44.07%}
  .cierre__velo{height:30%}
  .cierre__texto{margin-top:-6vw}
}
.boton--claro{border-color:var(--oro)}

/* ------------------------------------------------------------------
   CRÉDITOS · pie común
   ------------------------------------------------------------------ */
.creditos{
  padding:56px 24px calc(var(--abajo) + 104px);
  text-align:center;
  background:#070B22;
  border-top:1px solid rgba(216,175,93,.3);
}
.creditos__pregunta{margin:0 0 18px;font-family:var(--display);font-size:clamp(25px,6.8vw,32px);line-height:1.2;color:var(--arena)}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 28px;
  border-radius:999px;
  background:var(--oro);
  color:var(--tinta);
  text-decoration:none;
  font-family:var(--caps);
  font-size:17px;
  letter-spacing:.06em;
  box-shadow:none;
  transition:background-color .35s ease,color .35s ease;
}
.creditos__wa svg{width:21px;height:21px}
.creditos__wa:hover,.creditos__wa:focus-visible{background:var(--oro-vivo);color:var(--tinta);box-shadow:none}
.creditos__correo{
  display:table;
  margin:20px auto 0;
  padding:12px 2px;
  color:var(--texto-suave);
  font-size:15px;
  text-decoration:none;
  background:linear-gradient(var(--oro),var(--oro)) no-repeat 0 calc(100% - 9px)/0 1px;
  transition:background-size .4s ease,color .35s ease;
}
.creditos__correo:hover,.creditos__correo:focus-visible{background-size:100% 1px;color:var(--oro-vivo)}
.creditos__extras{display:none}
.creditos__marca{margin:28px auto 0;padding-top:20px;max-width:420px;border-top:1px solid rgba(216,175,93,.28);display:flex;flex-direction:column;gap:4px}
.creditos__logo{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.06em;color:var(--oro-vivo)}
.creditos__lema{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--texto-suave)}

/* celulares angostos */
@media (max-width:380px){
  .portada__fecha{flex-direction:column;gap:0;padding:8px 22px 9px;border-radius:22px}
  .portada__sep{display:none}
  .boton,.creditos__wa{padding:0 20px}
  .portada__pista{padding:0 20px 0 16px;font-size:16px}
  .torre{min-height:208px;padding:28px 10px 24px}
  .torre__rol{font-size:14px;letter-spacing:.1em}
}

/* ------------------------------------------------------------------
   ESCRITORIO
   ------------------------------------------------------------------ */
@media (min-width:768px){
  body{font-size:18px}
  .titulo{font-size:clamp(56px,6vw,84px)}
  .rotulo{font-size:18px}

  .ariana{padding:124px 48px 104px}
  .ariana__dentro{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:80px;align-items:center;justify-items:start}
  .retrato{width:340px}
  .ariana__texto{text-align:left}
  .ariana__texto .rotulo,.ariana__texto .friso{text-align:left}
  .ariana__nombre{font-size:clamp(110px,12vw,176px)}
  .ariana__frase{margin-left:0}

  .papiro-sec{padding:104px 40px 96px}
  .papiro{max-width:760px;padding:84px 86px 74px}
  .papiro__texto{font-size:25px}

  .familia{padding:104px 40px 100px}
  .porticos{grid-template-columns:1fr minmax(0,300px) 1fr;grid-template-areas:"emblema emblema emblema" "izq centro der" "base base base";gap:26px 30px}
  .torre{min-height:280px}
  .torre__nombre{font-size:28px}
  .porticos__centro{align-self:center}
  .porticos__base{max-width:520px;margin:0 auto;width:100%}

  .fecha{width:470px;padding:36px 24px 36px}
  .fecha__num,.fecha__reflejo{font-size:200px}
  .fecha__mes{font-size:38px;white-space:nowrap}
  .cuenta__dato{min-width:108px}
  .cuenta__n{font-size:58px}

  .lugares{padding:104px 40px 100px}
  .lugares__lista{grid-template-columns:1fr 1fr;gap:30px}
  .lugar{padding:44px 34px 38px}

  .itinerario{padding:104px 40px 100px}
  .estelas{max-width:1080px;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 22px}
  .estelas::before{left:6%;right:6%;top:96px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,rgba(121,213,202,0),rgba(121,213,202,.6) 8%,rgba(121,213,202,.6) 92%,rgba(121,213,202,0))}
  .estelas::after{content:'';position:absolute;left:6%;right:6%;top:calc(96px + 50% + 20px);height:2px;background:linear-gradient(90deg,rgba(121,213,202,0),rgba(121,213,202,.6) 8%,rgba(121,213,202,.6) 92%,rgba(121,213,202,0));display:none}
  .estela{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;align-content:start;text-align:center;padding:0}
  .estela__ico{grid-row:auto;width:120px;height:140px;border-radius:60px 60px 14px 14px;margin-bottom:14px}
  .estela__ico img{max-width:80px;max-height:94px}
  .estela__glifo{left:calc(50% - 72px);top:-4px}
  .estela__que{font-size:26px}

  .vestimenta{padding:104px 40px 96px}
  .atuendos{gap:40px;max-width:640px}
  .atuendo__nicho{height:400px}

  .galeria-sec{padding:104px 40px 90px}
  .galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 34px;overflow:visible;padding:14px 8px 0;margin:26px auto 0;max-width:1040px}
  .lamina{flex:none;max-width:none}
  .puntos{display:none}
  /* el cursor apaga a las otras y agranda la FOTO (la caja nunca se mueve) */
  .galeria:has(.lamina:hover) .lamina{opacity:.45}
  .galeria:has(.lamina:hover) .lamina:hover{opacity:1}
  .lamina:hover .lamina__foto img{transform:scale(1.06)}
  .lamina:hover figcaption{color:var(--oro-vivo)}

  .regalos{padding:104px 40px 100px}
  .regalos__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 26px}
  .regalo__nicho{max-width:210px;height:190px}
  .regalo:hover .regalo__nicho img{transform:scale(1.07)}
  .sobres{padding:48px 44px 42px}

  .confirmar{padding:104px 40px 100px}
  .visa{padding:28px 30px 22px}
  .visa__cuerpo{grid-template-columns:220px 1fr;gap:26px;align-items:center}

  .cancion{padding:104px 40px 100px}

  .cierre__texto{padding-bottom:100px}
}
@media (min-width:1100px){
  .ariana__dentro{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:110px}
  .retrato{width:380px}
}

/* ------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .mota,.portada__pista::before,.pista__mano,.retrato__brillo,.estrellas,.sobre-cae,.musica-flotante__ondas i,.musica-flotante__sol,.sol__rayos{animation:none!important}
  .brillo-borde::after{animation:none}
  .fecha__reflejo,.sol__reflejo{filter:none}
}