/* =========================================================
   ActShare, Guia Prático ABNT NBR ISO 9001:2026
   Landing page, CSS desktop-first
   ========================================================= */

/* ---------- Fontes ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/geist-latin.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: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Sistema ---------- */
:root {
  /* cor, paleta da marca ActShare */
  --navy:       #19203A;
  --navy-fundo: #131A31;
  --navy-card:  #202944;
  --azul:       #1E5FD4;
  --azul-esc:   #1748AC;
  --azul-cl:    #6C9BF2;
  --ciano:      #00ACC6;
  --ciano-cl:   #4FD3E8;
  --papel:      #F4F7FC;
  --branco:     #FFFFFF;

  /* texto */
  --txt:        #19203A;
  --txt-med:    #4B5570;
  --txt-fraco:  #666F8C;
  --txt-claro:  #FFFFFF;
  --txt-claro-med: #BFCBE2;
  --txt-claro-fraco: #8E9BB8;

  /* bordas, valor único por fundo */
  --borda-claro:  rgba(25, 32, 58, .08);
  --borda-escuro: rgba(255, 255, 255, .10);

  /* tipografia, lista fechada */
  --fs-h1:      48px;
  --fs-h2:      40px;
  --fs-h3:      24px;
  --fs-corpo:   20px;
  --fs-apoio:   16px;
  --fs-peq:     14px;
  --fs-tag:     12px;
  --fs-num:     56px;
  --fs-display: 64px;
  --fs-sub:     18px;

  --ls-h1:   -.04em;
  --ls-h2:   -.03em;
  --ls-corpo:-.01em;

  /* espaçamento, escala única */
  --e1: 8px;  --e2: 12px; --e3: 16px; --e4: 20px;
  --e5: 24px; --e6: 32px; --e7: 40px; --e8: 48px;
  --e9: 64px; --e10: 96px; --e11: 128px;

  --secao-y: var(--e11);

  /* raio */
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 24px; --r5: 32px;

  --transicao: .32s cubic-bezier(.4, 0, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--txt);
  font-family: 'Geist', 'Manrope', sans-serif;
  font-size: var(--fs-corpo);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--ls-corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
figure, figcaption { margin: 0; }

h1, h2, h3, h4 {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

h1 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.22; letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3;  letter-spacing: var(--ls-h2); }

/* ---------- Container ---------- */
.container { width: min(1280px, 92%); margin-inline: auto; }

.secao { padding-block: var(--secao-y); position: relative; }

/* fundos alternados, com degrau real de luminosidade */
.f-branco { background: var(--branco); }
.f-papel  { background: var(--papel); }
.f-navy   { background: var(--navy); color: var(--txt-claro); }
.f-navy h1, .f-navy h2, .f-navy h3 { color: var(--txt-claro); }

/* ---------- Cabeçalho de seção ---------- */
.cab { max-width: 760px; }
.cab--centro { margin-inline: auto; text-align: center; }
.cab--largo { max-width: 960px; }
.cab--linha { max-width: none; }

/* cabeçalho em duas colunas: tag e título à esquerda, apoio à direita */
.cab-dividido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e8);
  align-items: end;
}
.cab-dividido__esq { min-width: 0; }
.cab-dividido__dir {
  min-width: 0;
  text-align: right;
  text-wrap: balance;
  font-size: var(--fs-sub);
  line-height: 1.7;
  color: var(--txt-med);
}
.f-navy .cab-dividido__dir { color: var(--txt-claro-med); }
.cab__titulo { margin-top: var(--e3); }
.cab__texto  { margin-top: var(--e5); font-size: var(--fs-sub); color: var(--txt-med); line-height: 1.65; }
.f-navy .cab__texto { color: var(--txt-claro-med); }

.destaque { color: var(--azul); }
.f-navy .destaque { color: var(--azul-cl); }

/* trecho do título com degradê lateral, usar no máximo duas vezes na página */
.degrade {
  background: linear-gradient(96deg, #1748AC 0%, #1E5FD4 42%, #3E8BEE 78%, #5FA8F5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Tag ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  gap: var(--e2);
  padding: var(--e1) var(--e3) var(--e1) var(--e2);
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid var(--borda-claro);
  box-shadow: 0 4px 16px rgba(25, 32, 58, .06);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--txt-med);
}
.tag__ponto {
  width: 12px; height: 12px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ciano);
  box-shadow: 0 0 0 4px rgba(0, 172, 198, .18);
  animation: pulsar 2.8s ease-in-out infinite;
}
.f-navy .tag {
  background: rgba(255, 255, 255, .06);
  border-color: var(--borda-escuro);
  box-shadow: none;
  color: var(--txt-claro-med);
  backdrop-filter: blur(10px);
}
.f-navy .tag__ponto { background: var(--ciano-cl); box-shadow: 0 0 0 4px rgba(79, 211, 232, .2); }

@keyframes pulsar {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(.72);  opacity: .6; }
}

/* ---------- Botão ----------
   O raio do botão acompanha o do chip: chip 16 + padding 8 = 24 no pai. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e1) var(--e1) var(--e1) var(--e6);
  border: 0;
  border-radius: var(--r4);
  background: linear-gradient(135deg, #2E72E6 0%, #1E5FD4 46%, #1A51BC 100%);
  box-shadow: 0 14px 30px rgba(30, 95, 212, .30), 0 2px 6px rgba(30, 95, 212, .22);
  color: var(--txt-claro);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-apoio);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow var(--transicao);
}
.btn__texto { position: relative; z-index: 2; white-space: nowrap; transition: color var(--transicao); }
.btn__chip {
  position: relative;
  z-index: 2;
  width: 56px; height: 56px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r3);
  background: var(--branco);
  color: var(--azul);
  transition: color var(--transicao), background var(--transicao);
}
.btn__chip svg { width: 20px; height: 20px; }

/* preenchimento do hover, cobre o botão inteiro em qualquer largura */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--navy);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .5s cubic-bezier(.4, 0, .2, 1);
}
.btn:hover::after, .btn:focus-visible::after { clip-path: circle(75% at 50% 50%); }
.btn:hover { box-shadow: 0 16px 34px rgba(25, 32, 58, .26); }
.btn:hover .btn__chip { background: var(--ciano-cl); color: var(--navy); }

