/* =========================================================================
   1º EAAGV — LANDING PAGE ÚNICA
   Abre como um cartaz de tela cheia (letra pintada à mão, anos 50) e, ao
   rolar, entrega tudo numa página só: por que expor, o encontro, regulamento
   resumido, o formulário, FAQ e contato.

   O que veio do documento do Iberê (e é bom): a seção "por que expor", a
   regra de som automotivo proibido, as perguntas de mais de um veículo e
   área coberta, e os campos de placa e observações no formulário.

   O que NÃO veio, de propósito, porque contradiz o Regulamento e o
   Anteprojeto rev02 dele: premiação, 3 dias, veículos de 25 anos, motos e
   caminhões, "milhares de visitantes", depoimentos de edições anteriores,
   fotos profissionais e certificado. Ver PENDENCIAS.md.
   ========================================================================= */
:root{
  --fundo:#1C2A24; --fundo-2:#16211C; --fundo-3:#213029;
  --creme:#F3E9CE; --creme-70:rgba(243,233,206,.72); --creme-45:rgba(243,233,206,.6);   /* .45 dava 3,56:1 sobre o verde claro — abaixo do mínimo */
  --fio:rgba(243,233,206,.2); --fio-forte:rgba(243,233,206,.4);
  --vermelho:#B8332C; --mostarda:#D9A62E; --verde-claro:#7FA37E;
  --pincel:'Yellowtail',cursive;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:20px;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--fundo);color:var(--creme);font-family:var(--sans);font-size:16.5px;
  line-height:1.64;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--mostarda);outline-offset:4px;border-radius:2px}
section[id]{scroll-margin-top:24px}
.limite{max-width:1100px;margin:0 auto;padding:0 20px}
@media(min-width:900px){.limite{padding:0 44px}}

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

/* ---------- tipografia ---------- */
.pincel{font-family:var(--pincel);font-weight:400;line-height:1.02;padding:.06em 0}
.rot{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--mostarda);font-weight:600}
h1{font-family:var(--pincel);font-size:clamp(3rem,11vw,7.6rem);line-height:.98;padding:.06em 0}
h2{font-family:var(--pincel);font-size:clamp(2.1rem,5.6vw,3.8rem);line-height:1.02;padding:.05em 0}
h3{font-family:var(--sans);font-weight:700;font-size:1.22rem;letter-spacing:-.01em;line-height:1.25}
.corpo{color:var(--creme-70);max-width:62ch}
.corpo strong{color:var(--creme);font-weight:600}
.risco{width:min(200px,50vw);height:2px;background:var(--vermelho)}

/* ---------- botões ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:15px 28px;text-decoration:none;cursor:pointer;font-family:var(--sans);font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:2px solid transparent;
  background:var(--vermelho);color:var(--creme);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),
             transform .18s var(--ease)}
.bt:active{transform:scale(.975)}
.bt--linha{background:none;border-color:var(--fio);color:var(--creme)}
.bt--ouro{background:var(--mostarda);border-color:var(--mostarda);color:#16211C}
.bt[disabled]{opacity:.45;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){
  .bt:hover{background:#D03D35;border-color:#D03D35}
  .bt--linha:hover{background:rgba(243,233,206,.1);border-color:var(--fio-forte)}
  .bt--ouro:hover{background:#EDBB4A;border-color:#EDBB4A}
}

/* =========================================================================
   1 · O CARTAZ — abertura de tela cheia
   ========================================================================= */
.cartaz{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:76px 20px 96px;overflow:hidden}
.cartaz .fundo{position:absolute;inset:0;z-index:0}
.cartaz .fundo img,
.cartaz .fundo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.3) contrast(1.08) brightness(.36)}
/* o vídeo entra por cima da foto, e só depois de já estar tocando: sem isso, o cartaz
   pisca preto no primeiro quadro.
   Ele é menos escurecido que a foto — com o mesmo .36 o movimento sumia, e movimento é
   a única razão de haver vídeo aqui. O contraste do texto continua acima do mínimo
   porque quem segura a legibilidade é o véu radial abaixo, não o brilho do fundo. */
.cartaz .fundo video{opacity:0;transition:opacity 1.1s var(--ease);
  filter:saturate(.42) contrast(1.06) brightness(.55)}
.cartaz .fundo video.tocando{opacity:1}
@media(prefers-reduced-motion:reduce){.cartaz .fundo video{display:none}}
/* o véu que garante a leitura do texto: mais fechado no centro, onde o texto está */
.cartaz .fundo::after{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(74% 64% at 50% 48%,rgba(22,33,28,.62),rgba(22,33,28,.93) 78%)}
.cartaz::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.papel{position:relative;z-index:2;text-align:center;width:100%;max-width:min(940px,92vw);
  padding:clamp(22px,4vh,40px) clamp(18px,4vw,48px);
  border:2px solid var(--fio);outline:1px solid var(--fio);outline-offset:7px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,16px)}
.papel .rot{color:var(--mostarda)}
.marcas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.marcas span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-70);
  border:1px solid var(--fio);padding:7px 12px}
