/* =========================================================
   LP Maurício Braga — pré-campanha 2026
   Estrutura de referência: Studio Milano (LP médica)
   Faixas alternadas claro/claro/escuro + CTA repetido.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
}

p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }
a { color: inherit; }

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

.secao { padding-block: var(--secao-y); }
.secao--clara { background: var(--claro); }
.secao--branca { background: var(--branco); }

/* Faixa escura — o bloco de autoridade */
.secao--escura {
  background:
    radial-gradient(1200px 500px at 78% 8%, rgba(11, 92, 168, 0.5), transparent 62%),
    linear-gradient(168deg, var(--azul-950) 0%, var(--azul-900) 52%, #05203F 100%);
  color: var(--branco);
  position: relative;
  overflow: hidden;
}
.secao--escura h2, .secao--escura h3 { color: var(--branco); }
.secao--escura p { color: rgba(255, 255, 255, 0.76); }

/* Divisor em "chevron" — igual à referência */
.chevron {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 34px;
  background: inherit;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  z-index: 2;
}
.chevron--topo { top: 0; }

/* ---------- Eyebrow / rótulo de seção ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--fonte-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--azul-600);
  margin-bottom: 0.9rem;
}
.eyebrow::before, .eyebrow::after {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.secao--escura .eyebrow { color: var(--amarelo-500); }

.cabecalho-secao { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.cabecalho-secao h2 { font-size: var(--t-h2); margin-bottom: 0.85rem; }
.cabecalho-secao p { color: var(--tinta-suave); }
.secao--escura .cabecalho-secao p { color: rgba(255, 255, 255, 0.7); }

/* Ênfase: peso, não cor gritante */
.destaque { color: var(--azul-600); }
.secao--escura .destaque { color: var(--amarelo-500); }

/* =========================================================
   Botões e bloco de CTA repetido
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--fonte-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 1rem 1.9rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--amarelo-500); outline-offset: 3px; }

.btn--primario {
  background: var(--amarelo-500);
  color: var(--azul-950);
  box-shadow: var(--sombra-amarela);
}
.btn--primario:hover { background: var(--amarelo-600); box-shadow: 0 12px 32px rgba(255, 198, 30, 0.42); }

.btn--fantasma {
  background: rgba(255, 255, 255, 0.06);
  color: var(--branco);
  border: 1px solid var(--borda-escura);
  backdrop-filter: blur(6px);
}
.btn--fantasma:hover { background: rgba(255, 255, 255, 0.13); }

.btn--contorno {
  background: transparent;
  color: var(--azul-600);
  border: 1.5px solid var(--azul-600);
}
.btn--contorno:hover { background: var(--azul-600); color: var(--branco); }

.btn svg { width: 18px; height: 18px; }

/* Bloco de CTA que se repete ~7x na página */
.cta-bloco { text-align: center; margin-top: 2.6rem; }
.cta-bloco__linha {
  font-family: var(--fonte-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600;
  margin-bottom: 1.1rem;
  color: var(--tinta);
}
.secao--escura .cta-bloco__linha { color: var(--branco); }

/* Prova social sob o CTA.
   Substitui as 5 estrelas da referência — política não se avalia em estrela. */
.prova {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
}
.prova__avatares { display: flex; }
.prova__avatares span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--branco);
  margin-left: -9px;
  background: linear-gradient(135deg, var(--azul-500), var(--azul-800));
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--branco);
  font-family: var(--fonte-display);
}
.prova__avatares span:first-child { margin-left: 0; }
.secao--escura .prova__avatares span { border-color: var(--azul-900); }

.prova__texto {
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
  text-align: left;
  line-height: 1.35;
}
.prova__texto strong { color: var(--tinta); font-weight: 700; display: block; }
.secao--escura .prova__texto,
.hero .prova__texto { color: rgba(255, 255, 255, 0.62); }
.secao--escura .prova__texto strong,
.hero .prova__texto strong { color: var(--branco); }
.hero .prova__avatares span { border-color: var(--azul-950); }

