/* =============================================================
   ENDÓCRINO PRIME | FOLHA DE ESTILO PRINCIPAL
   -------------------------------------------------------------
   1. Tokens          6. Seções de conteúdo
   2. Base / reset    7. Formulário de captação
   3. Tipografia      8. Rodapé
   4. Cabeçalho       9. Animações
   5. Hero           10. Responsivo
   ============================================================= */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* --- cores da marca --- */
  --areia:          #F4EEE8;
  --areia-quente:   #EDE4DA;
  --areia-fumo:     #E4D8CB;
  --marrom:         #2B1A15;
  --marrom-claro:   #3B2620;
  --marrom-fumo:    #4A332B;
  --dourado:        #C9A88F;
  --dourado-claro:  #DFC6AF;
  --dourado-fundo:  rgba(201, 168, 143, .16);

  /* --- texto --- */
  --tinta:          #2B1A15;
  --tinta-suave:    rgba(43, 26, 21, .70);
  --tinta-tenue:    rgba(43, 26, 21, .48);
  --claro:          #F4EEE8;
  --claro-suave:    rgba(244, 238, 232, .74);
  --claro-tenue:    rgba(244, 238, 232, .48);

  /* --- estados --- */
  --erro-claro:     #A03A2C;   /* sobre fundo areia */
  --erro-escuro:    #E9A79C;   /* sobre fundo marrom */
  --ok-escuro:      #A8C4A2;

  /* --- linhas --- */
  --linha-clara:    rgba(43, 26, 21, .14);
  --linha-escura:   rgba(244, 238, 232, .16);
  --linha-dourada:  rgba(201, 168, 143, .38);

  /* --- tipografia --- */
  --serif:  'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:   'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- espaçamento (escala generosa) --- */
  --sp-1: .5rem;   --sp-2: 1rem;    --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4.5rem;  --sp-7: 6rem;    --sp-8: 9rem;

  /* --- estrutura --- */
  --largura:        1240px;
  --largura-texto:  680px;
  --raio:           2px;
  --transicao:      280ms cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 170px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.sem-rolagem { overflow: hidden; }

img, svg { max-width: 100%; height: auto; display: block; }

/* o atributo hidden precisa vencer o display dos componentes
   (é ele que mantém o botão de WhatsApp oculto até haver número) */
[hidden] { display: none !important; }

figure, blockquote { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--dourado); color: var(--marrom); }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--marrom);
  color: var(--claro);
  padding: var(--sp-2) var(--sp-3);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pular-para-conteudo:focus { left: var(--sp-2); top: var(--sp-2); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 4.1vw, 3.6rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -.01em; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--marrom-fumo);
  margin: 0 0 var(--sp-3);
}
.rotulo::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--dourado);
  flex: none;
}
.rotulo--claro { color: var(--dourado); }

.texto-apoio {
  font-size: 1.06rem;
  color: var(--tinta-suave);
  max-width: var(--largura-texto);
}
.texto-apoio--claro { color: var(--claro-suave); }

.destaque-serif {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.42;
  color: var(--marrom-fumo);
}

/* ============================================================
   ESTRUTURA
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.secao { padding-block: clamp(4.5rem, 10vw, var(--sp-8)); }
.secao--escura { background: var(--marrom); color: var(--claro); }
.secao--quente { background: var(--areia-quente); }

.filete {
  height: 1px;
  background: var(--linha-dourada);
  border: 0;
  margin: 0;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 56px;
  padding: 1.15rem 2.4rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

/* principal sobre fundo claro */
.botao--principal {
  background: var(--marrom);
  color: var(--claro);
  border-color: var(--marrom);
}
.botao--principal:hover {
  background: var(--marrom-claro);
  box-shadow: 0 14px 32px -18px rgba(43, 26, 21, .8);
}

/* contorno sobre fundo claro */
.botao--contorno {
  background: transparent;
  color: var(--marrom);
  border-color: var(--linha-clara);
}
.botao--contorno:hover { border-color: var(--marrom); background: rgba(43, 26, 21, .04); }

/* contorno sobre fundo escuro */
.botao--contorno-claro {
  background: transparent;
  color: var(--claro);
  border-color: var(--linha-escura);
}
.botao--contorno-claro:hover { border-color: var(--dourado); color: var(--dourado-claro); }

