/* Cortando o Brasil
   Paleta tirada do logo do cliente: dourado sobre preto, com o asfalto da
   estrada entrando como textura. */

:root{
  --preto:#0a0906;
  --preto-2:#100e0a;
  --carta:#171410;
  --carta-alta:#1f1b15;
  --linha:#2c2720;
  --linha-forte:#3d372c;

  --ouro:#e4bb70;
  --ouro-claro:#f5dcab;
  --ouro-escuro:#9c7128;

  --asfalto:#141313;

  --texto:#f4f1ea;
  --texto-2:#c6bfb2;   /* cinza claro de propósito: "letra apagada" é reclamação comum */
  --texto-3:#9e9686;

  --zap:#25d366;

  --raio:14px;
  --raio-g:20px;
  --sombra:0 12px 34px rgba(0,0,0,.6);
  --max:1080px;
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* regra de autor com display vence o [hidden] do navegador; isto resolve */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px; }

body{
  margin:0;
  font-family:var(--fonte);
  font-size:17px;
  line-height:1.62;
  color:var(--texto);
  background:var(--preto);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ouro); text-decoration:none; }
a:hover{ color:var(--ouro-claro); }
:focus-visible{ outline:3px solid var(--ouro); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 18px; }
.wrap--estreito{ max-width:620px; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ouro); color:#1b1206; padding:12px 18px; font-weight:700;
}
.pular:focus{ left:0; }

main{ flex:1; }

/* ----------------------------------------------------------------- topo */

.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(10,9,6,.9);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--linha);
}
.topo__in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:66px; }

.marca{ display:flex; align-items:center; gap:11px; color:var(--texto); min-width:0; }
.marca__logo{ width:46px; height:46px; flex:none; }
.marca__txt{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.marca__txt b{
  font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
  background:linear-gradient(100deg,var(--ouro-claro),var(--ouro) 55%,var(--ouro-escuro));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.marca__txt i{
  font-style:normal; font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--texto-3);
}

/* botão sanduíche */
.menu__btn{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 9px; flex:none; cursor:pointer;
  background:transparent; border:1px solid var(--linha-forte); border-radius:11px;
}
.menu__btn span{
  display:block; height:2px; background:var(--ouro); border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.menu__btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu__btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu__btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu{
  position:absolute; left:0; right:0; top:100%;
  display:none; flex-direction:column; gap:4px; padding:12px 18px 18px;
  background:rgba(10,9,6,.98); border-bottom:1px solid var(--linha);
  box-shadow:var(--sombra);
}
.menu.is-open{ display:flex; }
.menu a{
  color:var(--texto-2); font-size:16px; font-weight:600;
  padding:13px 14px; border-radius:11px; border:1px solid transparent;
}
.menu a:hover{ color:var(--ouro-claro); background:var(--carta); border-color:var(--linha); }
.menu__cta{
  margin-top:6px; text-align:center; color:#1b1206 !important; font-weight:800 !important;
  background:linear-gradient(100deg,var(--ouro-claro),var(--ouro)) !important;
  border-color:transparent !important;
}

@media (min-width:1080px){
  .menu__btn{ display:none; }
  .menu{
    position:static; display:flex; flex-direction:row; align-items:center; gap:4px;
    padding:0; background:none; border:0; box-shadow:none;
  }
  .menu a{ padding:9px 13px; font-size:15px; border-radius:999px; white-space:nowrap; }
  .menu__cta{ margin:0 0 0 6px; padding:10px 18px !important; }
}

/* ----------------------------------------------------------------- hero */

.hero{ position:relative; overflow:hidden; padding:40px 0 54px; text-align:center; }

/* foto de motociclistas na estrada, escurecida para o texto dourado ler bem.
   (21/09) foto da moto no deserto que ele mandou, no lugar da do Wikimedia.
   O crédito está no rodapé, que é exigência da licença. */
.hero__foto{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/hero-deserto.webp") center 62% / cover no-repeat;
}
/* véu só o suficiente para o dourado ler por cima — a estrada tem que
   continuar aparecendo, é o pedido dele */
.hero__foto::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(620px 340px at 50% 26%, rgba(10,9,6,.66), rgba(10,9,6,.3) 78%),
    linear-gradient(180deg, rgba(10,9,6,.62) 0%, rgba(10,9,6,.16) 46%,
                    rgba(10,9,6,.5) 78%, var(--preto) 100%);
}

.hero__in{ position:relative; z-index:1; }

.hero__logo{
  width:164px; height:164px; margin:0 auto 22px;
  filter:drop-shadow(0 14px 40px rgba(228,187,112,.26));
}

.hero__t{
  margin:0 0 16px; font-weight:900; letter-spacing:.02em; text-transform:uppercase;
  font-size:clamp(31px,8.6vw,64px); line-height:1.03;
  background:linear-gradient(100deg,var(--ouro-claro),var(--ouro) 48%,var(--ouro-escuro));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero__faixa{
  display:inline-block; margin:0 0 20px; padding:9px 20px;
  font-size:clamp(12.5px,3.1vw,15px); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#1b1206;
  background:linear-gradient(100deg,var(--ouro-claro),var(--ouro));
  border-radius:999px; text-wrap:balance;
}

.hero__s{
  color:var(--texto-2); font-size:clamp(15.5px,3.5vw,18px);
  margin:0 auto 26px; max-width:46ch; text-wrap:pretty;
}
.hero__s b{ color:var(--texto); }

.hero__acoes{ display:flex; flex-direction:column; gap:11px; max-width:360px; margin:0 auto 30px; }
@media (min-width:560px){
  .hero__acoes{ flex-direction:row; justify-content:center; max-width:none; }
}

/* --------------------------------------------------------------- botões */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; padding:15px 26px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; text-align:center; line-height:1.25;
}
.btn--ouro{
  color:#1b1206; background:linear-gradient(100deg,var(--ouro-claro),var(--ouro));
}
.btn--ouro:hover{ filter:brightness(1.07); color:#1b1206; }
.btn--linha{ color:var(--texto); border-color:var(--linha-forte); background:var(--carta); }
.btn--linha:hover{ color:var(--ouro-claro); border-color:var(--ouro-escuro); }
.btn--bloco{ display:flex; width:100%; margin-top:8px; }

/* -------------------------------------------------------------- números */

.numeros{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:600px; margin:0 auto; }
.num{
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px 8px; text-align:center;
}
.num__v{
  display:block; font-size:clamp(21px,5.6vw,32px); font-weight:900; line-height:1.1;
  color:var(--ouro-claro); font-variant-numeric:tabular-nums;
}
.num__l{
  display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto-3); margin-top:5px;
}

/* --------------------------------------------------------------- seções */

.sec{ padding:52px 0; }
.sec--alt{ background:var(--preto-2); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); }

