:root{
  --ocean:#0F3D4C;
  --ocean-2:#16566A;
  --sea:#2A8DA3;
  --dune:#E9B872;
  --dune-2:#D69A4A;
  --sand:#F3DDB0;
  --foam:#E6F0EE;
  --rock:#23201D;
  --lava:#7A4A35;
  --flor:#B8326B;
  --cactus:#2F6B4A;
  --paper:#FFFFFF;
  --ink:var(--rock);
  --ink-soft:#4B5A5E;
  --bg:var(--foam);
  --panel:var(--paper);
  --panel-2:#F4F8F7;
  --line:#C9DAD6;
  --ok:#2F8F5B;
  --sel:var(--ocean);
  --sel-ink:#fff;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --nav-h:4.4rem;
  --r:22px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EAF1EF;--ink-soft:#A9BCBE;--bg:#0B2630;--panel:#123542;--panel-2:#0F2E3A;--line:#22505F;--ok:#5CC48A;--flor:#E0588F;--sel:var(--dune);--sel-ink:var(--rock);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#EAF1EF;--ink-soft:#A9BCBE;--bg:#0B2630;--panel:#123542;--panel-2:#0F2E3A;--line:#22505F;--ok:#5CC48A;--flor:#E0588F;--sel:var(--dune);--sel-ink:var(--rock);color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.authed-app{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--dune);outline-offset:3px;border-radius:6px}
h2{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,7vw,2.5rem);line-height:1.02;letter-spacing:-.025em;margin:0 0 .6rem}
h3{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.2;margin:0 0 .3rem}
p{margin:0 0 1rem}
.soft{color:var(--ink-soft)}
.small{font-size:.9rem}
.kicker{font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--flor);margin:0 0 .35rem}
.wrap{max-width:46rem;margin:0 auto;padding:0 16px}
section.block{padding-top:3.2rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--display);font-weight:600;font-size:.85rem;border-radius:999px;padding:.2rem .7rem;background:var(--panel-2);border:1px solid var(--line)}
.pill.hot{background:var(--flor);color:#fff;border-color:transparent}
.pill.ok{background:var(--ok);color:#fff;border-color:transparent}
.pill.dune{background:var(--dune);color:var(--rock);border-color:transparent}

/* BOTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.8rem 1.2rem;border-radius:16px;border:0;font:700 1.05rem var(--display);text-decoration:none;background:var(--ocean);color:#fff;transition:transform .12s ease,box-shadow .2s ease;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn:active{transform:scale(.97)}
.btn.block{display:flex;width:100%}
.btn.yes{background:var(--ok)}
.btn.flor{background:var(--flor)}
.btn.dune{background:var(--dune);color:var(--rock)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line);box-shadow:none}
.btn.wa{background:#1FA855}
.btn[disabled]{opacity:.5;pointer-events:none}
.link{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;color:var(--ink-soft);font-size:.92rem}
.seg{display:flex;gap:.4rem;flex-wrap:wrap}
.seg button{flex:1 1 0;min-height:3rem;min-width:5.5rem;border-radius:14px;border:2px solid var(--line);background:var(--panel);font:600 1rem var(--display);padding:.5rem .8rem;transition:all .15s}
.seg button[aria-pressed="true"]{background:var(--sel);border-color:var(--sel);color:var(--sel-ink)}
.switch{display:flex;align-items:center;gap:.8rem;margin-top:.9rem;cursor:pointer;font-size:.98rem}
.switch input{appearance:none;-webkit-appearance:none;width:3.1rem;height:1.8rem;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .2s;margin:0;cursor:pointer}
.switch input::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.4rem;height:1.4rem;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked{background:var(--flor)}
.switch input:checked::after{transform:translateX(1.3rem)}

/* PORTADA I ESCENA */
.hero{position:relative;color:#fff;overflow:hidden;min-height:min(74svh,40rem);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.hero.short{min-height:min(70svh,36rem)}
.hero .scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.scene .sun{transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.scene .sun.rising{animation:rise 2.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(190px)}to{transform:translateY(0)}}
.scene .star{animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25}}
.scene .wave{animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(-18px)}}
.hero-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 0;font-family:var(--display);font-size:.95rem}
.hero-top .who{background:rgba(15,61,76,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:.35rem .5rem .35rem .9rem;display:flex;gap:.6rem;align-items:center}
.hero-top .who button{background:rgba(255,255,255,.18);border:0;border-radius:999px;padding:.2rem .7rem;color:#fff;font-size:.85rem}
.hero-text{padding:0 16px 2rem;max-width:46rem;margin:0 auto;width:100%}
.crew{display:inline-block;margin:0 0 .6rem;font:800 .95rem var(--display);letter-spacing:.02em;background:var(--rock);color:var(--dune);padding:.3rem .85rem;border-radius:999px}
.hero.night .crew{background:#F7D08A;color:var(--rock)}
.fifty{font-family:var(--display);font-weight:800;font-size:clamp(7.5rem,40vw,15rem);line-height:.78;letter-spacing:-.07em;margin:0;color:var(--rock)}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,8vw,3.2rem);line-height:1;letter-spacing:-.025em;margin:.5rem 0 .5rem;color:var(--rock)}
.hero .sub{margin:0;color:#3a2e22;font-family:var(--display);font-weight:600;font-size:1.05rem}
.hero.night .fifty,.hero.night h1{color:#F7D08A}
.hero.night .sub{color:#e7dccb}
.count{display:inline-flex;align-items:baseline;gap:.45rem;margin-top:.9rem;background:var(--rock);color:var(--dune);padding:.4rem 1rem;border-radius:999px;font-family:var(--display);font-weight:600}
.count b{font-size:1.5rem;font-weight:800;line-height:1}

/* QUÈ TOCA ARA */
.now{position:relative;margin-top:-1.4rem;z-index:2}
.now .card{background:var(--rock);color:#F4EFE7;border:0;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.now .days{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:.9;color:var(--dune);text-align:center;min-width:4.2rem}
.now .days small{display:block;font-size:.75rem;font-weight:600;color:#b3a898;letter-spacing:.04em;margin-top:.25rem}
.now h3{color:#fff;margin:.1rem 0 .15rem}
.now p{margin:0;color:#cfc5b8;font-size:.95rem;line-height:1.45}
.now .kicker{color:var(--dune)}
.notice{margin-top:1rem;background:var(--dune);color:var(--rock);border-radius:var(--r);padding:1rem 1.1rem;display:flex;gap:.8rem;align-items:flex-start}
.notice .ico{font-size:1.6rem;line-height:1}
.notice p{margin:0;font-family:var(--display);font-weight:600}
.notice small{display:block;opacity:.7;font-weight:400}

/* LA VOSTRA UNITAT */
.mine{margin-top:1rem;border:2px solid var(--ocean-2);position:relative;overflow:hidden}
.mine-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.8rem}
.mine-head h3{font-size:1.45rem;margin:0}
.todo{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.5rem}
.todo li{display:flex;gap:.7rem;align-items:flex-start;background:var(--panel-2);border-radius:14px;padding:.7rem .85rem;line-height:1.35}
.todo li .dot{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--flor);color:#fff;font:800 .85rem var(--display);margin-top:.05rem}
.todo li.done .dot{background:var(--ok)}
.todo li b{font-family:var(--display);display:block}
.todo li span{font-size:.9rem;color:var(--ink-soft)}
.todo li a,.todo li button.go{margin-left:auto;align-self:center;font:600 .85rem var(--display);background:var(--ocean);color:#fff;border:0;border-radius:999px;padding:.35rem .8rem;text-decoration:none;white-space:nowrap}
.allgood{text-align:center;padding:1rem 0 .4rem;font-family:var(--display);font-weight:600;font-size:1.15rem}
.allgood .big{font-size:2.6rem;display:block;line-height:1.2}
.step-label{font-family:var(--display);font-weight:600;margin:1rem 0 .45rem;font-size:1rem}
.rsvp-btns{display:grid;grid-template-columns:1.4fr 1fr;gap:.6rem;margin-top:1rem}
.status{display:flex;gap:.9rem;align-items:center;background:color-mix(in srgb,var(--ok) 12%,var(--panel));border-radius:16px;padding:.9rem 1rem}
.status.no{background:var(--panel-2)}
.status .big{font-size:2rem;line-height:1}
.status b{font-family:var(--display);font-size:1.1rem;display:block}
.status span{font-size:.9rem;color:var(--ink-soft)}
.textin{width:100%;min-height:3rem;border-radius:14px;border:2px solid var(--line);background:var(--panel);color:var(--ink);padding:.6rem .9rem}

/* LA COLLA: PLATJA */
.beach{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,#2A8DA3 0,#3FB4C6 64px,#9ad6d6 74px,var(--sand) 92px,#EFD29C 100%);padding:108px 12px 18px}
.beach .foam{position:absolute;left:-10%;right:-10%;top:58px;height:40px;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.9) 0 30%,transparent 31%) 0 0/60px 30px repeat-x;opacity:.8;animation:surf 6s ease-in-out infinite alternate}
@keyframes surf{to{transform:translate(-20px,6px)}}
.beach .sunshade{position:absolute;top:66px;right:18px;width:70px;height:70px}
.towels{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px 10px;position:relative}
.towel{position:relative;height:118px;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:6px 4px 8px;color:#fff;text-align:center;box-shadow:0 6px 0 -2px rgba(0,0,0,.08),0 10px 18px -10px rgba(90,60,20,.5);transform:rotate(var(--rot,0deg))}
.towel::before{content:"";position:absolute;inset:0;border-radius:10px;background:repeating-linear-gradient(180deg,transparent 0 16px,rgba(255,255,255,.28) 16px 22px)}
.towel .figs{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.fig{width:22px;height:46px;position:relative}
.fig::before{content:"";position:absolute;top:0;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#E8B48E}
.fig::after{content:"";position:absolute;top:18px;left:50%;width:22px;height:26px;margin-left:-11px;border-radius:11px 11px 6px 6px;background:var(--rock);opacity:.85}
.fig:nth-child(2)::before{background:#C98D63}
.fig:nth-child(2)::after{background:#fff}
.towel b{position:relative;font-family:var(--display);font-weight:700;font-size:.82rem;line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.towel.me{outline:3px solid var(--rock);outline-offset:3px}
.folded{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:flex-end}
.folded .towel{width:64px;height:38px;padding:0;background:#d9cdb3;box-shadow:none;opacity:.9;justify-content:center}
.folded .towel.me{width:auto;padding:0 .7rem;background:#fff6e3;outline:2px dashed var(--flor);outline-offset:2px}
.folded .towel.me b{color:var(--flor)}
.folded-label{width:100%;font:600 .8rem var(--display);color:#8a7a5b}
.folded .towel::before{background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.35) 10px 13px)}
.folded .towel b{color:#8a7a5b;text-shadow:none;font-weight:600}
.towel.pop{animation:plof .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes plof{from{transform:scale(.3) rotate(-12deg);opacity:0}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:.9rem 1rem}
.stat .n{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1}
.stat span{font-size:.9rem;color:var(--ink-soft)}
.bars{display:grid;gap:.7rem;margin-top:.4rem}
.bar{display:grid;grid-template-columns:5.6rem 1fr auto;gap:.7rem;align-items:center;font-family:var(--display);font-weight:600}
.bar .track{height:1.1rem;background:var(--panel-2);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.bar .fill{height:100%;background:var(--ocean-2);border-radius:999px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.bar.win .fill{background:var(--flor)}
.bar small{font-weight:400;color:var(--ink-soft)}

/* EL PLA: CAMÍ */
.road{position:relative;list-style:none;margin:1rem 0 0;padding:0}
.road::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:6px;border-radius:6px;background:repeating-linear-gradient(180deg,var(--line) 0 10px,transparent 10px 18px)}
.road .past{position:absolute;left:21px;top:10px;width:6px;border-radius:6px;background:var(--ok)}
.stop{position:relative;padding:0 0 1.4rem 4rem;min-height:3.2rem}
.stop .pin{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:3px solid var(--line);font-size:1.3rem}
.stop.done .pin{background:var(--ok);border-color:var(--ok);color:#fff}
.stop.next .pin{background:var(--flor);border-color:var(--flor);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--flor) 25%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--flor) 0%,transparent)}}
.stop.party .pin{background:var(--dune);border-color:var(--dune)}
.stop .when{font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--ink-soft)}
.stop.next .when{color:var(--flor)}
.stop h3{margin:.05rem 0 .15rem}
.stop p{margin:0;font-size:.95rem;line-height:1.45;color:var(--ink-soft)}
.stop.done h3{text-decoration:line-through;text-decoration-thickness:2px;opacity:.65}
.here{position:relative;margin:-.4rem 0 1rem 4rem;font:700 .85rem var(--display);color:var(--flor);display:flex;align-items:center;gap:.4rem}
.here::before{content:"🚐";font-size:1.4rem;position:absolute;left:-3.55rem;top:-.25rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.steps li{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem .9rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;line-height:1.4}
.steps .box{flex:none;width:1.4rem;height:1.4rem;border-radius:6px;border:2px solid var(--ocean-2);margin-top:.1rem;display:grid;place-items:center;font-size:.8rem;color:#fff}
.steps li.done .box{background:var(--ok);border-color:var(--ok)}
.steps li.done .t{text-decoration:line-through;opacity:.6}
.steps small{display:block;color:var(--ink-soft);font-size:.86rem;margin-top:.15rem}
.tier{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.6rem;margin-top:.8rem}
.tier div{background:var(--panel-2);border-radius:14px;padding:.8rem .9rem;line-height:1.35}
.tier b{display:block;font-family:var(--display);margin-bottom:.15rem}
.tier span{font-size:.92rem;color:var(--ink-soft)}

/* PROGRAMA */
.days-list{list-style:none;margin:1rem 0 0;padding:0;position:relative}
.days-list::before{content:"";position:absolute;left:1.35rem;top:.5rem;bottom:.5rem;width:3px;background:var(--line);border-radius:3px}
.day{position:relative;padding:0 0 1.5rem 3.7rem}
.day .dot{position:absolute;left:0;top:0;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--panel);border:3px solid var(--ocean-2);display:grid;place-items:center;font:800 1rem var(--display);line-height:1}
.day.party .dot{background:var(--flor);border-color:var(--flor);color:#fff}
.day .when{font-family:var(--display);font-weight:600;color:var(--ink-soft);font-size:.92rem}
.day p{margin:.2rem 0 0}
.fixed{display:inline-block;margin-left:.3rem;font:600 .75rem var(--display);background:var(--flor);color:#fff;border-radius:999px;padding:.05rem .5rem;vertical-align:.1em}
.villa{overflow:hidden;padding:0}
.villa svg{display:block;width:100%;height:auto}
.villa .in{padding:1.2rem}
.checks{list-style:none;padding:0;margin:0 0 1rem}
.checks li{padding:.3rem 0 .3rem 1.8rem;position:relative}
.checks li::before{content:"";position:absolute;left:.2rem;top:.75rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--dune)}
.examples a{display:block;padding:.7rem 0;border-top:1px solid var(--line);text-decoration:none}
.examples a span{display:block;color:var(--ink-soft);font-size:.9rem}
.flight{display:flex;align-items:center;gap:1rem;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;margin-bottom:.6rem}
.flight .t{font:800 1.45rem var(--display);line-height:1}
.flight .arrow{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--ink-soft) 0 6px,transparent 6px 12px);min-width:2rem}
.flight small{display:block;color:var(--ink-soft);font:400 .8rem var(--display);margin-top:.2rem}
.weather{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.8rem}
.weather div{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:.8rem;text-align:center}
.weather b{display:block;font:800 1.7rem var(--display);line-height:1.1}
.weather span{font-size:.85rem;color:var(--ink-soft)}
.opt{margin-top:.8rem}
.opt .seg button{font-size:.95rem}
.opt .who-list{font-size:.88rem;color:var(--ink-soft);margin-top:.4rem}

/* DINERS */
.budget{background:var(--rock);color:#F4EFE7;border-radius:var(--r);padding:1.3rem}
.budget h2,.budget h3{color:#fff}
.budget .soft{color:#b3a898}
.slider{margin:.6rem 0 1.1rem}
.slider .lbl{display:flex;justify-content:space-between;font-family:var(--display);font-weight:600}
.slider .lbl b{color:var(--dune);font-size:1.3rem}
.slider input{width:100%;accent-color:var(--dune);height:2rem}
.rows{width:100%;border-collapse:collapse;font-size:.96rem}
.rows td{padding:.55rem 0;border-bottom:1px solid #3d3833;vertical-align:top}
.rows td:last-child{text-align:right;font-family:var(--display);font-weight:600;white-space:nowrap;padding-left:1rem}
.rows small{display:block;color:#b3a898;font-size:.83rem;line-height:1.35}
.rows .nc{display:inline-block;font:600 .68rem var(--display);background:#4a2434;color:#f5a9c6;border-radius:999px;padding:0 .45rem;margin-left:.3rem;vertical-align:.15em}
.total{display:flex;justify-content:space-between;align-items:flex-end;margin-top:1.1rem;gap:1rem;flex-wrap:wrap}
.total .n{font:800 clamp(2.3rem,11vw,3.3rem) var(--display);line-height:1;color:var(--dune)}
.total .per{color:#b3a898;font-size:.92rem}
.pay{margin-top:.7rem}
.pay-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.pay-head .amt{font:800 1.5rem var(--display);white-space:nowrap;text-align:right;line-height:1.1}
.pay-head .amt small{display:block;font-size:.75rem;font-weight:400;color:var(--ink-soft)}
.ticks{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.ticks span{font:600 .8rem var(--display);background:color-mix(in srgb,var(--ok) 15%,var(--panel));color:var(--ok);border-radius:999px;padding:.15rem .6rem}
.progress{height:.55rem;background:var(--panel-2);border-radius:999px;overflow:hidden;margin-top:.7rem}
.progress div{height:100%;background:var(--ok);border-radius:999px}
.cash{background:var(--panel-2);border:2px dashed var(--line);border-radius:16px;padding:1rem;margin-top:1rem}
.copy-row{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.copy-row code{font-family:var(--display);font-weight:600;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.35rem .6rem;word-break:break-all}

/* NAVEGACIÓ */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr);max-width:34rem;height:var(--nav-h)}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;height:100%;text-decoration:none;font:600 .78rem var(--display);color:var(--ink-soft);position:relative}
.nav a .i{font-size:1.45rem;line-height:1;transition:transform .2s}
.nav a.on{color:var(--ink)}
.nav a.on .i{transform:translateY(-2px) scale(1.12)}
.nav a.on::after{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--flor)}
.nav .badge{position:absolute;top:.55rem;left:calc(50% + .55rem);min-width:1.1rem;height:1.1rem;border-radius:999px;background:var(--flor);color:#fff;font-size:.7rem;display:grid;place-items:center;padding:0 .25rem}

/* FULLS I AVISOS */
.sheet-bg{position:fixed;inset:0;background:rgba(10,25,30,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease both}
@keyframes fade{from{opacity:0}}
.sheet{background:var(--panel);color:var(--ink);width:100%;max-width:34rem;border-radius:26px 26px 0 0;padding:1.4rem 16px calc(1.4rem + env(safe-area-inset-bottom,0px));max-height:92svh;overflow:auto;animation:up .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes up{from{transform:translateY(100%)}}
.sheet .grab{width:3rem;height:5px;border-radius:5px;background:var(--line);margin:-.4rem auto 1rem}
.sheet h2{font-size:1.8rem}
.sheet .money{background:var(--rock);color:#F4EFE7;border-radius:18px;padding:1rem;margin:1rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sheet .money b{font:800 2rem var(--display);color:var(--dune);line-height:1;white-space:nowrap}
.sheet .money span{font-size:.85rem;color:#b3a898;line-height:1.35}
.sheet .btn+.btn{margin-top:.6rem}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--rock);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font:600 .95rem var(--display);z-index:50;max-width:calc(100% - 32px);text-align:center;animation:up .25s ease both}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:fall 2.2s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--rr));opacity:.8}}

/* ENTRADA */
.gate{min-height:100svh;display:flex;flex-direction:column}
.gate .hero{flex:1;min-height:56svh}
.gate-panel{background:var(--bg);padding:1.6rem 16px calc(2rem + env(safe-area-inset-bottom,0px));border-radius:26px 26px 0 0;margin-top:-1.6rem;position:relative;z-index:2}
.gate-panel .in{max-width:30rem;margin:0 auto}
.code-in{width:100%;min-height:3.6rem;border-radius:16px;border:2px solid var(--line);background:var(--panel);color:var(--ink);font:700 1.4rem var(--display);text-align:center;letter-spacing:.06em;margin:.6rem 0 .8rem}
.code-in:focus{border-color:var(--ocean-2);outline:none}
.err{color:var(--flor);font-family:var(--display);font-weight:600;min-height:1.5rem;margin:0 0 .4rem;text-align:center}
.units{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}
.units button{min-height:5rem;border-radius:18px;border:2px solid var(--line);background:var(--panel);font:700 1.1rem var(--display);padding:.7rem;line-height:1.15;transition:transform .12s}
.units button:active{transform:scale(.96)}
.units button .em{display:block;font-size:1.5rem;margin-bottom:.15rem}
.people{display:grid;gap:.6rem;margin-top:1rem}
.people button{min-height:4rem;border-radius:18px;border:0;background:var(--ocean);color:#fff;font:700 1.3rem var(--display)}
.back{margin-top:1rem;text-align:center}
footer.foot{padding:3rem 16px 2rem;text-align:center;color:var(--ink-soft);font-size:.88rem}
footer.foot button{margin-top:.6rem}

@media (min-width:720px){
  .hero-text{padding:0 2rem 3rem}
  .units{grid-template-columns:repeat(3,1fr)}
  .rsvp-btns{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}