/* ============================================================================
   DRIVE7 · PÁGINA REGIONAL / PRAÇA — LAYOUT DINÂMICO — CANDIDATO v2.1
   ----------------------------------------------------------------------------
   Este arquivo cobre SÓ o que é EXCLUSIVO da praça regional (montado por
   regional.js): o hero regional, as tarifas "a partir de", o valor de recompensa
   e o banner. Todo o resto vem do design-system em `site.css`, carregado ANTES
   deste — ritmo/seção (.section--tight, .section-head, .cta-band, .reveal),
   composição sem card-spam (.feature-grid/.feature, .split, .media/.media-ph),
   ação (.btn/.hero-actions), sinalização (.badge, .empty-state, .gap-note) e a
   base (body/reset/tipografia/botões). Aqui NÃO se redefine o chrome nem a base:
   carregar site.css + regional.css na mesma página é inofensivo (mesmos tokens).

   REGRA DE OURO DO REPO: nenhum arquivo de layout conhece cor da marca. Aqui não
   há cor literal — tudo entra por var(--d7-*) / var(--accent) / var(--fg) de
   brand-tokens.css (fonte única de cor e fonte). Verde é PROIBIDO. O rodapé fixa
   no fim da viewport pela composição flex do <body> definida em site.css (footer
   com margin-top:auto) — por isso este arquivo NÃO redefine `body`.
   ============================================================================ */

:root{
  /* único token que site.css não fornece: coluna de leitura estreita da praça */
  --prose-narrow:400px;
}

/* ---- envelope do conteúdo montado ----------------------------------------- */
.regional{padding-block:var(--s6) var(--s8)}

/* ---- hero da praça (identidade da cidade) --------------------------------- */
/* Padding próprio; o miolo usa .split (site.css) quando não há banner, pondo o
   slot de imagem de marca ao lado do texto. */
.regional-hero{padding-block:var(--s7) var(--s5)}
/* <em> vermelho SEM itálico — realce de marca, não ênfase tipográfica */
.regional-hero h1 em{font-style:normal;color:var(--accent)}
.regional-hero .regional-name{margin-top:var(--s3);font-weight:700}
.regional-hero .lead{margin-top:var(--s4);max-width:var(--prose-narrow)}

/* ---- kicker de contexto (cidade · UF) ------------------------------------- */
/* Vive aqui porque a página regional NÃO carrega plaza.css (onde há um gêmeo). */
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--d7-muted);margin-bottom:var(--s4)}

/* ---- oferta comercial: tarifas "a partir de" ------------------------------ */
.fares{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);max-width:var(--prose-narrow)}
.fare{background:var(--d7-surface);border:1px solid var(--d7-line);
  border-radius:var(--radius);padding:var(--s4) var(--s4) var(--s5)}
.fare-top{display:flex;align-items:center;gap:8px;color:var(--accent);margin-bottom:var(--s3)}
.fare-top .mode-icon{width:38px;height:auto;flex:0 0 auto}
.fare-top span{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.fare-label{font-size:12px;color:var(--d7-muted);margin-bottom:2px}
.fare-value{font-family:var(--d7-font-display);font-size:clamp(26px,7.4vw,40px);line-height:1;color:var(--fg)}

/* ---- valor de recompensa (dentro de .feature: convite / primeira corrida) -- */
/* O .feature (site.css) já dá o espaçamento entre linhas; aqui só o tratamento
   do número grande em vermelho de marca e o requisito secundário. */
.reward-value{font-family:var(--d7-font-display);font-size:clamp(22px,5vw,30px);
  line-height:1;color:var(--accent)}
.reward-req{font-size:13.5px}

/* ---- banner da praça ------------------------------------------------------ */
.banner{margin:0 0 var(--s5)}
.banner-img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--d7-line)}