.olho{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ouro); margin:0 0 12px;
}
.titulo{
  font-size:clamp(26px,5.8vw,42px); line-height:1.12; margin:0 0 14px;
  font-weight:900; letter-spacing:-.01em; text-wrap:balance;
}
.titulo--ouro{
  background:linear-gradient(100deg,var(--ouro-claro),var(--ouro) 50%,var(--ouro-escuro));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub{ color:var(--texto-2); font-size:17px; margin:0 0 26px; max-width:58ch; text-wrap:pretty; }

.texto{ max-width:64ch; margin:0 0 30px; }
.texto p{ color:var(--texto-2); font-size:17px; margin:0 0 16px; text-wrap:pretty; }
.texto strong{ color:var(--texto); }

/* caixinhas de destaque */
.cxs{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){ .cxs{ grid-template-columns:repeat(3,1fr); } }
.cx{
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:20px 19px;
}
.cx__ic{ display:block; font-size:26px; margin-bottom:9px; }
.cx h3{ font-size:17.5px; font-weight:800; margin:0 0 7px; color:var(--ouro-claro); }
.cx p{ color:var(--texto-2); font-size:15px; margin:0; text-wrap:pretty; }

/* ------------------------------------------------------- pontas da rota */

.pontas{ display:grid; grid-template-columns:1fr; gap:14px; align-items:center; }
@media (min-width:700px){ .pontas{ grid-template-columns:1fr auto 1fr; gap:18px; } }

.ponta{
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:22px 20px; text-align:center;
}
.ponta__km{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ouro-claro);
  background:rgba(228,187,112,.12); border:1px solid rgba(228,187,112,.3);
  border-radius:999px; padding:4px 12px; margin-bottom:11px;
}
.ponta__c{ display:block; font-size:clamp(22px,5vw,30px); font-weight:900; line-height:1.15; }
.ponta__uf{ display:block; font-size:14.5px; color:var(--texto-2); margin-top:3px; }
.ponta__l{
  display:block; font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--texto-3); margin-top:11px;
}

