/* ══════════════════════════════════════════════════════════════════════════
   HOME — formas próprias por seção
   ══════════════════════════════════════════════════════════════════════════
   Só a home carrega este arquivo. As 16 páginas internas seguem no style.css,
   com a estrutura intacta: elas existem para ranquear por cidade e por serviço,
   e mexer nelas é outra decisão.

   O problema que este arquivo resolve: as seis seções da home tinham o MESMO
   desenho — selo, título centralizado, subtítulo, fileira de cards iguais. Seis
   vezes. É o padrão que o guia de estética da Anthropic chama de "AI slop", e
   ele se combate dando forma própria a cada bloco, não polindo o card.

   O vocabulário é o da rodovia à noite: faixa refletiva, halo de farol, placa
   de quilômetro, a linha da BR-101. Nada de decoração que não signifique algo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Atmosfera: o fundo deixa de ser preto chapado ──────────────────────
   O guia pede profundidade em vez de cor sólida. São três camadas de custo
   zero: o halo âmbar que vem do alto (o farol), um respiro frio embaixo (a
   noite), e um grão fino por cima para a tela não parecer plástico. */
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245,166,35,0.13), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(34,214,122,0.05), transparent 65%),
    radial-gradient(ellipse 70% 50% at 0% 75%, rgba(245,166,35,0.045), transparent 60%);
  background-attachment: fixed;
}
body::after {                       /* grão: fica por cima, não intercepta clique */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ── 2. A faixa refletiva, que é o separador deste site ────────────────────
   Substitui a borda de 1px que separava tudo de tudo. Aparece só onde muda o
   assunto, e por isso significa alguma coisa. */
.stripe {
  height: 6px;
  background: var(--stripe);
  opacity: .9;
}

/* ── 3. Hero: o título ocupa o espaço que um título de emergência merece ──── */
.home-hero .hero-copy h1 {
  /* Grande, mas não a ponto de empurrar o botão para fora da tela: medido, o 6xl
     dava 108px e 4 linhas, e a hero passava de 955px numa janela de 900. Quem está
     parado no acostamento precisa ver o botão sem rolar. */
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: .95;
  font-stretch: 84%;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.home-hero .hero-copy > p {
  font-size: var(--text-lg); line-height: 1.5; max-width: 42ch;
  margin-bottom: var(--space-6);
}
.home-hero .hero-copy h1 { margin-bottom: var(--space-5); }

/* O ✓ não existe na IBM Plex Sans e caía num fallback que desenhava um "V".
   Vira traço, como os outros ícones. */
.hero-micro .check {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m4 12.5 5.2 5.2L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m4 12.5 5.2 5.2L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  font-size: 0;
}

/* O cartão dos três dados sumia sobre a foto: fundo quase transparente e texto
   cinza em cima de faixa clara. Agora ele tem corpo e encosta na borda direita. */
.home-hero .hero-card {
  background: linear-gradient(160deg, rgba(18,18,26,.97), rgba(10,10,15,.99));
  border: 1px solid rgba(245,166,35,.22);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
}

/* ── 4. Faixa de garantias: um painel só, não quatro cards ─────────────────
   Quatro caixas iguais lado a lado eram o começo da repetição. Vira uma régua
   contínua, dividida por linhas verticais — leitura de painel de instrumentos. */
.features-bar .features-grid {
  background: rgba(18,18,26,.6);
  border: 1px solid var(--border);
  border-radius: 14px;
  gap: 0;
  overflow: hidden;
}
.features-bar .feature-item {
  background: none; border: 0; border-radius: 0;
  border-left: 1px solid var(--border);
  padding: var(--space-5) var(--space-6);
}
.features-bar .feature-item:first-child { border-left: 0; }

/* ── 5. Situações: lista de acionamento, não grade de cards ────────────────
   Quem abre esta página está parado no acostamento, no celular, com pressa.
   Uma linha larga por situação é mais fácil de acertar com o polegar do que um
   card, e a lista se lê em diagonal — como um menu de emergência. */
.situations-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.situations-grid .situation-card {
  /* Quatro filhos (ícone, título, descrição, link) em três colunas: sem dizer a linha
     de cada um, a descrição ia para a coluna da direita e o link quebrava sozinho. */
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-5); row-gap: 2px;
  padding: var(--space-5) var(--space-6);
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid rgba(245,166,35,.55);
  background: linear-gradient(90deg, rgba(245,166,35,.05), rgba(18,18,26,.55) 22%);
  transition: border-color .18s, transform .18s, background .18s;
}
.situations-grid .situation-card:hover {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(245,166,35,.11), rgba(26,26,38,.7) 22%);
  transform: translateX(4px);
}
.situations-grid .situation-card h3 {
  grid-column: 2; grid-row: 1; margin: 0; font-size: var(--text-xl); align-self: end;
}
.situations-grid .situation-card p {
  grid-column: 2; grid-row: 2; margin: 0; align-self: start;
  color: var(--text-secondary); font-size: var(--text-sm);
}
.situations-grid .card-icon {
  grid-column: 1; grid-row: 1 / 3;
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(245,166,35,.09);
  border: 1px solid rgba(245,166,35,.16);
}
.situations-grid .card-icon svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
.situations-grid .card-cta {
  grid-column: 3; grid-row: 1 / 3; align-self: center;
  color: var(--green); font-weight: 600; font-size: var(--text-sm); white-space: nowrap;
}