/* em seção escura o hover vai para o branco, nunca para perto do fundo */
.f-navy .btn::after, .btn--claro::after { background: var(--branco); }
.f-navy .btn:hover .btn__texto, .btn--claro:hover .btn__texto { color: var(--navy); }
.f-navy .btn:hover .btn__chip, .btn--claro:hover .btn__chip { background: var(--azul); color: var(--branco); }
.f-navy .btn:hover, .btn--claro:hover { box-shadow: 0 16px 34px rgba(255, 255, 255, .16); }

/* brilho em laço contínuo: faixa larga, fraca e desfocada, curva linear.
   O topo e a base passam do botão para o blur não criar borda dura,
   e o overflow hidden do botão apara a sobra. */
.btn::before {
  content: '';
  position: absolute;
  top: -40%; bottom: -40%;
  left: 0;
  width: 88%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 0%,
    rgba(255, 255, 255, .05) 26%,
    rgba(255, 255, 255, .22) 50%,
    rgba(255, 255, 255, .05) 74%,
    transparent 100%);
  filter: blur(16px);
  will-change: transform;
  animation: varrer 6s linear infinite;
}
@keyframes varrer {
  0%   { transform: translateX(-150%); }
  50%  { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}

.btn:focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; }

/* ---------- Entrada dos blocos ---------- */
.reveal { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .3, 1); }
.reveal.visivel { opacity: 1; translate: none; }

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  position: relative;
  background: var(--branco);
  padding-top: var(--e10);
  overflow: hidden;
}
/* recurso: fundo com padrão, atrás de tudo */
.hero__padrao {
  position: absolute;
  z-index: 0;
  top: -80px; left: -120px;
  width: 760px; height: 760px;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(circle, rgba(30, 95, 212, .28) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 68%);
          mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 68%);
}
.hero__grade {
  position: relative;
  z-index: 2;
  padding-bottom: var(--e9);
}
.hero__texto { min-width: 0; max-width: 620px; }
.hero__titulo { margin-top: var(--e5); }

/* pílula de prova social: fotos redondas dos sócios mais uma linha de texto */
.pilula-prova {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: var(--e3);
  padding: var(--e1) var(--e4) var(--e1) var(--e1);
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid var(--borda-claro);
  box-shadow: 0 6px 22px rgba(25, 32, 58, .09);
}
.pilula-prova__fotos { display: inline-flex; flex-shrink: 0; }
.pilula-prova__fotos img {
  width: 36px; height: 36px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--branco);
  background: var(--papel);
}
.pilula-prova__fotos img + img { margin-left: -12px; }
.pilula-prova__texto {
  min-width: 0;
  font-size: var(--fs-peq);
  line-height: 1.35;
  color: var(--txt-med);
}
.pilula-prova__texto strong { font-family: 'Manrope', sans-serif; font-weight: 600; color: var(--txt); }
.hero__sub strong { font-family: 'Manrope', sans-serif; font-weight: 600; color: var(--txt); }
.hero__sub {
  margin-top: var(--e5);
  max-width: 54ch;
  font-size: var(--fs-sub);
  color: var(--txt-med);
  line-height: 1.65;
  text-wrap: balance;  /* três linhas parelhas, sem a última curta */
}
.hero__cta { margin-top: var(--e7); }

/* barra de credibilidade: divisor fino e itens soltos, sem caixa */
.provas {
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda-claro);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e7);
}
.prova {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-peq);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--txt-med);
  white-space: nowrap;
}
.prova svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--azul); }

/* Palco da hero: fica fora do fluxo, ocupando a metade direita do topo da
   página até a faixa marquee. A foto sangra na altura toda e os cartões
   flutuam por cima, como HTML de verdade, fora da imagem.
   A hero tem overflow hidden, então isso nunca gera rolagem horizontal. */
.hero__palco {
  position: absolute;
  z-index: 1;
  top: 0; bottom: 0;
  /* termina na mesma linha do container: nada invade o respiro lateral */
  right: calc((100vw - min(1280px, 92vw)) / 2);
  width: 58%;
  max-width: 880px;  /* em tela larga a composição não se espalha */
  min-width: 0;
  pointer-events: none;
}
/* o símbolo da ActShare fica atrás de tudo */
.hero__marca {
  position: absolute;
  z-index: 0;
  right: 3%;
  top: 16%;
  width: 50%;
  height: auto;
  fill: #1B3468;
  opacity: .9;
  pointer-events: none;
}
/* o arco e os quadrados em tons ligeiramente diferentes, como na marca */
.hero__marca path:first-child { fill: #1B3468; }
.hero__marca path + path { fill: #23417C; }
/* o mockup encosta na linha direita do container e sobra folga à esquerda,
   para que a sombra dele não invada a coluna de texto */
.hero__foto {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  width: 78%;
  height: auto;
  max-width: none;
}
/* =========================================================
   2. MARQUEE
   ========================================================= */
.marquee {
  position: relative;
  padding-block: var(--e5);
  background: linear-gradient(180deg, #EEF3FB 0%, #E4EDFA 100%);
  border-top: 1px solid var(--borda-claro);
  border-bottom: 1px solid var(--borda-claro);
  overflow: hidden;
}
.marquee__trilha {
  display: flex;
  width: max-content;
  animation: rolar 42s linear infinite;
}
.marquee:hover .marquee__trilha { animation-play-state: paused; }
.marquee__grupo { display: flex; align-items: center; gap: var(--e7); padding-right: var(--e7); }
.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-apoio);
  font-weight: 600;
  letter-spacing: 0;
  color: #2E3A5C;
  white-space: nowrap;
}
.marquee__item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--azul); }
@keyframes rolar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   3. CONTEXTO
   ========================================================= */