.selo-topo{position:absolute;z-index:3;left:clamp(14px,3vw,32px);top:clamp(14px,3vh,30px);
  display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--creme-70);text-decoration:none}
.selo-topo img{width:clamp(46px,7vw,72px);height:auto;aspect-ratio:1;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
/* no celular ele encavalaria a moldura do cartaz — e seria redundante, porque o selo
   grande está logo abaixo. Some. */
@media(max-width:760px){.selo-topo{display:none}}

/* ---------- o selo grande, dentro do cartaz ---------- */
.selo-cartaz{width:clamp(96px,13vw,164px);height:auto;aspect-ratio:1;
  margin-bottom:clamp(2px,1vh,10px);filter:drop-shadow(0 4px 22px rgba(0,0,0,.5))}
.desce{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--creme-45);
  display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none}
.desce i{display:block;width:1px;height:26px;background:var(--creme-45);
  animation:desce 2.4s ease-in-out infinite}
@keyframes desce{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}
  50%{transform:scaleY(1);opacity:1;transform-origin:top}}
@media(prefers-reduced-motion:reduce){.desce i{animation:none}}

/* =========================================================================
   SEÇÕES
   ========================================================================= */
.sec{padding:var(--s7) 0}
@media(min-width:900px){.sec{padding:130px 0}}
.sec--curta{padding:var(--s6) 0}
@media(min-width:900px){.sec--curta{padding:var(--s7) 0}}
.sec--clara{background:var(--fundo-3)}
.sec--escura{background:var(--fundo-2)}
.cab{display:grid;gap:var(--s3);grid-template-columns:1fr;margin-bottom:var(--s5)}
@media(min-width:960px){.cab{grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:end}}

/* ---------- por que expor: a razão do dono do carro ---------- */
.motivos{display:grid;gap:1px;background:var(--fio);border:1px solid var(--fio);
  grid-template-columns:1fr}
@media(min-width:700px){.motivos{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.motivos{grid-template-columns:repeat(3,1fr)}}
.motivo{background:var(--fundo);padding:var(--s4) var(--s3);transition:background .4s var(--ease)}
.motivo .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mostarda)}
.motivo h3{margin:12px 0 8px}
.motivo p{font-size:15px;color:var(--creme-70)}
@media(hover:hover) and (pointer:fine){.motivo:hover{background:var(--fundo-3)}}

/* ---------- ficha de dados ---------- */
.ficha{border-top:2px solid var(--fio-forte)}
.ficha-l{display:grid;grid-template-columns:1fr;gap:3px;padding:16px 2px;
  border-bottom:1px solid var(--fio);align-items:baseline}
@media(min-width:640px){.ficha-l{grid-template-columns:minmax(120px,.28fr) 1fr;gap:var(--s3)}}
.ficha-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--creme-45)}
.ficha-v{font-size:1.14rem;font-weight:600}
.ficha-v small{display:block;font-size:13.5px;font-weight:400;color:var(--creme-70);
  margin-top:4px;line-height:1.55}

/* ---------- regulamento resumido ---------- */
.regras{display:grid;gap:0;border-top:1px solid var(--fio)}
.regra{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;
  border-bottom:1px solid var(--fio);align-items:baseline}
.regra .mk{font-family:var(--mono);font-size:13px;color:var(--mostarda);line-height:1.4}
.regra p{font-size:15.5px;color:var(--creme-70)}
.regra p strong{color:var(--creme)}
/* o selo como carimbo acima do título da seção — assina o bloco sem competir com ele */
.selo-lado img{display:block;width:clamp(68px,8vw,98px);height:auto;aspect-ratio:1;
  margin-bottom:var(--s3);opacity:.94}

.selo-nao{border:2px solid var(--vermelho);padding:var(--s3);margin-top:var(--s4);max-width:620px}
.selo-nao b{font-family:var(--pincel);font-size:clamp(1.4rem,3vw,2rem);color:var(--vermelho);
  display:block;padding:.04em 0}
.selo-nao p{color:var(--creme-70);font-size:15px;margin-top:6px}

/* ---------- passos ---------- */
.passos{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:820px){.passos{grid-template-columns:repeat(3,1fr)}}
.passo{border:1px solid var(--fio);padding:var(--s4) var(--s3)}
.passo .q{font-family:var(--pincel);font-size:2.6rem;color:var(--mostarda);line-height:1;padding:.04em 0}
.passo h3{margin:10px 0 8px}
.passo p{font-size:15px;color:var(--creme-70)}
.passo p strong{color:var(--creme)}

/* =========================================================================
   FORMULÁRIO — na própria página, é o motivo de a landing existir
   ========================================================================= */
.form{display:grid;gap:var(--s4);max-width:780px}
.campo{display:grid;gap:8px;align-content:start}
.campo label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--creme-45)}
.campo label .req{color:var(--vermelho)}
.campo input,.campo select,.campo textarea{font-family:var(--sans);font-size:16.5px;
  padding:13px 14px;border:1.5px solid var(--fio-forte);background:var(--fundo-2);color:var(--creme);
  width:100%;min-height:50px;border-radius:0;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.campo select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23D9A62E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--mostarda);
  background:#1A2721}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:3px solid var(--mostarda);outline-offset:2px}
