/* Per sempre · motor de invitaciones — estilos compartidos por todos los eventos */
@font-face{font-family:"PS Serif";src:url(/fuentes/pagella-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PS Serif";src:url(/fuentes/pagella-italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PS Script";src:url(/fuentes/chorus.woff) format("woff");font-display:swap}
@font-face{font-family:"PS Round";src:url(/fuentes/poppins-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"PS Sans";src:url(/fuentes/inter-light.woff) format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"PS Sans";src:url(/fuentes/inter-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"PS Sans";src:url(/fuentes/inter-medium.woff) format("woff");font-weight:500;font-display:swap}

:root{
  /* los colores los pone motor.js desde evento.json */
  --fondo:#0b0b0c; --texto:#f2ede3; --texto-2:#cfc7b6; --acento:#c9b37e; --acento-claro:#d8c38f;
  --panel:rgba(9,9,10,.86); --linea:color-mix(in srgb,var(--acento) 45%,transparent);
  --linea-suave:color-mix(in srgb,var(--acento) 28%,transparent);
  --titular:#fff; --sobre-acento:#111;
  --serif:"PS Serif","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --script:"PS Script","PS Serif",cursive;
  --sans:"PS Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
html.grande{font-size:19px}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fondo);color:var(--texto);font-family:var(--sans);line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
[hidden]{display:none!important}

.fondo{position:fixed;inset:0;z-index:-1;background:var(--fondo);transition:opacity .6s ease}
.fondo.foto{background-repeat:no-repeat;background-size:cover}
.fondo.foto::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 70%),
  linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 70%,rgba(0,0,0,.6))}
.fondo.liso::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 28%,color-mix(in srgb,var(--acento) 9%,transparent),transparent 60%)}
body.cargando .fondo{opacity:0}

main{max-width:560px;margin:0 auto;position:relative}

/* ---------- PORTADA ---------- */
.portada{min-height:100vh;min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:flex-start;padding:max(14vh,96px) 1.75rem 6rem}
.marco{position:absolute;inset:14px;border:1px solid var(--linea);pointer-events:none}
.marco::after{content:"";position:absolute;inset:7px;border:1px solid var(--linea-suave)}
.portada-txt{transition:opacity .9s ease,transform .9s ease}
body.cargando .portada-txt{opacity:0;transform:translateY(10px)}
.saludo{font-family:var(--serif);font-style:italic;color:var(--acento-claro);font-size:2.1rem;line-height:1.12}
.etiqueta{margin-top:1.6rem;font-size:.8rem;letter-spacing:.45em;text-transform:uppercase;color:var(--acento-claro)}
.nombre{margin-top:.35rem;font-family:var(--serif);font-weight:400;font-size:clamp(3rem,14.5vw,4.5rem);line-height:.98;text-transform:uppercase;letter-spacing:.01em;color:var(--titular)}
html.script .nombre{font-family:var(--script);text-transform:none;font-size:clamp(3.4rem,17vw,5.2rem);line-height:1.02;letter-spacing:0}
.subtitulo{margin-top:.9rem;font-family:var(--serif);font-style:italic;font-size:1.45rem;color:var(--texto)}
.fecha-linea{margin-top:1.8rem;display:flex;align-items:center;gap:.9rem}
.fecha-linea .dia{font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--titular)}
.fecha-linea .barra{width:1px;height:3.1rem;background:var(--acento)}
.fecha-linea .mes{font-size:.95rem;letter-spacing:.24em;text-transform:uppercase;line-height:1.5}
.fecha-linea small{display:block;font-size:.78rem;letter-spacing:.18em;color:var(--acento-claro);white-space:nowrap}
.bajar{position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.2rem;color:var(--acento-claro);text-decoration:none;font-size:.68rem;letter-spacing:.35em;text-transform:uppercase;animation:flota 2.4s ease-in-out infinite}
@keyframes flota{50%{transform:translate(-50%,6px)}}