.ponta__meio{ display:flex; align-items:center; justify-content:center; gap:11px; }
.ponta__linha{
  flex:1; min-width:26px; height:2px;
  background:repeating-linear-gradient(90deg, var(--ouro-escuro) 0 10px, transparent 10px 20px);
}
.ponta__dist{
  font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--ouro);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
@media (min-width:700px){
  .ponta__meio{ flex-direction:column; height:100%; }
  .ponta__linha{ width:2px; min-height:26px; flex:1;
    background:repeating-linear-gradient(180deg, var(--ouro-escuro) 0 10px, transparent 10px 20px); }
}

/* -------------------------------------------------------------- estados */

.estados{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:680px){ .estados{ grid-template-columns:repeat(2,1fr); } }

.est{
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden;
}
.est.is-open{ border-color:var(--ouro-escuro); }

.est__b{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  font:inherit; cursor:pointer; background:transparent; border:0; color:var(--texto);
  padding:15px 16px;
}
.est__b:hover{ background:var(--carta-alta); }

.est__n{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:12.5px; font-weight:900;
  color:var(--ouro-claro); background:rgba(228,187,112,.1);
  border:1px solid rgba(228,187,112,.26); font-variant-numeric:tabular-nums;
}
.est__sig{
  flex:none; font-size:14.5px; font-weight:900; letter-spacing:.06em; color:var(--ouro);
  min-width:26px;
}
.est__txt{ flex:1; min-width:0; }
.est__nome{ display:block; font-size:16.5px; font-weight:800; line-height:1.25; }
.est__tre{ display:block; font-size:13px; color:var(--texto-3); margin-top:1px; }
.est__seta{
  flex:none; color:var(--ouro); font-size:15px; transition:transform .2s ease;
}
.est.is-open .est__seta{ transform:rotate(180deg); }

.est__corpo{ display:none; padding:0 16px 16px 16px; }
.est.is-open .est__corpo{ display:block; }
.est__nota{
  font-size:14px; color:var(--ouro-claro); margin:0 0 11px;
  background:rgba(228,187,112,.08); border:1px solid rgba(228,187,112,.22);
  border-radius:10px; padding:10px 12px; text-wrap:pretty;
}
.est__pontos{ display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.est__pontos li{
  font-size:14px; color:var(--texto-2);
  background:var(--carta-alta); border:1px solid var(--linha);
  border-radius:999px; padding:6px 13px;
}

.rodo-nota{ font-size:13.5px; color:var(--texto-3); margin:20px 0 0; }

/* ------------------------------------------------------------ formulário */

.form{ margin-top:6px; }
.campo{ margin:0 0 16px; }
.campo label{
  display:block; font-size:14px; font-weight:700; color:var(--texto-2); margin:0 0 7px;
}
.campo label b{ color:var(--ouro); }
.campo .opc{ font-weight:400; color:var(--texto-3); }

.campo input,.campo select,.campo textarea{
  width:100%; font:inherit; font-size:16px;   /* 16px evita o zoom do iPhone */
  color:var(--texto); background:var(--carta);
  border:1px solid var(--linha-forte); border-radius:12px; padding:14px 15px;
}
.campo textarea{ resize:vertical; min-height:88px; }
.campo input::placeholder,.campo textarea::placeholder{ color:var(--texto-3); }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--ouro-escuro); background:var(--carta-alta);
}
.campo select{
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ouro) 50%),
                   linear-gradient(135deg,var(--ouro) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:44px;
}

.form__nota{ font-size:14px; color:var(--texto-3); margin:14px 0 0; text-wrap:pretty; }
.form__nota.is-err{
  color:#ffc9c0; background:rgba(200,60,40,.14);
  border:1px solid rgba(200,60,40,.4); border-radius:11px; padding:11px 13px;
}

/* --------------------------------------------------------------- rodapé */