.campo textarea{min-height:120px;resize:vertical;line-height:1.55}
.campo .ajuda{font-size:13.5px;color:var(--creme-45)}
.campo-erro input,.campo-erro select,.campo-erro textarea{border-color:var(--vermelho);border-width:2px}
.msg-erro{font-size:14px;color:#F08078;line-height:1.45}
.msg-erro:empty{display:none}
.dupla,.tripla{display:grid;gap:var(--s3);grid-template-columns:1fr;align-items:start}
@media(min-width:680px){.dupla{grid-template-columns:1fr 1fr}.tripla{grid-template-columns:1fr 1fr 1fr}}
.grupo{border:1.5px solid var(--fio);padding:var(--s4) var(--s3);background:var(--fundo-2)}
.grupo legend{font-family:var(--pincel);font-size:1.7rem;padding:0 12px;margin-left:-12px;
  color:var(--mostarda)}
.aceite{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.aceite input{width:24px;height:24px;min-height:24px;flex:0 0 24px;margin-top:2px;accent-color:var(--mostarda)}
.aceite span{font-size:14.5px;color:var(--creme-70)}
.aceite a{color:var(--mostarda)}

.zona{display:block;width:100%;border:1.5px dashed var(--fio-forte);background:var(--fundo-2);
  padding:var(--s5) var(--s3);text-align:center;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.zona.sobre{border-color:var(--mostarda);background:#1A2721}
@media(hover:hover) and (pointer:fine){.zona:hover{border-color:var(--mostarda);background:#1A2721}}
.zona b{font-family:var(--pincel);font-size:1.7rem;display:block;color:var(--creme);padding:.04em 0}
.zona small{font-size:13.5px;color:var(--creme-45);display:block;margin-top:6px}
.miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:var(--s2)}
.mini{position:relative;aspect-ratio:4/3;border:1px solid var(--fio);overflow:hidden;background:var(--fundo-2)}
.mini img{width:100%;height:100%;object-fit:cover}
.mini button{position:absolute;top:4px;right:4px;width:36px;height:36px;border:0;cursor:pointer;
  background:rgba(22,33,28,.9);color:var(--creme);font-size:19px;line-height:1;border-radius:50%}

/* ---------- FAQ ---------- */
.faq{border-top:2px solid var(--fio-forte);max-width:860px}
.faq-item{border-bottom:1px solid var(--fio)}
.faq-p{appearance:none;background:none;border:0;color:inherit;text-align:left;cursor:pointer;
  display:flex;gap:14px;align-items:baseline;width:100%;padding:16px 0;min-height:50px;
  font-family:var(--sans);font-weight:700;font-size:clamp(1rem,1.9vw,1.16rem);line-height:1.35}
.faq-p:focus-visible{outline:2.5px solid var(--mostarda);outline-offset:3px}
.faq-p .sinal{color:var(--mostarda);font-family:var(--mono);font-size:.85em;flex:0 0 auto;
  transition:transform .3s var(--ease);display:inline-block}
.faq-p[aria-expanded="true"] .sinal{transform:rotate(45deg)}
.faq-r{padding:0 0 18px 30px;color:var(--creme-70);font-size:15.5px;max-width:62ch}

/* ---------- contato + rodapé ---------- */
.contatos{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:760px){.contatos{grid-template-columns:repeat(3,1fr)}}
.contato{border:1px solid var(--fio);padding:var(--s4) var(--s3)}
.contato .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--creme-45)}
.contato .v{font-size:1.1rem;font-weight:700;margin-top:9px;word-break:break-word}
.rodape{border-top:1px solid var(--fio);padding:var(--s6) 0 var(--s4);background:var(--fundo-2)}
.rod{display:grid;gap:var(--s4);grid-template-columns:1fr;align-items:start}
@media(min-width:800px){.rod{grid-template-columns:auto 1fr auto;gap:var(--s6)}}
.rod-links{display:flex;flex-wrap:wrap;gap:6px 26px}
.rod-links a{text-decoration:none;color:var(--creme-70);padding:9px 0;font-size:15px}
@media(hover:hover) and (pointer:fine){.rod-links a:hover{color:var(--mostarda)}}
.rod-fim{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--fio);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--creme-45)}

/* ---------- barra fixa do celular ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 14px;
  background:rgba(22,33,28,.96);backdrop-filter:blur(8px);border-top:1px solid var(--fio);
  transform:translateY(115%);transition:transform .4s var(--ease);display:flex;justify-content:center}
.barra.aparece{transform:none}
.barra .bt{width:100%;max-width:430px}
@media(min-width:1000px){.barra{display:none}}
@media(prefers-reduced-motion:reduce){.barra{transition:none}}

/* ---------- movimento ---------- */
.js .rev{opacity:0;transform:translateY(16px)}
.js .rev.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rev.d1.in{transition-delay:.07s} .js .rev.d2.in{transition-delay:.14s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
  .js .rev{opacity:1;transform:none}
}