/* ============================================================
   SECTIONS — layout específico por seção (poster OOH / Swiss)
   ============================================================ */

/* ============================================================
   HERO (#inicio) — split assimétrico ~58/42, fundo bordô escuro
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: clamp(560px, 90svh, 940px);
  background:
    linear-gradient(180deg, var(--surface-deep-2) 0%, var(--surface-deep) 60%);
  color: var(--fg-on-deep);
  padding-block: calc(var(--header-h-top) + var(--space-7)) var(--space-section);
  overflow: hidden;
}
/* Vídeo de fundo — cobre toda a seção, atrás do scrim e do texto */
.hero__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Scrim para legibilidade do texto branco sobre o vídeo */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      oklch(21% 0.082 22 / 0.55) 0%,
      oklch(21% 0.082 22 / 0.68) 55%,
      oklch(21% 0.082 22 / 0.82) 100%);
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-6);
}
.hero__copy { display: grid; justify-items: center; }
.hero__eyebrow { color: var(--fg-on-deep-muted); }
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 1rem + 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-wrap: balance;
  margin-block: var(--space-5) var(--space-6);
  color: var(--white);
}
/* Único toque de vermelho do hero: a palavra "pula" / ponto */
.hero__title .accent { color: var(--cta); }
/* Desktop: fonte maior + 2 linhas garantidas (nowrap impede a 3ª linha) */
@media (min-width: 1024px) {
  .hero__title {
    white-space: nowrap;
    font-size: clamp(4rem, 1rem + 5.4vw, 6.5rem);
  }
}
.hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-on-deep-muted);
  max-inline-size: 42ch;
  margin-block-end: var(--space-7);
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }

/* ============================================================
   NÚMEROS (#numeros) — faixa bordô, 4 stats gigantes
   ============================================================ */
.stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7) var(--space-5);
}
.stat {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--border-on-deep);
}
.stat-number {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-stat);
  line-height: 0.85;
  letter-spacing: var(--tracking-stat);
  font-variant-numeric: tabular-nums;
}
/* alterna vermelho / lua (acento vs contexto) */
.stat-number--cta { color: var(--cta); }
.stat-number--moon { color: var(--moon); }
.stat-label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-on-deep-muted);
  max-inline-size: 18ch;
}
/* Rabisco vermelho atravessando atrás dos números */
.numeros__watermark {
  inset-block-start: 42%;
  inset-inline: 0;
  inline-size: 100%;
  opacity: 0.12;
}
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   MÍDIAS (#midias)
   ============================================================ */
.midias__seal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--status-ok-fg);
}
.midias__seal::before {
  content: "";
  inline-size: 9px; block-size: 9px;
  border-radius: var(--radius-pill);
  background: var(--status-ok);
  flex: none;
}
.midias__cta { margin-block-start: var(--space-7); }
.midias__cta p { color: var(--fg-muted); margin-block-end: var(--space-4); }

/* ============================================================
   COBERTURA (#cobertura) — cidades centralizadas em cima, mapa grande embaixo
   ============================================================ */
.coverage { display: grid; justify-items: center; gap: var(--space-4); }
.coverage__intro { max-inline-size: var(--measure); margin-block-end: var(--space-2); color: var(--fg-muted); }

/* Cidades: cards (nome + benefício) centralizados, em grid responsivo */
.coverage__cities {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: 980px;
}
.coverage__cities li { display: grid; }
.coverage__chip {
  position: relative;          /* âncora do badge no canto */
  display: grid;
  align-content: start;        /* topo: títulos alinham com títulos, subtítulos com subtítulos */
  justify-items: center;
  gap: 2px;                    /* nome bem próximo da descrição */
  block-size: 100%;
  text-align: center;
  padding: var(--space-5) var(--space-4) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
/* Badge no canto superior direito */
.coverage__badge {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--status-ok-fg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.coverage__badge::before {
  content: "";
  inline-size: 7px; block-size: 7px;
  border-radius: var(--radius-pill);
  background: var(--status-ok);
}
.coverage__chip-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-base);
  color: var(--brand);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;         /* cidade em LINHA ÚNICA */
}
.coverage__chip-desc { font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--leading-snug); }
@media (min-width: 600px) { .coverage__cities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .coverage__cities { grid-template-columns: repeat(3, 1fr); } }
/* Aproxima as cidades da subheadline (gap estava grande demais) */
#cobertura .section-head { margin-block-end: var(--space-4); }
.coverage__badge {
  font-size: var(--text-label);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--status-ok-fg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.coverage__badge::before {
  content: "";
  inline-size: 8px; block-size: 8px;
  border-radius: var(--radius-pill);
  background: var(--status-ok);
}
.coverage__reinforce { color: var(--fg-muted); font-style: italic; text-align: center; }
.coverage__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--cta);
}
.coverage__hint svg { inline-size: 18px; block-size: 18px; flex: none; }