/* dourado: reservado ao CTA de conversão */
.botao--dourado {
  background: var(--dourado);
  color: var(--marrom);
  border-color: var(--dourado);
  letter-spacing: .14em;
}
.botao--dourado:hover {
  background: var(--dourado-claro);
  border-color: var(--dourado-claro);
  box-shadow: 0 18px 40px -20px rgba(201, 168, 143, .75);
}

.botao--largo { width: 100%; }
.botao[disabled] { opacity: .6; cursor: wait; transform: none; box-shadow: none; }

/* ============================================================
   4. CABEÇALHO
   ============================================================ */
.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: var(--sp-3);
  transition: background var(--transicao), padding var(--transicao),
              box-shadow var(--transicao), border-color var(--transicao);
  border-bottom: 1px solid transparent;
}
.cabecalho.is-solido {
  background: rgba(244, 238, 232, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linha-clara);
  padding-block: var(--sp-2);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* ---- ESPAÇO DA LOGO (topo) ---- */
.logo { display: block; flex: none; }
.logo img { height: clamp(34px, 4.4vw, 46px); width: auto; }
.cabecalho .logo img { height: clamp(100px, 13vw, 150px); }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.nav a:not(.botao) {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  position: relative;
  padding-block: .35rem;
  transition: color var(--transicao);
}
.nav a:not(.botao)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.nav a:not(.botao):hover { color: var(--tinta); }
.nav a:not(.botao):hover::after { transform: scaleX(1); }

.cabecalho .botao { min-height: 46px; padding: .85rem 1.6rem; font-size: .68rem; }

.menu-botao {
  display: none;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid var(--linha-clara);
  border-radius: var(--raio);
  padding: 0;
  place-items: center;
}
.menu-botao span {
  display: block;
  width: 20px; height: 1px;
  background: var(--tinta);
  position: relative;
  transition: background var(--transicao);
}
.menu-botao span::before,
.menu-botao span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 1px;
  background: var(--tinta);
  transition: transform var(--transicao);
}
.menu-botao span::before { top: -6px; }
.menu-botao span::after  { top: 6px; }
.menu-botao[aria-expanded="true"] span { background: transparent; }
.menu-botao[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   5. HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: clamp(8rem, 16vw, 11rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  top: -18%; right: -12%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dourado-fundo) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero__grade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero__titulo {
  font-size: clamp(1.95rem, 3.1vw, 2.9rem);
  margin-bottom: var(--sp-3);
}
.hero__titulo em {
  font-style: italic;
  font-weight: 400;
  color: var(--marrom-fumo);
}

.hero__texto {
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  color: var(--tinta-suave);
  max-width: 34em;
  margin-bottom: var(--sp-4);
}

.hero__assinatura {
  margin: 0 0 var(--sp-4);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--linha-clara);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.55vw, 1.4rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--marrom-fumo);
}
.hero__assinatura span { display: block; }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.hero__nota {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--linha-clara);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* ---- ESPAÇO DE IMAGEM (hero) ---- */
.hero__midia {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--areia-quente);
  border-radius: var(--raio);
  overflow: hidden;
}
.hero__midia img { width: 100%; height: 100%; object-fit: cover; }
.hero__midia::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(244, 238, 232, .35);
  pointer-events: none;
}

/* ---- HERO EM DUPLA ----
   Enquanto não existe foto das duas juntas, a primeira dobra usa os dois
   retratos individuais escalonados. O desencontro vertical é proposital:
   transforma a limitação em composição editorial. Para voltar à foto
   única, basta remover a classe --dupla do HTML. */
.hero__midia--dupla {
  aspect-ratio: auto;
  background: none;
  border-radius: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  align-items: start;
}
.hero__midia--dupla::after { content: none; }

.hero__retrato { position: relative; margin: 0; }
.hero__retrato img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--areia-quente);
  border-radius: var(--raio);
}
.hero__retrato figcaption {
  margin-top: .9rem;
  padding-top: .65rem;
  border-top: 1px solid var(--linha-dourada);
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--tinta-tenue);
}
/* o segundo retrato desce um pouco: quebra a simetria de "foto 3x4 dupla" */
.hero__retrato--baixo { margin-top: clamp(1.75rem, 4.5vw, 3.25rem); }