.rodape{ border-top:1px solid var(--linha); background:var(--preto-2); padding:38px 0 46px; }
.rodape__in{ text-align:center; }
.rodape__logo{ width:66px; height:66px; margin:0 auto 13px; opacity:.9; }
.rodape__nome{
  font-size:15px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ouro); margin:0 0 9px;
}
.rodape__sub{ color:var(--texto-2); font-size:14.5px; margin:0 auto 12px; max-width:46ch; }
.rodape__copy{ color:var(--texto-3); font-size:13px; margin:0; }

/* ---------------------------------------------------------- botão do zap */

.zap{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:var(--zap);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.zap:hover{ color:#fff; filter:brightness(1.06); }

/* ------------------------------------------------------------- animação */

.surge{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.surge.is-vis{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto; }
  .surge{ opacity:1; transform:none; }
}

/* ==================================================================
   FAIXA DE PATROCINADORES (topo)
   Modelo do "Monster apresenta" do Liga Motociclista, pedido dele em
   04/08. Fica acima de tudo, rolando devagar.
   ================================================================== */

.faixa-patro{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(90deg, rgba(156,113,40,.22), rgba(23,20,16,.9) 45%);
  border-bottom:1px solid var(--linha);
  padding:0 0 0 14px; overflow:hidden;
}
.faixa-patro__t{
  flex:none; font-size:10px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ouro);
  padding:9px 12px 9px 0; border-right:1px solid var(--linha-forte);
}
.faixa-patro__pista{ flex:1; overflow:hidden; }
.faixa-patro__fita{
  display:flex; gap:0; width:max-content;
  animation:desliza 46s linear infinite;
}
.faixa-patro:hover .faixa-patro__fita{ animation-play-state:paused; }

.fita__item{
  flex:none; padding:9px 26px; font-size:12px; color:var(--texto-3);
  border-right:1px dashed var(--linha-forte); white-space:nowrap;
}
.fita__item i{ font-style:normal; }

@keyframes desliza{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .faixa-patro__fita{ animation:none; }
}

/* ==================================================================
   AS FASES
   ================================================================== */

.fase{
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:22px 20px; margin:0 0 14px;
}
.fase--ativa{
  border-color:var(--ouro-escuro);
  background:linear-gradient(180deg, rgba(228,187,112,.07), var(--carta) 40%);
}

.fase__topo{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin:0 0 11px; }

/* a data só existe quando ele preenche no painel; sem data, esta linha não sai */
.fase__data{
  display:inline-block; margin:0 0 11px; font-size:13.5px; color:var(--texto-2);
  background:rgba(228,187,112,.09); border:1px solid rgba(228,187,112,.24);
  border-radius:999px; padding:5px 13px;
}
.fase__data b{ color:var(--ouro-claro); font-weight:800; }
.fase__ordem{
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ouro-claro); background:rgba(228,187,112,.13);
  border:1px solid rgba(228,187,112,.3); border-radius:999px; padding:4px 12px;
}
.fase__rod{
  margin:0; font-size:clamp(24px,6vw,34px); font-weight:900; line-height:1.05;
  letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--ouro-claro),var(--ouro) 55%,var(--ouro-escuro));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fase__apelido{ font-size:14px; color:var(--texto-3); }

.fase__trecho{ color:var(--texto-2); font-size:16px; margin:0 0 15px; text-wrap:pretty; }
.fase__trecho b{ color:var(--texto); }

.fase__nums{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 15px; }
.fase__num{
  flex:1 1 120px; background:var(--carta-alta); border:1px solid var(--linha);
  border-radius:var(--raio); padding:13px 14px;
}
.fase__num b{
  display:block; font-size:24px; font-weight:900; line-height:1.1;
  color:var(--ouro-claro); font-variant-numeric:tabular-nums;
}
.fase__num span{
  display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto-3); margin-top:3px;
}

.fase__nota{
  font-size:14.5px; color:var(--texto-2); margin:0 0 15px;
  background:rgba(255,255,255,.03); border-left:3px solid var(--ouro-escuro);
  border-radius:0 10px 10px 0; padding:10px 14px; text-wrap:pretty;
}

.fase__rota{ display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 14px; }
@media (min-width:700px){ .fase__rota{ grid-template-columns:1fr auto 1fr; gap:16px; } }

.fase__ver{
  display:block; width:100%; margin:0 0 14px; font:inherit; font-size:14.5px;
  font-weight:700; cursor:pointer; color:var(--ouro-claro);
  background:transparent; border:1px solid var(--linha-forte);
  border-radius:999px; padding:12px;
}
.fase__ver:hover{ background:var(--carta-alta); border-color:var(--ouro-escuro); }