/* =========================================================
   Header
   ========================================================= */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding-block: 1rem;
  transition: background var(--transicao), box-shadow var(--transicao), padding var(--transicao);
}
.header--fixo {
  background: rgba(4, 27, 56, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  padding-block: 0.65rem;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.marca { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.marca__logo { width: clamp(180px, 42vw, 230px); height: auto; display: block; }
.marca__simbolo {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--amarelo-500);
  display: grid; place-items: center;
  font-family: var(--fonte-display);
  font-weight: 700;
  color: var(--azul-950);
  font-size: 1rem;
  letter-spacing: -0.05em;
}
.marca__texto { line-height: 1.15; }
.marca__nome {
  font-family: var(--fonte-display);
  font-weight: 700;
  color: var(--branco);
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.marca__cargo {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--amarelo-500);
  font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: color var(--transicao);
}
.nav a:hover { color: var(--amarelo-500); }
.header .btn { padding: 0.7rem 1.3rem; font-size: 0.85rem; }

.menu-toggle { display: none; background: none; border: 0; color: var(--branco); cursor: pointer; padding: 0.4rem; }

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 3.5rem 4rem;
  /* Fallback caso a imagem falhe (mantém texto legível). */
  background: linear-gradient(160deg, var(--azul-950) 0%, var(--azul-900) 58%, #04204A 100%);
  color: var(--branco);
  overflow: hidden;
}

/* O <picture> é só um seletor de fonte; que ele não conte no layout — o img é
   quem posiciona (absolute no desktop, faixa no mobile). Evita o encolhimento
   do wrapper no flex e o clamp do reset global img{max-width:100%}. */
.hero picture { display: contents; }

/* Arte de hero (Maurício + orla) — cobre a seção; pessoa ancorada à direita. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}

/* Degradê largo entre o texto (esquerda) e a foto (direita): o texto começa
   sobre a parte sólida e se estende por cima do degradê, blendando com a arte. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    var(--azul-950) 0%,
    var(--azul-950) 12%,
    rgba(4, 27, 56, 0.82) 34%,
    rgba(6, 42, 85, 0.4) 54%,
    transparent 74%);
  z-index: 1;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

/* Texto ocupa a metade esquerda e avança sobre o degradê, blendando com a arte. */
.hero__texto { max-width: 40rem; }

.hero__logo {
  width: clamp(210px, 52vw, 290px);
  height: auto;
  display: block;
  margin-bottom: 1.6rem;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--borda-escura);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}
.hero__kicker b {
  background: var(--amarelo-500);
  color: var(--azul-950);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.hero h1 { font-size: var(--t-hero); margin-bottom: 1.3rem; }
.hero h1 em { font-style: normal; color: var(--amarelo-500); }

.hero__sub {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 33rem;
  margin-bottom: 2rem;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.9rem; }

/* Retrato recortado — o eixo do layout de referência */
.hero__retrato { position: relative; justify-self: center; width: 100%; max-width: 480px; }
.hero__retrato img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
  position: relative;
  z-index: 2;
}
.hero__retrato::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 4%;
  transform: translateX(-50%);
  width: 78%; height: 62%;
  background: radial-gradient(ellipse at center, rgba(11, 92, 168, 0.6), transparent 70%);
  filter: blur(38px);
  z-index: 1;
}

/* Placeholder de foto — sai quando o ensaio chegar */
.placeholder-foto {
  position: relative;
  z-index: 2;
  aspect-ratio: 3 / 4;
  border: 2px dashed rgba(255, 255, 255, 0.28);
  border-radius: var(--raio-lg);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 12px, transparent 12px 24px),
    rgba(255, 255, 255, 0.04);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2rem;
}
.placeholder-foto__tag {
  font-family: var(--fonte-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amarelo-500);
}
.placeholder-foto__texto { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); max-width: 20rem; margin: 0; }

/* Chip flutuante sobre o retrato */
.hero__chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.05rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--borda-escura);
  backdrop-filter: blur(12px);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--sombra-lg);
}
.hero__chip--um { top: 22%; left: -6%; }
.hero__chip--dois { bottom: 20%; right: -4%; }
.hero__chip b { color: var(--amarelo-500); }

/* =========================================================
   Problema
   ========================================================= */

.problema__grid { display: grid; grid-template-columns: 1fr; }
.problema__texto { max-width: 720px; }
.problema h2 { font-size: var(--t-h2); margin-bottom: 1.4rem; }

.lista-dor { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.95rem; }
.lista-dor li { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.98rem; }
.lista-dor svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--azul-600); margin-top: 0.2rem; }