/* Mapa grande, horizontal, ocupando toda a largura */
.coverage__map {
  inline-size: 100%;
  margin-block-start: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-3);
}
.coverage__leaflet {
  inline-size: 100%;
  block-size: clamp(360px, 60vh, 620px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--moon);
  display: grid;
  place-items: center;
}
.coverage__leaflet .leaflet-container { inline-size: 100%; block-size: 100%; font-family: var(--font-body); }
.coverage__map-fallback { color: var(--fg-muted); font-size: var(--text-sm); }
.coverage__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend__dot {
  inline-size: 12px; block-size: 12px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--border-strong);
  flex: none;
}
.legend__dot--ok { background: var(--status-ok); }
.legend__dot--busy { background: var(--cta); }
.legend__note {
  font-weight: var(--fw-semi);
  color: var(--fg);
}
.coverage__cta { margin-block-start: var(--space-6); }

/* Chips como botões de filtro */
.coverage__chip {
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out-expo),
    border-color var(--duration-fast) var(--ease-out-expo),
    transform var(--duration-fast) var(--ease-out-expo);
}
.coverage__chip:hover { border-color: var(--brand); transform: translateY(-1px); }
.coverage__chip:active { transform: translateY(0); }
.coverage__chip.is-active { background: var(--brand); border-color: var(--brand); }
.coverage__chip.is-active .coverage__chip-name { color: var(--white); }
.coverage__chip.is-active .coverage__chip-desc { color: var(--fg-on-deep-muted); }
.coverage__chip.is-active .coverage__badge { color: var(--moon); }

/* Popup do mapa (foto + dados) */
.leaflet-popup-content .map-popup { display: grid; gap: var(--space-2); }
.map-popup__img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-xs);
  display: block;
}
.map-popup__img.is-broken { display: none; }
.map-popup__noimg {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xs);
  background: var(--moon);
  color: var(--fg-muted);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.map-popup__body { display: grid; gap: 2px; }
.map-popup__body strong { font-family: var(--font-display); text-transform: uppercase; color: var(--brand); font-size: var(--text-base); }
.map-popup__local { font-size: var(--text-sm); color: var(--fg); }
.map-popup__city { font-size: var(--text-sm); color: var(--fg-muted); }
.map-popup__status { font-size: var(--text-sm); font-weight: var(--fw-semi); }
.map-popup__status.is-ok { color: var(--status-ok-fg); }
.map-popup__status.is-busy { color: var(--cta); }

/* ============================================================
   DIFERENCIAL ANTI-SKIP (#diferencial) — bordô + tigre watermark
   ============================================================ */
/* Clipa o tigre dentro da seção (estava vazando para a seção seguinte) */
#diferencial { overflow: hidden; }
.diferencial__manifesto {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-on-deep-muted);
  max-inline-size: var(--measure);
  margin-block: var(--space-3) var(--space-6);
}
.contrast-list {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}
.contrast {
  display: grid;
  gap: var(--space-2);
  border-block-start: 0;
}
.contrast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-on-deep);
  color: var(--cta);
  margin-block-end: var(--space-2);
}
.contrast__icon svg { inline-size: 26px; block-size: 26px; }
.contrast__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-lg);
  color: var(--white);
  letter-spacing: var(--tracking-tight);
}
.contrast__desc { color: var(--fg-on-deep-muted); max-inline-size: 40ch; }
/* Fecho em linha única, fonte menor (caption) */
.diferencial__close {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-on-deep-muted);
  max-inline-size: none;
  margin-block: var(--space-1) var(--space-5);
  text-wrap: balance;
}
/* Foto de fundo monocromática bordô.
   A imagem em mix-blend-mode:luminosity sobre o fundo bordô da seção assume o tom bordô
   (vira duotone). Camada de escurecimento por cima garante o contraste do texto branco. */
