/* Auto Moto Escola Piracicabana — desenvolvido por SuperSAC Soluções */

@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/BarlowSemiCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/BarlowSemiCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --amarelo: #FFC928;
  --vermelho: #E2412B;
  --vermelho-escuro: #B92F1C;
  --azul: #2356C4;
  --asfalto: #2F3540;
  --asfalto-claro: #5A6170;
  --prata: #EEF0F2;
  --branco: #FFFFFF;
  --verde: #13863C;
  --verde-escuro: #0E6B2F;

  --display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --texto: "Barlow", Arial, sans-serif;

  --largura: 1160px;
  --margem: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--asfalto);
  background: var(--branco);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

.pular { position: absolute; left: -9999px; top: 0; background: var(--asfalto); color: var(--branco); padding: 10px 16px; z-index: 100; }
.pular:focus { left: 12px; top: 12px; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }

/* ---------- Marca ---------- */
.marca { display: inline-block; flex: none; }
.marca img { height: 64px; width: auto; }
@media (max-width: 480px) { .marca img { height: 44px; } }
@media (max-width: 380px) {
  .marca img { height: 36px; }
  .topo__inner { gap: 10px; }
  .menu .botao--pequeno { font-size: 0.95rem; padding: 8px 12px; }
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em;
  text-decoration: none; padding: 14px 24px; border-radius: 6px; border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.botao svg { width: 22px; height: 22px; flex: none; }
.botao--whats { background: var(--verde); color: var(--branco); }
.botao--whats:hover { background: var(--verde-escuro); }
.botao--linha { border-color: var(--asfalto); color: var(--asfalto); }
.botao--linha:hover { background: var(--asfalto); color: var(--branco); }
.botao--pequeno { font-size: 1rem; padding: 9px 16px; }

/* ---------- Topo ---------- */
.topo { background: var(--branco); border-bottom: 6px solid var(--vermelho); }
.topo__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a:not(.botao) { font-weight: 600; text-decoration: none; }
.menu a:not(.botao):hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (max-width: 760px) { .menu a:not(.botao) { display: none; } }

/* ---------- Hero com as faixas da frota ---------- */
.hero { position: relative; background: var(--amarelo); overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; left: -10%; right: -10%; pointer-events: none; }
/* faixa vermelha diagonal, como na lateral dos carros: passa por baixo do texto e sobe atrás da foto */
.hero::before { height: 200px; bottom: -90px; background: var(--vermelho); transform: skewY(-9deg); transform-origin: left; }
/* friso prata acima da faixa */
.hero::after { height: 18px; bottom: 124px; background: var(--prata); transform: skewY(-9deg); transform-origin: left; }

.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 32px; padding-top: clamp(32px, 6vw, 72px); padding-bottom: 210px; }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.9rem, 6.4vw, 5.4rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 20px; max-width: 11ch; }
.hero__texto { font-size: 1.2rem; max-width: 34ch; margin: 0 0 32px; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__foto { position: relative; filter: drop-shadow(0 18px 24px rgba(47, 53, 64, .35)); }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__foto { max-width: 560px; }
  .hero__inner { padding-bottom: 130px; }
  .hero::before { height: 140px; bottom: -60px; }
  .hero::after { height: 12px; bottom: 90px; }
}

/* ---------- Seções ---------- */
.secao { padding: clamp(64px, 9vw, 112px) 0; }
.secao h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1; letter-spacing: -0.015em; margin: 0 0 14px; }
.secao__intro { max-width: 58ch; margin: 0 0 48px; font-size: 1.15rem; color: var(--asfalto-claro); }

/* Categorias: a letra da CNH é o conteúdo */
.categorias { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid var(--asfalto); }
.categoria { padding: 28px 28px 32px 0; display: flex; flex-direction: column; }
.categoria + .categoria { border-left: 1px solid #D5D8DD; padding-left: 28px; }
.categoria__letra {
  font-family: var(--display); font-weight: 800; font-size: 4.2rem; line-height: 1;
  width: 104px; height: 88px; display: grid; place-items: center;
  background: var(--amarelo); border-bottom: 8px solid var(--vermelho); margin-bottom: 20px;
}
.categoria h3 { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; margin: 0 0 8px; }
.categoria p { margin: 0 0 20px; flex: 1; }
.link-whats { font-weight: 600; color: var(--verde-escuro); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.link-whats:hover { color: var(--asfalto); }

.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 56px; background: var(--prata); }
.extra { padding: 32px; }
.extra + .extra { border-left: 1px solid #D5D8DD; }
.extra h3 { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; margin: 0 0 8px; }
.extra p { margin: 0 0 16px; max-width: 46ch; }

@media (max-width: 860px) {
  .categorias { grid-template-columns: 1fr; }
  .categoria, .categoria + .categoria { border-left: 0; padding-left: 0; padding-right: 0; }
  .categoria + .categoria { border-top: 1px solid #D5D8DD; }
  .extras { grid-template-columns: 1fr; }
  .extra + .extra { border-left: 0; border-top: 1px solid #D5D8DD; }
}

/* Faixa institucional */
.faixa { background: var(--asfalto); color: var(--branco); }
.faixa__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 48px; padding-bottom: 48px; }
.faixa strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.05; color: var(--amarelo); margin-bottom: 6px; }
.faixa p { margin: 0; color: #D9DCE1; max-width: 32ch; }
@media (max-width: 760px) { .faixa__inner { grid-template-columns: 1fr; gap: 24px; } }

/* Localização */
.local { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.endereco { font-style: normal; font-size: 1.2rem; line-height: 1.5; margin: 0 0 28px; }
.endereco span { display: block; }
.local__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-bottom: 8px solid var(--amarelo); background: var(--prata); }
@media (max-width: 860px) { .local { grid-template-columns: 1fr; } }

/* ---------- Rodapé com dados legais ---------- */
.rodape { background: #232830; color: #C9CDD4; font-size: 0.95rem; }
.rodape__inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.rodape__selo { width: 140px; height: 140px; margin-bottom: 14px; }
.rodape__slogan { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--amarelo); }
.rodape h2 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--branco); margin: 0 0 12px; }
.rodape p { margin: 0 0 6px; }
.rodape a { color: var(--branco); text-underline-offset: 3px; }
.rodape a:hover { color: var(--amarelo); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 6px; }
.rodape__base { position: relative; padding-top: 20px; padding-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.85rem; color: #9AA0A9; }
.rodape__base::before { content: ""; position: absolute; top: 0; left: var(--margem); right: var(--margem); border-top: 1px solid #3A404B; }
.rodape__base--solo::before { display: none; }
.rodape__base a { color: #C9CDD4; }
.rodape__base--solo { padding-top: 28px; }
@media (max-width: 860px) { .rodape__inner { grid-template-columns: 1fr; gap: 28px; } }

/* WhatsApp flutuante */
.whats-flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verde); color: var(--branco);
  box-shadow: 0 6px 18px rgba(19, 134, 60, .45);
}
.whats-flutuante:hover { background: var(--verde-escuro); }
.whats-flutuante svg { width: 32px; height: 32px; }

/* ---------- Página de privacidade ---------- */
.documento { max-width: 760px; }
.documento h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; margin: 0 0 12px; }
.documento h2 { font-family: var(--display); font-weight: 700; font-size: 1.6rem; margin: 40px 0 10px; }
.documento p, .documento li { max-width: 68ch; }
.documento ul { padding-left: 1.2em; }
.documento li { margin-bottom: 6px; }
.documento .atualizado { color: var(--asfalto-claro); margin-bottom: 32px; }