/* ── 6. Cabeçalho de seção: alinhado à esquerda, com a placa de quilômetro ──
   Título centralizado em toda seção é o ritmo que fazia as seis parecerem uma
   só. Aqui ele encosta na esquerda e ganha um marcador de placa. */
.section .section-header { text-align: left; max-width: 62ch; margin-inline: 0; }
.section .section-header h2 { font-size: var(--text-4xl); line-height: 1; margin-bottom: var(--space-4); }
.section .section-header .badge {
  border-radius: 3px;
  border-left: 3px solid var(--accent);
  background: rgba(245,166,35,.08);
  letter-spacing: .14em;
}

/* ── 7. Regiões: as cidades sobre a linha da BR-101 ────────────────────────
   Antes eram pílulas soltas. A rodovia é o que liga essas cidades na vida real,
   e desenhar isso conta mais do que cinco botões iguais. */
.areas-road { position: relative; padding: var(--space-8) 0 var(--space-6); }
.areas-road::before {                       /* o asfalto */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 8%, rgba(255,255,255,.14) 92%, transparent);
}
.areas-road::after {                        /* a faixa tracejada por cima */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 26px, transparent 26px 60px);
  opacity: .5;
}
.areas-road .areas-pills {
  position: relative; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: var(--space-4);
}
.areas-road .area-pill {
  background: var(--bg); border: 1px solid var(--border-hover);
  border-radius: 999px; padding: 10px 20px;
  font-weight: 600; font-size: var(--text-sm);
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .18s, color .18s, transform .18s;
}
.areas-road .area-pill::before {            /* o ponto sobre a estrada */
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px rgba(245,166,35,.16);
}
.areas-road .area-pill:hover { border-color: var(--accent); transform: translateY(-3px); }

/* ── 8. Como funciona: linha do tempo, porque aqui há sequência de verdade ──
   Numerar 01/02/03 só se justifica quando a ordem importa — e nesta seção
   importa. Em vez de quatro cards soltos, os passos correm sobre um fio. */
.steps-rail { position: relative; }
.steps-rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px;
  background: linear-gradient(90deg, rgba(245,166,35,.5), rgba(245,166,35,.12));
}
.steps-rail .steps-grid { gap: var(--space-6); }
.steps-rail .step-card {
  background: none; border: 0; border-radius: 0; padding: 0; text-align: left;
  position: relative; padding-top: 78px;
}
.steps-rail .step-card::before {            /* o número, agora marco da linha */
  /* O estilo antigo deixava o número em opacity .2, de propósito: ele era ornamento
     dentro do card. Aqui ele passou a ser o marco da linha do tempo, e marco tem de
     ser legível — medido, o número saía a 0.2 sobre âmbar e sumia. */
  opacity: 1;
  content: attr(data-n);
  position: absolute; top: 12px; left: 0;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--bg); background: var(--accent);
  box-shadow: 0 0 0 6px var(--bg), 0 0 26px rgba(245,166,35,.35);
}
.steps-rail .step-card h3 { font-size: var(--text-xl); margin-bottom: 6px; }
.steps-rail .step-card p  { color: var(--text-secondary); font-size: var(--text-sm); }

/* ── 9. CTA final: o telefone vira o maior elemento da página ──────────────
   É o que a pessoa veio fazer. Estava do mesmo tamanho de qualquer outro botão. */
.cta-section { position: relative; overflow: hidden; }
.cta-section .cta-phone {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800; font-stretch: 84%;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem); line-height: 1;
  letter-spacing: -0.04em; color: var(--text);
  margin: var(--space-5) 0 var(--space-6);
}
.cta-section .cta-phone:hover { color: var(--accent); }

/* ── 10. Telas estreitas ───────────────────────────────────────────────────
   A lista de situações já nasce em uma coluna. O que muda aqui é a régua de
   garantias, que precisa empilhar, e a linha do tempo, que vira vertical. */
@media (max-width: 900px) {
  .features-bar .feature-item { border-left: 0; border-top: 1px solid var(--border); }
  .features-bar .feature-item:first-child { border-top: 0; }
  .steps-rail::before { top: 0; bottom: 0; left: 22px; right: auto; width: 1px; height: auto; }
  .steps-rail .step-card { padding-top: 0; padding-left: 74px; min-height: 58px; }
  .steps-rail .step-card::before { top: 0; }
  .areas-road::before, .areas-road::after { display: none; }
  .areas-road .areas-pills { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .situations-grid .situation-card {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 4px;
  }
  .situations-grid .card-icon { grid-row: 1 / 3; width: 44px; height: 44px; }
  .situations-grid .card-cta { grid-column: 2; grid-row: 3; align-self: start; padding-top: 4px; }
}

/* ── 11. Os ícones de traço, agora que não há mais emoji ───────────────────
   Emoji é desenhado pelo sistema de quem visita: no Android, no iPhone e no
   Windows são três desenhos diferentes, e nenhum deles é a marca. */
.feature-icon svg, .card-icon svg, .btn-ico {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.features-bar .feature-icon {
  width: 38px; height: 38px; display: grid; place-items: center; flex: none;
}
.features-bar .feature-icon svg { width: 22px; height: 22px; stroke: var(--accent); stroke-width: 1.6; }
.services-mini .card-icon, .service-main .card-icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(245,166,35,.08);
  border: 1px solid rgba(245,166,35,.14);
}
.services-mini .card-icon svg { width: 24px; height: 24px; stroke: var(--accent); stroke-width: 1.6; }
.btn-ico {
  width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7;
  vertical-align: -3px; margin-right: 8px;
}
.btn-call .btn-ico { stroke: currentColor; }