.contexto__grade {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--e10);
  align-items: stretch;   /* as duas colunas terminam na mesma linha */
}
.contexto__midia { position: relative; min-width: 0; display: flex; }
.contexto__moldura {
  position: relative;
  flex: 1;
  min-height: 460px;
  border-radius: var(--r5);
  overflow: hidden;
  border: 1px solid var(--borda-claro);
  box-shadow: 0 30px 60px rgba(25, 32, 58, .12);
}
.contexto__moldura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* o card fica dentro da foto, ancorado na base */
.contexto__cartao {
  position: absolute;
  z-index: 2;
  left: var(--e5);
  right: var(--e5);
  bottom: var(--e5);
  padding: var(--e5);
  border-radius: var(--r3);
  background: linear-gradient(140deg, rgba(19, 26, 49, .94) 0%, rgba(27, 42, 80, .94) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(9, 16, 36, .34);
  color: var(--txt-claro);
}
.contexto__cartao-rotulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ciano-cl);
}
.contexto__cartao-rotulo svg { width: 16px; height: 16px; flex-shrink: 0; }
.contexto__cartao p {
  margin-top: var(--e3);
  font-size: var(--fs-apoio);
  line-height: 1.6;
  color: var(--txt-claro);
}

.contexto__texto { min-width: 0; }
.contexto__corpo { margin-top: var(--e5); display: grid; gap: var(--e5); max-width: 60ch; }
.contexto__corpo p { font-size: var(--fs-sub); color: var(--txt-med); line-height: 1.7; }

/* revelação palavra por palavra, um bloco na página */
.frase-forte {
  margin-top: var(--e7);
  padding-top: var(--e6);
  border-top: 1px solid var(--borda-claro);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-h2);
  color: var(--txt);
}
.frase-forte span {
  opacity: .18;
  filter: blur(1px);
  transition: opacity .4s ease, filter .4s ease;
}
.frase-forte span.acesa { opacity: 1; filter: none; }
.contexto__cta { margin-top: var(--e8); }

/* =========================================================
   4. O QUE TEM NO GUIA
   ========================================================= */
.guia__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--e8);
  align-items: start;
  margin-top: var(--e8);
}
.guia__coluna { position: sticky; top: var(--e7); min-width: 0; }

/* ---- capa e página interna, duas folhas sobrepostas ---- */
.capas {
  position: relative;
  width: 100%;
  max-width: 572px;
  height: 560px;
}

/* folha de trás: página de diagnóstico */
.folha {
  position: absolute;
  z-index: 1;
  top: 0; right: 10px;
  width: 277px;
  height: auto;
  border-radius: var(--r2);
  box-shadow: 0 26px 52px rgba(0, 0, 0, .4), 0 0 0 1px var(--borda-escuro);
  transform: rotate(4deg);
}
/* capa plana do material, montada em CSS */
.capa {
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 88px;
  width: 329px;
  max-width: 329px;
  height: auto;
  border-radius: var(--r2);
  transform: rotate(-2.5deg);
  box-shadow: 0 34px 64px rgba(0, 0, 0, .46), 0 0 0 1px var(--borda-escuro);
}
.guia__legenda {
  margin-top: var(--e6);
  text-wrap: balance;
  max-width: 400px;
  font-size: var(--fs-peq);
  color: var(--txt-claro-fraco);
}

/* três números soltos, separados por divisor vertical */
.numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e8);
  margin-top: var(--e10);
}
.numeros__card {
  min-width: 0;
  padding-left: var(--e8);
  border-left: 1px solid var(--borda-escuro);
}
.numeros__card:first-child { padding-left: 0; border-left: 0; }
.numeros__valor {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-h1);
  background: linear-gradient(140deg, #7FE9F8 0%, #4FD3E8 48%, #2AA9DC 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* âncora do número, para ele não ficar solto no topo do bloco */
.numeros__texto { min-width: 0; margin-top: var(--e5); }
.numeros__titulo {
  font-size: var(--fs-apoio);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--branco);
}
.numeros__texto p { margin-top: var(--e2); font-size: var(--fs-peq); line-height: 1.6; color: var(--txt-claro-med); }
.guia__cta { display: flex; justify-content: center; }

/* lista numerada com sanfona */
.sanfona { min-width: 0; border-top: 1px solid var(--borda-escuro); }
.sanfona__item { border-bottom: 1px solid var(--borda-escuro); }
.sanfona__botao {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--e5);
  padding: var(--e5) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--txt-claro);
  font-size: var(--fs-apoio);
  transition: color var(--transicao);
}
.sanfona__num {
  flex-shrink: 0;
  min-width: 34px;
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-apoio);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--azul-cl);
  padding-top: 4px;
  transition: color var(--transicao);
}
.sanfona__titulo {
  flex: 1;
  min-width: 0;
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-h2);
}
.sanfona__seta {
  flex-shrink: 0;
  width: 36px; height: 36px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borda-escuro);
  color: var(--azul-cl);
  transition: transform var(--transicao), background var(--transicao), color var(--transicao);
}
.sanfona__seta svg { width: 18px; height: 18px; }
.sanfona__botao:hover .sanfona__seta { background: rgba(108, 155, 242, .16); color: var(--branco); }
.sanfona__item.aberto .sanfona__seta { transform: rotate(180deg); background: var(--azul); color: var(--branco); border-color: transparent; }
.sanfona__painel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .36s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.sanfona__item.aberto .sanfona__painel { grid-template-rows: 1fr; opacity: 1; }
.sanfona__conteudo { overflow: hidden; min-height: 0; }
.sanfona__conteudo p {
  padding: 0 var(--e9) var(--e5) calc(34px + var(--e5));
  font-size: var(--fs-apoio);
  line-height: 1.65;
  color: var(--txt-claro-med);
}
.guia__cta { margin-top: var(--e8); }

/* =========================================================
   5. PARA QUEM É
   ========================================================= */