/* ============================================================
   TEMAS: faixa de assuntos sobre o fundo escuro
   ============================================================ */
.temas {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--linha-escura);
  border-block: 1px solid var(--linha-escura);
}
.temas li {
  background: var(--marrom);
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.3;
  color: var(--dourado);
}

/* ============================================================
   6. SEÇÕES DE CONTEÚDO
   ============================================================ */
.secao__cabecalho { max-width: var(--largura-texto); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.secao__cabecalho h2,
.bloco__texto h2 { margin-bottom: var(--sp-3); }
.secao__cabecalho--centro {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

/* --- pilares --- */
.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--linha-clara);
  border-block: 1px solid var(--linha-clara);
}
.pilar {
  background: var(--areia);
  padding: clamp(2rem, 3.6vw, 3rem) clamp(1.5rem, 2.6vw, 2.5rem);
  transition: background var(--transicao);
}
.pilar:hover { background: var(--areia-quente); }
.pilar__numero {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--dourado);
  display: block;
  margin-bottom: var(--sp-3);
}
.pilar h3 { margin-bottom: .85rem; }
.pilar p { font-size: .96rem; color: var(--tinta-suave); }

/* --- provocação clínica: caso real que fecha uma seção ---
   Cartão destacado do fundo da seção. Fica bem abaixo do conteúdo
   principal de propósito: é a última coisa que o médico lê antes
   de rolar para a seção seguinte. */
.provocacao {
  margin-top: clamp(4rem, 8vw, 6rem);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  max-width: 560px;
  background: var(--areia-fumo);
  border: 1px solid var(--linha-dourada);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio);
}

/* tarja fixa da pergunta: dourado com texto marrom, a mesma
   combinação do CTA principal. Legível sobre os dois fundos. */
.provocacao__rotulo {
  display: inline-block;
  padding: .4rem .9rem;
  margin: 0 0 var(--sp-2);
  background: var(--dourado);
  color: var(--marrom);
  border-radius: var(--raio);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.2;
}
.provocacao__caso {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--tinta-suave);
  margin: 0;
}
/* a pergunta é o único elemento em contraste cheio: é ela que
   precisa parar o olho. O rótulo e os dados ficam recuados. */
.provocacao__caso em {
  display: block;
  margin-top: .35rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--tinta);
}

/* o cartão sempre se afasta do fundo da seção: escurece sobre o
   areia, clareia sobre o areia quente e sobre o marrom */
.secao--quente .provocacao { background: var(--areia); }

.secao--escura .provocacao {
  background: var(--marrom-fumo);
  border-color: var(--linha-dourada);
  border-left-color: var(--dourado);
}
.secao--escura .provocacao__caso { color: var(--claro-suave); }
.secao--escura .provocacao__caso em { color: var(--claro); }

/* --- bloco alternado texto + imagem --- */
.bloco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.bloco + .bloco { margin-top: clamp(4rem, 8vw, 7rem); }
.bloco--invertido .bloco__midia { order: -1; }

/* ---- ESPAÇO DE IMAGEM (seções) ---- */
.bloco__midia {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--areia-quente);
  overflow: hidden;
  border-radius: var(--raio);
}
.bloco__midia img { width: 100%; height: 100%; object-fit: cover; }
.bloco__midia--retrato { aspect-ratio: 3 / 4; }
/* retratos verticais: o rosto fica no terço de cima, então o recorte
   puxa para cima em vez de cortar pelo centro */
.bloco__midia--retrato img { object-position: 50% 32%; }

/* nome da médica sobre a foto: identifica quem aparece sem precisar de
   legenda solta e sem mexer no enquadramento */
.midia__credito {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(2.5rem, 6vw, 3.5rem) var(--sp-3) var(--sp-2);
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--claro);
  background: linear-gradient(to top, rgba(43, 26, 21, .78), rgba(43, 26, 21, 0));
  pointer-events: none;
}

