/* Base común de la colección Lacre. Cada diseño define sus variables y su propio CSS encima. */
:root{
  --fondo:#fbf7f0; --tinta:#2a2622; --suave:#6b5a44; --acento:#1f3f86; --acento2:#b4532a; --oro:#c9a45c; --papel:#fffdf8; --oscuro:#16130f; --claro:#fff;
  --f-script:'Pinyon Script',cursive; --f-titulo:Georgia,serif; --f-texto:Georgia,serif; --f-rot:'Montserrat',Arial,sans-serif;
  --radio:22px; --ease:cubic-bezier(.2,.75,.15,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--fondo);color:var(--tinta);font-family:var(--f-texto);font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.cerrado{overflow:hidden}
img{max-width:100%;display:block}
p,h1,h2,h3{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.envol{padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px));max-width:1180px;margin:0 auto}
.sec{position:relative;padding-block:100px;overflow:hidden}
.rot{font:600 12px/1.6 var(--f-rot);letter-spacing:.38em;text-transform:uppercase;color:var(--acento)}
.script{font-family:var(--f-script);font-weight:400;line-height:1.05;color:var(--acento)}
.tit{font-size:clamp(52px,8.5vw,100px);text-align:center}
.cab{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:56px}
.cab .sub{font:italic 400 clamp(19px,2.2vw,23px)/1.5 var(--f-texto);color:var(--suave);max-width:46ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  font:600 12px var(--f-rot);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;background:var(--acento);color:var(--claro);transition:transform .2s var(--ease),box-shadow .25s,filter .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18);filter:brightness(1.08)}
.btn:active{transform:scale(.96)}
.btn.linea{background:transparent;color:var(--acento);box-shadow:inset 0 0 0 2px var(--acento)}

/* intro */
#intro{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity 1s ease,visibility 1s}
#intro.fuera{opacity:0;visibility:hidden;pointer-events:none}
.intro-pista{font:600 11px var(--f-rot);letter-spacing:.38em;text-transform:uppercase;animation:pista 1.6s ease-in-out infinite}
@keyframes pista{50%{opacity:.35}}
#intro.abierto .intro-pista{opacity:0;animation:none;transition:opacity .3s}

/* música */
#musica{position:fixed;z-index:60;top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));height:46px;padding:0 16px 0 12px;border-radius:23px;border:1px solid rgba(255,255,255,.3);
  cursor:pointer;background:rgba(15,15,20,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;display:flex;align-items:center;gap:10px;font:600 11px var(--f-rot);letter-spacing:.06em;max-width:calc(100vw - 28px)}
#musica .disco{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#fff 0 3px,#222 4px 6px,#111 7px 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);flex:none}
#musica.sonando .disco{animation:gira 2.4s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
#musica .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#avance{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--oro);transform-origin:0 50%;transform:scaleX(0);z-index:61}