.publico__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--e6);
  margin-top: var(--e8);
  align-items: stretch;
}
.publico__painel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--e8);
  border-radius: var(--r5);
  background: var(--papel);
  border: 1px solid var(--borda-claro);
}
.publico__titulo { font-size: var(--fs-h3); }
.publico__lista { margin: var(--e6) 0 auto; padding: 0; list-style: none; display: grid; gap: var(--e4); }
.publico__lista li {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
  font-size: var(--fs-apoio);
  line-height: 1.6;
  color: var(--txt-med);
}
.publico__lista-icone {
  width: 40px; height: 40px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r2);
  background: var(--azul);
  color: var(--branco);
}
.publico__lista-icone svg { width: 20px; height: 20px; }

/* card escuro aninhado, com o CTA */
.publico__cta-card {
  position: relative;
  overflow: hidden;   /* o brilho fica dentro do card */
  margin-top: var(--e8);
  padding: var(--e6);
  border-radius: var(--r4);
  background: linear-gradient(140deg, var(--navy) 0%, #1C2C55 100%);
  color: var(--txt-claro);
}
.publico__cta-card::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: -140px; bottom: -160px;
  width: 440px; height: 440px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 172, 198, .3) 0%, rgba(30, 95, 212, .2) 38%, transparent 72%);
}
.publico__cta-card > * { position: relative; z-index: 1; }
.publico__cta-card p { font-size: var(--fs-apoio); line-height: 1.6; color: var(--txt-claro-med); }
.publico__cta-card .btn { margin-top: var(--e5); }
.publico__cta-titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h2);
  margin-bottom: var(--e2);
}
.publico__cta-titulo svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ciano-cl); }

.publico__figura {
  position: relative;
  min-width: 0;
  border-radius: var(--r5);
  overflow: hidden;
  border: 1px solid var(--borda-claro);
}
.publico__figura img { width: 100%; height: 100%; object-fit: cover; }
.publico__selo {
  position: absolute;
  z-index: 2;
  left: var(--e5); bottom: var(--e5); right: var(--e5);
  padding: var(--e4);
  border-radius: var(--r3);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .5);
  display: flex;
  align-items: center;
  gap: var(--e3);
}
.publico__selo-icone {
  width: 44px; height: 44px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r2);
  background: var(--azul);
  color: var(--branco);
}
.publico__selo-icone svg { width: 22px; height: 22px; }
.publico__selo p { font-size: var(--fs-peq); line-height: 1.45; color: var(--txt); min-width: 0; }

/* =========================================================
   6. AUTORIDADE, bento
   ========================================================= */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e5);
  margin-top: var(--e8);
}
.bento__bloco {
  position: relative;
  min-width: 0;
  border-radius: var(--r4);
  overflow: hidden;
  border: 1px solid var(--borda-claro);
  background: var(--branco);
  padding: var(--e6);
}
.bento__rotulo {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--txt-fraco);
}

/* bloco herói, foto de fundo com degradê */
.bento__heroi {
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  border: 0;
  min-height: 490px;
  display: flex;
}
.bento__heroi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento__heroi::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 26, 49, .2) 0%, rgba(19, 26, 49, .62) 34%, rgba(17, 24, 45, .93) 58%, rgba(15, 21, 40, .98) 100%);
}
.bento__heroi-conteudo {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: var(--e7);
  color: var(--txt-claro);
}
.bento__heroi-conteudo .bento__rotulo { color: var(--ciano-cl); }
.bento__heroi-conteudo h3 { margin-top: var(--e2); color: var(--txt-claro); }
.bento__heroi-conteudo p { margin-top: var(--e3); font-size: var(--fs-apoio); line-height: 1.65; color: var(--txt-claro-med); max-width: 46ch; }

/* números */
.bento__numero { display: flex; flex-direction: column; justify-content: space-between; min-height: 198px; }
.bento__icone {
  width: 48px; height: 48px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r2);
  background: rgba(30, 95, 212, .1);
  color: var(--azul);
  margin-bottom: var(--e4);
}
.bento__icone svg { width: 26px; height: 26px; }
.bento__numero p { font-size: var(--fs-peq); color: var(--txt-med); line-height: 1.5; }
.bento__numero p.bento__valor {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-num);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--ls-h1);
  color: var(--azul);
}

/* foto secundária */
.bento__foto { grid-column: span 2; padding: 0; min-height: 268px; }
.bento__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento__foto-icone {
  width: 44px; height: 44px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r2);
  background: rgba(255, 255, 255, .14);
  border: 1px solid var(--borda-escuro);
  backdrop-filter: blur(10px);
  color: var(--ciano-cl);
}
.bento__foto-icone svg { width: 22px; height: 22px; }
.bento__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 26, 49, 0) 30%, rgba(19, 26, 49, .88) 100%);
}
.bento__foto-legenda {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: var(--e3);
  padding: var(--e5);
  color: var(--txt-claro);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-apoio);
  font-weight: 600;
  letter-spacing: var(--ls-corpo);
}

/* áreas de especialidade: 4 cards horizontais com imagem de fundo */
.areas__rotulo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e10);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--txt-med);
}
.areas__rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borda-claro);
}
.areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5);
  margin-top: var(--e6);
}
.area {
  position: relative;
  min-width: 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  border-radius: var(--r4);
  overflow: hidden;
  border: 1px solid var(--borda-claro);
}
.area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 21, 40, .95) 0%, rgba(17, 26, 52, .88) 52%, rgba(19, 32, 64, .66) 100%);
}
/* no card alto o texto fica na base, então o degradê fecha embaixo também */
@media (max-width: 767px) {
  .area::after {
    background:
      linear-gradient(180deg, rgba(15, 21, 40, .5) 0%, rgba(15, 21, 40, .2) 38%, rgba(13, 19, 38, .9) 100%),
      linear-gradient(100deg, rgba(15, 21, 40, .82) 0%, rgba(17, 26, 52, .6) 60%, rgba(19, 32, 64, .42) 100%);
  }
}
/* conteúdo ancorado na esquerda inferior:
   ícone e título na mesma linha, texto abaixo começando sob o ícone */