.diferencial__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.diferencial__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: luminosity;
  opacity: 0.5;
}
.diferencial__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(21% 0.082 22 / 0.62) 0%,
    oklch(21% 0.082 22 / 0.78) 100%);
}
@media (min-width: 768px) {
  .contrast-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
/* Cabeçalho do diferencial mais próximo do conteúdo (estava muito espaçado) */
#diferencial .section-head { margin-block-end: var(--space-4); }

/* ============================================================
   COMO FUNCIONA (#como) — processo animado (badges + linha de progresso)
   ============================================================ */
.steps { position: relative; }
.steps__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  justify-items: center;
}
.step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
  max-inline-size: 30ch;
}
/* Badge circular com ícone + número */
.step__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 2px solid var(--border-strong);
  color: var(--fg-muted);
  transition:
    border-color var(--duration-normal) var(--ease-out-expo),
    color var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo);
}
.step__icon { inline-size: 26px; block-size: 26px; }
.step__num {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: -7px;
  inline-size: 24px; block-size: 24px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
}
.step__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-lg);
  color: var(--brand);
  letter-spacing: var(--tracking-tight);
}
.step__desc { color: var(--fg-muted); }

/* Estado ativo: badges acendem em vermelho em sequência ao entrar na tela */
.steps.is-active .step__badge {
  border-color: var(--cta);
  color: var(--cta);
  transition:
    border-color 450ms var(--ease-out-expo),
    color 450ms var(--ease-out-expo);
  transition-delay: calc(var(--reveal-i, 0) * 380ms);
}

.como__cta { margin-block-start: var(--space-8); }
.como__watermark {
  inset-block-start: 30%;
  inset-inline-end: 4%;
  inline-size: min(30vw, 320px);
  opacity: 0.08;
}
@media (min-width: 768px) {
  .steps__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .steps__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  /* Linha conectando os 4 badges + preenchimento animado (centro do badge = 32px) */
  .steps::before,
  .steps::after {
    content: "";
    position: absolute;
    inset-block-start: 32px;
    inset-inline-start: 12.5%;
    block-size: 2px;
    z-index: 0;
  }
  .steps::before { inline-size: 75%; background: var(--border-strong); }
  .steps::after {
    inline-size: 0;
    background: var(--cta);
    transition: inline-size 2.1s var(--ease-out-expo);
  }
  .steps.is-active::after { inline-size: 75%; }
}

/* ============================================================
   PROVA SOCIAL (#marcas) — faixa de logos grayscale
   ============================================================ */
.logos__support { color: var(--fg-muted); max-inline-size: var(--measure); margin-block-end: var(--space-7); }
.logos__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6) var(--space-8);
}
.logos__row li { display: flex; align-items: center; }
.logos__row img {
  block-size: clamp(28px, 4vw, 44px);
  inline-size: auto;
  filter: grayscale(1) opacity(0.65);
  transition: filter var(--duration-normal) var(--ease-out-expo);
}
.logos__row img:hover { filter: grayscale(0) opacity(1); }
/* Slot de depoimento (TODO) */
.testimonial-slot {
  margin-block-start: var(--space-8);
  max-inline-size: var(--measure-max);
  margin-inline: auto;
  padding: var(--space-7);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--fg-muted);
}
.testimonial-slot p { font-size: var(--text-lg); font-style: italic; }
.testimonial-slot .eyebrow { justify-content: center; margin-block-end: var(--space-4); }

/* ============================================================
   SOBRE (#sobre) — split texto + "1986" gráfico
   ============================================================ */
.sobre { display: grid; gap: var(--space-7); align-items: center; }
.sobre__text p { color: var(--fg-muted); max-inline-size: var(--measure); margin-block: var(--space-5); }
.sobre__visual {
  position: relative;
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}
.sobre__year {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 0.85;
  letter-spacing: var(--tracking-stat);
  color: var(--brand);
}
.sobre__year-label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sobre__logo img { inline-size: clamp(180px, 22vw, 260px); block-size: auto; }
/* Rabisco como watermark de fundo da seção (sutil, atrás do conteúdo) */
.sobre__watermark {
  inset-block-start: 50%;
  inset-inline-end: -6%;
  transform: translateY(-50%) rotate(-8deg);
  inline-size: min(60vw, 720px);
  opacity: 0.05;
}
@media (min-width: 1024px) {
  .sobre { grid-template-columns: 1.3fr 0.7fr; gap: var(--space-9); }
}

/* ============================================================
   CTA FINAL (#contato) — bordô, centralizado + form
   ============================================================ */
