/* Invitaciones web: estilo común a todas las plantillas.
   Cada plantilla define sus colores, tipografías, forma de fotos y portada
   en su propio <style>, que se carga después y puede pisar estas reglas. */
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{background:var(--fondo);color:var(--tinta);font-family:var(--texto);line-height:1.6;text-align:center}
section{padding:3.5rem 1.5rem}
.hero{padding:3.5rem 1.5rem 2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3.5rem,16vw,9rem);line-height:.95;letter-spacing:-.02em}
.hero p{margin-top:1rem;font-size:1.15rem}
.hero h1,.hero .y,.hero p{animation:entra 1.2s ease both}
.hero .y{animation-delay:.25s}
.hero p{animation-delay:.9s}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.bloque{background:var(--suave)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,6vw,2.6rem);margin-bottom:.75rem}
.bloque p,.confirmar p{max-width:34ch;margin:0 auto .4rem}
.btn{display:inline-block;background:none;font:inherit;font-weight:500;cursor:pointer;margin-top:1.5rem;padding:.85rem 1.8rem;border:1.5px solid var(--acento);border-radius:999px;color:var(--acento);text-decoration:none;transition:background .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--acento);color:var(--fondo)}
a:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

.hero #para{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--acento);margin-top:.5rem}
.portada{width:min(80vw,360px);aspect-ratio:var(--proporcion);outline:1px solid var(--acento);outline-offset:8px;object-fit:cover;border-radius:var(--forma);margin-top:2.25rem;background:var(--suave);animation:entra 1.2s .9s ease both}
.rama-hero{width:130px;height:44px;color:var(--acento);animation:entra 1.2s ease both}
.div{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.5rem}
.div::before,.div::after{content:"";height:1px;width:min(22vw,120px);background:var(--acento);opacity:.5}
.div svg{width:90px;height:30px;color:var(--acento)}
.galeria{max-width:960px;margin:0 auto;padding:1rem 0 2.5rem}
.pista{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 1.5rem}
.pista::-webkit-scrollbar{display:none}
.pista img{flex:0 0 min(78%,340px);min-width:0;aspect-ratio:var(--proporcion);object-fit:cover;scroll-snap-align:center;border-radius:var(--forma);background:var(--suave)}
.flecha{width:44px;height:44px;border:1.5px solid var(--acento);border-radius:50%;background:var(--fondo);color:var(--acento);font-size:1.2rem;cursor:pointer}
.flecha:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.nav{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1.25rem}
.puntos{display:flex;gap:.5rem}
.puntos button{width:9px;height:9px;padding:0;border:1px solid var(--acento);border-radius:50%;background:none;cursor:pointer}
.puntos button[aria-current="true"]{background:var(--acento)}
.crono{list-style:none;padding:0;max-width:22rem;margin:0 auto}
.crono li{display:grid;grid-template-columns:1fr 1.6fr;gap:1rem;padding:.3rem 0}
.crono b,.cuenta b{font-variant-numeric:lining-nums}
.crono b{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--acento);text-align:right}
.crono span{text-align:left}
.agendar summary{list-style:none;cursor:pointer}
.agendar summary::-webkit-details-marker{display:none}
.agendar[open] summary{background:var(--acento);color:var(--fondo)}
.agendar a{display:inline-block;margin:1rem .75rem 0;color:var(--acento);font-weight:500}
.cuenta{display:flex;justify-content:center;gap:.6rem;margin-bottom:1.5rem}
.cuenta div{min-width:4.2rem;padding:.6rem .3rem;border:1px solid var(--acento);border-radius:12px;background:var(--fondo)}
.cuenta b{display:block;font-family:var(--display);font-weight:400;font-size:1.9rem;line-height:1.1;color:var(--acento)}
.cuenta span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.rev{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.rev.ver{opacity:1;transform:none}
.musica{position:fixed;right:1rem;bottom:1rem;width:48px;height:48px;border:1.5px solid var(--acento);border-radius:50%;background:var(--fondo);color:var(--acento);font-size:1.3rem;cursor:pointer;z-index:5}
.musica[aria-pressed="true"]{background:var(--acento);color:var(--fondo)}
.musica{display:grid;place-items:center;box-shadow:0 6px 16px rgb(0 0 0/.15)}
.musica .ondas{display:none;gap:3px;align-items:flex-end;height:18px}
.musica .ondas i{width:3px;height:100%;background:currentColor;border-radius:2px;animation:onda 1s ease-in-out infinite}
.musica .ondas i:nth-child(2){animation-delay:.2s}.musica .ondas i:nth-child(3){animation-delay:.4s}
.musica[aria-pressed="true"] .nota{display:none}.musica[aria-pressed="true"] .ondas{display:flex}
@keyframes onda{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.musica-tip{position:fixed;right:4.4rem;bottom:1.45rem;z-index:5;margin:0;background:var(--fondo);color:var(--tinta);border:1.5px solid var(--acento);border-radius:999px;padding:.45rem .9rem;font-size:.85rem;box-shadow:0 6px 16px rgb(0 0 0/.12);cursor:pointer;animation:entraTip .4s ease}
body.con-barra .musica-tip{bottom:5.05rem}
@keyframes entraTip{from{opacity:0;transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.musica .ondas i,.musica-tip{animation:none}}
.firma{padding:2rem 1.5rem 2.5rem;font-size:.85rem}
.firma a{color:inherit}
.nota{font-style:italic}
#sec-crono:not([hidden])+#sec-vest{padding-top:0}
.frase p{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,5vw,1.7rem);line-height:1.4;max-width:26ch;margin:0 auto}
.frase .autor{font-family:var(--texto);font-style:normal;font-size:.95rem;color:var(--acento);margin-top:1rem}
.lugares{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem 3rem}
.lugares h3{font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--acento)}
.dato{display:inline-flex;align-items:center;gap:.6rem;margin:.3rem auto;padding:.45rem .5rem .45rem 1rem;border:1px solid var(--suave);border-radius:999px;background:var(--fondo)}
.dato{max-width:100%}
.dato b{font-weight:500;font-size:.9rem;overflow-wrap:anywhere}
.copiar{font:inherit;font-size:.85rem;padding:.35rem .8rem;border:0;border-radius:999px;background:var(--acento);color:var(--fondo);cursor:pointer}
.menu{border:0;padding:0;margin:1.5rem auto 0;max-width:22rem}
.menu legend{margin:0 auto .5rem;font-weight:500}
.menu label{display:inline-flex;align-items:center;gap:.35rem;margin:.2rem .6rem}
.menu input[type=checkbox]{accent-color:var(--acento);width:1.1rem;height:1.1rem}
.cancion{display:block;max-width:22rem;margin:1.5rem auto 0;font-weight:500}
.cancion input,.menu input[type=text],.acomp input{font:inherit;width:100%;margin-top:.6rem;padding:.6rem 1rem;border:1px solid var(--acento);border-radius:999px;background:var(--fondo);color:var(--tinta)}
.sobre{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;background:var(--fondo);cursor:pointer;transition:opacity .8s ease .5s,visibility 0s 1.3s}
.sobre p{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--acento)}
.sobre small{font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}
.carta{position:relative;width:min(78vw,320px);aspect-ratio:3/2;background:var(--suave);border-radius:6px;box-shadow:0 10px 30px rgb(0 0 0/.12);perspective:800px}
.carta::before{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(to top right,transparent 49.5%,var(--fondo) 50%) left/50% 100% no-repeat,linear-gradient(to top left,transparent 49.5%,var(--fondo) 50%) right/50% 100% no-repeat;opacity:.55}
.solapa{position:absolute;left:0;right:0;top:0;height:58%;background:var(--suave);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .6s ease;filter:brightness(.96)}
.sello{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--acento);color:var(--fondo);display:grid;place-items:center;font-family:var(--display);font-size:1.15rem;transition:opacity .3s}
.sobre.abierto .solapa{transform:rotateX(180deg)}
.sobre.abierto .sello{opacity:0}
.sobre.abierto{opacity:0;visibility:hidden}
body.cerrada{overflow:hidden}
body.cerrada .hero *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hero *{animation:none!important}.rev{opacity:1;transform:none;transition:none}}
/* Confirmación: cuántos van y "no voy" */
.cuantos{display:block;margin:1.25rem auto 0;font-weight:500}
.cuantos select{font:inherit;margin-left:.5rem;padding:.4rem .8rem;border:1px solid var(--acento);border-radius:999px;background:var(--fondo);color:var(--tinta)}
.no-voy{display:block;width:max-content;margin:1.1rem auto 0;color:var(--tinta);opacity:.75;font-size:.95rem}
/* Visor de fotos */
.pista img{cursor:zoom-in}
.visor{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0/.92)}
.visor img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:4px}
.visor button{position:absolute;width:48px;height:48px;border:0;border-radius:50%;background:rgb(255 255 255/.12);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.visor .cerrar{top:1rem;right:1rem}
.visor .ant{left:.75rem;top:50%;margin-top:-24px}
.visor .sig{right:.75rem;top:50%;margin-top:-24px}
.visor button:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Mesa, "hoy es el día" y colores de vestimenta */
.hero .mesa{font-size:1.05rem;margin-top:.25rem}
.hero .mesa b{color:var(--acento);font-size:1.3rem}
.hoy{margin:0 auto 1.25rem}
.hoy b{display:block;font-family:var(--display);font-size:clamp(1.8rem,7vw,2.4rem);font-weight:400;color:var(--acento);line-height:1.2}
.btn.destacado{background:var(--acento);color:var(--fondo)}
.colores-txt{margin-top:1rem;font-weight:500}
.colores{display:flex;justify-content:center;gap:.6rem;margin-top:.6rem}
.colores span{width:34px;height:34px;border-radius:50%;border:2px solid var(--fondo);box-shadow:0 0 0 1px rgb(0 0 0/.15)}
/* Mapa a la vista y video */
.lugares>div{width:min(100%,420px)}
.mapa-vista{display:block;width:100%;height:200px;margin:1rem auto 0;border:0;border-radius:12px;background:var(--suave)}
.video{padding-top:1rem}
.video-marco{max-width:720px;margin:0 auto}
.video-marco iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#000}
/* Barra de las muestras (no aparece en invitaciones de clientes) */
.muestra-barra{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:rgb(24 22 30/.96);color:#fff;font-family:var(--texto);font-size:.88rem;box-shadow:0 -6px 20px rgb(0 0 0/.15);border-top:1px solid rgb(255 255 255/.12)}
.muestra-barra span{line-height:1.2}
.muestra-barra a{flex:0 0 auto;padding:.5rem .95rem;border-radius:999px;font-weight:600;text-decoration:none;white-space:nowrap}
.muestra-barra .pedir{background:var(--acento);color:#fff}
.muestra-barra .cotizar{border:1.5px solid currentColor;color:inherit}
body.con-barra{padding-bottom:4rem}
body.con-barra .musica{bottom:4.6rem}
@media (max-width:380px){.muestra-barra{font-size:.8rem;gap:.4rem}.muestra-barra a{padding:.45rem .7rem}}
/* Confirmación directa a la lista (D.confirmar:"lista") */
.oculto-rsvp{display:none!important}
.enviando{width:min(260px,80%);height:6px;margin:1.5rem auto;border-radius:9px;overflow:hidden;background:color-mix(in srgb,var(--tinta) 12%,transparent)}
.enviando span{display:block;height:100%;width:0;border-radius:inherit;background:var(--acento);animation:carga 1.4s ease-out forwards}
@keyframes carga{to{width:100%}}
.error-envio{color:#B3261E;font-size:.95rem;margin-top:1rem!important}
.listo{animation:entra .6s ease both}
.listo svg{width:84px;height:84px;margin:.5rem auto 1rem;display:block}
.listo circle{fill:none;stroke:var(--acento);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:trazo .7s ease forwards}
.listo path{fill:none;stroke:var(--acento);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:trazo .4s .6s ease forwards}
.listo .corazon{stroke-dasharray:80;stroke-dashoffset:80;stroke-width:3}
.listo:not(.no) .corazon,.listo.no .tilde{display:none}
@keyframes trazo{to{stroke-dashoffset:0}}
.listo h3{font-family:var(--display);font-weight:500;font-size:1.6rem;margin-bottom:.3rem}
.listo button.no-voy{background:none;border:0;font:inherit;text-decoration:underline;cursor:pointer}
/* Selector de las muestras: probar WhatsApp o directo a la lista */
.probar-modo{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;max-width:340px;margin:0 auto 1.4rem;padding:.75rem;border:1.5px dashed color-mix(in srgb,var(--tinta) 30%,transparent);border-radius:16px}
.probar-modo span{flex:1 0 100%;font-size:.8rem;letter-spacing:.06em;opacity:.75}
.probar-modo button{font:inherit;font-size:.88rem;padding:.4rem .9rem;border:1.5px solid var(--acento);border-radius:999px;background:none;color:var(--tinta);cursor:pointer}
.probar-modo button[aria-pressed="true"]{background:var(--acento);color:var(--sobre-acento,#fff)}
/* Acompañantes */
.acomp{display:flex;flex-direction:column;gap:.5rem;max-width:320px;margin:0 auto 1.25rem}
.acomp-tit{margin:0 auto .1rem!important;font-weight:500}
.acomp-tit small{font-weight:400;opacity:.75}
.acomp input{margin-top:0}
/* Efecto al abrir el sobre */
.efecto{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.efecto i{position:absolute;top:-5vh;display:block;animation:cae 3.5s cubic-bezier(.3,.6,.5,1) both}
.efecto.confeti i{width:.5em;height:.85em;background:currentColor;border-radius:2px}
.efecto.petalos i{width:.9em;height:1.1em;background:currentColor;border-radius:100% 0 100% 0;opacity:.85}
.efecto.brillos i{font-style:normal;line-height:1;text-shadow:0 0 8px currentColor;animation-name:cae,titila}
.efecto.globos i,.efecto.burbujas i{top:auto;bottom:-14vh;animation-name:sube}
.efecto.globos i{width:1.5em;height:1.85em;background:currentColor;border-radius:50% 50% 48% 48%/56% 56% 44% 44%;box-shadow:inset -.25em -.2em 0 rgb(0 0 0/.1)}
.efecto.globos i::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:1.4em;background:rgb(0 0 0/.25)}
.efecto.burbujas i{width:.8em;height:.8em;border-radius:50%;border:1.5px solid currentColor;background:color-mix(in srgb,currentColor 15%,transparent)}
.efecto.plumas i{width:.45em;height:1.5em;background:currentColor;border-radius:50%/80% 80% 20% 20%;opacity:.75}
.efecto.birretes i{top:auto;bottom:-8vh;width:1.7em;height:.42em;background:currentColor;border-radius:2px;animation-name:lanza;animation-timing-function:cubic-bezier(.2,.7,.4,1)}
.efecto.birretes i::before{content:"";position:absolute;left:24%;top:100%;width:52%;height:.42em;background:currentColor;border-radius:0 0 .25em .25em}
.efecto.birretes i::after{content:"";position:absolute;right:12%;top:50%;width:2px;height:.9em;background:#D4AF5A}
.efecto.mariposas i{width:1.4em;height:1em}
.efecto.mariposas i::before,.efecto.mariposas i::after{content:"";position:absolute;top:0;width:50%;height:100%;background:currentColor;border-radius:60% 40% 60% 40%/70% 70% 30% 30%;animation:aletea .3s ease-in-out infinite alternate}
.efecto.mariposas i::before{left:0;transform-origin:right center}
.efecto.mariposas i::after{right:0;transform-origin:left center;border-radius:40% 60% 40% 60%/70% 70% 30% 30%}
@keyframes aletea{to{transform:scaleX(.35)}}
@keyframes lanza{50%{transform:translate(calc(var(--deriva)/2),-75vh) rotate(calc(var(--giro)/2))}100%{transform:translate(var(--deriva),15vh) rotate(var(--giro))}}
@keyframes sube{from{transform:translate(0,0)}to{transform:translate(var(--deriva),-125vh)}}
@keyframes cae{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--deriva),112vh) rotate(var(--giro))}}
@keyframes titila{50%{opacity:.35}}
/* Nuestra historia, fotos en grilla, y lugares cerca (opcionales) */
#sec-frase:not([hidden])+#sec-historia{padding-top:0}
.historia img{display:block;width:min(100%,420px);aspect-ratio:4/5;object-fit:cover;margin:0 auto 1.5rem;border-radius:var(--forma);background:var(--suave)}
.historia p{max-width:34ch;margin:0 auto .9rem}
.galeria.grilla .pista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;overflow:visible;scroll-snap-type:none;max-width:640px;margin:0 auto}
.galeria.grilla .pista img{width:100%;aspect-ratio:3/4;border-radius:14px}
.galeria.grilla .pista img:nth-child(odd):last-child{grid-column:1/-1;aspect-ratio:3/2}
.galeria.grilla .nav{display:none}
#sec-donde+#sec-cercanos{padding-top:0}
.cercanos{display:grid;gap:.6rem;max-width:420px;margin:0 auto}
.cerca{display:grid;gap:.1rem;padding:.8rem 1rem;border:1px solid color-mix(in srgb,var(--acento) 35%,transparent);border-radius:14px;background:var(--fondo);color:var(--tinta);text-decoration:none;text-align:left}
.cerca span{font-size:.9rem;opacity:.8}
.cerca i{font-style:normal;font-size:.85rem;font-weight:600;color:var(--acento)}
/* Íconos de línea (T.iconos): se dibujan una sola vez al aparecer la sección */
.ico{display:block;width:46px;height:46px;margin:0 auto .5rem;color:var(--acento)}
.ico *{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rev .ico *{stroke-dasharray:1;stroke-dashoffset:1}
.rev.ver .ico *{animation:dibuja 1.8s .15s ease forwards}
@keyframes dibuja{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.rev .ico *{stroke-dashoffset:0;animation:none}}
/* Firma al pie y avisos para pedir la propia */
.firma{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:2rem 1rem 2.5rem;font-family:var(--texto);font-size:.85rem;text-align:center;opacity:.8}
.firma a,.promo{color:var(--acento);font-weight:600;text-underline-offset:3px}
.promo{display:block;width:max-content;max-width:100%;margin:1.2rem auto 0;font-size:.9rem}
.promo[hidden]{display:none}