.fase .estados{ margin:0 0 14px; }
.fase .btn--bloco{ margin-top:4px; }

/* ==================================================================
   ESPAÇOS DE PATROCÍNIO (seção Patrocinadores)
   ================================================================== */

.vagas{ display:grid; gap:11px; grid-template-columns:1fr; }
@media (min-width:640px){ .vagas{ grid-template-columns:repeat(3,1fr); } }

.vaga{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:118px; padding:22px 16px; text-align:center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 12px, transparent 12px 24px),
    var(--carta);
  border:1px dashed var(--linha-forte); border-radius:var(--raio); color:var(--texto-3);
}
.vaga__tag{
  position:absolute; top:9px; right:11px; font-size:9.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ouro-escuro);
}
.vaga b{ display:block; font-size:15.5px; font-weight:800; color:var(--texto-2); }
.vaga span{ font-size:13.5px; }

.rodape__fonte{ color:var(--texto-3); font-size:12px; margin:0 0 12px; line-height:1.5; }

/* linha de botões no fim de uma página interna */
.acao-fim{
  display:flex; flex-wrap:wrap; gap:11px; margin:28px 0 0;
}
.acao-fim .btn{ flex:1 1 auto; }
@media (min-width:560px){ .acao-fim .btn{ flex:0 0 auto; } }

/* menu do rodapé (as seções viraram páginas em 04/08) */
.rodape__nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px; margin:0 0 14px;
}
.rodape__nav a{
  font-size:13.5px; color:var(--texto-2); padding:5px 11px; border-radius:999px;
  border:1px solid var(--linha);
}
.rodape__nav a:hover{ color:var(--ouro-claro); border-color:var(--ouro-escuro); }

/* topo de página interna: o hero não existe, então a primeira seção respira */
.sec--topo{ padding-top:26px; }

/* ==================================================================
   ESPAÇO PUBLICITÁRIO DA HOME
   Pedido dele em 05/08. Enquanto não há patrocinador fechado, o próprio
   espaço se anuncia como disponível e leva para a página de patrocínio.
   Quando fecha, o mesmo slot passa a mostrar só a logo da marca.
   ================================================================== */

.publi{ padding:24px 0 0; }
.publi--cotas{ padding:0 0 6px; }

.publi__olho{
  font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--texto-3); margin:0 0 10px; text-align:center;
}

.cotas{ display:grid; gap:11px; grid-template-columns:1fr; }
@media (min-width:700px){ .cotas{ grid-template-columns:repeat(3,1fr); } }

.slot{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:5px;
  padding:26px 18px; color:var(--texto-3);
  background:
    repeating-linear-gradient(45deg, rgba(228,187,112,.04) 0 14px, transparent 14px 28px),
    var(--carta);
  border:1px dashed var(--linha-forte); border-radius:var(--raio-g);
  transition:border-color .18s, background-color .18s;
}
.slot:hover{ border-color:var(--ouro-escuro); background-color:var(--carta-alta); }

.slot--master{ min-height:132px; padding:30px 20px; }
@media (min-width:700px){ .slot--master{ min-height:158px; } }

.slot__tag{
  position:absolute; top:10px; left:14px; font-size:9.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ouro-escuro);
}
.slot__t{
  font-size:17px; font-weight:800; color:var(--ouro-claro); margin-top:6px;
}
.slot--master .slot__t{ font-size:clamp(19px,4.4vw,24px); }
.slot__s{ font-size:14px; color:var(--texto-2); max-width:44ch; text-wrap:pretty; }
.slot__m{
  font-size:11px; letter-spacing:.1em; color:var(--texto-3);
  border:1px solid var(--linha); border-radius:999px; padding:3px 10px; margin-top:5px;
}

/* estado preenchido: a arte da marca manda, o resto some */
.slot--fechado{
  background:var(--carta); border-style:solid; border-color:var(--linha);
  padding:20px;
}
.slot__logo{ max-width:100%; max-height:96px; height:auto; display:block; }
.slot--master .slot__logo{ max-height:132px; }