.lista-marcada { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.lista-marcada li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .95rem;
  color: var(--tinta-suave);
}
.lista-marcada li::before {
  content: '';
  position: absolute;
  left: 0; top: .82em;
  width: 12px; height: 1px;
  background: var(--dourado);
}
.secao--escura .lista-marcada li { color: var(--claro-suave); }

/* --- fundadoras --- */
.fundadoras {
  display: grid;
  /* o min() evita que a trilha de 320px estoure a tela em aparelhos
     de 320px de largura, onde o container tem só 305px úteis */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
  max-width: 960px;
  margin-inline: auto;
}

/* ---- ESPAÇO DE IMAGEM (retratos das fundadoras) ---- */
.fundadora__midia {
  aspect-ratio: 4 / 5;
  background: var(--areia-quente);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.fundadora__midia img { width: 100%; height: 100%; object-fit: cover; }

.fundadora__texto p {
  font-size: .97rem;
  color: var(--tinta-suave);
  margin-bottom: var(--sp-2);
}
.fundadora__papel {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--marrom-fumo);
  margin-bottom: .8rem;
}
.fundadora__nome { margin-bottom: var(--sp-3); }

/* nota discreta que fecha um bloco de texto */
.nota-secao {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--linha-clara);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--tinta-tenue);
}
.secao--escura .nota-secao {
  border-top-color: var(--linha-escura);
  color: var(--claro-tenue);
}

/* --- citação / autoridade --- */
.citacao {
  border-left: 1px solid var(--dourado);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  margin: var(--sp-4) 0 0;
}
.citacao p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--claro);
}
.citacao footer {
  margin-top: var(--sp-2);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dourado);
}

/* ============================================================
   7. FORMULÁRIO DE CAPTAÇÃO
   ============================================================ */
.cadastro { position: relative; overflow: hidden; }
.cadastro::before {
  content: '';
  position: absolute;
  left: -10%; bottom: -30%;
  width: 52vw; height: 52vw;
  max-width: 700px; max-height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 143, .12) 0%, transparent 66%);
  pointer-events: none;
}

.cadastro__grade {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}

.cadastro__titulo { margin-bottom: var(--sp-3); }
.cadastro__selo {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--linha-escura);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--dourado);
}

.formulario {
  background: rgba(244, 238, 232, .035);
  border: 1px solid var(--linha-escura);
  border-radius: var(--raio);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
}

.campo { margin-bottom: var(--sp-3); }

.campo label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--claro-suave);
  margin-bottom: .7rem;
}
.campo label .opcional {
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: none;
  color: var(--claro-tenue);
  font-size: .78rem;
}

.campo input,
.campo select {
  width: 100%;
  min-height: 56px;
  padding: .95rem 1.1rem;
  background: rgba(244, 238, 232, .05);
  border: 1px solid var(--linha-escura);
  border-radius: var(--raio);
  color: var(--claro);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--transicao), background var(--transicao),
              box-shadow var(--transicao);
  appearance: none;
  -webkit-appearance: none;
}
.campo input::placeholder { color: rgba(244, 238, 232, .55); }

.campo input:hover,
.campo select:hover { border-color: rgba(201, 168, 143, .45); }

.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--dourado);
  background: rgba(244, 238, 232, .08);
  box-shadow: 0 0 0 3px rgba(201, 168, 143, .18);
}

/* seta do select, desenhada em CSS puro. Sem imagem, sem emoji. */
.campo__controle { position: relative; display: block; }
.campo__controle::after {
  content: '';
  position: absolute;
  right: 1.15rem;
  top: 50%;
  margin-top: -3px;
  width: 11px; height: 7px;
  background: var(--dourado);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.campo select { padding-right: 2.75rem; cursor: pointer; }
.campo select option { background: var(--marrom); color: var(--claro); }
/* enquanto nada foi escolhido, "Selecione" se comporta como placeholder */
.campo select:has(option[value=""]:checked) { color: var(--claro-tenue); }

.campo--erro input,
.campo--erro select { border-color: var(--erro-escuro); }

.campo__erro {
  display: block;
  min-height: 1.2em;
  margin-top: .5rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--erro-escuro);
}

