/* Nativo waitlist, game theme. Two navy palettes below; A "Oceano" ships, B "Meia-noite" previews with ?tema=b. */
:root{
  /* Option A "Oceano": deep ocean navy (hue ~215), sunset gold, coral CTA, mint as a small accent. */
  --night:#0A1F3D; --night-rgb:10,31,61; --navy:#0D2749; --panel:#123058; --panel-rgb:18,48,88; --panel-2:#173A68; --edge:#2E5590; --travel:#1A4073;
  --sky:#3FE0C5; --sky-rgb:63,224,197; --on-sky:#062B25;
  --gold:#FFC94A; --gold-2:#F59E1B; --coral:#F0552A; --coral-2:#D2421A; --coral-hi:#FF7A48; --coral-sh:#992A0A;
  --text:#F3F7FC; --soft:#C8D5E8; --muted:#97AAC6; --err:#FFA391; --ph:#8095B5;
  --head:'Montserrat',system-ui,sans-serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --paper:var(--navy); --card:var(--panel); --ink:var(--text); --line:var(--edge); --accent:var(--sky); --accent-d:var(--coral); --accent-soft:rgba(var(--sky-rgb),.18);
}
/* Option B "Meia-noite": darker midnight navy. Preview: ?tema=b */
:root[data-theme="b"]{
  --night:#0A1628; --night-rgb:10,22,40; --navy:#0D1D35; --panel:#122642; --panel-rgb:18,38,66; --panel-2:#172E50; --edge:#2B4673; --travel:#18345C;
  --text:#F3F7FC; --soft:#C3CFE2; --muted:#93A4BF; --ph:#7C8FAD;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--text);font:16px/1.5 var(--sans);position:relative;overflow-x:hidden}
a{color:var(--sky)}

/* The concept city as the hero background at full brightness. No gradients, fades or blur on the art. */
.city{position:absolute;top:66px;left:0;right:0;height:56.25vw;z-index:0;
  background:url(/city-1280.webp) center/cover no-repeat;
  background:image-set(url(/city-1280.webp) 1x,url(/city-1920.webp) 2x) center/cover no-repeat}
.top,.wrap,.how,.privacy,.foot{position:relative;z-index:1}

.top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font:800 22px/1 var(--head);letter-spacing:.22em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.brand img{background:#fff;border-radius:10px;padding:3px}
.pill{white-space:nowrap;font:800 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:rgba(var(--night-rgb),.72);border:1.5px solid var(--gold);padding:8px 14px;border-radius:99px;backdrop-filter:blur(6px)}

.wrap{max-width:1240px;margin:0 auto;padding:0 16px 32px;display:grid;gap:22px}
.hero{display:flex;flex-direction:column;padding:calc(56.25vw + 14px) 4px 4px}
.eyebrow{margin:0 0 6px;font:800 12px var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--sky);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hero h1{font:900 clamp(34px,9.4vw,70px)/.98 var(--head);text-transform:uppercase;letter-spacing:-.5px;margin:0 0 12px;text-shadow:0 4px 18px rgba(0,0,0,.55)}
.hero h1 span{display:block;background:linear-gradient(180deg,var(--gold) 20%,var(--gold-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 12px rgba(0,0,0,.45))}
.lede{font-size:17px;color:#E6EEF2;margin:0;max-width:32em;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.caption{margin:12px 0 0;font-size:11px;color:var(--muted);letter-spacing:.04em}

/* Game-menu panel */
.panel{background:linear-gradient(180deg,rgba(var(--panel-rgb),.96),rgba(var(--night-rgb),.97));border:2px solid var(--edge);border-radius:24px;padding:24px 18px;
  box-shadow:0 0 0 1px rgba(255,201,74,.25) inset,0 20px 50px rgba(0,0,0,.5)}
.panel h2{font:900 30px/1 var(--head);text-transform:uppercase;margin:0;color:var(--gold);text-align:center;letter-spacing:.02em}
.sub{color:var(--soft);margin:8px 0 20px;font-size:14px;text-align:center}
.field{display:block;border:0;padding:0;margin:0 0 14px;min-width:0}
.field>span,.field legend{display:block;font:700 13px var(--sans);margin-bottom:6px;padding:0;color:#DCE8ED}
.field i{font-style:normal;font-weight:400;color:var(--muted)}
input,select{width:100%;font:inherit;font-size:16px;color:var(--text);background:rgba(var(--night-rgb),.7);border:2px solid var(--edge);border-radius:14px;padding:12px 14px;min-height:50px;appearance:none;-webkit-appearance:none}
input::placeholder{color:var(--ph)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
select option{color:#0B1013;background:#fff}
input:focus,select:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(var(--sky-rgb),.25)}
.invalid input,.invalid select{border-color:var(--err)}
.row{display:flex;gap:10px}
.grow{flex:1}
.uf{width:112px;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0}
.chips span{display:inline-block;padding:10px 14px;border:2px solid var(--edge);border-radius:14px;font:600 15px var(--sans);cursor:pointer;background:rgba(var(--night-rgb),.55);color:#DCE8ED;user-select:none;box-shadow:0 3px 0 rgba(0,0,0,.35);transition:transform .08s}
.chips span:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.chips input:checked+span{background:var(--sky);border-color:var(--sky);color:var(--on-sky)}
.chips input:focus-visible+span{box-shadow:0 0 0 3px rgba(var(--sky-rgb),.4)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--soft);margin:6px 0 4px;cursor:pointer}
.consent input{flex:none;width:22px;height:22px;min-height:0;padding:0;margin:1px 0 0;appearance:auto;-webkit-appearance:checkbox;accent-color:var(--gold-2)}
.err{display:block;font-style:normal;color:var(--err);font-size:13px;margin-top:4px}
.err:empty{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ts{margin:12px 0 0}
.ts:empty{display:none}
.btn{width:100%;margin-top:18px;min-height:58px;border:0;border-radius:16px;background:linear-gradient(180deg,var(--coral-hi),var(--coral) 55%,var(--coral-2));color:#fff;font:900 19px var(--head);text-shadow:0 1px 2px rgba(0,0,0,.35);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 5px 0 var(--coral-sh),0 10px 24px rgba(255,106,61,.35);transition:transform .08s,box-shadow .08s}
.btn::after{content:'▶';margin-left:.5em}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--coral-sh)}
.btn:disabled{opacity:.65;cursor:wait}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--edge);box-shadow:none;min-height:48px;font-size:15px;margin-top:4px}
.btn.ghost::after{content:''}
.formerr{color:var(--err);font-size:14px;margin:12px 0 0;text-align:center}
.formerr:empty{display:none}

.done{text-align:center;padding:16px 4px}
.check{width:72px;height:72px;border-radius:50%;background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#3A2500;font-size:36px;font-weight:900;display:grid;place-items:center;margin:0 auto 14px;box-shadow:0 5px 0 #A86400}
.done h2{color:var(--gold)}
.done p{color:var(--soft)}
.codebox{margin-top:18px;background:rgba(var(--night-rgb),.7);border:2px dashed var(--edge);border-radius:14px;padding:14px}
.codebox small{display:block;color:var(--muted)}
.codebox strong{font:700 22px ui-monospace,monospace;letter-spacing:.15em;color:#fff}

/* Old vs new */
.vs{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:36px 16px 0}
.vsgrid{display:grid;gap:12px}
.vscol{border-radius:22px;padding:20px;border:2px solid var(--edge);background:var(--panel)}
.vscol h3{font:900 18px var(--head);text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px}
.vscol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vscol li{display:flex;gap:10px;align-items:flex-start;font-size:17px}
.vscol li::before{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:900 14px var(--head)}
.vscol.old{background:rgba(var(--panel-rgb),.5)}
.vscol.old h3{color:var(--muted)}
.vscol.old li{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.vscol.old li::before{content:'✕';background:rgba(255,255,255,.08);color:var(--muted)}
.vscol.new{border-color:var(--sky);box-shadow:0 0 0 1px rgba(var(--sky-rgb),.35) inset,0 6px 0 rgba(0,0,0,.35)}
.vscol.new h3{color:var(--sky)}
.vscol.new li{color:var(--text);font-weight:600}
.vscol.new li::before{content:'✓';background:var(--sky);color:var(--on-sky)}

/* Como funciona */
.how,.dest,.final{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:36px 16px 8px}
.kicker{margin:0 0 6px;font:800 12px var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.big{font:900 clamp(26px,6.4vw,44px)/1.05 var(--head);text-transform:uppercase;letter-spacing:-.3px;margin:0 0 20px}
.step{display:grid;gap:14px;margin:0 0 22px;background:var(--panel);border:2px solid var(--edge);border-radius:22px;padding:12px;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.step img{display:block;width:100%;height:auto;border-radius:14px}
.step>div{padding:4px 8px 10px}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#3A2500;font:900 20px var(--head);box-shadow:0 4px 0 #A86400;margin-bottom:12px}
.step h3{font:900 22px/1.15 var(--head);text-transform:uppercase;margin:0 0 6px;color:var(--gold)}
.step p{margin:0;color:var(--soft);font-size:17px}
.step.travel{background:linear-gradient(135deg,var(--panel),var(--travel));padding:18px}
.pair{display:grid;gap:14px}
.pair figure{margin:0}
.pair figcaption{margin:8px 4px 0;font:800 14px var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.caption.center{text-align:center;margin-top:-6px}

/* Destinos */
.lede2{color:var(--soft);font-size:17px;margin:-8px 0 18px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.destcard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:var(--panel);border:2px solid var(--edge);border-radius:20px;padding:18px 10px 16px;box-shadow:0 5px 0 rgba(0,0,0,.35);opacity:.78}
.destcard.first{opacity:1;border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,201,74,.4) inset,0 5px 0 #6B4A10;grid-column:1/-1}
.coin{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE08A,var(--gold) 45%,var(--gold-2));color:#3A2500;font:900 20px var(--head);box-shadow:0 4px 0 #A86400;margin-bottom:8px}
.destcard b{font:800 17px var(--head)}
.destcard small{color:var(--soft);font-size:14px}
.tag{margin-top:8px;font:800 11px var(--head);font-style:normal;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.08);color:var(--muted)}
.tag.go{background:var(--sky);color:var(--on-sky)}
.note2{color:var(--muted);font-size:15px;margin:14px 0 0;text-align:center}

/* Final CTA */
.final{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-top:20px;padding-bottom:20px}
.final>div{width:100%}
.final img{width:110px;height:auto;flex:none;border-radius:16px;background:#CABDB1}
.final .big{font-size:clamp(22px,5.4vw,36px);margin-bottom:8px}
.final p{color:var(--soft);margin:0 0 4px}
a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}

.privacy h2{font:900 22px var(--head);text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:24px 16px}
.privacy ul{padding-left:20px;color:var(--soft);margin:0 0 14px}
.privacy li{margin-bottom:4px}
.erase summary{cursor:pointer;color:var(--sky);font-weight:600;padding:6px 0}
.erase form{margin-top:12px;max-width:360px}
.foot{text-align:center;color:var(--muted);font-size:13px;padding:16px 16px 36px}

@media (min-width:900px){
  .city{top:0;height:100vh;min-height:760px;max-height:max(980px,56.25vw);
    background:url(/city-1920.webp) center 45%/cover no-repeat;
    background:image-set(url(/city-1920.webp) 1x,url(/city-3840.webp) 2x) center 45%/cover no-repeat}
  .top{padding:26px 32px}
  .wrap{grid-template-columns:1fr 430px;gap:48px;align-items:end;padding:10px 32px 56px;min-height:calc(100vh - 100px)}
  .wrap{align-items:start}
  .hero{align-self:start;margin-top:max(24px,calc(100vh - 560px));max-width:min(540px,calc(min(45.75vw,50vw - 7.55vh) - max(32px,50vw - 588px) - 24px));padding:26px 28px 22px;border-radius:24px;border:1px solid rgba(255,255,255,.12);
    background:rgba(var(--night-rgb),.72);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);box-shadow:0 18px 40px rgba(0,0,0,.35)}
  .hero h1{font-size:clamp(38px,3.6vw,54px)}
  .panel{padding:30px 28px}
  .how,.dest,.final{padding:64px 32px 8px}
  .vs{padding:56px 32px 0}
  .vsgrid{grid-template-columns:1fr 1fr;gap:20px}
  .step{grid-template-columns:1.25fr 1fr;align-items:center;padding:16px;gap:28px}
  .step:nth-of-type(even){grid-template-columns:1fr 1.25fr}
  .step:nth-of-type(even) picture{order:2}
  .step.travel,.step.duo{grid-template-columns:1fr}
  .step.duo{gap:16px}
  .pair{grid-template-columns:1fr 1fr;gap:16px}
  .step h3{font-size:28px}
  .cards{grid-template-columns:repeat(5,1fr)}
  .destcard.first{grid-column:auto}
  .final{flex-direction:row;text-align:left;align-items:center;gap:36px;padding-bottom:40px}
  .final img{width:170px}
  .final .btn{max-width:420px}
}
@media (min-width:1921px){
  .city{background-image:image-set(url(/city-2560.webp) 1x,url(/city-3840.webp) 2x)}
}