/* ==================================================================
   TEMA AREIA (21/09)
   Pedido dele: "a cor de fundo do site na cor mais clara da logo,
   areia do deserto". O corpo do site vira areia; topo, faixa de
   patrocínio, hero (foto) e rodapé continuam escuros, redefinindo as
   variáveis antigas só dentro deles.
   Dourado claro em fundo claro não lê (contraste < 2), então o "ouro"
   que vira TEXTO aqui é um bronze escuro tirado da mesma logo.
   ================================================================== */

:root{
  --areia:#ecd8b0;
  --preto:#ecd8b0;          /* fundo da página */
  --preto-2:#e3cb9c;        /* seção alternada */
  --carta:#f6ead0;          /* cartões */
  --carta-alta:#fbf3e2;
  --linha:#d4b98a;
  --linha-forte:#bf9f68;

  --ouro:#7a4e10;           /* 5,1:1 na areia */
  --ouro-claro:#6a430c;
  --ouro-escuro:#a87a30;    /* só borda e traço, nunca texto */

  --texto:#24180a;
  --texto-2:#4a3a24;
  --texto-3:#6b5638;

  --sombra:0 12px 30px rgba(80,50,10,.16);
}

/* ilhas escuras: voltam os valores do tema original */
.topo,.faixa-patro,.hero,.rodape{
  --preto:#0a0906; --preto-2:#100e0a; --carta:#171410; --carta-alta:#1f1b15;
  --linha:#2c2720; --linha-forte:#3d372c;
  --ouro:#e4bb70; --ouro-claro:#f5dcab; --ouro-escuro:#9c7128;
  --texto:#f4f1ea; --texto-2:#c6bfb2; --texto-3:#9e9686;
  --sombra:0 12px 34px rgba(0,0,0,.6);
}
.faixa-patro{ background-color:#100e0a; }
.rodape{ background:#100e0a; }

/* a foto termina na areia, não no preto */
.hero__foto::after{
  background:
    radial-gradient(620px 340px at 50% 26%, rgba(10,9,6,.66), rgba(10,9,6,.3) 78%),
    linear-gradient(180deg, rgba(10,9,6,.62) 0%, rgba(10,9,6,.16) 46%,
                    rgba(10,9,6,.5) 80%, rgba(10,9,6,.35) 92%, var(--areia) 100%);
}

/* botão dourado: fica dourado de verdade (as variáveis de ouro viraram bronze) */
.btn--ouro,.menu__cta,.pular{
  color:#1b1206 !important;
  background:linear-gradient(100deg,#f0cf8e,#d6a038) !important;
}
.btn--ouro{ box-shadow:0 6px 18px rgba(122,78,16,.22); }
.hero .btn--linha{ background:rgba(10,9,6,.55); }

/* etiquetas pequenas que usavam o ouro-escuro como texto */
.vaga__tag,.slot__tag{ color:var(--ouro); }

.form__nota.is-err{ color:#7d1a0b; background:rgba(200,60,40,.1); border-color:rgba(160,40,20,.35); }
.fase__nota{ background:rgba(122,78,16,.06); }
.num,.cx,.ponta,.est,.fase,.slot,.vaga{ box-shadow:0 1px 0 rgba(255,255,255,.5) inset; }

/* HERO (21/09): a arte horizontal dele entra no lugar da logo redonda, e o
   nome já está escrito nela, então o h1 fica só para leitor de tela e Google. */
.so-leitor{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:0; padding:0;
}
.hero__arte{
  width:min(100%, 560px); height:auto; margin:0 auto 22px;
  border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.55);
}
@media (min-width:860px){ .hero__arte{ width:620px; } }
/* véu mais leve: a areia do deserto tem que aparecer, é o pedido dele */
.hero__foto::after{
  background:
    radial-gradient(520px 300px at 50% 70%, rgba(10,9,6,.5), rgba(10,9,6,0) 80%),
    linear-gradient(180deg, rgba(10,9,6,.35) 0%, rgba(10,9,6,.08) 40%,
                    rgba(10,9,6,.3) 82%, var(--areia) 100%);
}
.hero__s{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.5); }
/* (21/09) pedido dele: "um pouco mais de transparência na logo" — a foto do
   deserto aparece por trás da arte */
.hero__arte{ opacity:.8; box-shadow:0 14px 40px rgba(0,0,0,.3); }

/* ==================================================================
   HERO FOTO EM DESTAQUE (21/09, áudio 10h52)
   "A imagem do fundo é a que mais importa; a logo pode ser tirada dali."
   Título em cima, botões embaixo, a moto livre no meio.
   ================================================================== */
.hero{ padding:0; }
.hero__in{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:calc(100svh - 110px); max-height:none;
  padding-top:34px; padding-bottom:40px;
}
@media (min-width:860px){ .hero__in{ min-height:720px; padding-top:44px; } }

.hero__cima .hero__t{ margin-bottom:14px; text-shadow:none; filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
.hero__faixa{ margin-bottom:0; }
.hero__s{ margin-bottom:20px; }
.hero__acoes{ margin-bottom:0; }

.hero__foto{ background:#1a140c; }
.hero__foto::before{ content:none; }
.hero__nitida{
  position:absolute; inset:0;
  background:url("../img/hero-deserto.webp") center 58% / cover no-repeat;
}
@media (min-width:860px){
  /* laterais: a mesma foto, esticada e desfocada */
  .hero__foto::before{
    content:""; position:absolute; inset:-40px;
    background:url("../img/hero-deserto.webp") center 60% / cover no-repeat;
    filter:blur(22px) brightness(.8);
  }
  /* centro: a foto inteira, nítida */
  .hero__nitida{ background-size:auto 100%; background-position:center; }
}

/* véu só em cima (título) e embaixo (botões); o meio fica limpo */
.hero__foto::after{
  z-index:1;
  background:
    linear-gradient(180deg, rgba(10,9,6,.62) 0%, rgba(10,9,6,.12) 26%,
                    rgba(10,9,6,0) 45%, rgba(10,9,6,.1) 62%,
                    rgba(10,9,6,.62) 86%, var(--areia) 100%);
}

/* a arte que saiu do topo: lá embaixo, antes do rodapé */
.arte-fim{ padding:10px 0 56px; }
.arte-fim__img{
  width:min(100%, 720px); height:auto; margin:0 auto;
  border-radius:14px; box-shadow:0 16px 40px rgba(80,50,10,.25);
}
@media (min-width:860px){
  /* a foto nítida vira uma coluna com as bordas esfumadas, sem linha dura */
  .hero__nitida{
    inset:auto; top:0; bottom:0; left:50%; transform:translateX(-50%);
    height:100%; aspect-ratio:1066 / 1600; background-size:cover;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}

/* (21/09, 10h58) foto nova dele: a moto na frente de um outdoor com a arte.
   O nome já está no outdoor, então o h1 volta a ser só para leitor de tela.
   A marca "Dola AI" ficava no asfalto, no pé da foto: saiu no recorte
   (1060x1600 -> 1060x1490). */
.hero__nitida{ background-image:url("../img/hero-outdoor.webp"); background-position:center 40%; }
@media (min-width:860px){
  .hero__foto::before{ background-image:url("../img/hero-outdoor.webp"); }
  .hero__nitida{ aspect-ratio:1060 / 1490; background-position:center; }
}
.hero__foto::after{
  background:
    linear-gradient(180deg, rgba(10,9,6,.45) 0%, rgba(10,9,6,0) 16%,
                    rgba(10,9,6,0) 58%, rgba(10,9,6,.62) 86%, var(--areia) 100%);
}

/* (21/09, 11h02) o topo é SÓ a foto; o texto começa embaixo dela, na areia */
.hero{ height:calc(100svh - 104px); min-height:460px; max-height:880px; }
@media (min-width:860px){ .hero{ height:720px; } }
.hero__foto::after{
  background:linear-gradient(180deg, rgba(10,9,6,0) 88%, var(--areia) 100%);
}
.hero__nitida{ background-position:center 45%; }
@media (min-width:860px){ .hero__foto::before{ filter:blur(22px) brightness(.85); } }

.abre{ text-align:center; padding:26px 0 8px; }
.abre .hero__faixa{ margin:0 0 16px; box-shadow:0 6px 18px rgba(122,78,16,.18); }
.abre__s{
  color:var(--texto-2); font-size:clamp(15.5px,3.5vw,18px);
  margin:0 auto 22px; max-width:46ch; text-wrap:pretty;
}
.abre .hero__acoes{ margin:0 auto; }
/* fora do hero as variáveis de ouro viraram bronze; a faixa fica dourada à mão */
.abre .hero__faixa{ color:#1b1206; background:linear-gradient(100deg,#f0cf8e,#d6a038); }