/* Sabor Caseiro de Sales: base compartilhada (tokens, tipografia, navegação, botões, rodapé, ambiente) */
:root{
  --canvas:#0d1828;
  --canvas-2:#10203a;
  --panel:#152842;
  --panel-2:#1c3254;
  --parch:#f3e6c6;
  --parch-2:#e8d4a8;
  --parch-3:#d9bf8a;
  --ink:#2a1c10;
  --ink-2:#46301d;
  --accent:#d6342a;
  --accent-hover:#ec4639;
  --accent-muted:rgba(214,52,42,.32);
  --gold:#f0bd4a;
  --gold-deep:#a8741a;
  --ember:#e58a3a;
  --text:#f6efe2;
  --text-2:#b9c5d7;
  --line:rgba(185,197,215,.16);
  --line-strong:#7488a6;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --f-display:"Luckiest Guy","Arial Black",system-ui,sans-serif;
  --f-text:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-label:"Special Elite","Courier New",monospace;
  --tshadow:0 1px 2px rgba(5,8,16,.95),0 3px 12px rgba(5,8,16,.78),0 10px 44px rgba(5,8,16,.8);
  --radius:18px;
  --wrap:min(1160px,calc(100% - 40px));
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text);font-family:var(--f-text);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:.01em;line-height:1.05;margin:0}
p{margin:0}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:#fff}

/* rótulo de diário de bordo */
.kicker{font-family:var(--f-label);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* botões */
.btn{--bg:var(--accent);display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.95em 1.5em;border-radius:999px;border:0;background:var(--bg);color:#fff;font-family:var(--f-text);font-weight:800;font-size:1rem;letter-spacing:.01em;text-decoration:none;cursor:pointer;position:relative;isolation:isolate;transition:transform .35s var(--ease-out),background-color .3s var(--ease-out),box-shadow .35s var(--ease-out);box-shadow:0 10px 30px -12px rgba(214,52,42,.8)}
.btn:hover{--bg:var(--accent-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn.ghost{background:rgba(13,24,40,.35);box-shadow:inset 0 0 0 2px rgba(246,239,226,.55);backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(13,24,40,.55);box-shadow:inset 0 0 0 2px var(--text)}
.btn.gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 30px -14px rgba(240,189,74,.9)}
.btn.gold:hover{background:#f7cc66}
@media (pointer:coarse){.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}}

/* navegação */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:20px;padding:12px max(20px,calc((100% - 1340px)/2));transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out),padding .5s var(--ease-out)}
.nav.solid{background:rgba(11,21,36,.86);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line);padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-width:0}
.brand img{width:46px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));transition:transform .5s var(--ease-out)}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}
.brand b{font-family:var(--f-display);font-weight:400;font-size:1.28rem;line-height:1;letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.brand small{display:block;font-family:var(--f-label);font-size:.68rem;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{white-space:nowrap;display:block;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.95rem;color:var(--text);text-shadow:0 1px 8px rgba(0,0,0,.55);transition:background-color .3s var(--ease-out)}
.nav-links a:hover{background:rgba(246,239,226,.1)}
.nav .btn{padding:.7em 1.15em;font-size:.95rem}
@media (max-width:980px){.nav-links{display:none}}
@media (max-width:520px){.brand small{display:none}.brand b{font-size:1.05rem}.brand img{width:38px}.nav .btn{padding:.65em .95em;font-size:.9rem}}

/* ambiente: mar noturno em deriva lenta, atrás de tudo */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
  radial-gradient(1200px 700px at 85% -10%,rgba(229,138,58,.10),transparent 60%),
  radial-gradient(900px 600px at -10% 110%,rgba(40,86,140,.28),transparent 60%),
  var(--canvas)}
.ambient::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(closest-side,rgba(240,189,74,.06),transparent) 20% 30%/40% 40% no-repeat,
  radial-gradient(closest-side,rgba(214,52,42,.05),transparent) 75% 70%/45% 45% no-repeat;
  animation:drift 90s linear infinite;animation-delay:-30s}
.ambient::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;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 type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-4%,3%,0) rotate(4deg)}100%{transform:translate3d(0,0,0) rotate(0)}}

/* rodapé */
.footer{position:relative;padding:72px 0 40px;background:linear-gradient(180deg,transparent,rgba(5,10,18,.6));border-top:1px solid var(--line)}
.footer .wrap{width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;align-items:start}
.footer .brand img{width:64px}
.footer h4{font-family:var(--f-label);font-weight:400;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer a{text-decoration:none;color:var(--text-2);transition:color .3s var(--ease-out)}
.footer a:hover{color:var(--text)}
.footer .legal{width:var(--wrap);margin:44px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.85rem;color:var(--text-2)}
.footer p{color:var(--text-2);max-width:36ch;margin-top:14px}
@media (max-width:820px){.footer .wrap{grid-template-columns:1fr}}

/* entradas coreografadas */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

body.paused *,body.paused *::before,body.paused *::after,
.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal{opacity:1;transform:none}
}