/* ============ PLANO (design.md §3) ============
CONCEITO: a faixa amarela da porta do carro de aula (AUTOESCOLA / CFC POPULAR) vira o fio do site: o
  carro passa pela página e deixa a faixa sob cada título.
TOKENS: --verde-letreiro #4a6d4e (primária, botões sobre branco) · --verde-fundo #283f33 (escura: hero, passos,
  rodapé) · --amarelo-faixa #d3be19 (assinatura; texto sobre ele sempre #13251c, nunca branco) · --tinta #13251c
  (texto) · --superficie #ecf3f0 · branco. Azul-marinho da arte do Instagram fica fora (só apoio, e o site já tem verde).
FONTES: Antonio 600/700 (condensada forte, como o CFC POPULAR da lateral do carro) nos títulos e wordmark;
  Public Sans 400/500 no texto. Raio 0 (reto, como a chapa do carro). H1 "grande" 56-76 / 40; H2 40-48 / 30.
HERO (bloco-marca, texto 7 col / foto 5 col):
  +-----------------------------------------------+
  | faixa-eyebrow Autoescola no Jundiaí...        |  [ foto 4:5     ]
  | TIRE SUA CNH EM ANÁPOLIS COM QUEM...  (H1)    |  [ aluna+carro  ]
  | sub · [WhatsApp amarelo] [Ligar]              |  [==AUTOESCOLA Popular AB==] <- faixa cruza a moldura
  | fatos                                         |
  +-----------------------------------------------+
SERVIÇOS: 5 col título/intro | 7 col lista de 4 linhas com filete grosso (sem cards).
COMO FUNCIONA (fundo verde escuro): 4 passos numerados (é sequência real) ligados por uma faixa amarela que se
  desenha na rolagem:  [1]=====[2]=====[3]=====[4]
OUSADIA: a assinatura. Faixa amarela atravessa a página: etiqueta do hero, marca-texto em todo H2, banda gigante do
  endereço (momento tipográfico) e banda de fechamento. Resto calmo.
MOVIMENTO: data-m hero (entrada) · flutuar (foto + faixa do hero, ponteiro) · desenhar (linha dos passos) ·
  revelar (galeria de aprovados) · parallax (foto da frota). Faixa dos H2 "desliza" da esquerda (CSS, via .reveal).
REVISÃO CONTRA O GENÉRICO: o plano inicial era "hero verde + H1 + foto + cards de serviço com ícone + FAQ", que
  serve a qualquer autoescola. Troquei: cards de serviço por lista de linhas; ícones por nada; um selo genérico por
  faixa amarela do carro real; a banda do endereço vira o momento tipográfico; sem logo inventada (wordmark
  "AUTOESCOLA / Popular AB" em tipografia, como a porta do carro). Evitei: creme, rótulos em caixa alta
  espaçada, números fora de sequência, fade-in em tudo.
*/
@font-face{font-family:'Antonio';font-style:normal;font-weight:600 700;font-display:swap;src:url('../fonts/antonio-600-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 500;font-display:swap;src:url('../fonts/public-sans-400-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --verde-letreiro: #4a6d4e; --verde-fundo: #283f33; --amarelo-faixa: #d3be19; --tinta: #13251c;
  --c-bg: #fff; --c-surface: #ecf3f0; --c-text: #13251c; --c-muted: #596961;
  --c-primary: #4a6d4e; --c-on-primary: #fff; --c-accent: #d3be19; --c-dark: #283f33; --c-on-dark: #fff;
  --c-border: rgb(19 37 28 / .18);
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-head: "Antonio", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --radius: 0; --radius-btn: 0; --header-h: 68px; --wrap: 1200px;
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 1.3rem + .6vw, 1.85rem);
}
h1, h2, h3, .brand-name { font-weight: 700; letter-spacing: .005em; }
h3 { font-weight: 600; }
.lead { font-size: 1.125rem; max-width: 58ch; }
.g12 { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) {
  .g12 { grid-template-columns: repeat(12, 1fr); gap: 2rem; }
  .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; }
}
.section { padding-block: clamp(4.5rem, 3rem + 5vw, 7rem); }
.surface { background: var(--c-surface); }

/* header + wordmark */
.site-header { border-bottom: 1px solid var(--c-border); }
.brand { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1; }
.brand-tag { background: var(--amarelo-faixa); color: var(--tinta); font: 700 .66rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; padding: .22rem .5rem .2rem; }
.brand-name { font-family: var(--font-head); font-size: 1.85rem; text-transform: uppercase; line-height: 1; color: var(--verde-fundo); padding-top: .1rem; }
.nav a:not(.btn) { color: var(--tinta); }

