/* OUTRUN · fundação do site: tokens, base e componentes compartilhados.
   Dono: Claude (Fase 1). Agentes só leem este arquivo; pedidos de mudança vão para o coordenador. */

:root{
  /* cores da marca */
  --preto:#0B0B0D; --indigo:#1E1652; --violeta:#4B2AA8; --vermelho:#E0101E; --laranja:#FF4A0A; --off:#F4F1EC;
  /* neutros derivados */
  --tinta:#ECE8E1;        /* texto sobre escuro */
  --tinta-2:#A9A39A;      /* texto secundário sobre escuro */
  --tinta-clara:#0B0B0D;  /* texto sobre off-white */
  --tinta-clara-2:#5E5A55;
  --linha:#2A2730;        /* divisórias sobre escuro */
  --linha-clara:#D8D3CB;  /* divisórias sobre off-white */
  --cartao:#141317;
  --erro:#FF5A5F;
  --magma:linear-gradient(110deg,var(--violeta) 0%,#9B2A8E 30%,var(--vermelho) 60%,var(--laranja) 100%);

  /* tipos */
  --f-display:"Instrument Serif","Bodoni 72","Didot",Georgia,serif;
  --f-rotulo:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-texto:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-script:"Pinyon Script","Snell Roundhand",cursive;

  /* escala */
  --t-mega:clamp(4rem,13vw,11rem);
  --t-h1:clamp(3rem,8vw,6.5rem);
  --t-h2:clamp(2.4rem,6vw,4.6rem);
  --t-h3:clamp(1.5rem,2.6vw,2rem);
  --t-corpo:1.0625rem;
  --t-rotulo:.8rem;

  /* espaço e forma */
  --lado:max(16px,env(safe-area-inset-left,0px));
  --lado-d:max(16px,env(safe-area-inset-right,0px));
  --largura:1240px;
  --secao:clamp(72px,11vw,140px);
  --raio:14px;
  --raio-p:999px;
  --topo-h:72px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--topo-h);-webkit-text-size-adjust:100%}
body{background:var(--preto);color:var(--tinta);font-family:var(--f-texto);font-size:var(--t-corpo);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}
::selection{background:var(--laranja);color:var(--preto)}
body.travado{overflow:hidden}

/* grão em todo o site */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- tipografia ---------- */
h1,h2,h3,.display{font-family:var(--f-display);font-weight:400;line-height:.95;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);line-height:1.05}
.display em,h1 em,h2 em{font-style:italic}
.rotulo{font-family:var(--f-rotulo);font-weight:600;font-size:var(--t-rotulo);letter-spacing:.24em;text-transform:uppercase;color:var(--laranja)}
.meta{font-family:var(--f-rotulo);font-weight:500;font-size:var(--t-rotulo);letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-2)}
.script{font-family:var(--f-script);font-weight:400;letter-spacing:0}
.numero{font-family:var(--f-rotulo);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:.9}
.ler{max-width:62ch}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout ---------- */
.faixa{padding-left:var(--lado);padding-right:var(--lado-d)}
.miolo{max-width:var(--largura);margin-inline:auto}
.secao{padding-block:var(--secao)}
.secao-cab{display:grid;gap:1rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.secao-cab p:not(.rotulo):not(.meta){color:var(--tinta-2);max-width:56ch;font-size:1.1rem}
/* superfícies: cada seção escolhe uma */
.sup-preto{background:var(--preto);color:var(--tinta)}
.sup-indigo{background:var(--indigo);color:var(--tinta)}
.sup-off{background:var(--off);color:var(--tinta-clara)}
.sup-off .meta,.sup-off .secao-cab p:not(.rotulo):not(.meta){color:var(--tinta-clara-2)}
.sup-magma{background:var(--magma);color:var(--off)}
.sup-magma .rotulo{color:var(--off)}

/* ---------- logo ---------- */
.logo{display:block;aspect-ratio:2396/1267;background:currentColor;
  -webkit-mask:url(../assets/logo/logo-outrun-preto.png) center/contain no-repeat;mask:url(../assets/logo/logo-outrun-preto.png) center/contain no-repeat}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;font-family:var(--f-rotulo);font-weight:600;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:1rem 1.7rem;border-radius:var(--raio-p);border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;min-height:52px;text-align:center}