/* armadilha anti-robô: invisível para pessoas e para leitores de tela */
.campo--armadilha {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.formulario__acao { margin-top: var(--sp-4); }

.botao.is-carregando { position: relative; }
.botao.is-carregando::after {
  content: '';
  width: 15px; height: 15px;
  border: 2px solid rgba(43, 26, 21, .3);
  border-top-color: var(--marrom);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.form-status {
  min-height: 1.4em;
  margin-top: var(--sp-2);
  font-size: .86rem;
  text-align: center;
  color: var(--claro-suave);
}
.form-status--erro { color: var(--erro-escuro); }
.form-status--ok   { color: var(--ok-escuro); }

.formulario__nota {
  margin-top: var(--sp-3);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--claro-tenue);
  text-align: center;
}

/* ============================================================
   8. RODAPÉ
   ============================================================ */
.rodape {
  background: var(--marrom);
  color: var(--claro-suave);
  padding-block: var(--sp-6) var(--sp-4);
  border-top: 1px solid var(--linha-escura);
}
.rodape__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--linha-escura);
}
.rodape .logo img { height: 130px; filter: brightness(0) invert(1); }
.rodape__nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.rodape__nav a {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color var(--transicao);
}
.rodape__nav a:hover { color: var(--dourado); }
.rodape__contato { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-4); }
.rodape__contato a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--claro); border: 1px solid var(--linha-escura);
  transition: color var(--transicao), border-color var(--transicao);
}
.rodape__contato a[hidden] { display: none; }
.rodape__contato svg { width: 20px; height: 20px; }
.rodape__contato a:hover { border-color: var(--dourado); }
.rodape__contato a:hover { color: var(--dourado); }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  font-size: .76rem;
  color: var(--claro-tenue);
}

/* ============================================================
   9. ANIMAÇÕES
   ============================================================ */
[data-revelar] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 780ms cubic-bezier(.22, .61, .36, 1),
              transform 780ms cubic-bezier(.22, .61, .36, 1);
}
[data-revelar].is-visivel { opacity: 1; transform: none; }
[data-revelar][data-atraso="1"] { transition-delay: 110ms; }
[data-revelar][data-atraso="2"] { transition-delay: 220ms; }
[data-revelar][data-atraso="3"] { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; }
}

/* ============================================================
   10. RESPONSIVO
   ============================================================ */
@media (max-width: 1024px) {
  .hero__grade,
  .bloco,
  .cadastro__grade { grid-template-columns: 1fr; }
  /* sem a coluna de imagem ao lado, o cartão da pergunta pode
     respirar sem esticar demais a linha de leitura */
  .provocacao { max-width: 620px; }
  .bloco--invertido .bloco__midia { order: 0; }
  .hero__midia { aspect-ratio: 16 / 11; }
  /* a dupla de retratos mantém o formato vertical; só deixa de esticar
     na largura toda quando a coluna de texto some do lado */
  .hero__midia--dupla {
    aspect-ratio: auto;
    max-width: 540px;
  }
  /* 4:3 cortaria a cabeça de um retrato vertical: 4:5 é o limite seguro */
  .bloco__midia--retrato { aspect-ratio: 4 / 5; max-width: 520px; }
}

@media (max-width: 860px) {
  .menu-botao { display: grid; }
  .cabecalho .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-4);
    background: var(--areia);
    transform: translateX(100%);
    transition: transform 380ms cubic-bezier(.22, .61, .36, 1);
    z-index: 90;
  }
  .cabecalho .nav.is-aberto { transform: none; }
  .cabecalho .nav a { font-size: 1rem; letter-spacing: .2em; }
  .nav .botao { display: inline-flex; }
}

@media (max-width: 560px) {
  :root { --sp-8: 6rem; --sp-7: 4.5rem; }
  .hero__acoes .botao { width: 100%; }
  /* no celular o cartão ocupa a largura toda; o respiro acima
     encolhe para a pergunta não ficar órfã no fim da rolagem */
  .provocacao {
    max-width: none;
    margin-top: var(--sp-5);
    padding: var(--sp-3);
  }
  .provocacao__rotulo { letter-spacing: .18em; }
  .rodape__topo { flex-direction: column; align-items: flex-start; }
  .rodape__base { flex-direction: column; }
}