.problema__midia { position: relative; }
.problema__midia .placeholder-foto {
  border-color: var(--borda);
  background: repeating-linear-gradient(45deg, rgba(11,92,168,0.04) 0 12px, transparent 12px 24px), var(--azul-50);
  aspect-ratio: 4 / 5;
}
.problema__midia .placeholder-foto__tag { color: var(--azul-600); }
.problema__midia .placeholder-foto__texto { color: var(--tinta-suave); }

/* =========================================================
   Grid de ideias (6 cards)
   ========================================================= */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--azul-100); }
.card__icone {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--azul-50);
  color: var(--azul-600);
  display: grid; place-items: center;
  margin: 0 auto 1.1rem;
}
.card__icone svg { width: 22px; height: 22px; }
.card h3 { font-size: var(--t-h3); margin-bottom: 0.55rem; }
.card p { font-size: 0.9rem; color: var(--tinta-suave); margin: 0; line-height: 1.6; }

/* =========================================================
   Quem é (sobre)
   ========================================================= */

.sobre h2 { font-size: var(--t-h2); margin-bottom: 1.4rem; }
.sobre p { color: var(--tinta-suave); }

/* "Quem sou" com a foto como fundo da seção inteira (Maurício à esquerda). */
.sobre--bg {
  position: relative;
  overflow: hidden;
  background: var(--branco);
  min-height: 560px;
  display: flex;
  align-items: center;
}
.sobre--bg picture { display: contents; }
.sobre__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  z-index: 0;
}
/* Degradê largo entre a foto (esquerda) e o texto (direita): o texto começa
   sobre o degradê e se estende para a área clara, blendando com a arte. */
.sobre--bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg,
    var(--branco) 0%,
    var(--branco) 14%,
    rgba(255, 255, 255, 0.8) 34%,
    rgba(255, 255, 255, 0.4) 54%,
    transparent 74%);
  z-index: 1;
  pointer-events: none;
}
.sobre--bg .container { position: relative; z-index: 2; }

/* Texto na metade direita; avança sobre o degradê, blendando com a arte. */
.sobre__grid { display: grid; grid-template-columns: 1fr; }
.sobre__texto { max-width: 40rem; margin-left: auto; }

.selos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.selos li {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--amarelo-500);
  border-radius: var(--raio-sm);
  font-size: 0.9rem;
  font-weight: 500;
}
.selos svg { width: 18px; height: 18px; color: var(--azul-600); flex-shrink: 0; }

/* =========================================================
   Faixa escura — os números
   ========================================================= */

.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.numero {
  padding: 2rem 1.5rem;
  border: 1px solid var(--borda-escura);
  border-radius: var(--raio);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  text-align: center;
  transition: transform var(--transicao), border-color var(--transicao);
}
.numero:hover { transform: translateY(-4px); border-color: rgba(255, 198, 30, 0.5); }
.numero__valor {
  font-family: var(--fonte-display);
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  font-weight: 700;
  color: var(--amarelo-500);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}
.numero__rotulo { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); margin: 0; line-height: 1.45; }

.marcos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.1rem; }
.marco {
  padding: 1.6rem;
  border: 1px solid var(--borda-escura);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, 0.04);
}
.marco h3 { font-size: 1.02rem; margin-bottom: 0.5rem; color: var(--amarelo-500); }
.marco p { font-size: 0.87rem; margin: 0; }

/* =========================================================
   Acordeão (ideias em detalhe)
   ========================================================= */

.acordeao__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.acordeao__intro h2 { font-size: var(--t-h2); margin-bottom: 1rem; }
.acordeao__intro p { color: var(--tinta-suave); }
/* Desktop: intro em cima à esquerda, lista à direita (2 linhas), CTA sob o intro. */
.acordeao__intro { grid-column: 1; grid-row: 1; }
.acordeao__cta { grid-column: 1; grid-row: 2; align-self: start; }
.acordeao__grid > .acordeao { grid-column: 2; grid-row: 1 / 3; }

.acordeao { display: grid; gap: 0.7rem; }
.item {
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.item[open] { border-color: var(--azul-100); box-shadow: var(--sombra-sm); }
.item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 0.98rem;
}
.item summary::-webkit-details-marker { display: none; }
.item summary:focus-visible { outline: 3px solid var(--azul-600); outline-offset: -3px; }
.item__num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--azul-600);
  background: var(--azul-50);
  border-radius: 6px;
  padding: 0.28rem 0.5rem;
  flex-shrink: 0;
}
.item__seta { margin-left: auto; flex-shrink: 0; color: var(--tinta-clara); transition: transform var(--transicao); }
.item[open] .item__seta { transform: rotate(180deg); color: var(--azul-600); }
.item__corpo { padding: 0 1.3rem 1.3rem 3.7rem; }
.item__corpo p { font-size: 0.9rem; color: var(--tinta-suave); margin: 0; }

