/* =====================================================================
   AUTOESCOLA LÍDER — main.css (identidade)

   PLANO
   1. Conceito: o site é uma placa de advertência na beira da estrada.
      Amarelo de sinalização com letra slab preta (a mesma do "LÍDER" da
      logo) e a estrada tracejada do monograma L correndo entre as seções.

   2. Tokens (cores medidas em marca.json)
      --amarelo-placa  #fdee0e  primária da logo; sempre com texto preto (15,7:1)
      --preto-placa    #111111  preto da logo; faixas, passos e rodapé (18,9:1 com branco)
      --vermelho-frota #c10a11  faixa vermelha dos carros; só em detalhe e foco (6,3:1 com branco)
      --asfalto        #2a2a2a  leito da estrada nos passos
      --cinza-patio    #f0f0f0  superfície (texto suave #695959 = 5,8:1)
      --branco         #ffffff  fundo da página
      Fontes: Bitter 800/900 (títulos, botões, estrada; ecoa o slab pesado do
      LÍDER) + Barlow 400/500 (texto). Escala: H1 37→86px, H2 32→52px,
      H3 21→24px, corpo 18px. Raio suave 10px; botões pílula.

   3. Layout (grade de 12 colunas, divisão na coluna 5: blocos 1–5 | 7–12)
      HERO (fundo amarelo-placa, primeira tela)
      +--------------------------------------------------------------+
      | [logo-placa]          Aulas  Como funciona ...  [WhatsApp]   |
      |--------------------------------------------------------------|
      | Autoescola no JK Nova Capital, em Anápolis      +----------+ |
      | APRENDA A DIRIGIR CARRO                         |  foto    | |
      | OU MOTO COM QUEM VIBRA                          |  2:3     | |
      | COM A SUA APROVAÇÃO          (Bitter 900)       |          | |
      | sub                                             |          | |
      | [WhatsApp preto] [Ligar contorno]               +----------+ |
      | /\ Nota 5,0 no Google   /\ Aulas p/ habilitados              |
      |==== ▬▬ Carro manual ▬▬ Carro automático ▬▬ Moto ▬▬ ... =====| <- estrada (faixa contínua)
      AULAS (branco)                         PASSOS (preto, estrada)
      | H2 + intro       | ━━━━━━━━━━━━━━━ |  | H2 + intro                   |
      | [foto da frota]  | Carro m/a  link |  | ░░/1\░░░░/2\░░░░/3\░░░░/✓\░░ | <- asfalto c/ tracejado
      |                  | ━━━━━━━━━━━━━━━ |  |  título   título  título  ...|
      |                  | Moto       link |  |  texto    texto   texto      |

   4. Ousadia (deal.ousadia_em): o H1 em Bitter 900, grande, preto sobre o
      amarelo inteiro da placa. O resto é calmo: fios pretos, fundo branco.

   5. Assinatura (triângulo de advertência): mini-placas nos fatos do hero,
      placas numeradas sobre a estrada dos passos e o selo "5,0 no Google".
      Autocrítica (Chanel): tirei o selo "Aprovado" que sobrepunha o cartão do
      hero; a própria selfie já traz o selo real da Líder e os dois brigavam.
      Movimento (deal.movimento): entrada-hero (data-m="hero") + faixa contínua
      (data-m="faixa") com o tracejado da estrada. Nada mais anima.

   REVISÃO CONTRA O GENÉRICO
   - Uma autoescola qualquer teria hero azul com foto de banco de imagens
     sangrada e texto branco. Troquei por hero tipográfico no amarelo real da
     placa com a selfie real do cliente num cartão (a foto tem 512 px: não sangra).
   - Categorias em cards com ícone de carro/moto: troquei por lista com fios
     pretos grossos e a foto da frota adesivada ao lado (identifica a Líder).
   - "Passo a passo" em círculos numerados: virou uma estrada de asfalto com
     placas triangulares; o último passo é o selo de aprovado, não um número.
   - Depoimentos em carrossel: não existem confirmados. Ficou o selo 5,0 e as
     selfies de aprovados (recortadas para esconder o selo com nome do instrutor).
   - Faixa de "logos/benefícios": virou a faixa central da estrada do L,
     tracejado amarelo correndo entre as categorias.
   - Botão verde de WhatsApp em todo lugar: o primário é o amarelo da marca
     (preto sobre o amarelo); o verde fica só no botão flutuante.
   ===================================================================== */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.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:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-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;}