/* portada centrada */
html.centro .portada{justify-content:center;text-align:center;padding-top:3.5rem;padding-bottom:5rem}
html.centro .portada-txt::before{content:"";display:block;width:64px;height:1px;background:var(--acento);margin:0 auto 1.5rem}
html.centro .subtitulo::after{content:"";display:block;width:64px;height:1px;background:var(--acento);margin:1.4rem auto 0}
html.centro .fecha-linea{flex-direction:column;gap:.5rem;margin-top:1.4rem}
html.centro .fecha-linea .barra{display:none}
html.centro .fecha-linea .mes{text-align:center}
html.centro .saludo{font-size:1.8rem}
html.centro .bajar span{display:none}

/* letra redonda (infantil) */
html.redonda .nombre{font-family:"PS Round",var(--sans);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:clamp(3.4rem,17vw,5.2rem);line-height:1}
html.redonda .saludo{font-family:"PS Round",var(--sans);font-style:normal;font-weight:700;font-size:1.5rem}
html.redonda .firma{font-family:"PS Round",var(--sans);font-weight:700;letter-spacing:0}
html.redonda .subtitulo{font-family:var(--sans);font-style:normal;font-weight:500;font-size:1.25rem}
html.redonda .texto-grande{font-family:var(--sans);font-style:normal;font-weight:500;font-size:1.35rem}
html.redonda .gracias-t,html.redonda .cursiva{font-family:"PS Round",var(--sans);font-style:normal}
html.redonda .dato-v,html.redonda .programa .t,html.redonda .lugares,html.redonda .cuenta b,html.redonda .fecha-linea .dia,html.redonda .contador output{font-family:"PS Round",var(--sans);font-weight:700}
html.redonda .dato-v,html.redonda .programa .t{font-size:1.1rem}

/* velo claro sobre la foto de fondo */
html.velo-claro .fondo.foto::after{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25) 45%,rgba(255,255,255,.7))}

/* adornos de la portada */
.adorno{position:absolute;pointer-events:none;width:min(66vw,310px);height:auto;z-index:0}
.adorno.a1{top:0;left:0}
.adorno.a2{bottom:0;right:0;transform:rotate(180deg)}
.portada-txt{position:relative;z-index:1}

/* ---------- BLOQUES ---------- */
.bloque{background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:3.2rem 1.75rem;text-align:center;border-top:1px solid var(--linea-suave)}
html.liso .bloque,html.liso .pie{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.titulo{font-family:var(--sans);font-weight:500;font-size:.85rem;letter-spacing:.42em;text-transform:uppercase;color:var(--acento-claro);margin-bottom:1.1rem}
.texto-grande{font-family:var(--serif);font-style:italic;font-size:1.6rem;line-height:1.35;color:var(--texto)}
.texto{font-size:1rem;color:var(--texto-2);margin-top:.9rem;white-space:pre-line}
.cursiva{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--texto)}
.regla{width:70px;height:1px;background:var(--acento);margin:2rem auto 0}

.tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.4rem}
.dato{border:1px solid var(--linea-suave);padding:1.1rem .8rem}
.dato.ancho{grid-column:1/-1}
.dato-k{font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;color:var(--acento-claro)}
.dato-v{font-family:var(--serif);font-size:1.25rem;line-height:1.25;margin-top:.35rem;color:var(--titular)}
.dato-s{font-size:.88rem;color:var(--texto-2);margin-top:.2rem}
.dato-s.fuerte{color:var(--texto)}
.nw{white-space:nowrap}

.botones{display:flex;gap:.75rem;margin-top:.75rem}
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:.7rem 1rem;border:1px solid var(--acento);color:var(--texto);background:transparent;font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s}
.btn:hover,.btn:focus-visible{background:color-mix(in srgb,var(--acento) 14%,transparent)}
.btn.sutil{border-color:var(--linea);color:var(--texto-2);font-size:.72rem;letter-spacing:.1em}
.btn.principal{width:100%;margin-top:1.4rem;background:var(--acento);color:var(--sobre-acento);font-weight:500;border-color:var(--acento)}
.btn.principal:hover{background:var(--acento-claro)}
.btn:disabled{opacity:.6;cursor:wait}

.cuenta{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.cuenta div{border:1px solid var(--linea-suave);padding:.9rem 0 .7rem}
.cuenta b{display:block;font-family:var(--serif);font-weight:400;font-size:2.1rem;line-height:1;color:var(--titular)}
.cuenta span{display:block;margin-top:.4rem;font-size:.66rem;letter-spacing:.25em;text-transform:uppercase;color:var(--acento-claro)}

.paleta{display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}
.paleta span{width:3rem;height:3rem;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--acento) 80%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--fondo) 40%,transparent)}