/* botões */
.btn { font-weight: 600; letter-spacing: .01em; }
.btn-primary { background: var(--verde-letreiro); color: #fff; }
.btn-primary:hover { background: var(--verde-fundo); filter: none; }
.btn-accent { background: var(--amarelo-faixa); color: var(--tinta); }
.btn-accent:hover { background: #e2cd2b; }
.btn-ghost { border-color: rgb(255 255 255 / .55); color: #fff; }
.btn-ghost:hover { background: rgb(255 255 255 / .1); border-color: #fff; }
.btn-dark { background: var(--verde-fundo); color: #fff; }
.btn-dark:hover { background: var(--tinta); }
.btn-outline { color: var(--tinta); border-color: var(--tinta); }
.btn-outline:hover { background: var(--tinta); color: #fff; }
.btn-wa { background: #1c8a4a; color: #fff; }

/* assinatura: faixa amarela como marca-texto do H2 */
.h2-faixa { display: inline; font-size: var(--fs-h2); text-transform: uppercase; line-height: 1.38; color: var(--tinta);
  background: linear-gradient(var(--amarelo-faixa), var(--amarelo-faixa)) 0 0 / 100% 100% no-repeat;
  padding: .06em .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; margin: 0; }
.js .h2-faixa.reveal { opacity: 1; transform: none; background-size: 0% 100%; transition: background-size .7s var(--ease); }
.js .h2-faixa.reveal.is-visible { background-size: 100% 100%; }
.stack > .h2-faixa { display: inline; }
.stack > .h2-faixa + * { margin-top: 1.6rem; }
.como .h2-faixa, .como .lead { color: var(--tinta); }

/* hero */
.hero { background: var(--verde-fundo); color: #fff; min-height: calc(100svh - var(--header-h)); display: grid; align-items: center; padding-block: clamp(2rem, 4vw, 4.5rem); overflow: clip; }
.hero-grid { display: grid; gap: 2.5rem; }
.eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.1rem; font-weight: 500; font-size: 1.05rem; }
.eyebrow::before { content: ""; width: 2.2rem; height: .55rem; background: var(--amarelo-faixa); flex: none; }
.hero h1 { margin-bottom: 1.1rem; max-width: 15ch; text-transform: uppercase; line-height: 1.04; }
.hero-sub { font-size: 1.15rem; max-width: 52ch; color: rgb(255 255 255 / .9); }
.hero-cta { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.6rem; }
.hero .hero-fatos { display: grid; gap: .5rem 1.5rem; margin-top: 1.8rem; font-size: .95rem; }
.hero-fatos li { border-top: 3px solid var(--amarelo-faixa); padding-top: .5rem; }
.hero-media { position: relative; width: min(74%, 340px); margin-bottom: 1.6rem; }
.hero-frame { aspect-ratio: 4 / 5; overflow: hidden; background: #1c2d24; }
.hero-frame img { width: 100%; height: 100%; object-position: 20% 50%; }
.hero-faixa { position: absolute; left: -1rem; bottom: -1.3rem; margin: 0; background: var(--amarelo-faixa); color: var(--tinta); font: 700 1.35rem/1 var(--font-head); text-transform: uppercase; padding: .55rem 1rem .5rem; white-space: nowrap; }
.hero-faixa span { font: 700 .62rem/1 var(--font-body); letter-spacing: .14em; margin-right: .5rem; vertical-align: .22em; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: repeat(12, 1fr); align-items: center; gap: 2rem; }
  .hero-text { grid-column: 1 / span 7; }
  .hero-media { grid-column: 9 / -1; width: 100%; max-width: 440px; justify-self: end; margin-bottom: 0; }
  .hero-faixa { left: -3rem; bottom: 2rem; font-size: 1.7rem; padding: .7rem 1.3rem .65rem; }
  .hero-cta { flex-direction: row; }
  .hero .hero-fatos { grid-template-columns: repeat(3, auto); justify-content: start; }
}
@media (max-width: 899px) { .hero { align-items: start; } .hero-fatos { max-width: 30rem; } }

/* serviços */
.svc { border-bottom: 2px solid var(--tinta); }
.svc li { border-top: 2px solid var(--tinta); padding: 1.4rem 0 1.5rem; display: grid; gap: .3rem 2rem; }
.svc h3, .why h3, .passos h3 { margin: 0; }
.svc p, .why p, .passos p { margin: 0; color: var(--c-muted); }
@media (min-width: 700px) { .svc li { grid-template-columns: 1fr 1.5fr; } }

/* endereço: momento tipográfico */
.endereco { background: var(--amarelo-faixa); color: var(--tinta); padding-block: clamp(2.5rem, 2rem + 4vw, 5rem); }
.end-big { margin: 0; font: 700 clamp(2.6rem, 1rem + 9vw, 8.5rem)/.95 var(--font-head); text-transform: uppercase; letter-spacing: .005em; }
.end-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.2rem; }
.end-sub { margin: 0; font: 600 clamp(1.4rem, 1rem + 1.6vw, 2.2rem)/1.1 var(--font-head); text-transform: uppercase; }

/* como funciona */
.como { background: var(--verde-fundo); color: #fff; }
.como-head { margin-bottom: 3.5rem; }
.como .lead { color: #fff; }
.passos { position: relative; }
.passos ol { position: relative; display: grid; gap: 2rem; padding: 0; margin: 0; list-style: none; }
.passos li { position: relative; padding-left: 4.5rem; }
.passos p { color: rgb(255 255 255 / .85); }
.passos h3 { margin-bottom: .3rem; }
.num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; background: var(--amarelo-faixa); color: var(--tinta); font: 700 1.7rem/1 var(--font-head); }
.linha { position: absolute; display: block; }
.linha-v { left: calc(1.6rem - 4px); top: 1.6rem; width: 8px; height: calc(100% - 3.2rem); }
.linha-h { visibility: hidden; }
@media (min-width: 900px) {
  .passos ol { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .passos li { padding: 4.6rem 0 0; }
  .linha-v { visibility: hidden; }
  .linha-h { visibility: visible; left: 1.6rem; right: 1.6rem; top: calc(1.6rem - 4px); width: calc(100% - 3.2rem); height: 8px; }
  .num { z-index: 1; }
}

/* por que */
.foto-frota { margin: 0; }
.frame { overflow: hidden; aspect-ratio: 4 / 3; border-bottom: 10px solid var(--amarelo-faixa); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame img[data-m="parallax"] { height: 120%; margin-top: -10%; object-position: 50% 60%; }
.why { display: grid; gap: 1.4rem; margin-top: 1.5rem; }
.why li { border-left: 6px solid var(--verde-letreiro); padding-left: 1.1rem; }
.why h3 { margin-bottom: .2rem; }

/* aprovados */
.aprov-head { margin-bottom: 2.5rem; align-items: end; }
.aprov-cta p { margin: .9rem 0 0; color: var(--c-muted); }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.galeria img { width: 100%; height: auto; aspect-ratio: 1; }
.galeria img { object-fit: cover; }
.galeria img:first-child { grid-column: span 2; aspect-ratio: 16 / 10; object-position: 50% 35%; }
@media (min-width: 700px) { .galeria { grid-template-columns: repeat(3, 1fr); gap: 1rem; } .galeria img:first-child { grid-column: auto; aspect-ratio: 1; object-position: 50% 50%; } }
.aprov-head .btn { width: 100%; }
@media (min-width: 900px) { .aprov-head .btn { width: auto; } }

/* sobre */
.novidade { margin: 0; border-top: 10px solid var(--amarelo-faixa); background: #fff; }
.novidade img { width: 100%; height: auto; }
.novidade figcaption { padding: .8rem 0 0; font-size: .95rem; color: var(--c-muted); }

/* faq */
.faq summary { font-size: 1.1rem; }
.faq summary::after { color: var(--verde-letreiro); }
.faq details > div p { margin: 0; }
.faq details[open] summary { color: var(--verde-letreiro); }

/* contato */
.stack > .dados { margin-top: 1.1rem; }
.dados strong { font: 600 1.25rem/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .02em; }
.botoes { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 560px) { .botoes { flex-direction: row; flex-wrap: wrap; } }
.form { background: var(--c-surface); padding: clamp(1.4rem, 3vw, 2.2rem); border-top: 10px solid var(--amarelo-faixa); }
.form-t { font: 600 1.5rem/1.15 var(--font-head); margin-bottom: 1.2rem; }
.field input, .field textarea { border-radius: 0; border: 1.5px solid var(--tinta); }
.nota { font-size: .875rem; color: var(--c-muted); margin: .8rem 0 0; }
.ok { font-weight: 600; color: var(--verde-letreiro); margin: .8rem 0 0; }
.field-error { color: #a31515; }

/* fechamento */
.fecha { background: var(--amarelo-faixa); color: var(--tinta); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.fecha-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.fecha-t { margin: 0; font: 700 clamp(2rem, 1.2rem + 3.6vw, 3.8rem)/1.02 var(--font-head); text-transform: uppercase; max-width: 18ch; }

/* rodapé */
.site-footer { background: var(--tinta); padding-bottom: 6rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-t { font: 600 1.15rem/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--amarelo-faixa); margin: 0 0 .6rem; }
.site-footer p { margin: 0 0 1em; }
.brand--foot .brand-name { color: #fff; }
.foot-brand .brand { margin-bottom: 1rem; }
.footer-bottom { opacity: .85; }
.wa-float { background: #1c8a4a; }
@media (max-width: 899px) { .h2-faixa { line-height: 1.4; } }
#sobre .g12 { align-items: center; }