.area__conteudo {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e6);
  color: var(--txt-claro);
}
.area__topo { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.area__icone {
  width: 48px; height: 48px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r2);
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--borda-escuro);
  backdrop-filter: blur(10px);
  color: var(--ciano-cl);
}
.area__icone svg { width: 24px; height: 24px; }
.area__topo h3 { font-size: var(--fs-h3); color: var(--txt-claro); }
.area__conteudo > p { font-size: var(--fs-apoio); line-height: 1.6; color: var(--txt-claro-med); max-width: 42ch; }

/* =========================================================
   7. CULTURA, carrossel
   ========================================================= */
.cultura__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e7);
}
.cultura__setas { display: flex; gap: var(--e2); flex-shrink: 0; }
.seta-btn {
  width: 52px; height: 52px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borda-escuro);
  background: rgba(255, 255, 255, .05);
  color: var(--branco);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), opacity var(--transicao);
}
.seta-btn svg { width: 20px; height: 20px; }
.seta-btn:hover { background: var(--azul); color: var(--branco); }
.seta-btn:disabled { opacity: .3; cursor: default; }
.seta-btn:disabled:hover { background: rgba(255, 255, 255, .05); }

.carrossel {
  margin-top: var(--e8);
  display: flex;
  gap: var(--e5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--e1);
  cursor: grab;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel.arrastando { cursor: grabbing; scroll-snap-type: none; }

.cartao-cultura {
  position: relative;
  flex: 0 0 320px;
  min-width: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--r4);
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--borda-escuro);
}
.cartao-cultura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* escurece o topo para a etiqueta e o ícone lerem sobre qualquer foto,
   alivia no meio para a imagem respirar, e fecha embaixo para o texto */
.cartao-cultura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 17, 34, .8) 0%,
    rgba(13, 19, 38, .4) 20%,
    rgba(15, 21, 40, .58) 50%,
    rgba(11, 16, 32, .97) 100%);
}
.cartao-cultura__topo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4);
}
.cartao-cultura__etiqueta {
  width: 36px; height: 36px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(11, 17, 34, .6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .18);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ciano-cl);
}
.cartao-cultura__marca {
  width: 36px; height: 36px;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 17, 34, .6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--branco);
  transition: background var(--transicao), color var(--transicao);
}
.cartao-cultura__marca svg { width: 18px; height: 18px; }
.cartao-cultura:hover .cartao-cultura__marca { background: var(--ciano-cl); color: var(--navy); }
.cartao-cultura__base {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: var(--e5);
}
.cartao-cultura__base p {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-h2);
  color: var(--branco);
}

.pontos { display: flex; justify-content: center; gap: var(--e1); margin-top: var(--e7); }
.ponto {
  width: 10px; height: 10px;
  aspect-ratio: 1;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .26);
  cursor: pointer;
  transition: width var(--transicao), background var(--transicao), aspect-ratio var(--transicao);
}
.ponto.ativo { width: 34px; aspect-ratio: auto; background: var(--ciano-cl); }

.cultura__nota {
  margin-top: var(--e7);
  text-align: center;
  font-size: var(--fs-peq);
  color: var(--txt-claro-fraco);
}
.cultura__cta { margin-top: var(--e7); display: flex; justify-content: center; }

/* =========================================================
   8. FORMULÁRIO
   ========================================================= */
/* sem overflow hidden: o painel do dropdown não pode ser cortado.
   A foto de fundo já é contida pelo próprio .captura__fundo. */
.captura { position: relative; padding-block: var(--e11); }
.captura__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.captura__fundo img { width: 100%; height: 100%; object-fit: cover; }
.captura__fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(19, 26, 49, .95) 0%, rgba(20, 46, 102, .9) 52%, rgba(14, 62, 128, .88) 100%);
}
.captura__painel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: var(--e8);
  padding: var(--e8);
  border-radius: var(--r5);
  background: var(--branco);
  box-shadow: 0 40px 80px rgba(9, 16, 36, .4);
}
.captura__texto { min-width: 0; display: flex; flex-direction: column; }
.captura__titulo { margin-top: var(--e3); font-size: var(--fs-h2); }
.captura__texto > p { margin-top: var(--e5); font-size: var(--fs-apoio); color: var(--txt-med); line-height: 1.7; max-width: 48ch; }
.checklist { margin: var(--e6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.checklist li {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--borda-claro);
  font-size: var(--fs-apoio);
  color: var(--txt);
}
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--azul); }

/* card escuro do formulário */
.form-card {
  min-width: 0;
  padding: var(--e7);
  border-radius: var(--r4);
  background: linear-gradient(150deg, var(--navy) 0%, #1A2A52 100%);
  box-shadow: 0 24px 48px rgba(9, 16, 36, .28);
  color: var(--txt-claro);
}
.form-card__titulo { font-size: var(--fs-h3); color: var(--txt-claro); }
.form-card__sub { margin-top: var(--e2); font-size: var(--fs-peq); color: var(--txt-claro-med); }
.form { margin-top: var(--e6); display: grid; gap: var(--e4); }
.campo { min-width: 0; display: grid; gap: var(--e1); }
.campo__rotulo {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--txt-claro-med);
}
.campo__caixa { position: relative; min-width: 0; }
.campo__caixa > svg {
  position: absolute;
  left: var(--e3);
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--txt-claro-fraco);
  pointer-events: none;
  transition: color var(--transicao);
}
.campo input {
  width: 100%;
  padding: var(--e3) var(--e3) var(--e3) var(--e8);
  border-radius: var(--r2);
  border: 1px solid var(--borda-escuro);
  background: rgba(255, 255, 255, .06);
  color: var(--branco);
  font-family: 'Geist', sans-serif;
  font-size: var(--fs-apoio);
  letter-spacing: var(--ls-corpo);
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.campo input::placeholder { color: var(--txt-claro-fraco); }
.campo input:focus {
  outline: 0;
  border-color: var(--ciano-cl);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 4px rgba(79, 211, 232, .18);
}
.campo input:focus + svg, .campo__caixa:focus-within > svg { color: var(--ciano-cl); }

/* dropdown próprio */
.select { position: relative; min-width: 0; }
.select__botao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border-radius: var(--r2);
  border: 1px solid var(--borda-escuro);
  background: rgba(255, 255, 255, .06);
  color: var(--txt-claro-fraco);
  font-family: 'Geist', sans-serif;
  font-size: var(--fs-apoio);
  letter-spacing: var(--ls-corpo);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.select__botao > svg:first-child { width: 20px; height: 20px; flex-shrink: 0; color: var(--txt-claro-fraco); transition: color var(--transicao); }
.select__valor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__seta { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--transicao); }
.select__botao:focus-visible { outline: 0; border-color: var(--ciano-cl); box-shadow: 0 0 0 4px rgba(79, 211, 232, .18); }
.select.aberto .select__botao { border-color: var(--ciano-cl); background: rgba(255, 255, 255, .1); }
.select.aberto .select__seta { transform: rotate(180deg); }
.select.preenchido .select__valor { color: var(--branco); }
.select.preenchido .select__botao > svg:first-child { color: var(--ciano-cl); }