@font-face{font-family:'Bitter';font-style:normal;font-weight:800 900;font-display:swap;src:url('../fonts/bitter-800-900.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 {
  --amarelo-placa: #fdee0e;
  --preto-placa: #111111;
  --vermelho-frota: #c10a11;
  --asfalto: #2a2a2a;
  --cinza-patio: #f0f0f0;

  --c-bg: #ffffff;
  --c-surface: var(--cinza-patio);
  --c-text: #1f1919;
  --c-muted: #695959;
  --c-primary: var(--amarelo-placa);
  --c-on-primary: var(--preto-placa);
  --c-accent: var(--vermelho-frota);
  --c-border: rgb(17 17 17 / .14);
  --c-dark: var(--preto-placa);
  --c-on-dark: #ffffff;

  --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Bitter', 'Rockwell', 'Roboto Slab', Georgia, serif;
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-h1: clamp(2.3rem, 1.15rem + 4.6vw, 5.4rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  --fs-h3: clamp(1.3rem, 1.2rem + .4vw, 1.5rem);
  --lh-body: 1.55;
  --lh-head: 1.05;
  --space-section: clamp(4.5rem, 3.4rem + 4.4vw, 7.5rem);
  --gap: clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
  --wrap: 1240px;
  --radius: 10px;
  --radius-btn: 999px;
  --shadow: 0 18px 40px -20px rgb(0 0 0 / .45);
  --header-h: 68px;
  --estrada-h: 60px;
}
@media (min-width: 900px) { :root { --header-h: 84px; --estrada-h: 68px; } }

body { font-weight: 400; }
h1, h2, h3 { font-weight: 900; letter-spacing: -.015em; color: var(--preto-placa); }
h3 { font-weight: 800; letter-spacing: -.005em; line-height: 1.2; }
.intro { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); color: var(--c-muted); max-width: 38ch; }

/* grade de 12 colunas: divisão na coluna 5 (1–5 | 7–12) */
.grade { display: grid; gap: var(--gap); }
@media (min-width: 900px) {
  .grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 1.6vw, 1.5rem); row-gap: 2rem; }
  .grade > :first-child { grid-column: 1 / 6; }
  .grade > :nth-child(2) { grid-column: 7 / -1; }
}

/* ---------- botões (um par: primário amarelo + contorno) ---------- */
.btn { font-family: var(--font-head); font-weight: 800; font-size: 1.0625rem; letter-spacing: .005em; padding-inline: 1.5rem; }
.btn-primary { background: var(--amarelo-placa); color: var(--preto-placa); border-color: var(--preto-placa); }
.btn-primary:hover { filter: none; background: #fff36a; }
.btn-outline { color: var(--preto-placa); border-color: var(--preto-placa); }
.btn-outline:hover { background: var(--preto-placa); color: #fff; }
.btn-escuro, .hero .btn-primary { background: var(--preto-placa); color: var(--amarelo-placa); border-color: var(--preto-placa); }
.btn-escuro:hover, .hero .btn-primary:hover { background: #2e2e2e; }
.btn svg { width: 1.25em; height: 1.25em; }
.btn-sm { font-size: .95rem; }
.link-forte { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--preto-placa); background: none; padding: 0;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .2s, color .2s; }
.link-forte:hover { color: var(--vermelho-frota); }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--c-border); }
.brand-logo { display: block; width: 66px; height: 58px; overflow: hidden; position: relative; }
.brand-logo img { position: absolute; width: 142%; max-width: none; left: -21%; top: -23%; }
@media (min-width: 900px) { .brand-logo { width: 84px; height: 74px; } }
.nav a:not(.btn) { font-weight: 500; font-size: 1.0625rem; }
@media (min-width: 900px) and (max-width: 1100px) { .nav .btn { display: none; } }
.nav-toggle { color: var(--preto-placa); }

/* ---------- HERO: a placa ---------- */
.hero { background: var(--amarelo-placa); color: var(--preto-placa); }
.hero-grid { display: grid; gap: 2rem; padding-block: 2rem 2.5rem; }
.eyebrow { font-weight: 500; font-size: 1.0625rem; margin-bottom: .9rem; }
.hero h1 { font-size: var(--fs-h1); line-height: .98; letter-spacing: -.025em; margin-bottom: 1.4rem; max-width: 14ch; }
.hero-sub { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3rem); max-width: 40ch; margin-bottom: 1.75rem; }
.hero-acoes { display: grid; gap: .75rem; }
.hero-acoes .btn { width: 100%; }
.hero-fatos[role="list"] { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: 1.5rem; font-weight: 500; }
.hero-fatos li { display: inline-flex; align-items: center; gap: .55rem; }
.mini-placa { width: 26px; height: 23px; flex: none; }