/* =========================================================
   Depoimentos
   ========================================================= */

.depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.depoimento {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.5rem;
}
.depoimento__cabeca { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.depoimento__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-500), var(--azul-800));
  display: grid; place-items: center;
  color: var(--branco);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.depoimento__nome { font-family: var(--fonte-display); font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.depoimento__local { font-size: 0.75rem; color: var(--tinta-clara); }
.depoimento p { font-size: 0.88rem; color: var(--tinta-suave); margin: 0; }

.aviso-secao {
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--amarelo-700);
  background: var(--amarelo-100);
  border-radius: var(--raio-sm);
  font-size: 0.82rem;
  color: #6B4E00;
  text-align: center;
}
.aviso-secao strong { font-weight: 700; }

/* =========================================================
   Região (mapa)
   ========================================================= */

.regiao__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: start; column-gap: clamp(2rem, 5vw, 4rem); row-gap: 1.6rem; }
.regiao h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; }
.regiao p { color: var(--tinta-suave); }
/* Desktop: texto à esquerda, mapa à direita (2 linhas), CTA sob o texto. */
.regiao__grid > .revelar:first-child { grid-column: 1; grid-row: 1; }
.regiao__cta { grid-column: 1; grid-row: 2; align-self: start; }
.regiao__grid > .mapa { grid-column: 2; grid-row: 1 / 3; }

.cidades { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cidades li {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid var(--borda);
  font-size: 0.85rem;
  font-weight: 500;
}
.cidades li strong { color: var(--azul-600); }

.mapa {
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  aspect-ratio: 626 / 599;
  background: var(--azul-50);
}
.mapa-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================
   Formulário
   ========================================================= */

.form__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.form__intro h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; }
.form__intro p { color: rgba(255, 255, 255, 0.76); }

.form__caixa {
  background: var(--branco);
  border-radius: var(--raio-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--sombra-lg);
  color: var(--tinta);
}
.form__caixa h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.form__caixa > p { font-size: 0.86rem; color: var(--tinta-suave); margin-bottom: 1.6rem; }

.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--tinta);
}
.campo label span { color: var(--azul-600); }
.campo input, .campo select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--tinta);
  background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input:focus, .campo select:focus {
  outline: 0;
  border-color: var(--azul-600);
  box-shadow: 0 0 0 3px var(--azul-100);
}
.campo input::placeholder { color: var(--tinta-clara); }

/* Consentimento LGPD — dado sensível exige destaque real (art. 11) */
.consentimento {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  border-radius: var(--raio-sm);
  margin-bottom: 1.3rem;
}
.consentimento input {
  width: 19px; height: 19px;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--azul-600);
  cursor: pointer;
}
.consentimento label { font-size: 0.79rem; line-height: 1.55; color: var(--tinta-suave); cursor: pointer; }
.consentimento a { color: var(--azul-600); font-weight: 600; }

.form__caixa .btn { width: 100%; }
.form__nota { text-align: center; font-size: var(--t-micro); color: var(--tinta-clara); margin: 0.9rem 0 0; }

.form__erro { font-size: 0.78rem; color: #C0392B; margin: 0.35rem 0 0; display: none; }
.campo--erro input { border-color: #C0392B; }
.campo--erro .form__erro { display: block; }

.form__sucesso { text-align: center; padding: 2rem 1rem; }
.form__sucesso svg { width: 52px; height: 52px; color: #128C4B; margin: 0 auto 1rem; }
.form__sucesso h3 { margin-bottom: 0.5rem; }

/* =========================================================
   FAQ
   ========================================================= */

.faq { max-width: 800px; margin-inline: auto; display: grid; gap: 0.7rem; }
.faq .item summary { font-size: 0.95rem; }
.faq .item__corpo { padding-left: 1.3rem; }

/* =========================================================
   Footer
   ========================================================= */

.footer {
  background: var(--azul-950);
  color: rgba(255, 255, 255, 0.62);
  padding-block: 3.5rem 2rem;
  font-size: 0.85rem;
}
.footer__topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--borda-escura);
}
.footer__redes { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer__redes a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--borda-escura);
  display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.75);
  transition: background var(--transicao), color var(--transicao);
}
.footer__redes a:hover { background: var(--amarelo-500); color: var(--azul-950); border-color: var(--amarelo-500); }
.footer__redes svg { width: 17px; height: 17px; }