.select__painel {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--e1));
  left: 0; right: 0;
  padding: var(--e1);
  border-radius: var(--r2);
  background: #223057;
  border: 1px solid var(--borda-escuro);
  box-shadow: 0 20px 44px rgba(9, 16, 36, .5);
  list-style: none;
  margin: 0;
  max-height: 264px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .26s ease, transform .26s ease, visibility .26s;
}
/* quando não cabe abaixo, abre para cima */
.select.acima .select__painel { top: auto; bottom: calc(100% + var(--e1)); transform: translateY(6px); }
.select.aberto .select__painel { opacity: 1; visibility: visible; transform: none; }
.select__opcao {
  padding: var(--e2) var(--e3);
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--r1);
  font-size: var(--fs-apoio);
  color: var(--txt-claro-med);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.select__opcao:hover, .select__opcao.focado { background: rgba(255, 255, 255, .1); color: var(--branco); }
.select__opcao[aria-selected="true"] { background: rgba(30, 95, 212, .4); color: var(--branco); }

/* consentimento: caixa desenhada à mão, a nativa fica escondida mas focável */
.consenti {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  min-width: 0;
  cursor: pointer;
}
.consenti input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.consenti__marca {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: var(--r1);
  border: 1px solid var(--borda-escuro);
  background: rgba(255, 255, 255, .06);
  color: transparent;
  transition: var(--transicao);
}
.consenti__marca svg { width: 13px; height: 13px; }
.consenti input:checked + .consenti__marca {
  border-color: var(--azul-cl);
  background: var(--azul);
  color: var(--branco);
}
.consenti input:focus-visible + .consenti__marca {
  outline: 2px solid var(--azul-cl);
  outline-offset: 2px;
}
.consenti__texto {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-tag);
  line-height: 1.55;
  color: var(--txt-claro-med);
}
.consenti__texto a { color: var(--txt-claro); text-decoration: underline; text-underline-offset: 2px; }
.consenti__texto a:hover { color: var(--azul-cl); }

.form__envio { margin-top: 0; }
.form__envio .btn { width: 100%; justify-content: space-between; }
.form__aviso { display: none; }
.form__mensagem {
  margin-top: 0;
  padding: var(--e3) var(--e4);
  border-radius: var(--r2);
  background: rgba(0, 172, 198, .14);
  border: 0 solid var(--borda-escuro);
  font-size: var(--fs-peq);
  color: var(--ciano-cl);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding-block: 0;
  transition: opacity .3s ease, max-height .36s ease, padding .36s ease, margin .36s ease;
}
.form__mensagem.visivel { opacity: 1; max-height: 140px; margin-bottom: var(--e4); padding-block: var(--e3); border-width: 1px; }
/* confirmação final, verde para separar do aviso de "enviando" */
.form__mensagem--ok { background: rgba(52, 199, 123, .16); border-color: rgba(52, 199, 123, .38); color: #8FE8B8; }
.escondido { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* =========================================================
   9. RODAPÉ
   ========================================================= */
.rodape { background: var(--navy-fundo); color: var(--txt-claro-med); padding-block: var(--e10) var(--e7); }
.rodape__topo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e8);
  padding-bottom: var(--e8);
  border-bottom: 1px solid var(--borda-escuro);
}
.rodape__marca { min-width: 0; }
.rodape__logo { width: 190px; height: auto; }
.rodape__marca p { margin-top: var(--e4); font-size: var(--fs-peq); line-height: 1.7; max-width: 44ch; color: var(--txt-claro-fraco); }
.rodape__bloco { min-width: 0; }
.rodape__titulo {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: var(--e4);
}
.rodape__item {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  min-width: 0;
  margin-bottom: var(--e3);
  font-size: var(--fs-peq);
  line-height: 1.6;
  font-style: normal;
  color: var(--txt-claro-med);
  text-decoration: none;
  transition: color var(--transicao);
}
a.rodape__item:hover { color: var(--ciano-cl); }
.rodape__item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--azul-cl); margin-top: 2px; }
.rodape__dado { white-space: nowrap; }
.rodape__base {
  padding-top: var(--e6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  flex-wrap: wrap;
  font-size: var(--fs-peq);
  color: var(--txt-claro-fraco);
}
.rodape__legais { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
.rodape__legais a { color: var(--txt-claro-med); text-decoration: none; transition: color var(--transicao); }
.rodape__legais a:hover { color: var(--ciano-cl); }
.ao-topo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  text-decoration: none;
  color: var(--txt-claro-med);
  border-bottom: 1px solid var(--borda-escuro);
  padding-bottom: 2px;
  transition: color var(--transicao);
}
.ao-topo:hover { color: var(--ciano-cl); }
.ao-topo svg { width: 16px; height: 16px; }

/* =========================================================
   Página de política de privacidade
   ========================================================= */
.doc { padding-block: var(--e10) var(--e11); }
.doc__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--fs-peq);
  color: var(--azul);
  text-decoration: none;
  margin-bottom: var(--e7);
}
.doc__voltar svg { width: 16px; height: 16px; }
.doc__corpo { max-width: 72ch; }
.doc__corpo h2 { font-size: var(--fs-h3); margin-top: var(--e8); }
.doc__corpo h1 + p { margin-top: var(--e5); }
.doc__corpo p, .doc__corpo li { font-size: var(--fs-apoio); color: var(--txt-med); line-height: 1.75; }
.doc__corpo p { margin-top: var(--e4); }
.doc__corpo ul { margin-top: var(--e4); padding-left: var(--e4); display: grid; gap: var(--e2); }
.doc__meta { margin-top: var(--e3); font-size: var(--fs-peq); color: var(--txt-fraco); }