.hero-cartao { position: relative; margin: 0; width: min(78%, 330px); }
.hero-foto { aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); border: 4px solid var(--preto-placa); background: var(--preto-placa); box-shadow: var(--shadow); }
/* recorte à direita: esconde o selo com nome do instrutor (canto superior esquerdo da arte) */
.hero-foto img { width: 100%; height: 100%; object-position: 100% 50%; }
.selo { display: block; overflow: visible; }
.selo text { font-family: var(--font-head); font-weight: 900; font-size: 19px; fill: var(--preto-placa); }

@media (min-width: 600px) {
  .hero-acoes { display: flex; flex-wrap: wrap; }
  .hero-acoes .btn { width: auto; }
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: center;
    min-height: calc(100svh - var(--header-h) - var(--estrada-h)); padding-block: 2.5rem; }
  .hero-texto { grid-column: 1 / 9; }
  .hero-cartao { grid-column: 9 / -1; width: min(100%, 360px); justify-self: end; }
}
@media (min-width: 1200px) { .hero h1 { max-width: 15ch; } }

/* ---------- estrada: faixa contínua com o tracejado do L ---------- */
.estrada { background: var(--preto-placa); color: #fff; height: var(--estrada-h); display: flex; align-items: center; border-bottom: 6px solid var(--amarelo-placa); }
.estrada-lista { display: flex; align-items: center; flex: none; }
.estrada-lista li { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--font-head); font-weight: 800; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }
.estrada-lista li::after { content: ""; width: 56px; height: 7px; margin-inline: 1.6rem; background: var(--amarelo-placa); border-radius: 1px; }