/* portada */
.portada{position:relative;min-height:100svh;overflow:hidden}
.portada .fondo{position:absolute;inset:-8% 0;background-size:cover;background-position:center 30%;will-change:transform}
#efecto{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.listo .entra{animation:entra 1.1s var(--ease) both}
.entra{opacity:0}
@keyframes entra{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.letras .palabra{display:inline-block;white-space:nowrap;opacity:1;transform:none;filter:none;animation:none!important}
.letras span{display:inline-block;opacity:0;transform:translateY(.5em) rotate(8deg);filter:blur(6px)}
.listo .letras span{animation:letra 1s var(--ease) forwards}
@keyframes letra{to{opacity:1;transform:none;filter:blur(0)}}

/* historia */
.hitos{display:grid;gap:70px}
.hito{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.hito:nth-child(even) .h-foto{order:2}
.h-foto{border-radius:var(--radio);overflow:hidden;aspect-ratio:4/5;box-shadow:0 26px 60px rgba(0,0,0,.16)}
.h-foto img{width:100%;height:116%;object-fit:cover;will-change:transform}
.h-txt{display:flex;flex-direction:column;gap:10px}
.anio{font:400 clamp(56px,7vw,92px)/1 var(--f-titulo);color:transparent;-webkit-text-stroke:1.5px var(--oro)}
.h-txt h3{font:400 clamp(38px,4.4vw,56px)/1.05 var(--f-script);color:var(--acento)}
.h-txt p{color:var(--suave);max-width:38ch}

/* cuenta */
.cuenta{display:grid;grid-template-columns:repeat(4,minmax(0,160px));justify-content:center;gap:clamp(8px,2.4vw,26px)}
.c-caja{display:flex;flex-direction:column;align-items:center;gap:10px}
.c-num{width:100%;aspect-ratio:1/1.05;display:flex;align-items:center;justify-content:center;border-radius:16px;font:600 clamp(34px,7.5vw,84px)/1 var(--f-titulo);font-variant-numeric:tabular-nums}
.c-num.gira{animation:voltea .5s ease-in}
@keyframes voltea{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
.c-lbl{font:600 11px var(--f-rot);letter-spacing:.26em;text-transform:uppercase}
.cal-w{text-align:center;margin-top:36px}

/* galería: tipos */
#galeria button{padding:0;border:0;cursor:zoom-in;background:#ddd;position:relative;overflow:hidden;display:block;width:100%}
#galeria img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
#galeria button:hover img{transform:scale(1.07)}
.g-masonry{columns:3 280px;column-gap:16px}
.g-masonry button{margin:0 0 16px;border-radius:14px;break-inside:avoid}
.g-masonry img{height:auto}
.g-carrusel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:thin}
#galeria.g-carrusel button{flex:0 0 min(70vw,420px);width:auto;aspect-ratio:3/4;scroll-snap-align:center;border-radius:20px}
.g-polaroid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
#galeria.g-polaroid button{background:#fff;padding:12px 12px 46px;box-shadow:0 14px 30px rgba(0,0,0,.18);transition:transform .5s var(--ease)}
.g-polaroid button:nth-child(odd){rotate:-3deg}.g-polaroid button:nth-child(even){rotate:2.5deg}
.g-polaroid button:hover{rotate:0deg;scale:1.05;z-index:2}
.g-polaroid img{aspect-ratio:1;height:auto}
.g-cuadros{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.g-cuadros button:nth-child(1){grid-column:span 2;grid-row:span 2}
.g-cuadros button:nth-child(6){grid-column:span 2}
.g-tira{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.g-tira .pista{display:flex;gap:16px;width:max-content;animation:tira 40s linear infinite}
.g-tira:hover .pista{animation-play-state:paused}
#galeria.g-tira button{width:300px;aspect-ratio:3/4;flex:none}
@keyframes tira{to{transform:translateX(-50%)}}
#visor{position:fixed;inset:0;z-index:90;background:rgba(8,8,12,.94);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
#visor.abierto{opacity:1;pointer-events:auto}
#visor img{max-width:min(92vw,1100px);max-height:84vh;border-radius:10px;transform:scale(.92);transition:transform .45s var(--ease)}
#visor.abierto img{transform:none}
#visor button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:54px;height:54px;border-radius:50%;cursor:pointer;font:400 30px/1 Georgia,serif}
#v-cerrar{top:calc(16px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
#v-ant{left:max(14px,env(safe-area-inset-left,0px));top:50%;margin-top:-27px}
#v-sig{right:max(14px,env(safe-area-inset-right,0px));top:50%;margin-top:-27px}
#v-num{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font:600 12px var(--f-rot);letter-spacing:.3em}

/* itinerario */
.eventos{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.evento{background:var(--papel);border-radius:var(--radio);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.09);display:flex;flex-direction:column;text-align:center}
.evento .e-foto{height:250px;overflow:hidden}
.evento .e-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.evento:hover .e-foto img{transform:scale(1.07)}
.evento .e-cuerpo{padding:30px 26px 34px;display:flex;flex-direction:column;align-items:center;gap:6px}
.e-t{font:600 12px var(--f-rot);letter-spacing:.3em;text-transform:uppercase;color:var(--acento2)}
.e-h{font:600 46px/1.05 var(--f-titulo)}
.e-l{font-style:italic;color:var(--suave);margin-bottom:14px}

/* vestimenta y regalos */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.panel{background:var(--papel);border-radius:var(--radio);padding:46px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.07)}
.panel .script{font-size:clamp(44px,5vw,62px)}
.paleta{display:flex;gap:10px}
.paleta i{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 3px var(--papel),0 0 0 4px rgba(0,0,0,.12)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.chip{border:2px solid var(--acento);border-radius:999px;padding:11px 18px;font:600 11px var(--f-rot);letter-spacing:.1em;color:var(--acento);background:transparent;cursor:pointer;transition:background .25s,color .25s}
.chip[aria-pressed="true"]{background:var(--acento);color:var(--claro)}
#detalle-regalo{font-style:italic;color:var(--suave);min-height:3em;transition:opacity .3s}
.cuenta-n{font:600 15px var(--f-rot);font-style:normal;color:var(--tinta);user-select:all}

/* pase */
.pase-g{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:980px;margin:0 auto}
.pase-foto{aspect-ratio:4/5;border-radius:var(--radio);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.pase-foto img{width:100%;height:100%;object-fit:cover}
.tarjeta{background:var(--papel);color:var(--tinta);border-radius:var(--radio);padding:40px 26px 32px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.25)}
.familia{font-size:clamp(34px,9vw,64px);white-space:nowrap;max-width:100%}
.lugares{font:600 clamp(16px,2vw,21px) var(--f-texto);letter-spacing:.08em;white-space:nowrap}
#qr{background:#fff;padding:12px;border-radius:12px;box-shadow:0 0 0 2px var(--acento);width:190px;height:190px}
#qr img,#qr canvas{width:166px!important;height:166px!important}
#confirmar{background:var(--acento2)}
#confirmar.ok{background:#2f8a57}
#no-voy{font:600 12px var(--f-rot);letter-spacing:.1em;color:var(--suave);background:none;border:0;text-decoration:underline;cursor:pointer;padding:10px}
#gracias{font-style:italic;color:var(--acento);min-height:1.5em}

.pie{padding-block:60px 64px;text-align:center;font:500 12px/1.8 var(--f-rot);letter-spacing:.04em}
.pie .script{font-size:clamp(40px,9vw,66px);margin-bottom:12px;text-wrap:balance}
.pie a.mas{display:inline-block;margin-top:18px}
.creditos{opacity:.65;max-width:780px;margin:14px auto 0}

/* apariciones */
.js .ap{opacity:0;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .ap.sube{transform:translateY(50px)}
.js .ap.izq{transform:translateX(-80px)}
.js .ap.der{transform:translateX(80px)}
.js .ap.zoom{transform:scale(.86)}
.js .ap.gira3d{transform:perspective(900px) rotateY(-35deg)}
.js .ap.visto{opacity:1;transform:none}
#confeti{position:fixed;inset:0;pointer-events:none;z-index:95;width:100%;height:100%}

@media (max-width:820px){
  .sec{padding-block:78px}
  .cab{margin-bottom:40px}
  .hito{grid-template-columns:1fr;gap:24px}
  .hito:nth-child(even) .h-foto{order:0}
  .eventos,.dos,.pase-g{grid-template-columns:1fr}
  .g-masonry{columns:2 140px;column-gap:10px}
  .g-masonry button{margin-bottom:10px;border-radius:10px}
  .g-polaroid{grid-template-columns:repeat(2,1fr);gap:16px}
  .g-cuadros{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:8px}
  .g-cuadros button:nth-child(6){grid-column:span 1}
  #galeria.g-tira button{width:220px}
  .pase-foto{aspect-ratio:16/11}
  .js .ap.izq,.js .ap.der{transform:translateY(46px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .ap,.entra,.letras span{opacity:1!important;transform:none!important;filter:none!important}
}