.programa{list-style:none;margin-top:.6rem;text-align:left;border-left:1px solid var(--linea);padding-left:1.4rem}
.programa li{position:relative;padding:.55rem 0}
.programa li::before{content:"";position:absolute;left:calc(-1.4rem - 4px);top:1.05rem;width:7px;height:7px;border-radius:50%;background:var(--acento)}
.programa .h{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acento-claro)}
.programa .t{font-family:var(--serif);font-size:1.2rem;color:var(--titular)}

.logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.3rem;margin-top:.6rem}
.logos img{height:3.1rem;width:auto;max-width:42%}
.logos .sep{width:1px;height:3rem;background:var(--linea)}

.galeria{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.6rem}
.galeria img{width:100%;aspect-ratio:4/5;object-fit:cover}
.galeria img:first-child:nth-last-child(odd){grid-column:1/-1;aspect-ratio:16/10}

.sobre{width:3.2rem;height:auto;color:var(--acento);margin:0 auto 1.2rem;display:block}

/* ---------- RSVP ---------- */
.rsvp{padding-bottom:3.6rem}
.panel{margin-top:1.6rem;text-align:left}
.lugares{font-family:var(--serif);font-size:1.25rem;text-align:center;color:var(--titular);margin-bottom:1.3rem}
.lugares b{color:var(--acento-claro);font-weight:400}
.opciones{display:grid;gap:.7rem}
.opcion{position:relative;display:block;cursor:pointer}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion span{display:flex;align-items:center;gap:.8rem;min-height:56px;padding:.8rem 1rem;border:1px solid var(--linea);font-size:1.02rem;transition:border-color .2s,background .2s}
.opcion span::before{content:"";flex:none;width:1.15rem;height:1.15rem;border-radius:50%;border:1.5px solid var(--acento)}
.opcion input:checked+span{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 12%,transparent)}
.opcion input:checked+span::before{background:radial-gradient(circle,var(--acento) 45%,transparent 50%)}
.opcion input:focus-visible+span{outline:2px solid var(--acento-claro);outline-offset:2px}
.campo{margin-top:1.3rem}
.campo-k{display:block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acento-claro);margin-bottom:.55rem}
.campo-k small{letter-spacing:.05em;text-transform:none;color:var(--texto-2);font-size:.85rem}
.campo input,.campo textarea{width:100%;background:color-mix(in srgb,var(--texto) 5%,transparent);border:1px solid var(--linea);color:var(--texto);font:inherit;font-size:16px;padding:.8rem .9rem;border-radius:0;-webkit-appearance:none}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--acento)}
.contador{display:flex;align-items:center;border:1px solid var(--linea);width:max-content}
.contador button{width:56px;height:52px;background:transparent;border:0;color:var(--acento-claro);font-size:1.6rem;cursor:pointer}
.contador button:disabled{opacity:.25;cursor:default}
.contador output{min-width:56px;text-align:center;font-family:var(--serif);font-size:1.6rem;color:var(--titular)}
.aviso{min-height:1.2rem;margin-top:1rem;color:#d9776b;font-size:.92rem;text-align:center}
.gracias-t{font-family:var(--serif);font-style:italic;font-size:1.9rem;text-align:center;color:var(--acento-claro)}
.gracias .texto{text-align:center}
.gracias .btn{width:100%;margin-top:1.6rem}

.pie{padding:3rem 1rem 4rem;text-align:center;background:var(--panel)}
.firma{font-family:var(--serif);font-size:2rem;letter-spacing:.06em;color:var(--acento-claro)}
html.script .firma{font-family:var(--script);font-size:2.4rem;letter-spacing:0}
.marca{margin-top:2rem;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--texto-2);opacity:.7}
.marca a{color:inherit;text-decoration:none}
.demo{margin-top:1rem;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--texto-2);opacity:.8}

@media (min-width:600px){ .marco{inset:22px} .portada{padding-left:2.5rem;padding-right:2.5rem} }
@media (prefers-reduced-motion:reduce){ .bajar{animation:none} .portada-txt,.fondo{transition:none} }