/* Boda · Ana Lucía & Diego — marfil, salvia, terracota y oro viejo */
:root{
  --ivory:#fbf8f1;--paper:#f4efe3;--sage:#8a9a7b;--olive:#5d6b4f;--terra:#c07a5a;--gold:#b89b5e;--ink:#3b3a33;--mut:#7a766a;
  --ph-bg:linear-gradient(135deg,#e7e3d4,#d3d9c8);--ph-ink:#5d6b4f;
  --music-bg:var(--olive);--music-ink:#fff;
}
body{background:var(--ivory);color:var(--ink);font:300 17px/1.7 "Jost",system-ui,sans-serif;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}
.leaves{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* Trazos que se dibujan */
.draw path{fill:none;stroke:var(--sage);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.draw.on path{animation:draw 3s ease forwards}
.draw.on path:nth-child(2){animation-delay:.8s;animation-duration:3.5s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Intro: tarjeta con sello de lacre ---------- */
.gate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px;background:#e9e3d3;perspective:1400px;transition:opacity 1s}
.card3d{position:relative;width:min(84vw,360px);aspect-ratio:3/4.3;perspective:1400px}
.door{position:absolute;top:0;bottom:0;width:50%;background:var(--paper);box-shadow:0 20px 50px rgba(59,58,51,.25);transition:transform 1.6s cubic-bezier(.6,0,.2,1);backface-visibility:hidden;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dl{left:0;transform-origin:0 50%;border-radius:6px 0 0 6px}
.dr{right:0;transform-origin:100% 50%;border-radius:0 6px 6px 0}
.door-in{position:absolute;inset:14px;border:1px solid var(--gold);display:grid;place-items:center}
.dl .door-in{right:0;border-right:0}
.dr .door-in{left:0;border-left:0}
.door em{font:400 5rem "Parisienne",cursive;color:var(--sage);opacity:.35;font-style:normal}
.seal{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border:0;padding:0;background:none;z-index:2;animation:sealp 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(59,58,51,.3))}
@keyframes sealp{50%{transform:scale(1.06)}}
.sh{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;transition:transform 1.2s cubic-bezier(.5,0,.3,1),opacity 1.2s}
.sh::before{content:"";position:absolute;top:0;width:92px;height:92px;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;
  background:radial-gradient(circle at 35% 30%,#b5c3a6,#7d8f6c 45%,#56663f 80%);box-shadow:inset 0 0 0 7px rgba(255,255,255,.12),inset 0 0 0 9px rgba(0,0,0,.08)}
.shl{left:0}.shl::before{left:0}
.shr{right:0}.shr::before{right:0}
.seal-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.18em;white-space:nowrap;font:400 1.5rem "Parisienne",cursive;color:#eef2e6;text-shadow:0 1px 0 rgba(0,0,0,.25);transition:opacity .4s}
.seal-t i{font-style:normal}
.gate-hint{font:italic 400 1.2rem "Cormorant",serif;color:var(--olive);animation:fadeP 2.4s ease-in-out infinite}
@keyframes fadeP{50%{opacity:.45}}
.gate-guest{color:var(--mut)}
.gate-guest b{color:var(--ink);font-weight:500}
.gate.open .seal{animation:none}
.gate.open .seal-t{opacity:0}
.gate.open .shl{transform:translate(-30px,40px) rotate(-25deg);opacity:0}
.gate.open .shr{transform:translate(30px,40px) rotate(25deg);opacity:0}
.gate.open .dl{transform:rotateY(-110deg)}
.gate.open .dr{transform:rotateY(110deg)}
.gate.open .gate-hint,.gate.open .gate-guest{opacity:0;transition:opacity .4s}
.gate.open{background:transparent;transition:background .9s .25s,opacity 1s}
.gate.fade{opacity:0}

/* ---------- Portada ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px 50px;overflow:hidden}
.branch{position:absolute;top:10%;width:90px;height:300px;opacity:.9}
.b-l{left:-6px}
.b-r{right:-6px;transform:scaleX(-1)}
@media (min-width:700px){.branch{width:130px;height:430px}}
.hero-k{font:500 .8rem "Jost";letter-spacing:.5em;text-transform:uppercase;color:var(--olive)}
.arch{width:min(66vw,280px);aspect-ratio:3/4;margin:22px auto 6px;border-radius:999px 999px 8px 8px;box-shadow:0 0 0 8px var(--ivory),0 0 0 9px var(--gold),0 30px 60px rgba(59,58,51,.2)}
.arch img{animation:kb 20s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.1)}}
.names{margin:0;width:min(94vw,560px)}
.names svg{width:100%;overflow:visible}
.nm{font:400 74px "Parisienne",cursive;fill:transparent;stroke:var(--olive);stroke-width:1;stroke-dasharray:900;stroke-dashoffset:900}
.names.on .nm{animation:write 3.2s ease forwards,fillin 1s 2.4s forwards}
.names.on .n2{animation-delay:1s,3.4s}
@keyframes write{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill:var(--olive);stroke-width:0}}
.hero-date{display:flex;align-items:center;gap:16px;margin-top:4px;font:500 .8rem "Jost";letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.hero-date span{padding:6px 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);min-width:84px}
.hero-date b{font:500 3rem/1 "Cormorant",serif;color:var(--terra);letter-spacing:0}
.hero-y{margin-top:8px;font:italic 400 1.15rem "Cormorant",serif;color:var(--olive)}
.guest{margin-top:22px;display:grid;padding:12px 26px;border:1px solid rgba(184,155,94,.6);background:rgba(255,255,255,.6)}
.guest small{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.guest b{font:400 2rem "Parisienne",cursive;color:var(--olive);font-weight:400}
.passes{font-size:.85rem;color:var(--terra)}

/* ---------- Secciones ---------- */
.sec{max-width:780px;margin:0 auto;padding:80px 22px;text-align:center;position:relative}
.sec.tint{max-width:none;background:linear-gradient(180deg,transparent,rgba(138,154,123,.12) 12%,rgba(138,154,123,.12) 88%,transparent)}
.sec.tint>*{max-width:780px;margin-left:auto;margin-right:auto}
.title{font:400 clamp(2.6rem,11vw,3.8rem)/1.1 "Parisienne",cursive;color:var(--olive);margin-bottom:26px}
.title::after{content:"";display:block;width:90px;height:12px;margin:10px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 12'%3E%3Cpath d='M0 6h36M54 6h36' stroke='%23b89b5e' stroke-width='1'/%3E%3Cpath d='M45 1l5 5-5 5-5-5z' fill='none' stroke='%23b89b5e'/%3E%3C/svg%3E") center/contain no-repeat}
.lead{color:var(--mut);margin:-10px 0 22px}
.quote{font:italic 400 clamp(1.35rem,5vw,1.75rem)/1.55 "Cormorant",serif;max-width:560px;margin:0 auto}
.note{margin-top:22px;font:italic 400 1.1rem "Cormorant",serif;color:var(--mut)}

.rings{width:150px;margin:0 auto 20px;overflow:visible}
.rings.sm{width:100px}
.ring{fill:none;stroke:var(--gold);stroke-width:3.5;transform-origin:center;transform-box:fill-box}
.rings .r1{transform:translateX(-30px);opacity:0}
.rings .r2{transform:translateX(30px);opacity:0}
.rings.in .r1,.rsvp-ok .r1{animation:ringL 1.6s .3s cubic-bezier(.3,1.3,.5,1) forwards}
.rings.in .r2,.rsvp-ok .r2{animation:ringR 1.6s .3s cubic-bezier(.3,1.3,.5,1) forwards}
@keyframes ringL{to{transform:none;opacity:1}}
@keyframes ringR{to{transform:none;opacity:1}}
.gem{fill:#fff;stroke:var(--gold);opacity:0}
.rings.in .gem{animation:gem .8s 1.7s forwards}
@keyframes gem{50%{opacity:1;filter:drop-shadow(0 0 6px #fff)}to{opacity:1}}
.parents{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:22px;margin-top:40px}
.parents small{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--terra)}
.parents p{font:400 1.3rem "Cormorant",serif}

.cd{display:flex;justify-content:center;gap:clamp(8px,3vw,22px);margin-bottom:28px}
.cd div{display:grid;min-width:64px}
.cd b{display:block;font:500 clamp(2.4rem,11vw,3.6rem)/1 "Cormorant",serif;color:var(--terra);overflow:hidden}
.cd b.tick{animation:roll .6s cubic-bezier(.3,1.3,.5,1)}
@keyframes roll{from{transform:translateY(60%);opacity:0}}
.cd span{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}

.btn{display:inline-flex;align-items:center;justify-content:center;border:0;padding:14px 30px;border-radius:2px;text-decoration:none;background:var(--olive);color:#fff;font:400 .78rem "Jost";letter-spacing:.3em;text-transform:uppercase;transition:background .3s,transform .15s;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35),transparent 65%);transform:translateX(-100%);transition:transform .8s}
.btn:hover::after{transform:translateX(100%)}
.btn:hover{background:var(--sage)}
.btn:active{transform:scale(.97)}
.btn.line{background:transparent;color:var(--olive);border:1px solid var(--olive);padding:10px 20px;margin-top:12px}
.btn.wide{width:100%}
.link{background:none;border:0;color:var(--olive);text-decoration:underline;margin-top:12px}

/* Historia: carrusel horizontal */
.story{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 20px;margin:0 -22px;padding-left:22px;padding-right:22px;scrollbar-width:none}
.story::-webkit-scrollbar{display:none}
.story article{flex:0 0 min(72vw,280px);scroll-snap-align:center;text-align:left;background:#fff;padding:12px 12px 18px;box-shadow:0 14px 30px rgba(59,58,51,.12);transition:transform .5s}
.story .pic{aspect-ratio:4/5;margin-bottom:10px}
.story time{font:500 .75rem "Jost";letter-spacing:.3em;color:var(--terra)}
.story h3{font:400 1.9rem/1.1 "Parisienne",cursive;color:var(--olive);margin:2px 0 4px}
.story p{font-size:.92rem;color:var(--mut);line-height:1.45}
.story-bar{height:2px;background:rgba(138,154,123,.25);max-width:220px;margin:6px auto 0}
.story-bar i{display:block;height:100%;width:25%;background:var(--olive);transition:transform .2s;transform-origin:0 0}

.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;margin-bottom:26px}
.ev{padding:26px 20px;background:var(--ivory);border:1px solid rgba(184,155,94,.5);outline:1px solid rgba(184,155,94,.25);outline-offset:-8px}
.ev .ic{width:52px;height:52px;margin:0 auto 6px}
.ev .ic path{stroke:var(--terra)}
.ev time{font:500 .8rem "Jost";letter-spacing:.3em;color:var(--terra)}
.ev h3{font:500 1.6rem "Cormorant",serif;margin:2px 0}
.ev p{color:var(--mut);font-size:.95rem;line-height:1.5}
.hacienda{aspect-ratio:16/9;border-radius:999px 999px 0 0;box-shadow:0 30px 60px rgba(59,58,51,.18)}
.hacienda img{transition:transform 8s ease-out}
.hacienda.in img{transform:scale(1.12)}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px}
.it{padding:24px 18px;background:#fff;box-shadow:0 10px 26px rgba(59,58,51,.08);border-top:3px solid var(--sage)}
.it h3{font:500 1.35rem "Cormorant",serif;color:var(--olive);margin-bottom:6px}
.it p{font-size:.93rem;color:var(--mut);line-height:1.5}
.it b{color:var(--terra);font-weight:500}
.sw{display:flex;justify-content:center;gap:8px;margin-top:12px}
.sw i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(59,58,51,.15)}

.panel{max-width:460px;padding:28px 22px;background:#fff;box-shadow:0 20px 50px rgba(59,58,51,.12);border:1px solid rgba(184,155,94,.35)}
.rsvp-form label{font-size:.85rem;letter-spacing:.06em;color:var(--mut)}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{border-radius:0;border:0;border-bottom:1px solid rgba(93,107,79,.4);background:var(--ivory);color:var(--ink)}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{outline:none;border-bottom-color:var(--olive);background:#f1f3ec}
.rsvp-choice label{border-radius:0;border:1px solid rgba(93,107,79,.35);font:500 1.1rem "Cormorant",serif}
.rsvp-choice input:checked+label{background:var(--olive);border-color:var(--olive);color:#fff}
.rsvp-choice input:focus-visible+label{outline:2px solid var(--terra)}
.rsvp-ok h3{font:400 2rem/1.2 "Parisienne",cursive;color:var(--olive);margin:6px 0}
.rsvp-ok p{color:var(--mut);margin-bottom:16px}
.foot{text-align:center;padding:60px 20px 110px;color:var(--mut)}
.foot-n{font:400 3rem "Parisienne",cursive;color:var(--olive)}
.tag{letter-spacing:.2em;font-size:.85rem;color:var(--terra)}