.btn::after{content:"→";letter-spacing:0;transition:transform .25s var(--ease)}
.btn:hover::after{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn-laranja{background:var(--laranja);color:var(--preto)}
.btn-laranja:hover{background:#ff6a33}
.btn-contorno{border-color:currentColor;background:transparent}
.btn-contorno:hover{background:var(--off);color:var(--preto);border-color:var(--off)}
.btn-sem-seta::after{content:none}
.btn-largo{width:100%}

/* ---------- topo ---------- */
.topo{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--topo-h) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);transition:background .35s,backdrop-filter .35s}
.topo .miolo{height:var(--topo-h);display:flex;align-items:center;gap:2rem}
.topo.solido{background:rgba(11,11,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo-logo{width:104px;color:var(--off);flex:none}
/* no cabeçalho, só o OUTRUN (sem o "Club") */
.topo-logo.logo{aspect-ratio:1200/384;-webkit-mask-image:url(../assets/logo/logo-outrun-sem-club.png);mask-image:url(../assets/logo/logo-outrun-sem-club.png)}
.topo nav{display:flex;gap:1.8rem;margin-left:auto}
.topo nav a{font-family:var(--f-rotulo);font-weight:500;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;opacity:.85;transition:color .2s,opacity .2s}
.topo nav a:hover{opacity:1;color:var(--laranja)}
.topo .btn{padding:.6rem 1.1rem;min-height:42px;font-size:.82rem}
.topo .btn::after{content:none}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--off);transition:transform .35s var(--ease)}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:26px}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media (max-width:900px){
  .topo nav{display:none}
  .topo .miolo{gap:.5rem}
  .topo-logo{width:88px}
  .menu-btn{display:block;margin-left:0}
  /* no celular, a pré-inscrição fica sempre à mão no cabeçalho: o topo é a única área que nenhum navegador cobre
     (a barra de baixo muda de altura no Safari, Chrome, Samsung Internet e no navegador do Instagram) */
  .topo .btn-topo{margin-left:auto;min-height:36px;padding:.45rem .45rem .45rem .9rem;gap:.45em;font-size:.72rem;letter-spacing:.1em;white-space:nowrap;flex:none;
    position:relative;overflow:hidden;isolation:isolate;box-shadow:0 6px 18px rgba(255,74,10,.35);
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
  .topo .som+.btn-topo{margin-left:0}
  .topo .btn-topo::after{content:"→";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--preto);color:var(--laranja);font-size:.8rem;letter-spacing:0}
  /* na home, entra só quando o botão da hero sai da tela (sem JS ele aparece sempre) */
  .topo .btn-topo.espera{opacity:0;transform:translateY(-8px) scale(.94);visibility:hidden;pointer-events:none;
    transition:opacity .25s,transform .25s,visibility 0s .25s}
  /* brilho que atravessa o botão de tempos em tempos */
  .topo .btn-topo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-100%);animation:cta-brilho 4s 1.2s var(--ease) infinite}
  .topo nav.aberto{display:flex;position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.2rem;margin:0;
    padding:calc(var(--topo-h) + 2rem) var(--lado-d) 2rem var(--lado);background:var(--preto)}
  .topo nav.aberto a{font-family:var(--f-display);font-size:clamp(2.6rem,11vw,3.6rem);letter-spacing:-.01em;text-transform:none;opacity:1}
}

/* o antigo CTA fixo de baixo não é mais usado: a pré-inscrição fica no cabeçalho do celular */
.cta-fixo{display:none}
@keyframes cta-brilho{0%{transform:translateX(-100%)}30%,100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.topo .btn-topo::before{animation:none}}

/* ---------- faixa rolando (marquee) ---------- */
.marquee{overflow:hidden;background:var(--magma);color:var(--off);padding-block:.95rem}
.marquee-trilho{display:flex;width:max-content;animation:rola 32s linear infinite}
.marquee span{font-family:var(--f-rotulo);font-weight:600;font-size:clamp(1rem,2.4vw,1.35rem);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding-inline:1.6rem;display:flex;align-items:center;gap:3.2rem}
.marquee span::after{content:"✳";letter-spacing:0;opacity:.9}
@keyframes rola{to{transform:translateX(-50%)}}

/* ---------- cartões e listas ---------- */
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:clamp(1.2rem,2.5vw,1.8rem);min-width:0}
.grade-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(1rem,2vw,1.5rem)}
.grade-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(1rem,2vw,1.5rem)}

/* ---------- formulários ---------- */
.campo{display:grid;gap:.45rem;min-width:0}
.campo>span,.campo legend{font-family:var(--f-rotulo);font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2)}
.campo input,.campo select,.campo textarea{width:100%;min-height:54px;padding:.9rem 1rem;border-radius:10px;border:1px solid #3A3640;background:rgba(255,255,255,.03);font-size:1rem;transition:border-color .2s,background .2s}
.campo input::placeholder{color:#6F6A72}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--laranja);background:rgba(255,74,10,.05)}
.campo [aria-invalid=true]{border-color:var(--erro)}
.campo small{color:var(--tinta-2);font-size:.85rem}
.check{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem;color:var(--tinta-2);cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin-top:.1rem;accent-color:var(--laranja)}
.check a{color:var(--tinta)}

/* ---------- rodapé ---------- */
.rodape{background:var(--preto);border-top:1px solid var(--linha);padding-block:clamp(56px,8vw,96px) calc(clamp(80px,10vw,110px) + env(safe-area-inset-bottom,0px))}
.rodape .miolo{display:grid;gap:2.5rem}
.rodape-topo{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-end}
.rodape-logo{width:min(260px,60vw);color:var(--off)}
.rodape nav{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem}
.rodape nav a{font-family:var(--f-rotulo);font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--tinta-2)}
.rodape nav a:hover{color:var(--laranja)}
.rodape-pe{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;border-top:1px solid var(--linha);padding-top:1.5rem}

/* ---------- entrada ao rolar (estado de repouso visível) ---------- */
.revela{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .revela:not(.visto){opacity:0;transform:translateY(36px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .revela:not(.visto){opacity:1;transform:none}
}