/* =========================================================
   Página de obrigado
   ========================================================= */
.obrigado {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--e9);
  background: var(--navy);
  color: var(--txt-claro);
  /* mesma malha de pontos da hero, em negativo */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(30, 95, 212, .30) 0%, transparent 46%),
    radial-gradient(circle at 84% 82%, rgba(0, 172, 198, .18) 0%, transparent 44%);
}
.obrigado__miolo {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.obrigado__logo { width: 190px; height: auto; }
.obrigado__titulo {
  margin-top: var(--e7);
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: var(--ls-h1);
  color: var(--txt-claro);
}
.obrigado__texto {
  margin-top: var(--e5);
  font-size: var(--fs-sub);
  line-height: 1.65;
  color: var(--txt-claro-med);
  text-wrap: pretty;
}
.obrigado__texto strong { color: var(--txt-claro); }
.obrigado__texto--menor { margin-top: var(--e7); font-size: var(--fs-apoio); }
.obrigado .btn { margin-top: var(--e4); }
/* botão verde do WhatsApp. Em repouso a sombra acompanha o verde;
   no hover ele preenche de branco, como todo botão em fundo escuro,
   e a sombra acompanha esse branco. */
.btn--zap {
  background: linear-gradient(135deg, #1EBE5D 0%, #0F9D48 100%);
  box-shadow: 0 14px 30px rgba(15, 157, 72, .32), 0 2px 6px rgba(15, 157, 72, .24);
}
.btn--zap .btn__chip { color: #0F9D48; }
.f-navy .btn--zap:hover .btn__chip { background: #0F9D48; color: var(--branco); }
.obrigado__voltar {
  display: inline-block;
  margin-top: var(--e7);
  font-size: var(--fs-peq);
  color: var(--txt-claro-fraco);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.obrigado__voltar:hover { color: var(--ciano-cl); }

@media (max-width: 767px) {
  .obrigado__titulo { font-size: var(--fs-num); }
  .obrigado__logo { width: 150px; }
  .obrigado .btn { width: 100%; justify-content: space-between; }
}

/* =========================================================
   Selo da Netlify, nunca aparece
   ========================================================= */
#nl-badge-frame,
iframe[data-nl-ready],
iframe[id*="nl-badge"],
[class*="netlify"], [id*="netlify"],
a[href*="netlify.com"],
iframe[src*="netlify"],
[aria-label*="Netlify"], [title*="Netlify"] { display: none !important; }

/* =========================================================
   Hero empilhada até 1300: abaixo disso o texto e a foto
   não cabem lado a lado sem a foto invadir o título
   ========================================================= */
@media (max-width: 1300px) {
  .hero__grade { padding-bottom: 0; }
  .hero__texto { max-width: none; }
  .hero__titulo { max-width: none; }
  .hero__palco {
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: min(1280px, 92%);
    max-width: none;
    margin: var(--e7) auto 0;
    height: auto;
  }
  .hero__foto {
    position: relative;
    left: auto; right: auto; top: auto;
    translate: none;
    display: block;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }
  .hero__marca { width: 44%; right: 16%; top: 4%; }
}

/* =========================================================
   Notebook, 1366
   ========================================================= */
@media (max-width: 1366px) {
  :root { --secao-y: 112px; --fs-h1: 48px; }
  .btn { padding-left: var(--e5); gap: var(--e3); }
  .contexto__grade { gap: var(--e8); }
  .guia__grade { gap: var(--e8); }
  .hero__grade { gap: var(--e7); }
  .cartao-cultura { flex: 0 0 300px; }
}

/* =========================================================
   Tablet, 1024
   ========================================================= */
@media (max-width: 1024px) {
  :root {
    --secao-y: var(--e10);
    --fs-h1: 40px;
    --fs-h2: 32px;
    --fs-num: 48px; --fs-display: 56px;
  }
  /* o palco volta para o fluxo e fica abaixo do texto */
  .hero__grade { padding-bottom: 0; }
  .hero__texto { max-width: none; }
  .hero__titulo { max-width: none; }
  /* o palco mora fora do .container, então repete a medida dele */
  .hero__palco {
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: min(1280px, 92%);
    max-width: none;
    margin: var(--e7) auto 0;
    height: 520px;
  }

  .hero__marca { width: 44%; right: 16%; top: 4%; }
  .contexto__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e8); }
  .contexto__moldura { min-height: 420px; }

  .guia__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e8); }
  .guia__coluna { position: static; display: flex; flex-direction: column; align-items: center; text-align: center; }  .capas { max-width: 572px; height: 560px; }
  .guia__legenda { text-align: center; }

  .publico__grade { grid-template-columns: minmax(0, 1fr); }
  .publico__figura { min-height: 380px; }
  .publico__painel { padding: var(--e6); }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__heroi { grid-column: span 2; grid-row: auto; min-height: 380px; }
  .bento__foto { grid-column: span 2; }

  .cab-dividido { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .cab-dividido__dir { text-align: left; }
  .numeros { grid-template-columns: minmax(0, 1fr); gap: var(--e6); margin-top: var(--e8); }
  .numeros__card { padding-left: 0; padding-top: var(--e6); border-left: 0; border-top: 1px solid var(--borda-escuro); }
  .numeros__card:first-child { padding-top: 0; border-top: 0; }

  .captura__painel { grid-template-columns: minmax(0, 1fr); gap: var(--e7); padding: var(--e7); }
  .captura { padding-block: var(--e10); }

  .rodape__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e7); }
  .rodape__marca { grid-column: span 2; }
}

