*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-sans);background:var(--bg);color:var(--ink);line-height:1.65;font-size:1.05rem;font-weight:300;overflow-x:hidden}
body.envelope-lock{overflow:hidden}
a{color:var(--primary)}
.banner{position:sticky;top:0;z-index:600;background:var(--ink);color:var(--bg);text-align:center;font-size:.82rem;padding:.5rem 1rem;letter-spacing:.03em}

/* ---------- Sobre ---------- */
#envelope{position:fixed;inset:0;z-index:520;display:flex;align-items:center;justify-content:center;padding:1.25rem;cursor:pointer;overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
             radial-gradient(ellipse at 50% 42%,transparent 30%,color-mix(in srgb,var(--shadow,var(--ink)) 14%,transparent) 100%),
             radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 40%),
             linear-gradient(165deg,var(--paper),var(--paper2));
  transition:opacity .7s ease,visibility .7s ease}
#envelope.hidden{opacity:0;visibility:hidden;pointer-events:none}
.env-intro{display:flex;flex-direction:column;align-items:center;gap:1.1rem;transition:transform 1s cubic-bezier(.6,0,.3,1),opacity .8s ease}
.env-hint{order:2;margin-top:1.6rem;text-align:center;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.05rem,3.6vw,1.3rem);color:var(--primary);line-height:1.4;max-width:min(520px,88vw);transition:opacity .4s}
.env{--w:min(500px,86vw);position:relative;width:var(--w);height:calc(var(--w) * .68);perspective:1600px;margin-top:calc(var(--w) * .12);transition:transform 1.05s cubic-bezier(.3,.9,.3,1)}
.env::after{content:'';position:absolute;left:6%;right:6%;bottom:-18px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--shadow,var(--ink)) 26%,transparent);filter:blur(14px);z-index:-1}
/* Interior del sobre: el forro con el estampado del diseño */
.env-inside{position:absolute;inset:0;border-radius:6px;overflow:hidden;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent) 1.1px,transparent 1.7px) 0 0/11px 11px,
             linear-gradient(180deg,color-mix(in srgb,var(--primary) 82%,#000),var(--primary))}
/* La tarjeta que sale */
.env-card{position:absolute;left:7%;right:7%;top:5%;height:90%;z-index:2;border-radius:4px;padding:5% 6%;display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;
  background:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 22px color-mix(in srgb,var(--shadow,var(--ink)) 22%,transparent);
  outline:1px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:-8px;
  transition:transform 1.05s cubic-bezier(.3,.9,.3,1)}
.env-card-photo{width:30%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 4px 4px;margin:.2rem 0 .35rem}
.env-card strong{font-family:var(--f-display);font-weight:var(--display-weight,400);font-size:calc(var(--w) * .085);line-height:1.05;color:var(--primary)}
.env-card span{font-family:var(--f-serif);font-size:calc(var(--w) * .034);letter-spacing:.2em;color:var(--accent)}
/* Bolsillo: solapas laterales y de abajo */
.env-pocket{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;filter:drop-shadow(0 -1px 1.5px color-mix(in srgb,var(--shadow,var(--ink)) 14%,transparent))}
.pk-side{fill:var(--flap)}
.pk-bottom{fill:var(--paper)}
.pk-shadow{fill:none;stroke:color-mix(in srgb,var(--shadow,var(--ink)) 30%,transparent);stroke-width:1.6;transition:opacity .2s}
#envelope.s2 .pk-shadow{opacity:0}
.env-pocket path:not(.pk-shadow){stroke:color-mix(in srgb,var(--ink) 9%,transparent);stroke-width:.25;vector-effect:non-scaling-stroke}
.env-to{position:absolute;left:0;right:0;bottom:9%;z-index:4;text-align:center;font-family:var(--f-display);font-weight:var(--display-weight,400);font-size:calc(var(--w) * .066);color:var(--ink);line-height:1.1;pointer-events:none}
.env-to small{display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:.42em;letter-spacing:.06em;color:var(--muted);margin-bottom:.15em}
/* Solapa de arriba: por fuera papel, por dentro el forro */
.env-flap{position:absolute;left:0;right:0;top:0;height:50%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.55,.05,.35,1)}
.env-flap>div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-out{clip-path:polygon(0 0,100% 0,53% 93%,50% 96%,47% 93%);background:linear-gradient(180deg,var(--paper2),var(--flap) 85%)}
.flap-in{transform:rotateX(180deg);clip-path:polygon(0 100%,100% 100%,53% 7%,50% 4%,47% 7%);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent) 1.1px,transparent 1.7px) 0 0/11px 11px,linear-gradient(0deg,var(--primary),color-mix(in srgb,var(--primary) 75%,#000))}
.env-flap::after{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,53% 93%,50% 96%,47% 93%);background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--shadow,var(--ink)) 8%,transparent));backface-visibility:hidden;pointer-events:none}
/* Sello de cera */
#envSeal{position:absolute;left:50%;top:47%;width:calc(var(--w) * .15);height:calc(var(--w) * .15);min-width:54px;min-height:54px;margin:0;padding:0;border:0;transform:translate(-50%,-50%);z-index:6;cursor:pointer;
  border-radius:53% 47% 51% 49% / 48% 53% 47% 52%;color:var(--seal-ink);font-family:var(--f-serif);font-weight:500;font-size:calc(var(--w) * .038);letter-spacing:.03em;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--seal1) 70%,#fff) 0 7%,var(--seal1) 26%,var(--seal2) 72%,color-mix(in srgb,var(--seal2) 75%,#000));
  box-shadow:0 3px 0 color-mix(in srgb,var(--seal2) 70%,#000),0 8px 18px color-mix(in srgb,var(--shadow,var(--ink)) 35%,transparent);
  animation:sealHalo 2.4s ease-out infinite}