.cta-final { text-align: center; }
.cta-final__headline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
  max-inline-size: 20ch;
  margin-inline: auto;
}
.cta-final__sub {
  color: var(--fg-on-deep-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  max-inline-size: 52ch;
  margin: var(--space-5) auto var(--space-7);
}
.cta-final__primary { margin-block-end: var(--space-8); }
/* Bloco do formulário */
.cta-final__form {
  text-align: left;
  max-inline-size: var(--measure-max);
  margin-inline: auto;
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border-on-deep);
}
.cta-final__form-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-xl);
  color: var(--white);
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-6);
}
.cta-final__microcopy {
  margin-block-start: var(--space-5);
  font-size: var(--text-sm);
  color: var(--fg-on-deep-muted);
}

/* ============================================================
   ALTERNÂNCIA DE TEMA + CENTRALIZAÇÃO (restyle)
   Ritmo: hero(D) · números(L) · mídias(D) · cobertura(L) ·
          diferencial(D) · como(L) · marcas(D) · sobre(L) ·
          contato(D) · faq(L) · footer(D)
   ============================================================ */

/* ---- NÚMEROS agora CLARO — centralizado, bordô/vermelho sobre branco ---- */
.numeros .stats { justify-items: center; text-align: center; }
.numeros .stat {
  border-inline-start: 0;
  padding-inline-start: 0;
  justify-items: center;
}
.numeros .stat-number--moon { color: var(--brand); } /* lua era invisível no claro → bordô */
.numeros .stat-label { color: var(--fg-muted); }

/* ---- MÍDIAS agora BORDÔ — cards brancos, hover com acento vermelho ---- */
.midias .media-card:hover,
.midias .media-card:focus-within {
  background: var(--surface);
  border-color: var(--cta);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.midias .media-card:hover .media-card__title,
.midias .media-card:focus-within .media-card__title,
.midias .media-card:hover .media-card__index,
.midias .media-card:focus-within .media-card__index { color: var(--cta); }
.midias .media-card:hover .media-card__desc,
.midias .media-card:focus-within .media-card__desc { color: var(--fg-muted); }
.midias .media-card:hover .media-card__specs dt,
.midias .media-card:focus-within .media-card__specs dt { color: var(--fg-muted); }
.midias .media-card:hover .media-card__specs dd,
.midias .media-card:focus-within .media-card__specs dd { color: var(--fg); }
/* "Quero..." (ghost): no card branco, o branco do hover genérico sumia.
   Aqui fica VERDE no hover (card ou botão), bem visível. */
.midias .media-card:hover .media-card__cta,
.midias .media-card:focus-within .media-card__cta,
.midias .media-card__cta:hover { color: var(--status-ok-fg); }
.midias .midias__seal { color: var(--status-ok); justify-content: center; }
.midias .midias__cta p { color: var(--fg-on-deep-muted); }

/* ---- MARCAS agora BORDÔ — logos em silhueta branca ---- */
.marcas .logos__support { color: var(--fg-on-deep-muted); margin-inline: auto; text-align: center; }
.marcas .logos__row img { filter: brightness(0) invert(1) opacity(0.7); }
.marcas .logos__row img:hover { filter: brightness(0) invert(1) opacity(1); }
.marcas .testimonial-slot { border-color: var(--border-on-deep); color: var(--fg-on-deep-muted); }

/* ============================================================
   CENTRALIZAÇÃO GLOBAL — centro por padrão; esquerda só onde necessário
   ============================================================ */

/* COMO FUNCIONA — CTA centralizado (passos já tratados na seção própria) */
.como__cta { text-align: center; }
.como__cta p { color: var(--fg-muted); margin-inline: auto; }

/* DIFERENCIAL — manifesto e contrastes centralizados */
.diferencial__manifesto { margin-inline: auto; text-align: center; }
.contrast-list { text-align: center; }
.contrast { justify-items: center; border-block-start: 0; }
.contrast__desc { margin-inline: auto; }
.diferencial__close { margin-inline: auto; text-align: center; }
/* CTA do diferencial: centralizado sem esticar */
#diferencial .container > .btn { display: flex; inline-size: fit-content; margin-inline: auto; }

/* COBERTURA — intro centralizada (lista permanece legível à esquerda) */
.coverage__intro { margin-inline: auto; text-align: center; max-inline-size: 60ch; }
.coverage__cta { text-align: center; }

/* SOBRE — texto centralizado; bloco gráfico centralizado */
.sobre__text { text-align: center; }
.sobre__text p { margin-inline: auto; }
.sobre__visual { justify-items: center; text-align: center; }

/* Botões soltos de CTA de seção centralizados */
.midias__cta { text-align: center; }