.footer__links { display: grid; gap: 0.55rem; }
.footer__links a { text-decoration: none; transition: color var(--transicao); }
.footer__links a:hover { color: var(--amarelo-500); }

/* Aviso do art. 36-A — obrigatório na versão pré-campanha */
.footer__legal {
  margin-top: 2rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--borda-escura);
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
  line-height: 1.6;
}
.footer__legal strong { color: rgba(255, 255, 255, 0.9); }

.footer__base {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, 0.42);
}

/* =========================================================
   Animação de entrada
   ========================================================= */

/* Conteúdo é visível por padrão. O estado escondido só existe quando o JS
   confirma que está vivo (classe .js no <html>) — assim, se o script falhar,
   a página aparece inteira em vez de ficar em branco. */
.js .revelar { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .revelar.visivel { opacity: 1; transform: none; }

/* Escotilha de emergência. Se o observer não disparar OU se o navegador estiver
   com as transições travadas (aba em segundo plano, compositor throttled), o JS
   marca .sem-anim e o conteúdo aparece na hora, sem depender de transição.
   Marcar .visivel sozinho não basta: a transição ainda precisaria rodar de 0 a 1. */
.js.sem-anim .revelar {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* =========================================================
   Responsivo
   ========================================================= */

@media (max-width: 1000px) {
  .cards, .numeros, .depoimentos { grid-template-columns: repeat(2, 1fr); }
  /* Empilhados no mobile, os marcos acompanham os números (centralizados). */
  .marco { text-align: center; }
  .marcos { grid-template-columns: 1fr; }
  .hero__grid, .problema__grid, .sobre__grid, .acordeao__grid, .regiao__grid, .form__grid { grid-template-columns: 1fr; }
  /* Reseta o posicionamento explícito do desktop: no mobile, fluxo natural
     (intro → lista → botão) e (texto → mapa → botão). */
  .acordeao__intro, .acordeao__cta, .acordeao__grid > .acordeao,
  .regiao__grid > .revelar:first-child, .regiao__cta, .regiao__grid > .mapa {
    grid-column: auto;
    grid-row: auto;
  }
  /* Mobile: a arte (paisagem) vira faixa no topo, focada no Maurício; texto abaixo. */
  .hero { min-height: auto; flex-direction: column; padding-block: 0 3.5rem; text-align: center; }
  .hero__bg {
    position: static;
    order: -1;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 62vh;
    object-fit: cover;
    object-position: center top;
    margin-bottom: 0;
    /* Base da imagem desvanece na cor do fundo (navy) — sem corte seco. */
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  }
  .hero::after { display: none; }
  /* Texto sobe para dentro do degradê. */
  .hero__texto { max-width: none; position: relative; z-index: 2; margin-top: -3.5rem; }
  .hero__logo { margin-inline: auto; }
  .hero__sub { margin-inline: auto; }
  .hero__acoes { justify-content: center; }
  .eyebrow { justify-content: flex-start; }
  .cabecalho-secao .eyebrow { justify-content: center; }

  /* Mobile "Quem sou": a foto (quadrada) vira faixa no topo; texto abaixo. */
  .sobre--bg { display: flex; flex-direction: column; padding-block: 0 var(--secao-y); }
  .sobre__bg {
    position: static;
    order: -1;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 62vh;
    object-position: center;
    margin-bottom: 0;
    /* Base da imagem desvanece no branco do texto — sem corte seco. */
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  }
  .sobre--bg::after { display: none; }
  /* Texto sobe para dentro do degradê. */
  .sobre__texto { max-width: none; margin-left: 0; position: relative; z-index: 2; margin-top: -3rem; }
  .prova { justify-content: center; }
}

@media (max-width: 720px) {
  .cards, .numeros, .depoimentos { grid-template-columns: 1fr; }
  .item__corpo { padding-left: 1.3rem; }
  .footer__topo { flex-direction: column; }
}