#envSeal::before{content:'';position:absolute;inset:16%;border-radius:50%;box-shadow:inset 0 2px 3px color-mix(in srgb,var(--seal2) 60%,#000),0 1px 0 color-mix(in srgb,var(--seal1) 60%,#fff)}
#envSeal span{position:relative;text-shadow:0 1px 0 color-mix(in srgb,var(--seal1) 50%,#fff),0 -1px 0 color-mix(in srgb,var(--seal2) 60%,#000)}
@keyframes sealHalo{0%{outline:0 solid color-mix(in srgb,var(--seal2) 45%,transparent);outline-offset:0}70%,100%{outline:2px solid transparent;outline-offset:14px}}
#envelope:hover #envSeal{filter:brightness(1.06)}
.env-tap{order:3;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.2rem;transition:opacity .3s}
/* Secuencia: 1 se rompe el lacre, 2 se abre la solapa, 3 sale la tarjeta, 4 entramos en la invitación */
#envelope.s1 #envSeal{animation:sealBreak .5s cubic-bezier(.5,0,.75,0) forwards;pointer-events:none}
#envelope.s1 .env-tap,#envelope.s1 .env-hint{opacity:0}
@keyframes sealBreak{0%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-50%) scale(1.14) rotate(4deg)}100%{transform:translate(-50%,10%) scale(.55) rotate(-28deg);opacity:0}}
#envelope.s2 .env-flap{transform:rotateX(180deg)}
#envelope.s3 .env-flap{z-index:1}
#envelope.s3 .env-card{transform:translateY(-58%)}
#envelope.s3 .env{transform:translateY(24%)}
#envelope.s3 .env-to{opacity:0;transition:opacity .3s}
#envelope.s4 .env-intro{transform:translateY(22%) scale(1.9);opacity:0}
#envelope.s4{opacity:0;transition:opacity .9s ease .15s}
@media(prefers-reduced-motion:reduce){#envSeal{animation:none}.env-flap,.env-card,.env-intro{transition:none}}
@media(max-width:640px){#envelope{padding:1rem}}

/* ---------- Secciones ---------- */
section{padding:clamp(4rem,10vw,6.5rem) 1.25rem}
.wrap{max-width:720px;margin:0 auto;text-align:center}
.alt{background:var(--primary-soft)}
.over{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;font-weight:400}
h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(2.1rem,5.4vw,2.9rem);line-height:1.15;color:var(--primary);margin-bottom:1rem}
.lead{color:var(--muted);max-width:560px;margin:0 auto 1.2rem}
.ornament{width:64px;height:1px;background:var(--accent);margin:1.6rem auto;opacity:.7}
.intro{font-family:var(--f-serif);font-size:clamp(1.3rem,3.2vw,1.65rem);line-height:1.55;color:var(--ink);font-style:italic}

.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 40%),
             radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 45%),var(--bg)}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(3.4rem,13vw,6.6rem);line-height:1.02;color:var(--primary)}