/* ---------- AULAS ---------- */
.aulas-cabeca h2 { max-width: 13ch; }
.frota { margin: 2rem 0 0; }
.moldura { overflow: hidden; border-radius: var(--radius); background: var(--cinza-patio); }
.moldura img { width: 100%; }
.aulas-lista li { border-top: 4px solid var(--preto-placa); padding-block: 1.6rem 2rem; }
.aulas-lista li:last-child { padding-bottom: 0; }
.aulas-lista h3 { font-size: clamp(1.45rem, 1.25rem + .8vw, 1.9rem); margin-bottom: .55rem; }
.aulas-lista p { max-width: 52ch; }
@media (min-width: 900px) {
  .aulas-cabeca { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* ---------- PASSOS: a estrada com as placas ---------- */
.passos { background: var(--preto-placa); color: #e9e9e9; }
.passos h2, .passos h3 { color: #fff; }
.passos .intro { color: #cfcfcf; }
.passos-cabeca { margin-bottom: 3rem; }
.passos-lista[role="list"] { position: relative; display: grid; gap: 2.25rem; padding-left: 92px; counter-reset: none; }
.passos-lista::before { /* leito vertical no celular */
  content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 60px; border-radius: 4px;
  background: linear-gradient(var(--amarelo-placa) 50%, transparent 0) 50% 0 / 6px 44px repeat-y, var(--asfalto); }
.passos-lista li { position: relative; min-height: 64px; }
.passo-placa { position: absolute; left: -92px; top: -4px; width: 72px; height: 64px; overflow: visible; }
.passo-placa text { font-family: var(--font-head); font-weight: 900; font-size: 40px; fill: var(--preto-placa); }
.passos-lista h3 { margin-bottom: .4rem; }
.passos-lista p { margin: 0; max-width: 34ch; }
@media (min-width: 900px) {
  .passos-lista[role="list"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding: 132px 0 0; }
  .passos-lista::before { /* leito horizontal */
    left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; bottom: auto; width: auto; height: 96px; border-radius: 0;
    background: linear-gradient(90deg, var(--amarelo-placa) 50%, transparent 0) 0 50% / 64px 7px repeat-x, var(--asfalto); }
  .passo-placa { left: 0; top: -124px; width: 100px; height: 88px; }
}

/* ---------- MOTIVOS ---------- */
.motivos-cabeca { margin-bottom: 2.75rem; }
.motivos-lista { display: grid; gap: 2.25rem; }
.motivos-lista li { padding-top: 1.5rem; position: relative; }
.motivos-lista li::before { /* listra de sinalização */
  content: ""; position: absolute; top: 0; left: 0; width: 96px; height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(-45deg, var(--preto-placa) 0 8px, var(--amarelo-placa) 8px 16px); }
.motivos-lista p { margin: 0; max-width: 40ch; }
@media (min-width: 900px) { .motivos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

/* ---------- APROVADOS ---------- */
.aprovados { background: var(--cinza-patio); }
.selo--nota { width: 128px; margin-bottom: 1.5rem; }
.selo .selo-nota { font-size: 30px; }
.aprovados-links[role="list"] { margin-top: 2rem; }
.aprovados-links li { border-top: 4px solid var(--preto-placa); padding-block: 1.25rem 1.5rem; }
.aprovados-links h3 { margin-bottom: .3rem; }
.aprovados-links p { margin-bottom: .6rem; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-self: start; }
@media (min-width: 900px) { .dupla { gap: 1.5rem; align-self: center; } }
/* retrato 7:10: os arquivos já vêm recortados sem o selo com nome do instrutor (QA); mantém o selo da Líder */
.retrato { margin: 0; aspect-ratio: 7 / 10; border: 3px solid var(--preto-placa); }
.retrato img { width: 100%; height: 100%; object-position: 50% 50%; }

/* ---------- FAQ ---------- */
.duvidas-titulo { max-width: 12ch; }
.faq { border-top: 4px solid var(--preto-placa); }
.faq summary { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.15rem, 1.08rem + .3vw, 1.3rem); padding: 1.3rem 0; align-items: center; color: var(--preto-placa); min-height: 44px; }
.faq summary::after { font-family: var(--font-body); font-weight: 500; font-size: 1.8rem; flex: none; }
.faq details { border-bottom: 1px solid rgb(17 17 17 / .25); }
.faq details > div { color: var(--c-text); max-width: 60ch; }
.faq details > div p { margin: 0; }

/* ---------- CONTATO ---------- */
.contato { background: var(--cinza-patio); }
.dados { margin: 2rem 0; display: grid; gap: 1.25rem; }
.dados div { display: grid; gap: .15rem; }
.dados dt { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 800; color: var(--preto-placa); }
.dados dt svg { width: 20px; height: 20px; color: var(--vermelho-frota); }
.dados dd { margin: 0 0 0 28px; }
.contato-botoes { display: grid; gap: .75rem; }
@media (min-width: 600px) { .contato-botoes { display: flex; flex-wrap: wrap; } }
.map-card { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--preto-placa); color: #fff; text-decoration: none; transition: background .2s; }
.map-card:hover { background: #2a2a2a; }
.map-card strong { display: block; font-family: var(--font-head); font-weight: 800; }
.map-card small { font-size: 1rem; color: #d6d6d6; }
.map-pin { width: 34px; height: 34px; flex: none; color: var(--amarelo-placa); }
.ig { gap: .5rem; margin-top: 1.25rem; }
.ig svg { width: 22px; height: 22px; }

.form { background: #fff; border: 3px solid var(--preto-placa); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); align-self: start; }
.form h3 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin-bottom: 1.25rem; }
.field label { font-weight: 500; font-size: 1rem; }
.field input, .field select, .field textarea { border: 2px solid rgb(17 17 17 / .3); font-size: 1.0625rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--preto-placa); }
.lgpd { font-size: .9375rem; color: var(--c-muted); margin: .9rem 0 0; }
.form-ok { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 8px; background: var(--amarelo-placa); color: var(--preto-placa); font-weight: 500; }

/* ---------- FECHAMENTO: amarelo + vermelho da frota ---------- */
.fecho { background: var(--amarelo-placa); border-bottom: 14px solid var(--vermelho-frota); padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); }
.fecho-inner { display: grid; gap: 2rem; align-items: end; }
.fecho h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem); line-height: 1; margin: 0; max-width: 16ch; }
@media (min-width: 900px) {
  .fecho-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .fecho h2 { grid-column: 1 / 9; }
  .fecho .btn { grid-column: 9 / -1; justify-self: end; }
}

/* ---------- rodapé ---------- */
.site-footer { padding-block: 3.5rem 6.5rem; color: #e6e6e6; }
@media (min-width: 900px) { .site-footer { padding-bottom: 2rem; } }
.rodape-grade { display: grid; gap: 2.25rem; }
@media (min-width: 900px) { .rodape-grade { grid-template-columns: 5fr 4fr 3fr; } }
.brand-logo--rodape { width: 92px; height: 81px; margin-bottom: 1rem; }
.rodape-marca p { max-width: 30ch; margin: 0; }
.rodape-titulo { font-size: 1.125rem; color: var(--amarelo-placa); margin-bottom: .8rem; letter-spacing: 0; }
.rodape-lista { display: grid; gap: .35rem; }
.rodape-lista a { display: inline-block; padding-block: .3rem; }
.footer-bottom { opacity: 1; color: #bdbdbd; }

.wa-float { box-shadow: 0 10px 25px -8px rgb(0 0 0 / .55); }
.dados a { display: inline-flex; align-items: center; min-height: 44px; }

.nowrap { white-space: nowrap; }