/* Invita — © Carlo · Dev (demo). Un solo diseño, tres temas: boda, cumpleaños, despedida. */
:root{--ease:cubic-bezier(.22,1,.36,1);--r:26px;
--bg:#F6EEE3;--papel:#FFFBF5;--tinta:#3A2E2A;--mut:#7C6B60;--linea:#E4D6C4;--ac:#B98A5E;--ac2:#6E7F5E;--ac-t:#fff;--hero1:#2F2A22;--hero2:#6E7F5E;
--f-d:'Cormorant Garamond',Georgia,serif;--f-t:'Outfit',system-ui,sans-serif;--peso-d:500;--mayus:none}
.t-cumple{--bg:#FFF6FB;--papel:#fff;--tinta:#1E1535;--mut:#6B5F86;--linea:#EBD9F2;--ac:#FF4F9A;--ac2:#7B4DFF;--hero1:#1A0F3A;--hero2:#FF4F9A;
--f-d:'Bricolage Grotesque','Outfit',sans-serif;--peso-d:800}
.t-desp{--bg:#17110D;--papel:#241B15;--tinta:#F5E9D6;--mut:#B8A58E;--linea:#3B2D22;--ac:#F2542D;--ac2:#0E9594;--hero1:#0E0A07;--hero2:#F2542D;
--f-d:'Anton','Impact',sans-serif;--peso-d:400;--mayus:uppercase}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-t);background:var(--bg);color:var(--tinta);line-height:1.55;overflow-x:hidden;transition:background .6s,color .6s}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
.wrap{width:min(1080px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--f-d);font-weight:var(--peso-d);line-height:1.02;text-transform:var(--mayus);letter-spacing:-.01em}
.t-desp h1,.t-desp h2{letter-spacing:.01em}
h2{font-size:clamp(2.2rem,5vw,3.6rem)}
em{font-style:italic;color:var(--ac)}
.t-cumple em,.t-desp em{font-style:normal}
.kick{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);font-weight:600;margin-bottom:1rem}
.kick::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.7rem;border-radius:99px;background:var(--ac);color:var(--ac-t);font-weight:600;font-size:1rem;transition:transform .35s var(--ease),filter .3s,box-shadow .3s;box-shadow:0 12px 28px -12px var(--ac)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn.suave{background:transparent;color:var(--tinta);box-shadow:none;border:1.5px solid var(--linea)}
.btn.suave:hover{border-color:var(--ac);color:var(--ac)}
.btn.claro{background:#fff;color:#1b1b1b;box-shadow:0 12px 28px -14px rgba(0,0,0,.5)}
.btn[disabled]{opacity:.5;pointer-events:none}
.t-desp .btn{color:#fff}.t-desp .btn.claro{color:#1b1b1b}.t-desp .btn.suave{color:var(--tinta)}

/* Barra de demo */
.demo{position:fixed;z-index:60;top:12px;left:50%;translate:-50% 0;display:flex;gap:.25rem;padding:.3rem;border-radius:99px;background:rgba(20,16,12,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 30px -12px rgba(0,0,0,.6);max-width:calc(100% - 20px);transition:transform .5s var(--ease)}
.demo.oculto{transform:translateY(-150%)}
.demo button{padding:.5rem .95rem;border-radius:99px;font-size:.84rem;font-weight:600;color:rgba(255,255,255,.75);transition:.3s;white-space:nowrap}
.demo button.on{background:#fff;color:#1b1b1b}
.demo button:not(.on):hover{color:#fff}
.demo a{padding:.5rem .8rem;border-radius:99px;font-size:.8rem;font-weight:600;color:#fff;text-decoration:none;border:1.5px dashed rgba(255,255,255,.5);white-space:nowrap}
.demo a:hover{background:rgba(255,255,255,.15)}

/* Portada */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;color:#fff;isolation:isolate;overflow:hidden;padding:84px 20px 40px;background:radial-gradient(120% 90% at 50% 0%,var(--hero2) 0%,var(--hero1) 70%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero .deco{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.t-boda .hero{background:radial-gradient(110% 80% at 50% 0%,#8A9B72 0%,#3C4631 55%,#241F18 100%)}
.t-boda .deco::before,.t-boda .deco::after{content:"";position:absolute;top:-10%;width:min(34vw,380px);height:120%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 600'%3E%3Cg fill='none' stroke='%23d9c9a3' stroke-width='1.6' opacity='.55'%3E%3Cpath d='M60 0C40 150 80 300 55 600'/%3E%3C/g%3E%3Cg fill='%23c5d0a8' opacity='.5'%3E%3Cpath d='M52 40q-30-4-38 18q26 8 38-18zM64 90q30-4 38 18q-26 8-38-18zM50 150q-30-4-38 18q26 8 38-18zM66 205q30-4 38 18q-26 8-38-18zM48 265q-30-4-38 18q26 8 38-18zM64 325q30-4 38 18q-26 8-38-18zM52 390q-30-4-38 18q26 8 38-18zM62 450q30-4 38 18q-26 8-38-18zM54 515q-30-4-38 18q26 8 38-18z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;animation:mece 9s ease-in-out infinite alternate}
.t-boda .deco::before{left:-2%}.t-boda .deco::after{right:-2%;transform:scaleX(-1);animation-delay:-4s}
@keyframes mece{from{rotate:-2deg}to{rotate:2deg}}
.t-cumple .hero{background:radial-gradient(90% 70% at 20% 10%,#FF4F9A 0%,transparent 60%),radial-gradient(90% 80% at 85% 90%,#7B4DFF 0%,transparent 60%),#1A0F3A}
.t-cumple .deco::before{content:"30";position:absolute;right:-4%;bottom:-14%;font-family:var(--f-d);font-weight:800;font-size:min(70vw,620px);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.22);animation:flota 7s ease-in-out infinite alternate}
@keyframes flota{from{translate:0 0;rotate:-4deg}to{translate:-2% -4%;rotate:3deg}}
.t-desp .hero{background:linear-gradient(180deg,#0E0A07 0%,#2A140C 60%,#7A2A12 100%)}
.t-desp .deco::before{content:"";position:absolute;inset:-20% -10%;background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(242,84,45,.09) 46px 50px);animation:rayas 14s linear infinite}
@keyframes rayas{to{translate:100px 0}}
.t-desp .deco::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:radial-gradient(70% 100% at 50% 100%,rgba(242,84,45,.55),transparent 70%)}
.hero .txt{max-width:900px}
.sello{display:inline-block;padding:.45rem 1.1rem;border-radius:99px;border:1px solid rgba(255,255,255,.4);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:1.6rem;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero h1{font-size:clamp(3.2rem,11vw,8rem);text-shadow:0 6px 50px rgba(0,0,0,.3)}
.t-boda .hero h1{font-weight:500;font-size:clamp(3.4rem,12vw,8.4rem)}
.hero h1 em{color:var(--oro,#F1D9A7)}
.t-cumple .hero h1 em{color:#FFC83D}.t-desp .hero h1 em{color:#F2542D}
.hero .frase{font-size:clamp(1.05rem,2vw,1.35rem);margin:1.2rem auto 0;max-width:520px;opacity:.92}
.cuando{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;margin-top:1.6rem;font-size:1rem}
.cuando span{display:inline-flex;align-items:center;gap:.5rem}
.cuando svg{width:18px;height:18px;opacity:.85}
.cuenta{display:flex;justify-content:center;gap:clamp(.5rem,2vw,1rem);margin-top:2.2rem}
.cuenta div{min-width:clamp(64px,17vw,96px);padding:.8rem .4rem;border-radius:20px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22)}
.cuenta b{display:block;font-family:var(--f-d);font-weight:var(--peso-d);font-size:clamp(1.8rem,6vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums}
.cuenta small{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.hero .acc{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.2rem}
.baja{position:absolute;bottom:18px;left:50%;translate:-50% 0;width:26px;height:44px;border:2px solid rgba(255,255,255,.5);border-radius:20px}
.baja::after{content:"";position:absolute;top:8px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:#fff;animation:rueda 1.8s infinite}
@keyframes rueda{from{opacity:1;translate:0 0}to{opacity:0;translate:0 14px}}

/* Secciones */
section{padding:clamp(4rem,9vw,7rem) 0}
.cab{max-width:640px;margin-bottom:2.6rem}
.cab p{color:var(--mut);margin-top:1rem}
.centro{text-align:center;margin-inline:auto}.centro .kick{justify-content:center}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.rv.in{opacity:1;transform:none}
.mensaje{font-family:var(--f-d);font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.2;font-weight:var(--peso-d);text-transform:var(--mayus);max-width:820px;margin-inline:auto;text-align:center}
.mensaje em{color:var(--ac)}

/* Cronograma */
.crono{position:relative;display:grid;gap:1.1rem;max-width:760px;margin-inline:auto}
.crono::before{content:"";position:absolute;left:92px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--ac),var(--ac2));opacity:.5}
.paso{display:grid;grid-template-columns:64px 28px 1fr;gap:.9rem;align-items:start}
.paso time{font-family:var(--f-d);font-size:1.5rem;font-weight:var(--peso-d);color:var(--ac);text-align:right;padding-top:.8rem;line-height:1}
.paso i{width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--ac);margin:.95rem 0 0 7px;position:relative;z-index:1;box-shadow:0 0 0 6px var(--bg)}
.paso div{background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:.9rem 1.2rem;transition:transform .4s var(--ease),border-color .3s}
.paso:hover div{transform:translateX(6px);border-color:var(--ac)}
.paso b{font-family:var(--f-d);font-size:1.35rem;font-weight:var(--peso-d);text-transform:var(--mayus)}
.paso small{display:block;color:var(--mut);font-size:.9rem}

/* Lugar */
.lugar{display:grid;grid-template-columns:1.05fr 1fr;gap:2rem;align-items:center}
.mapa{border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);background:var(--papel);box-shadow:0 24px 50px -30px rgba(0,0,0,.5);position:relative}
.mapa svg{width:100%;height:auto}
.mapa .pin{animation:pin 2.4s var(--ease) infinite}
@keyframes pin{0%,100%{translate:0 0}50%{translate:0 -8px}}
.lugar h3{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.4rem}
.lugar p{color:var(--mut)}
.lugar .acc{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* Vestimenta */
.vest{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;background:var(--papel);border:1px solid var(--linea);border-radius:34px;padding:clamp(1.6rem,4vw,3rem)}
.vest h3{font-size:clamp(1.8rem,4vw,2.6rem)}
.vest p{color:var(--mut);margin-top:.6rem}
.paleta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.paleta span{width:clamp(64px,14vw,96px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),0 14px 24px -12px rgba(0,0,0,.5);transition:transform .5s var(--ease)}
.paleta span:hover{transform:translateY(-8px) scale(1.06)}

/* RSVP */
.rsvp{background:var(--papel);border-block:1px solid var(--linea)}
.caja{max-width:640px;margin-inline:auto;background:var(--bg);border:1px solid var(--linea);border-radius:34px;padding:clamp(1.4rem,4vw,2.4rem);box-shadow:0 30px 60px -36px rgba(0,0,0,.5)}
.saludo{font-family:var(--f-d);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:var(--peso-d);text-transform:var(--mayus);line-height:1.1}
.saludo em{color:var(--ac)}
.pases{display:inline-block;margin:.7rem 0 1.4rem;padding:.35rem .9rem;border-radius:99px;background:var(--papel);border:1px dashed var(--ac);font-size:.85rem;font-weight:600;color:var(--ac)}
form{display:grid;gap:1.1rem}
label.c{display:grid;gap:.4rem;font-size:.88rem;font-weight:600}
label.c small{font-weight:400;color:var(--mut)}
input,select,textarea{width:100%;padding:.85rem 1rem;border-radius:16px;border:1.5px solid var(--linea);background:var(--papel);transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 22%,transparent)}
textarea{min-height:86px;resize:vertical}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.si-no{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.si-no input{position:absolute;opacity:0;pointer-events:none}
.si-no label{display:grid;place-items:center;gap:.15rem;padding:1.1rem .6rem;border-radius:20px;border:1.5px solid var(--linea);background:var(--papel);cursor:pointer;text-align:center;font-weight:600;transition:.3s var(--ease)}
.si-no label span{font-size:1.7rem;line-height:1}
.si-no label:hover{transform:translateY(-3px);border-color:var(--ac)}
.si-no input:checked+label{background:var(--ac);color:var(--ac-t);border-color:var(--ac);transform:translateY(-3px);box-shadow:0 14px 26px -14px var(--ac)}
.si-no input:focus-visible+label{outline:3px solid var(--ac);outline-offset:3px}
.cond{display:grid;gap:1.1rem}
.cond[hidden]{display:none}
.err{color:#d6304b;font-size:.82rem;font-weight:500}
.t-desp .err{color:#ff7a8e}
.gracias{text-align:center;padding:1rem 0}
.gracias .gran{font-size:3.4rem;line-height:1;animation:pop .8s var(--ease)}
@keyframes pop{from{scale:.3;opacity:0}to{scale:1;opacity:1}}
.gracias h3{font-size:clamp(1.9rem,5vw,2.8rem);margin:.8rem 0 .4rem}
.gracias p{color:var(--mut)}
.gracias .acc{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.4rem}
.cierre{text-align:center;font-size:.85rem;color:var(--mut);margin-top:1rem}

/* Regalo + mensajes */
.regalo{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.tarjeta{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border-radius:30px;padding:1.8rem;box-shadow:0 30px 50px -28px var(--ac);position:relative;overflow:hidden}
.tarjeta::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.14)}
.tarjeta small{letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;opacity:.85}
.tarjeta b{display:block;font-family:var(--f-d);font-size:2.2rem;font-weight:var(--peso-d);margin:.3rem 0 .1rem;position:relative;z-index:1}
.tarjeta .btn{margin-top:1.1rem;background:#fff;color:#1b1b1b;box-shadow:none;position:relative;z-index:1}
.regalo p{color:var(--mut);font-size:1.05rem}
.muro{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.nota{background:var(--papel);border:1px solid var(--linea);border-radius:22px;padding:1.2rem 1.3rem;animation:fadeIn .6s var(--ease)}
.nota:nth-child(odd){rotate:-1deg}.nota:nth-child(even){rotate:1deg}
.nota p{font-size:.98rem}.nota b{display:block;margin-top:.7rem;font-size:.85rem;color:var(--ac)}
@keyframes fadeIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

footer{padding:3rem 0 6rem;text-align:center;color:var(--mut);font-size:.88rem;border-top:1px solid var(--linea)}
footer a{color:var(--ac)}
.fija{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;align-items:center;justify-content:space-between;gap:1rem;background:var(--ac);color:var(--ac-t);padding:.55rem .55rem .55rem 1.2rem;border-radius:99px;box-shadow:0 14px 40px -10px rgba(0,0,0,.55);transform:translateY(150%);transition:transform .5s var(--ease)}
.fija.on{transform:none}
.fija b{font-family:var(--f-d);font-weight:var(--peso-d);font-size:1.1rem;text-transform:var(--mayus)}
.fija a{background:#fff;color:#1b1b1b;text-decoration:none;font-weight:700;padding:.65rem 1.2rem;border-radius:99px;font-size:.92rem}
.toast{position:fixed;left:50%;bottom:90px;translate:-50% 20px;opacity:0;background:#1b1b1b;color:#fff;padding:.7rem 1.2rem;border-radius:99px;font-size:.9rem;z-index:80;transition:.4s var(--ease);pointer-events:none}
.toast.on{opacity:1;translate:-50% 0}

@media(max-width:760px){
  .lugar,.vest,.regalo{grid-template-columns:1fr}
  .fija{display:flex}
  .demo{top:8px}.demo button{padding:.45rem .7rem;font-size:.78rem}.demo a{padding:.45rem .6rem;font-size:.74rem}
  .crono::before{left:75px}.paso{grid-template-columns:52px 24px 1fr;gap:.6rem}.paso time{font-size:1.2rem}
  .dos{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
.btn svg{width:18px;height:18px;flex:none}
@media(max-width:760px){.t-boda .deco::before,.t-boda .deco::after{opacity:.55}.hero .acc .btn{width:100%;max-width:300px}}
.demo a.home{border:0;background:rgba(255,255,255,.14)}
@media(max-width:760px){.demo a.home{padding:.45rem .6rem}}
@media(max-width:760px){.demo{max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none}.demo::-webkit-scrollbar{display:none}.demo>*{flex:none}.si-no{position:relative}}