/* =========================================================
   Mobile, 767
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --secao-y: var(--e9);
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-corpo: 18px;
    --fs-sub: 16px;
    --fs-num: 40px; --fs-display: 48px;
  }
  .container { width: 90%; }
  body { font-size: var(--fs-corpo); }

  /* elemento decorativo mais fraco em tela pequena */
  .hero__padrao { opacity: .28; width: 420px; height: 420px; }

  .hero { padding-top: var(--e9); }
  .hero__titulo br { display: none; }
  /* em tela pequena os seis cartões competem com a foto: ficam três */
  .hero__palco { width: 90%; height: auto; margin-top: var(--e6); }
  /* a foto encosta à direita para não brigar com o cartão da esquerda */
  /* a altura do palco manda: a foto nunca cresce além dele */
  .hero__foto { max-width: 100%; }
  .hero__marca { width: 60%; right: 8%; top: 0; }
  .hero__cta { margin-top: var(--e7); }
  .btn { width: 100%; justify-content: space-between; padding-left: var(--e4); gap: var(--e3); }
  .btn__texto { font-size: var(--fs-peq); }
  .btn__chip { width: 52px; height: 52px; }
  /* a pílula encolhe para o texto caber em uma linha */
  .pilula-prova { padding-right: var(--e2); gap: var(--e1); }
  .pilula-prova__fotos img { width: 26px; height: 26px; }
  .pilula-prova__fotos img + img { margin-left: -9px; }
  .pilula-prova__texto { font-size: var(--fs-tag); }
  /* os três em linha, nunca dois em cima e um embaixo */
  .provas {
    margin-top: var(--e7);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
  }
  .provas { max-width: 520px; }
  .prova { font-size: var(--fs-tag); gap: var(--e1); }
  .prova svg { width: 14px; height: 14px; }

  .marquee__item { font-size: var(--fs-peq); }
  .marquee__grupo { gap: var(--e5); padding-right: var(--e5); }

  .contexto__grade { gap: var(--e8); }
  .contexto__moldura { min-height: 540px; }
  .contexto__cartao { left: var(--e3); right: var(--e3); bottom: var(--e3); padding: var(--e3); }
  .contexto__cartao p { font-size: var(--fs-peq); }
  .frase-forte { font-size: var(--fs-sub); }

  /* os dois cards continuam, reduzidos para caber na tela */
  .capas { width: 100%; max-width: 330px; height: 326px; transform: none; margin: 0 auto; }
  .folha { width: 160px; top: 0; right: 6px; }
  .capa { width: 190px; max-width: 190px; left: 6px; top: 56px; }  .sanfona__botao { gap: var(--e3); padding: var(--e4) 0; }
  .sanfona__num { min-width: 26px; font-size: var(--fs-peq); }
  .sanfona__seta { width: 32px; height: 32px; }
  .sanfona__conteudo p { padding: 0 0 var(--e4) calc(26px + var(--e3)); font-size: var(--fs-peq); }

  .publico__grade { gap: var(--e4); }
  .publico__painel { padding: var(--e3); }
  .publico__cta-card { padding: var(--e3); }
  .publico__figura { min-height: 320px; }
  .publico__selo { left: var(--e3); right: var(--e3); bottom: var(--e3); padding: var(--e3); }

  .bento { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .bento__bloco { padding: var(--e4); }
  .bento__heroi { grid-column: span 1; min-height: 340px; padding: 0; }
  .bento__heroi::after { background: linear-gradient(180deg, rgba(19, 26, 49, .5) 0%, rgba(17, 24, 45, .9) 32%, rgba(15, 21, 40, .98) 100%); }
  .bento__heroi-conteudo { padding: var(--e4); }
  .bento__foto { grid-column: span 1; min-height: 200px; padding: 0; }
  .bento__numero { min-height: 0; }

  .areas { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .area { min-height: 340px; }
  .area__conteudo { padding: var(--e4); gap: var(--e3); }
  .area__icone { width: 40px; height: 40px; }

  .cultura__cabecalho { flex-direction: column; align-items: flex-start; gap: var(--e5); }
  .carrossel { gap: var(--e3); margin-top: var(--e7); }
  .cartao-cultura { flex: 0 0 86%; }

  .captura { padding-block: var(--e9); }
  .captura__painel { padding: var(--e3); border-radius: var(--r4); }
  .form-card { padding: var(--e3); }
  .form { gap: var(--e3); }
  /* rótulo some, o texto de exemplo faz o trabalho */
  .campo__rotulo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .form__envio .btn { padding-left: var(--e4); }

  .rodape { padding-block: var(--e9) var(--e6); }
  .rodape__topo { grid-template-columns: minmax(0, 1fr); gap: var(--e7); }
  .rodape__marca { grid-column: span 1; }
  .rodape__item { flex-direction: column; gap: var(--e1); }
  .rodape__base { flex-direction: column; align-items: flex-start; gap: var(--e3); }
  .rodape__legais { gap: var(--e4); }
}

/* =========================================================
   Tela bem estreita, 380
   ========================================================= */

/* =========================================================
   Tela bem estreita, 340
   ========================================================= */
@media (max-width: 374px) {
  .capas { max-width: 286px; height: 282px; }
  .folha { width: 138px; }
  .capa { width: 164px; max-width: 164px; top: 48px; }

  /* nesta largura o botão do formulário é o item mais teimoso do card:
     ele definia a largura mínima da grade e empurrava tudo para fora. */
  .form-card { padding: var(--e2); }
  .form__envio .btn { padding-left: var(--e2); gap: var(--e2); }
  .form__envio .btn__chip { width: 40px; height: 40px; border-radius: var(--r2); }
}

/* =========================================================
   Movimento reduzido
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; translate: none; }
  .frase-forte span { opacity: 1; filter: none; }
  .marquee__trilha { animation: none; }
  .btn::before { display: none; }   /* sem o brilho, e sem mancha parada */
}