/* El álbum: luciérnagas, papel y recuerdos. Identidad de Lourdes & Yoel. */
[hidden]{display:none!important}
:root{--azul:#5E92B0;--salvia-texto:#5B6B57}
html{scroll-behavior:smooth;scrollbar-gutter:stable;background:#FAF7F1}
html:has(body.album-entrando){background:#102A39}
body{position:relative;isolation:isolate;padding-bottom:0;background:#FAF7F1}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 84% 13%,rgba(169,203,217,.16),transparent 48%),radial-gradient(ellipse at 5% 58%,rgba(233,214,166,.13),transparent 42%)}
:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.destellos{position:absolute;inset:0 0 auto;height:470px;overflow:hidden;pointer-events:none;z-index:-1}
.destellos i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--oro);box-shadow:0 0 10px rgba(201,162,78,.3);opacity:.35;animation:destello 7s ease-in-out infinite}
.destellos i:nth-child(1){top:100px;left:12%}.destellos i:nth-child(2){top:270px;left:43%;animation-delay:-3s}.destellos i:nth-child(3){top:74px;left:71%;animation-delay:-5s}.destellos i:nth-child(4){top:342px;left:87%;animation-delay:-1s}.destellos i:nth-child(5){top:211px;left:95%;animation-delay:-4s}
@keyframes destello{0%,100%{opacity:.12;transform:translateY(0)}50%{opacity:.65;transform:translateY(-7px)}}
.volver{position:absolute;top:22px;left:max(20px,calc((100vw - 1120px)/2));padding:8px 0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;font-size:14px;color:var(--marino-texto)}
@media(hover:hover){.volver:hover{background:transparent;color:var(--oro)}}
.cab{max-width:1120px;margin:0 auto;padding:82px 26px 40px;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:24px;text-align:left}
.cab__texto{position:relative;padding-left:24px;border-left:1px solid rgba(176,138,78,.55)}
.cab__eyebrow{margin:0 0 18px;font-size:12px;letter-spacing:.22em;line-height:1.7;color:var(--oro)}
.cab__nombres{font-size:clamp(48px,5.7vw,72px);line-height:1.05;font-weight:400}
.cab__nombres span{display:block;margin-top:4px}
.cab__nombres:focus{outline:none}
.cab__intro{max-width:350px;font-size:19px;line-height:1.65;color:var(--marino-texto);margin-top:22px}
.cab__fecha{font-size:12px;letter-spacing:.16em;color:var(--oro);margin-top:22px;line-height:1.8}
.cab__arte{position:relative;min-width:0;min-height:225px;display:grid;place-items:center;isolation:isolate}
.cab__arte img{display:block;width:480px;max-width:100%;height:auto;aspect-ratio:5/1}
.cab__arte::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 50%,rgba(233,214,166,.32),transparent 62%)}
.cab__arte::after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(176,138,78,.45),transparent)}
main.album-layout{max-width:1120px;padding:0 26px 48px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:52px;align-items:start}
main.album-layout[data-fase="antes"],main.album-layout[data-fase="error"]{display:block}
.panel{max-width:none;margin:0;padding:28px;text-align:left;background:rgba(255,255,255,.6);border:1px solid rgba(176,138,78,.35);border-radius:3px;box-shadow:0 20px 50px -40px rgba(33,63,85,.25);position:relative}
.panel::before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border:1px solid rgba(176,138,78,.1);pointer-events:none}
.panel--mensaje{max-width:550px;margin:0 auto;text-align:center;padding:36px}
.panel__icono{width:39px;height:39px;display:block;margin-bottom:18px;color:var(--oro)}
.panel--mensaje .panel__icono{margin:0 auto 18px}
.panel h2{font-family:var(--f-disp);font-weight:400;font-size:35px;line-height:1.12;margin-bottom:14px}
.panel p{font-size:17px;line-height:1.6}
.pasos{display:flex;gap:18px;font-family:var(--f-tit);font-size:13px;color:var(--marino-texto);margin:22px 0}
.pasos span{display:flex;align-items:center;gap:7px}
.pasos b{display:inline-flex;justify-content:center;align-items:center;border:1px solid rgba(176,138,78,.45);border-radius:50%;width:21px;height:21px;color:var(--oro);font-size:12px;font-weight:500}
.campo-label{display:block;font-family:var(--f-tit);font-size:15px;font-weight:600;margin-top:24px;color:var(--marino)}
.campo{margin:7px 0 16px;padding:13px 14px;background:var(--crema);border-radius:2px;font-size:17px}
.campo[aria-invalid="true"]{border-color:#9E3838}
.campo-error{color:#9E3838!important;font-size:15px!important;margin:-5px 0 16px}
.btn-subir{border-radius:2px;padding:16px 12px;letter-spacing:.1em;font-size:13px;min-height:54px}
@media(hover:hover){.btn-subir:hover{background:#2E526B}}
.panel .nota{font-size:14.5px;color:var(--salvia-texto);line-height:1.6;margin-top:12px}
.agradecimiento{font-style:italic;color:var(--marino-texto);border-top:1px solid rgba(176,138,78,.35);padding-top:14px;margin-top:20px;font-size:16px!important}
#cola{margin-top:20px}#cola li{flex-wrap:wrap;padding:12px 0;font-size:15px}
#cola li .nombre{flex-basis:100%;font-size:14.5px}#cola li .estado{font-size:14px;color:var(--salvia-texto)}
.barra{flex:1 1 auto;max-width:150px;height:4px;border-radius:0}.barra i{border-radius:0}
.err{color:#9E3838!important}
.recuerdos{min-width:0;padding-top:10px}
.recuerdos__eyebrow{color:var(--oro);font-family:var(--f-tit);letter-spacing:.2em;font-size:12px;text-transform:uppercase;margin-bottom:10px}
.recuerdos__titulo{font-family:var(--f-disp);font-weight:400;font-size:40px;line-height:1.1;margin-bottom:8px}
#contador{font-family:var(--f-cue);font-weight:400;text-transform:none;font-size:17px;letter-spacing:0;color:var(--marino-texto);text-align:left;margin:14px 0 20px}
#nota-mosaico{text-align:left;color:var(--salvia-texto);margin-bottom:20px;font-size:14px}
#mosaico{column-width:180px;column-gap:20px;padding:0;max-width:none}
.pieza{border-radius:2px;margin-bottom:20px;padding:7px 7px 31px;background:#FFFDFA;border:1px solid rgba(176,138,78,.18);box-shadow:0 13px 27px -23px rgba(33,63,85,.55)}
.pieza img{border-radius:1px}
.pieza .autor{bottom:0;padding:8px 8px 7px;background:none;color:var(--marino-texto);font-style:italic;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pieza .play{bottom:31px}
.pieza--gen{aspect-ratio:4/5;background:linear-gradient(160deg,#213F55,#2E4C66);color:var(--oro-claro);padding:24px 12px;border-color:transparent}
.pieza--gen small{font-size:14px;color:var(--oro-claro)}
@media(hover:hover){.pieza:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 24px 40px -28px rgba(33,63,85,.4)}}
.centrado{padding:36px 26px;text-align:center;background:rgba(255,255,255,.3);border:1px dashed rgba(176,138,78,.35);border-radius:3px;font-style:normal;font-size:17px;line-height:1.7;margin-top:5px}
.centrado svg{width:38px;height:38px;display:block;margin:0 auto 16px;color:var(--oro)}
.centrado strong{display:block;font-family:var(--f-tit);font-size:23px;font-weight:500;color:var(--marino);margin-bottom:8px}
footer{margin:24px auto 0;padding:30px 20px 36px;border-top:1px solid rgba(176,138,78,.2);color:var(--marino-texto);font-size:15px;line-height:1.8}
.footer__firma{font-family:var(--f-disp);font-size:28px;color:var(--marino);display:block;margin-bottom:9px}
footer a{color:var(--marino-texto);border-bottom:1px solid rgba(176,138,78,.4)}
#visor .media img,#visor .media video{border-radius:2px}
#visor .pie{font-size:16px;bottom:max(22px,env(safe-area-inset-bottom))}
.v-btn{border-radius:2px;background:rgba(12,26,40,.78)}
@media(min-width:900px){.album-comparte{position:sticky;top:26px}}
@media(max-width:850px){
  .cab{max-width:600px;display:flex;flex-direction:column-reverse;gap:20px;padding:66px 24px 34px;text-align:center}
  .cab__arte{width:min(100%,410px);min-height:120px}.cab__arte img{width:350px}.cab__arte::after{display:none}
  .cab__texto{border:0;padding-left:0}.cab__eyebrow{font-size:11px;margin-bottom:12px;letter-spacing:.18em}
  .cab__nombres{font-size:48px}.cab__nombres span{display:block;margin:4px 0 0}.cab__intro{font-size:17px;line-height:1.6;margin:16px auto 0;max-width:340px}
  .cab__fecha{margin-top:14px;font-size:11px}
  main.album-layout{max-width:600px;display:block;padding:0 20px 36px}
  .recuerdos{margin-top:42px}.recuerdos__titulo{font-size:36px}
  .volver{top:14px;left:20px;font-size:13px}
  .panel{padding:25px}.panel--mensaje{padding:30px 24px}
  #mosaico{column-width:auto;column-count:2;column-gap:14px}.pieza{margin-bottom:14px;padding:5px 5px 30px}
  #v-prev{left:5px}#v-next{right:5px}.v-btn{width:42px;height:42px}
}
@media(max-width:370px){.cab__nombres{font-size:42px}.panel{padding:22px}.pasos{gap:12px}.btn-subir{font-size:12px}.pieza .autor{font-size:12px}}
/* La noche se llena de luciérnagas; sus luces forman nuestro logo de nombres. */
.entrada-album{position:fixed;inset:0;width:100vw;z-index:410;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.entrada-album__papel{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 43%,#24495C 0,#122F40 50%,#071C2A 100%);transition:opacity .8s ease}
.entrada-album__luz{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 46%,rgba(233,214,166,.1),transparent 48%);transition:opacity .8s ease}
.entrada-album__luces{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .45s ease}
.entrada-album__contenido{width:100%;position:relative;display:grid;place-items:center;z-index:1}
.entrada-album__emblema{position:relative;width:min(86vw,720px,150vh);width:min(86vw,720px,150svh);aspect-ratio:5/1;transform-origin:0 0;will-change:transform}
.entrada-album__logo{width:100%;height:auto;display:block;opacity:0;transition:opacity .75s ease}
.entrada-album__silueta{position:absolute;inset:0;background:#E9D6A6;-webkit-mask:url('assets/logo-nombres-fino.svg?v=1') center/contain no-repeat;mask:url('assets/logo-nombres-fino.svg?v=1') center/contain no-repeat;filter:drop-shadow(0 0 2px rgba(244,204,106,.18));opacity:0}
.entrada-album__entrar{position:fixed;bottom:22px;right:24px;display:inline-flex;gap:14px;align-items:center;padding:10px 14px;border:1px solid rgba(233,214,166,.5);border-radius:2px;background:rgba(7,28,42,.7);color:#E9D6A6;font-family:var(--f-tit);font-size:14px;letter-spacing:.07em;cursor:pointer;min-height:44px;opacity:0;pointer-events:none}
.entrada-album__entrar:focus-visible{opacity:1;pointer-events:auto}
.entrada-album__entrar span{color:#E9D6A6;font-size:20px}
.entrada-album--acomodando .entrada-album__emblema{transition:transform .8s cubic-bezier(.22,.72,.16,1)}
.entrada-album--acomodando .entrada-album__papel,.entrada-album--acomodando .entrada-album__luz,.entrada-album--acomodando .entrada-album__luces{opacity:0}
.entrada-album--acomodando .entrada-album__silueta{opacity:0!important;transition:opacity .75s ease}
.entrada-album--acomodando .entrada-album__logo{opacity:1}
.entrada-album--acomodando .entrada-album__entrar{opacity:0;pointer-events:none}
.album-entrando .cab__arte,.album-entrando .cab__texto,.album-entrando main.album-layout,.album-entrando footer,.album-entrando .volver{visibility:hidden}
/* Aparecen por orden y permanecen: título, bienvenida, formulario y recuerdos. */
@keyframes albumRevela{from{opacity:0;transform:translateY(16px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
.album-revelando .cab__eyebrow{animation:albumRevela .65s ease .04s both}
.album-revelando .cab__nombres{animation:albumRevela .85s cubic-bezier(.2,.7,.2,1) .12s both}
.album-revelando .cab__intro{animation:albumRevela .85s ease .3s both}
.album-revelando .cab__fecha{animation:albumRevela .75s ease .4s both}
.album-revelando .album-comparte{animation:albumRevela .85s cubic-bezier(.2,.7,.2,1) .5s both}
.album-revelando .recuerdos{animation:albumRevela .95s cubic-bezier(.2,.7,.2,1) .65s both}
.album-revelando .volver{animation:albumRevela .65s ease .55s both}
.album-revelando footer{animation:albumRevela .85s ease .8s both}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.destellos{display:none}.pieza{animation:none;opacity:1}.pieza,.btn-subir,.barra i{transition:none}.entrada-album{display:none}.album-revelando .cab__eyebrow,.album-revelando .cab__nombres,.album-revelando .cab__intro,.album-revelando .cab__fecha,.album-revelando .album-comparte,.album-revelando .recuerdos,.album-revelando .volver,.album-revelando footer{animation:none;opacity:1;transform:none;filter:none}}