.hero h1 span{display:block;font-family:var(--f-serif);font-style:italic;font-size:.42em;color:var(--accent);margin:.15em 0}
.hero .date{font-family:var(--f-serif);font-size:clamp(1.25rem,3vw,1.6rem);letter-spacing:.05em;margin-top:1.1rem}
.cd{display:flex;gap:clamp(.8rem,4vw,2rem);justify-content:center;margin-top:2.2rem}
.cd div{display:flex;flex-direction:column;align-items:center;min-width:3.4rem}
.cd b{font-family:var(--f-serif);font-weight:400;font-size:clamp(2rem,6vw,2.8rem);color:var(--primary);line-height:1}
.cd small{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.scroll-cue{display:inline-block;margin-top:2.6rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:.2rem}

.events{display:grid;gap:1rem;margin-top:2rem;text-align:left}
.event{background:var(--paper);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:14px;padding:1.4rem 1.5rem;display:grid;grid-template-columns:4.6rem 1fr;gap:.15rem 1.2rem;align-items:start}
.event time{font-family:var(--f-serif);font-size:1.7rem;color:var(--accent);grid-row:1 / span 4;line-height:1.1}
.event h3{font-family:var(--f-serif);font-weight:500;font-size:1.4rem;color:var(--primary);line-height:1.2}
.event p{color:var(--muted);font-size:.98rem}
.event .place{color:var(--ink)}
.event .btn{justify-self:start;margin-top:.7rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:400;font-size:.95rem;letter-spacing:.03em;padding:.8rem 1.5rem;border-radius:999px;border:1px solid var(--primary);background:var(--primary);color:var(--bg);text-decoration:none;cursor:pointer;transition:transform .15s ease,opacity .15s ease}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--primary)}
.btn.small{padding:.45rem 1rem;font-size:.82rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

.gift-box{background:var(--paper);border-radius:14px;padding:1.2rem 1.4rem;margin:1.4rem auto 0;display:grid;gap:1rem;max-width:520px}
.copy-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;text-align:left}
.copy-row>div,.copy-row>span:first-child{min-width:0;flex:1}
.copy-row .btn{flex:none}
.gift-box>.copy-row+.copy-row{padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
.copy-row small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.copy-row code{display:block;font-family:var(--f-sans);font-size:1rem;letter-spacing:.04em;overflow-wrap:anywhere;color:var(--ink)}
@media(max-width:420px){.gift-box{padding:1rem 1.1rem}.copy-row code{font-size:.95rem}}

/* ---------- Confirmación ---------- */
.rsvp-card{background:var(--paper);border-radius:18px;padding:clamp(1.2rem,4vw,2rem);text-align:left;box-shadow:0 18px 50px color-mix(in srgb,var(--shadow,var(--ink)) 9%,transparent);margin-top:1.4rem;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.rsvp-for{font-family:var(--f-serif);font-size:1.3rem;color:var(--primary);margin-bottom:1rem;text-align:center}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.choice button{padding:1rem .7rem;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--primary) 35%,transparent);background:transparent;font:inherit;font-size:1rem;font-weight:400;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.choice button.on{background:var(--primary);color:var(--bg);border-color:var(--primary)}
.field{display:grid;gap:.35rem;margin-top:1rem}
.field>span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:inherit;font-weight:400;font-size:1rem;padding:.75rem .9rem;border-radius:10px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:var(--bg);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:1px}
textarea{min-height:5rem;resize:vertical}
.person{border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);padding-top:1rem;margin-top:1rem;display:grid;gap:.55rem}
.person-h{font-family:var(--f-serif);font-size:1.15rem;color:var(--primary)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.check{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;font-size:.95rem;cursor:pointer}
.check input{width:1.1rem;height:1.1rem;margin-top:.25rem;flex:none;accent-color:var(--primary)}
.check small{display:block;color:var(--muted);font-size:.85rem}
.consent{background:var(--accent-soft);border-radius:10px;padding:.8rem 1rem;font-size:.88rem}
.stepper{display:flex;align-items:center;gap:.9rem}
.stepper button{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--primary);background:transparent;color:var(--primary);font-size:1.25rem;cursor:pointer}
.stepper output{font-family:var(--f-serif);font-size:1.7rem;min-width:2ch;text-align:center}
.submit{width:100%;margin-top:1.4rem;padding:1rem}
.note{font-size:.88rem;color:var(--muted);margin-bottom:1rem;text-align:center}
.err{color:#b3261e;font-size:.92rem;margin-top:.8rem;text-align:center}
.thanks{text-align:center;padding:.6rem 0}
.thanks h3{font-family:var(--f-display);font-weight:400;font-size:2.6rem;color:var(--primary);line-height:1.1;margin-bottom:.6rem}
.thanks p{color:var(--muted);margin-bottom:1rem}

footer{text-align:center;padding:3rem 1.25rem 4rem;color:var(--muted);font-size:.92rem;background:var(--primary-soft)}
footer .names{font-family:var(--f-display);font-size:2.2rem;color:var(--primary);line-height:1.2}
footer .made{margin-top:1.6rem;font-size:.76rem;letter-spacing:.08em}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* Con adorno dentro, se animan los hijos y no el bloque: así el adorno se funde con el fondo también durante la animación */
.reveal:has(.deco){opacity:1;transform:none;transition:none}
.reveal:has(.deco)>*{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in:has(.deco)>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal,.reveal:has(.deco)>*{opacity:1;transform:none}#envSeal{animation:none}}
@media(max-width:560px){.row2{grid-template-columns:1fr}.event{grid-template-columns:1fr}.event time{grid-row:auto}}

/* ---------- Tipografía display con peso por diseño ---------- */
.hero h1,footer .names,.thanks h3{font-weight:var(--display-weight,400)}

/* ---------- Adornos ilustrados ---------- */
.deco{display:block;width:min(440px,86%);height:auto;margin:0 auto 1.4rem;mix-blend-mode:var(--deco-blend,multiply);opacity:.95}
.deco.small{width:min(300px,70%);margin-bottom:.8rem}

/* ---------- Galería ---------- */
.gallery-sec{padding-left:0;padding-right:0}
.gallery{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.6rem 1.25rem .6rem;scrollbar-width:none;max-width:1180px;margin:0 auto}
.gallery::-webkit-scrollbar{display:none}
.gallery figure{flex:0 0 min(72vw,340px);scroll-snap-align:center;border-radius:16px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 18px 40px color-mix(in srgb,var(--shadow,var(--ink)) 16%,transparent)}
.gallery figure:nth-child(even){transform:translateY(1.4rem)}
.gallery figure.reveal.in:nth-child(even){transform:translateY(1.4rem)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.gallery figure:hover img{transform:scale(1.04)}
.gallery.few{justify-content:center}
@media(min-width:900px){.gallery{justify-content:center;overflow:visible}.gallery figure{flex-basis:300px}}

/* ---------- Franja de foto ---------- */
.photo-band{height:min(70vh,560px);background:var(--band) center/cover no-repeat}
@media(pointer:fine){.photo-band{background-attachment:fixed}}


/* =================================================================
   Maquetaciones: cada diseño tiene su propia portada, programa y galería
   ================================================================= */
.hero{position:relative;overflow:hidden}
.hero h1 b{font-weight:inherit}
.hero-photos{display:none}
.hp{margin:0}
.hp img{display:block;width:100%;height:100%;object-fit:cover}
.hero-in,.hero-photos{transition:opacity 1.3s ease .1s,transform 1.3s cubic-bezier(.2,.8,.2,1) .1s}
body.envelope-lock .hero-in{opacity:0;transform:translateY(26px)}
body.envelope-lock .hero-photos{opacity:0;transform:scale(.94)}

/* --- Clásica y Gala: foto a sangre de fondo --- */
.lay-classic .hero.has-photo,.lay-frame .hero.has-photo{background:linear-gradient(180deg,rgba(10,10,10,.30) 0%,rgba(10,10,10,.12) 38%,rgba(10,10,10,.6) 100%),var(--cover) center 30%/cover no-repeat;color:#fff;align-items:flex-end;padding-bottom:clamp(3rem,10vh,6rem)}
:is(.lay-classic,.lay-frame) .hero.has-photo :is(.over,.date,.cd b,h1){color:#fff}
:is(.lay-classic,.lay-frame) .hero.has-photo h1{text-shadow:0 2px 24px rgba(0,0,0,.35);font-size:clamp(2.9rem,10.5vw,5.6rem)}
:is(.lay-classic,.lay-frame) .hero.has-photo h1 span{display:inline;margin:0 .12em;font-size:.6em;color:rgba(255,255,255,.85)}
:is(.lay-classic,.lay-frame) .hero.has-photo .cd small{color:rgba(255,255,255,.8)}
:is(.lay-classic,.lay-frame) .hero.has-photo .scroll-cue{color:#fff;border-color:rgba(255,255,255,.7)}

/* --- Gala: marco art déco dorado, letras de etiqueta --- */
.lay-frame .hero.has-photo{align-items:center;background:linear-gradient(180deg,rgba(8,12,26,.62),rgba(8,12,26,.32) 45%,rgba(8,12,26,.8)),var(--cover) center 35%/cover no-repeat}
.lay-frame .hero::before{content:'';position:absolute;inset:clamp(12px,3.5vw,30px);border:1px solid var(--accent);box-shadow:inset 0 0 0 6px transparent,inset 0 0 0 7px color-mix(in srgb,var(--accent) 50%,transparent);pointer-events:none}
.lay-frame .hero::after{content:'';position:absolute;left:50%;top:clamp(12px,3.5vw,30px);width:14px;height:14px;background:var(--accent);transform:translate(-50%,-50%) rotate(45deg)}
.lay-frame .hero.has-photo h1{text-transform:uppercase;letter-spacing:.12em;font-size:clamp(2.1rem,8.4vw,4.4rem);line-height:1.1}
.lay-frame .hero.has-photo h1 b{display:block}
.lay-frame .hero.has-photo h1 span{display:block;margin:.25em 0;font-size:.55em;color:var(--primary)}
.lay-frame .hero .over{letter-spacing:.42em}
.lay-frame h2{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.14em;font-size:clamp(1.55rem,4.6vw,2.2rem)}
.lay-frame .event{border-radius:0;border-color:var(--accent);outline:1px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:-7px}
.lay-frame .gallery figure{border-radius:0;border:1px solid var(--accent);padding:7px;background:var(--paper)}
.lay-frame .rsvp-card,.lay-frame .gift-box{border-radius:0;border:1px solid var(--accent)}

/* --- Mediterránea: foto en arco y cenefa de azulejo --- */
.lay-arch .hero{flex-direction:column;justify-content:center;gap:1.8rem;padding:5rem 1.25rem 4rem}
.lay-arch .hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:18px;background:conic-gradient(from 45deg,var(--accent) 25%,transparent 0 50%,var(--accent) 0 75%,transparent 0) 0 0/18px 18px;opacity:.85}
.lay-arch .hero-photos{display:block}
.lay-arch .hp1{width:min(72vw,350px);aspect-ratio:3/4;padding:9px;border:1px solid var(--accent);border-radius:999px 999px 6px 6px;background:var(--paper);box-shadow:0 26px 50px color-mix(in srgb,var(--shadow,var(--ink)) 16%,transparent)}
.lay-arch .hp1 img{border-radius:999px 999px 2px 2px}
.lay-arch .hp2{display:none}
.lay-arch .hero h1{font-size:clamp(2.7rem,10vw,4.6rem)}
.lay-arch .hero h1 span{display:inline;font-size:.6em;margin:0 .1em}
.lay-arch .gallery figure{border-radius:999px 999px 10px 10px}
.lay-arch .event{border-top:4px solid var(--accent)}
@media(min-width:900px){
  .lay-arch .hero{flex-direction:row;gap:clamp(3rem,7vw,7rem)}
  .lay-arch .hero-in{text-align:left;max-width:520px}
  .lay-arch .cd{justify-content:flex-start}
}

/* --- Minimal: editorial, nombres enormes y foto en blanco y negro --- */
.lay-editorial .hero{display:grid;align-content:end;justify-items:start;text-align:left;gap:1.8rem;padding:4.5rem 1.25rem 3rem;background:var(--bg)}
.lay-editorial .hero-in{order:-1}
.lay-editorial .hero-photos{display:block;width:100%}
.lay-editorial .hp1{width:100%;aspect-ratio:4/5;max-height:62svh;overflow:hidden}
.lay-editorial .hp1 img{filter:grayscale(1) contrast(1.05)}
.lay-editorial .hp2{display:none}
.lay-editorial .hero h1{text-transform:uppercase;font-size:clamp(3rem,16vw,7.4rem);line-height:.9;letter-spacing:.01em}
.lay-editorial .hero h1 b{display:block}
.lay-editorial .hero h1 span{display:block;font-family:var(--f-serif);font-style:italic;text-transform:none;font-size:.38em;margin:.15em 0;color:var(--accent)}
.lay-editorial .cd{justify-content:flex-start}
.lay-editorial .wrap{text-align:left}
.lay-editorial .lead{margin-left:0}
.lay-editorial .deco{margin-left:0}
.lay-editorial h2{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.lay-editorial .events{gap:0}
.lay-editorial .event{background:none;border:0;border-top:1px solid var(--ink);border-radius:0;padding:1.4rem 0}
.lay-editorial .events .event:last-child{border-bottom:1px solid var(--ink)}
.lay-editorial .gallery figure{border-radius:0;box-shadow:none}
.lay-editorial .gift-box{margin-left:0;border-radius:0;border:1px solid var(--ink)}
.lay-editorial .rsvp-card{border-radius:0;box-shadow:none;border:1px solid var(--ink)}
.lay-editorial footer{text-align:left;padding-left:1.25rem}
@media(min-width:900px){
  .lay-editorial .hero{grid-template-columns:1.15fr .85fr;align-items:end;padding:4rem 5vw;min-height:100svh}
  .lay-editorial .hero-in{grid-column:1;grid-row:1;order:0}
  .lay-editorial .hero-photos{grid-column:2;grid-row:1}
  .lay-editorial .hp1{max-height:84svh}
}

/* --- Jardín: retrato ovalado rodeado de flores --- */
.lay-oval .hero{flex-direction:column;justify-content:center;padding:4.5rem 1.25rem 3.5rem}
.lay-oval .hero-photos{display:block;position:relative;margin-bottom:2.2rem}
.lay-oval .hp1{width:min(66vw,310px);aspect-ratio:4/5;border-radius:50%;overflow:hidden;box-shadow:0 0 0 8px var(--paper),0 0 0 9px color-mix(in srgb,var(--accent) 55%,transparent),0 26px 50px color-mix(in srgb,var(--shadow,var(--ink)) 16%,transparent)}
.lay-oval .hp2{display:none}
.lay-oval .hero-photos::after{content:'';position:absolute;left:50%;bottom:-17%;width:min(96vw,470px);aspect-ratio:900/386;transform:translateX(-50%);background:var(--deco) center/contain no-repeat;mix-blend-mode:var(--deco-blend,multiply)}
.lay-oval .hero h1{font-size:clamp(3.3rem,13vw,6rem)}
.lay-oval .gallery figure{border-radius:200px 200px 16px 16px}

/* --- Campestre: polaroids con cinta sobre papel kraft --- */
.lay-polaroid .hero{flex-direction:column;justify-content:center;padding:4.5rem 1.25rem 3.5rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),var(--paper2)}
.lay-polaroid .hero-photos{display:block;position:relative;width:min(86vw,430px);height:min(100vw,470px);margin-bottom:.6rem}
.lay-polaroid .hp{position:absolute;width:64%;background:#fffdf8;padding:9px 9px 40px;box-shadow:0 16px 30px rgba(50,35,20,.25)}
.lay-polaroid .hp img{height:auto;aspect-ratio:4/5}
.lay-polaroid .hp1{left:3%;top:3%;transform:rotate(-6deg);z-index:2}
.lay-polaroid .hp1:only-child{left:18%}
.lay-polaroid .hp2{right:1%;top:17%;transform:rotate(7deg)}
.lay-polaroid .hp::before{content:'';position:absolute;top:-13px;left:50%;width:88px;height:26px;transform:translateX(-50%) rotate(-4deg);background:color-mix(in srgb,var(--accent-soft) 75%,transparent);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.lay-polaroid .hero h1{font-size:clamp(3.6rem,16vw,7rem);line-height:.95}
.lay-polaroid .gallery figure{background:#fffdf8;padding:8px 8px 32px;border-radius:2px;aspect-ratio:auto;rotate:-2deg}
.lay-polaroid .gallery figure:nth-child(even){rotate:2.5deg}
.lay-polaroid .gallery img{height:auto;aspect-ratio:4/5}

/* Programa en línea de tiempo (Jardín y Campestre) */
:is(.lay-oval,.lay-polaroid) .events{gap:0;margin-left:.5rem;padding-left:1.7rem;border-left:1.5px dashed color-mix(in srgb,var(--accent) 65%,transparent)}
:is(.lay-oval,.lay-polaroid) .event{position:relative;background:none;border:0;border-radius:0;padding:.4rem 0 1.8rem}
:is(.lay-oval,.lay-polaroid) .event::before{content:'';position:absolute;left:calc(-1.7rem - 7px);top:.75rem;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}

/* Añadir al calendario */
.cal-sec{padding-top:0}
.cal-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.lay-editorial .cal-row{justify-content:flex-start}

.cd-done{margin-top:2rem;font-family:var(--f-serif);font-style:italic;font-size:1.4rem}

/* Galería: el título lleva el mismo margen que el resto de secciones (en Minimal iba pegado al borde) */
.gallery-sec>.wrap>:is(.over,h2,.lead){padding-left:1.25rem;padding-right:1.25rem}
/* IBAN en una sola línea en el móvil; el botón de copiar pasa debajo, a la derecha */
@media(max-width:440px){
  .copy-row{flex-wrap:wrap;row-gap:.55rem}
  .copy-row>div{flex:1 1 auto}
  .copy-row code{white-space:nowrap;font-size:.98rem;letter-spacing:.03em}
  .copy-row .btn{margin-left:auto}
}

/* --- Azulejo: foto enmarcada con un borde de azulejos pintados --- */
.lay-tile .hero{flex-direction:column;justify-content:center;gap:1.9rem;padding:4.8rem 1.25rem 4.6rem;background:var(--bg)}
.lay-tile .hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34px;background:var(--tile) 0 0/34px 34px repeat-x;opacity:.95}
.lay-tile{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23fff'/%3E%3Cg fill='none' stroke='%231F4E9A' stroke-width='1.6'%3E%3Crect x='.8' y='.8' width='38.4' height='38.4'/%3E%3Cpath d='M20 4c4 6 4 10 0 16-4-6-4-10 0-16zM20 36c4-6 4-10 0-16-4 6-4 10 0 16zM4 20c6-4 10-4 16 0-6 4-10 4-16 0zM36 20c-6-4-10-4-16 0 6 4 10 4 16 0z'/%3E%3C/g%3E%3Cg fill='%231F4E9A'%3E%3Ccircle cx='20' cy='20' r='2.6'/%3E%3Cpath d='M0 0h6L0 6zM40 0h-6l6 6zM0 40h6l-6-6zM40 40h-6l6-6z'/%3E%3C/g%3E%3C/svg%3E")}
.lay-tile .hero-photos{display:block}
.lay-tile .hp1{width:min(74vw,350px);aspect-ratio:4/5;padding:22px;background:var(--tile) 0 0/22px 22px;box-shadow:0 26px 50px color-mix(in srgb,var(--ink) 18%,transparent)}
.lay-tile .hp1 img{outline:3px solid #fff}
.lay-tile .hp2{display:none}
.lay-tile .hero h1{font-size:clamp(2.8rem,11vw,5rem);letter-spacing:.02em}
.lay-tile .hero h1 span{display:inline;font-size:.55em;margin:0 .12em;color:var(--accent)}
.lay-tile .event{border-radius:4px;border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);border-top:5px solid var(--primary)}
.lay-tile .gallery figure{border-radius:4px;padding:10px;background:var(--tile) 0 0/10px 10px}
.lay-tile .gallery img{border-radius:2px}
.lay-tile .rsvp-card,.lay-tile .gift-box{border-radius:6px}

/* --- Burdeos: el marco de Noche de gala en versión clara, con velo burdeos sobre la foto --- */
.th-burdeos .hero.has-photo{background:linear-gradient(180deg,rgba(52,12,24,.58),rgba(52,12,24,.24) 45%,rgba(52,12,24,.8)),var(--cover) center 35%/cover no-repeat}
.th-burdeos .hero.has-photo h1{text-transform:none;letter-spacing:.01em;font-style:italic;font-size:clamp(2.6rem,10vw,5rem)}
.th-burdeos .event{border-radius:2px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.th-burdeos .gallery figure{border-radius:2px}

/* --- Lavanda: arco con borde de ramitas en vez de rombos --- */
.th-lavanda.lay-arch .hero::after{background:radial-gradient(circle at 50% 50%,var(--primary) 2.2px,transparent 2.8px) 0 0/14px 18px,radial-gradient(circle at 50% 50%,var(--accent) 1.6px,transparent 2.2px) 7px 9px/14px 18px;height:18px;opacity:.55}
.th-lavanda .hero h1{font-size:clamp(3.2rem,13vw,5.6rem)}
.th-burdeos .hero.has-photo h1 span{color:#F1E4D0;font-style:normal}

/* Vuestra mesa */
.table-name{display:inline-block;font-family:var(--f-display);font-weight:var(--display-weight,400);font-size:clamp(2.4rem,11vw,3.6rem);line-height:1.1;color:var(--primary);padding:.5rem 1.6rem;margin:.4rem 0 1rem;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:999px;background:var(--paper)}

/* Botón de la música: abajo a la izquierda, discreto; las barras bailan mientras suena */
.sound{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;width:46px;height:46px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 22px color-mix(in srgb,var(--shadow,var(--ink)) 18%,transparent);display:grid;place-items:center;cursor:pointer;padding:0}
.sound-bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.sound-bars i{width:3px;height:4px;border-radius:2px;background:var(--primary);transition:height .3s}
.sound.on .sound-bars i{animation:sndBar 1s ease-in-out infinite}
.sound.on .sound-bars i:nth-child(2){animation-delay:.2s}
.sound.on .sound-bars i:nth-child(3){animation-delay:.4s}
.sound:not(.on)::after{content:'';position:absolute;width:24px;height:2px;background:var(--primary);transform:rotate(-45deg);opacity:.75}
@keyframes sndBar{0%,100%{height:4px}50%{height:16px}}
body.envelope-lock .sound{display:none}
@media(prefers-reduced-motion:reduce){.sound.on .sound-bars i{animation:none;height:12px}}

/* ===== Fechas y horas en iPhone: Safari ignora el ancho y las saca de su caja; además, vacías no muestran nada ===== */
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;min-width:0;min-height:2.95em;text-align:left;line-height:1.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D4A3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8em center;background-size:1.15em;padding-right:2.5em}
input[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D4A3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E")}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.3em}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
/* Ningún campo puede ser más ancho que su hueco (en rejillas y flex) */
input,select,textarea{max-width:100%;min-width:0}
label,.fld{min-width:0}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{color:var(--ink,#24211C)}
/* El botón de la música, arriba a la derecha: abajo tapaba botones y choca con la barra de Safari */
.sound{left:auto;right:12px;bottom:auto;top:calc(12px + env(safe-area-inset-top));width:40px;height:40px}
@media(max-width:440px){
  .copy-row{flex-wrap:nowrap;gap:.6rem}
  .copy-row>div{flex:1 1 auto}
  .copy-row code{font-size:.9rem;letter-spacing:0}
  .copy-row .btn{margin-left:0;padding:.45rem .8rem}
}