/* ==========================================================================
   Pensamente — Landing Pages Avaliação Neuropsicológica
   Direção: EDITORIAL CLÍNICO — sóbrio, institucional, com respiro.

   Três princípios governam este arquivo:

   1. A MARCA NÃO SE ALTERA. O cabeçalho é o verde #6B8C5A exato e os títulos
      são Nunito, como no site. Cor e fonte da marca nunca mudam para
      resolver um problema de design ou de contraste — muda-se o texto,
      o peso, o tamanho ou o entorno. O que a direção editorial mudou foi
      a DISTRIBUIÇÃO: o verde divide o peso com o petróleo e o off-white,
      em vez de cobrir toda superfície.

   2. RÉGUA NO LUGAR DE CAIXA. Cartão com borda e sombra em tudo é a assinatura
      visual de tema pronto. Aqui a hierarquia vem de filete de 1px, espaço em
      branco e escala tipográfica.

   3. RESPIRO. O espaço vazio é o material mais caro de uma página. As seções
      respiram quase o dobro do que respiravam antes.

   Tipografia: Nunito nos títulos + Source Sans 3 no corpo — as duas fontes
   livres que o site da Pensamente já usa. Nunito acompanha a geometria
   arredondada da logo. (A terceira fonte do site, Branding, é licenciada e
   não pode ser redistribuída.) Assim como a cor, a fonte da marca não se
   troca por preferência estética.

   Identidade extraída do CSS do site no ar: #6B8C5A, #023D5B, #26ABA3, #E1E8DE.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca e tons verdes da referência */
  --verde:        #6C8C5B;   /* verde da marca */
  --verde-900:    #35522B;   /* verde floresta profundo da referência */
  --verde-pilula: #CDE0C3;   /* fundo pílula de destaque suave da referência */
  --verde-pilula-texto: #233E1C; /* texto verde escuro em pílula */
  --verde-100:    #E3EADD;
  --verde-50:     #F0F2EA;

  --petroleo:     #1B1B1B;   /* títulos e superfícies escuras */
  --petroleo-900: #0F0F0F;
  --turquesa:     #26ABA3;

  /* Neutros — off-white papel quente da referência */
  --papel:        #F4F3EB;   /* papel textura quente */
  --papel-2:      #E7E6DE;
  --branco:       #FFFFFF;
  --tinta:        #2C332A;   /* texto escuro orgânico */
  --tinta-suave:  #5C635B;
  --filete:       #E1E0D7;
  --filete-forte: #CBC9BD;

  /* Sinal */
  --zap:          #35522B;   /* tom de verde dos botões principais da referência */
  --zap-escuro:   #273E20;
  --zap-texto:    #FFFFFF;

  /* Tipografia */
  --titulo: "Nunito", "Segoe UI", system-ui, sans-serif;
  --corpo:  "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala */
  --t-hero:  clamp(1.85rem, 1.3rem + 2vw, 2.85rem);
  --t-h2:    clamp(1.75rem, 1.25rem + 1.8vw, 2.65rem);
  --t-h3:    clamp(1.2rem, 1.08rem + 0.52vw, 1.5rem);
  --t-lead:  clamp(1.12rem, 1.04rem + 0.42vw, 1.36rem);
  --t-body:  1.09rem;
  --t-mini:  .765rem;        /* versaletes */

  /* Espaço */
  --secao:   clamp(4.75rem, 2.8rem + 6.6vw, 9rem);
  --largura: 1140px;
  --estreito: 780px;
  --gutter:  clamp(1.25rem, 0.6rem + 2.8vw, 3rem);

  /* Forma */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-cartao: 20px;
  --r-foto:   24px;
  --r-pilula: 50px;
  --r-petala: 24px;

  /* Sombra */
  --sombra-fina: 0 2px 8px rgba(0, 0, 0, .04);
  --sombra:      0 16px 40px -20px rgba(0, 0, 0, .12);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--corpo);
  font-size: var(--t-body);
  line-height: 1.72;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.018em;
  color: var(--petroleo);
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--verde-900);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Destaque estilo marca-texto inferior (Opção 1) */
.destaque-pilula {
  display: inline;
  background: linear-gradient(180deg, transparent 58%, rgba(205, 224, 195, 0.85) 58%);
  padding: 0 0.1em;
  font-style: normal;
  font-weight: 800;
  color: inherit;
}
.secao--tinta .destaque-pilula,
.secao--verde-escuro .destaque-pilula {
  background: linear-gradient(180deg, transparent 58%, rgba(255, 255, 255, 0.3) 58%);
  color: #FFFFFF;
}

/* ---------- 3. Layout ---------- */
.env {
  width: min(100% - (var(--gutter) * 2), var(--largura));
  margin-inline: auto;
}
.secao { padding-block: var(--secao); }
.secao--areia  { background: var(--papel-2); }
.secao--branca { background: var(--branco); }

/* Seção verde floresta escuro da referência */
.secao--verde-escuro {
  background: var(--verde-900);
  color: rgba(255, 255, 255, 0.92);
}
.secao--verde-escuro h1,
.secao--verde-escuro h2,
.secao--verde-escuro h3 { color: #FFFFFF; }
.secao--verde-escuro p { color: rgba(255, 255, 255, 0.82); }
.secao--verde-escuro .etiqueta { color: #B4DBA3; }
.secao--verde-escuro .etiqueta::before { background: #B4DBA3; }

/* Seção escura — petróleo */
.secao--tinta  { background: var(--petroleo); color: rgba(255,255,255,.86); }
.secao--tinta h2, .secao--tinta h3 { color: var(--branco); }

.pular-p-conteudo {
  position: absolute; left: -9999px;
  background: var(--petroleo); color: #fff;
  padding: .8rem 1.2rem; z-index: 999;
}
.pular-p-conteudo:focus { left: 0; top: 0; }

/* ---------- 4. Rótulo versalete ----------
   Substitui a antiga "pílula". Um filete curto e o texto em caixa alta
   espaçada: o gesto editorial mais barato e mais eficaz que existe. */
.etiqueta {
  display: flex; align-items: center; gap: .85rem;
  font-family: var(--corpo);
  font-size: var(--t-mini); font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--verde-900);
  margin-bottom: 1.5rem;
}
.etiqueta::before {
  content: ""; width: 30px; height: 1px; flex: none;
  background: var(--verde);
}
.cab-secao--centro .etiqueta { justify-content: center; }
.secao--tinta .etiqueta { color: #A9CE97; }
.secao--tinta .etiqueta::before { background: #A9CE97; }
.cta-final .etiqueta { color: rgba(255,255,255,.75); }

/* ---------- 5. Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .62rem;
  font-family: var(--corpo);
  font-weight: 700; font-size: 1rem; line-height: 1.25;
  letter-spacing: .012em;
  text-decoration: none; text-align: center;
  padding: 1.05rem 2.05rem;
  border: 1px solid transparent;
  border-radius: var(--r-pilula);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(53, 82, 43, .12);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { flex: none; width: 20px; height: 20px; }

.btn--zap { background: var(--zap); color: var(--zap-texto); }
.btn--zap:hover { background: var(--zap-escuro); }

.btn--principal { background: var(--verde-900); color: #fff; }
.btn--principal:hover { background: #263C1E; }

.btn--branco {
  background: #FFFFFF; color: var(--verde-900);
  border-color: #FFFFFF; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.btn--branco:hover {
  background: var(--verde-pilula); color: var(--verde-900);
  border-color: var(--verde-pilula);
}

/* Botões sobre fundo verde escuro ou seção tinta */
.secao--verde-escuro .btn--zap,
.secao--tinta .btn--zap,
.cta-final .btn--zap {
  background: #FFFFFF;
  color: var(--verde-900);
  border-color: #FFFFFF;
  font-weight: 700;
}
.secao--verde-escuro .btn--zap:hover,
.secao--tinta .btn--zap:hover,
.cta-final .btn--zap:hover {
  background: var(--verde-pilula);
  color: var(--verde-900);
  border-color: var(--verde-pilula);
}

.btn--contorno {
  background: transparent; color: var(--petroleo);
  border-color: var(--filete-forte);
}
.btn--contorno:hover { border-color: var(--petroleo); background: rgba(2,61,91,.04); }
.secao--tinta .btn--contorno,
.secao--verde-escuro .btn--contorno,
.cta-final .btn--contorno { color: #fff; background: transparent; border-color: rgba(255,255,255,.5); }
.secao--tinta .btn--contorno:hover,
.secao--verde-escuro .btn--contorno:hover,
.cta-final .btn--contorno:hover { border-color: #fff; background: rgba(255,255,255,.12); }

.btn--bloco { width: 100%; }
.grupo-btn { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Estilização de Cartões (Modelo da Referência) */
.cartao-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .cartao-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .cartao-grid { grid-template-columns: 1fr; } }

.cartao {
  background: var(--branco);
  border-radius: var(--r-cartao);
  padding: 1.8rem;
  border: 1px solid var(--filete);
  box-shadow: var(--sombra-fina);
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column;
}
.cartao:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}
.cartao__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--verde-pilula);
  color: var(--verde-900);
  font-weight: 800; font-size: .88rem;
  margin-bottom: 1rem;
}

/* ---------- 6. Cabeçalho ----------
   Verde da marca, exato, com a logo branca — como no site.
   Texto branco sobre #6B8C5A dá 3,80:1. O limiar WCAG de 4,5:1 vale para texto
   normal; texto grande (>=18,66px em peso 700) exige 3:1. Por isso o telefone
   sobe para 1,2rem/700: passa em AA sem encostar na cor da marca. */
.cabecalho {
  position: sticky; top: 0; z-index: 60;
  background: var(--verde);
}
.cabecalho__int {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .8rem;
}
.cabecalho__logo img { width: 142px; height: auto; }
.cabecalho__dir { display: flex; align-items: center; gap: 1.1rem; }

.tel-topo {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 700; font-size: 1.2rem;   /* limiar de "texto grande" — ver acima */
  color: #fff; text-decoration: none;
  white-space: nowrap;
  min-height: 44px; min-width: 44px;
  padding-inline: .4rem;
}
.tel-topo:hover { color: var(--verde-100); }
.tel-topo svg { width: 19px; height: 19px; flex: none; }

/* Botão branco sobre o verde: alto contraste e sem competir com a marca. */
.cabecalho .btn--zap {
  background: var(--branco); color: var(--petroleo);
  padding: .7rem 1.4rem; font-size: .95rem;
}
.cabecalho .btn--zap:hover { background: var(--verde-100); }
.cabecalho .btn--zap svg { color: var(--zap); }

@media (max-width: 620px) {
  .cabecalho__logo img { width: 108px; }
  .tel-topo span { display: none; }
  .cabecalho .btn--zap { padding: .68rem 1.1rem; font-size: .9rem; }
}

/* ---------- 4. Seção Hero com Animações Fluidas ---------- */
.hero {
  background: var(--papel);
  padding-block: clamp(3.4rem, 1.8rem + 5.4vw, 6.5rem) clamp(3.8rem, 2rem + 5.4vw, 7rem);
  overflow: hidden;
}
.hero__grade {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(2.4rem, 1rem + 4.4vw, 5.2rem);
  align-items: center;
}

/* 1. Entrada em Cascata Sequencial (Staggered Fade-Up) */
.hero .etiqueta-pilula {
  display: inline-block;
  background: var(--verde-pilula);
  color: var(--verde-pilula-texto);
  padding: .38em 1.1em;
  border-radius: 50px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  animation: heroEntrada 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

.hero h1 {
  font-size: var(--t-hero);
  margin-bottom: 1.25rem;
  animation: heroEntrada 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}

.hero__lead {
  font-size: var(--t-lead);
  color: var(--tinta-suave);
  max-width: 52ch;
  margin-bottom: 2.1rem;
  animation: heroEntrada 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}

.hero .grupo-btn {
  margin-bottom: 1.2rem;
  animation: heroEntrada 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s backwards;
}

.hero__meta {
  font-size: .92rem;
  color: var(--tinta-suave);
  margin-top: 1rem;
  font-weight: 600;
  animation: heroEntrada 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s backwards;
}

/* 2. Destaque Marca-Texto Vivo (Animação ao carregar a página) */
.destaque-pilula {
  display: inline;
  background: linear-gradient(180deg, transparent 58%, rgba(205, 224, 195, 0.85) 58%) no-repeat left center;
  background-size: 0% 100%;
  padding: 0 0.1em;
  font-style: normal;
  font-weight: 800;
  color: inherit;
  animation: grifaTexto 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.85s forwards;
}

/* 3. Brilho Shimmer & Pulse no Botão CTA */
.hero .btn--zap {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero .btn--zap::after {
  content: "";
  position: absolute;
  top: -50%; left: -60%;
  width: 50%; height: 200%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: rotate(25deg);
  animation: brilhoShimmer 4.5s infinite ease-in-out 1.5s;
}
.hero .btn--zap:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(53, 82, 43, 0.3);
}

/* 4. Moldura Arco/Domo com Flutuação Orgânica na Foto Hero */
.hero__figura {
  position: relative;
  animation: heroFotoEntrada 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}
.hero__figura > img {
  width: 100%;
  border-radius: 180px 180px 32px 32px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 16px 44px -16px rgba(0,0,0,0.12);
  animation: flutuaHero 6s ease-in-out infinite 1.3s;
}

/* 5. Cartão DNA USP Pop-In & Float */
.selo-dna {
  position: absolute; left: -16px; bottom: 20px; z-index: 2;
  display: flex; align-items: center; gap: .85rem;
  background: var(--branco);
  padding: .85rem 1.25rem;
  border: 1px solid var(--filete);
  border-radius: 18px;
  box-shadow: 0 14px 38px -12px rgba(0,0,0,0.14);
  max-width: 270px;
  animation: seloPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s backwards, seloFlutua 5s ease-in-out infinite 1.8s;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.selo-dna:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 18px 42px -8px rgba(0,0,0,0.2);
}
.selo-dna img {
  width: 50px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  flex: none;
}
.selo-dna span {
  font-size: var(--t-mini); line-height: 1.4; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--petroleo);
}

/* Keyframes das Animações da Hero */
@keyframes heroEntrada {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes heroFotoEntrada {
  0% { opacity: 0; transform: translateY(30px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes grifaTexto {
  0% { background-size: 0% 100%; }
  100% { background-size: 100% 100%; }
}

@keyframes brilhoShimmer {
  0% { left: -60%; }
  20% { left: 140%; }
  100% { left: 140%; }
}

@keyframes flutuaHero {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes seloPopIn {
  0% { opacity: 0; transform: scale(0.7) translateY(15px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes seloFlutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 900px) {
  .hero__grade { grid-template-columns: 1fr; }
  .hero__figura { order: -1; max-width: 460px; margin-inline: auto; }
  .hero__figura > img { aspect-ratio: 5 / 4; border-radius: 140px 140px 24px 24px; }
  .selo-dna { left: auto; right: 0; bottom: -14px; }
}

/* ---------- 8. Barra de confiança ----------
   Sem fundo colorido: filetes acima e abaixo, texto petróleo. */
.confianca {
  background: var(--branco);
  border-block: 1px solid var(--filete);
  padding-block: 2rem;
}
.confianca__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  list-style: none; padding: 0;
}
.confianca__item {
  display: flex; align-items: center; gap: .8rem;
  color: var(--petroleo);
  font-size: .96rem; font-weight: 600; line-height: 1.4;
}
.confianca__item + .confianca__item { border-left: 1px solid var(--filete); padding-left: 1.6rem; }
.confianca__item svg { width: 21px; height: 21px; flex: none; color: var(--verde); }
@media (max-width: 860px) {
  .confianca__lista { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .confianca__item + .confianca__item { border-left: 0; padding-left: 0; }
  .confianca__item:nth-child(even) { border-left: 1px solid var(--filete); padding-left: 1.2rem; }
}
@media (max-width: 430px) { .confianca__item { font-size: .89rem; } }

/* ---------- 9. Cabeçalho de seção ---------- */
.cab-secao { max-width: 46rem; margin-bottom: clamp(2.8rem, 1.8rem + 2.6vw, 4.4rem); }
.cab-secao--centro { margin-inline: auto; text-align: center; }
.cab-secao h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; }
.cab-secao p { font-size: var(--t-lead); color: var(--tinta-suave); }
.secao--tinta .cab-secao p { color: rgba(255,255,255,.74); }
.cab-secao em { font-style: normal; color: var(--verde-900); }
.secao--tinta .cab-secao em { color: #A9CE97; }

/* ---------- 10. Dor / reconhecimento ---------- */
.dor__grade {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(2.4rem, 1rem + 4vw, 4.8rem); align-items: center;
}
.dor__figura { position: relative; }
.dor__figura img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 32px 140px 32px 32px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.12);
  transition: transform 0.3s ease;
}
.dor__figura:hover img {
  transform: scale(1.01);
}
.dor__selo {
  position: absolute; right: -12px; bottom: 20px; z-index: 2;
  display: flex; align-items: center; gap: 0.65rem;
  background: var(--branco);
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--filete);
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  font-size: 0.84rem; font-weight: 700;
  color: var(--verde-900);
}
.dor__selo svg { width: 18px; height: 18px; color: var(--verde-900); flex: none; }

.dor__lista { list-style: none; padding: 0; display: grid; margin-top: 1rem; }
.dor__lista li {
  display: flex; gap: 1.1rem;
  padding: 1.1rem 1.1rem;
  border-radius: 14px;
  border-top: 1px solid var(--filete);
  font-size: 1.05rem; line-height: 1.62;
  color: var(--petroleo);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.dor__lista li:last-child { border-bottom: 1px solid var(--filete); }
.dor__lista li:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(6px);
}
.dor__lista svg {
  width: 32px; height: 32px; flex: none;
  background: var(--verde-pilula);
  color: var(--verde-pilula-texto);
  padding: 0.45rem;
  border-radius: 50%;
  margin-top: 0.1rem;
}
.dor__fecho {
  margin-top: 2rem;
  background: rgba(205, 224, 195, 0.28);
  border-left: 4px solid var(--verde-900);
  padding: 1.35rem 1.6rem;
  border-radius: 0 16px 16px 0;
  font-family: var(--corpo);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--petroleo);
  line-height: 1.6;
}
@media (max-width: 860px) {
  .dor__grade { grid-template-columns: 1fr; }
  .dor__figura { max-width: 420px; }
  .dor__figura img { aspect-ratio: 4 / 3; border-radius: 28px 100px 28px 28px; }
  .dor__selo { right: 0; bottom: -12px; }
}

/* ---------- 11. Queixas ----------
   Antes eram pílulas soltas. Agora é uma lista editorial em colunas,
   separada por filetes — lê como sumário de exame, não como nuvem de tags. */
.queixas {
  list-style: none; padding: 0; margin: 0;
  columns: 3; column-gap: 3rem;
}
.queixas li {
  break-inside: avoid;
  display: flex; align-items: baseline; gap: .8rem;
  padding: .92rem 0;
  border-bottom: 1px solid var(--filete);
  font-size: 1.03rem;
  color: var(--tinta);
}
.queixas li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  background: var(--verde); border-radius: 50%;
  transform: translateY(-3px);
}
@media (max-width: 900px) { .queixas { columns: 2; column-gap: 2.2rem; } }
@media (max-width: 560px) { .queixas { columns: 1; } }

/* ---------- 12. Diagnósticos ---------- */
.diagnosticos {
  list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: 3.4rem;
}
.diagnosticos li {
  break-inside: avoid;
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.02rem 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-size: 1.02rem; line-height: 1.5;
  color: rgba(255,255,255,.92);
}
.diagnosticos svg { width: 17px; height: 17px; flex: none; color: #A9CE97; margin-top: .3rem; }
.nota-diag {
  margin-top: 2.2rem; font-family: var(--titulo);
  font-size: 1.08rem; font-weight: 600;
  color: rgba(255,255,255,.72);
}
@media (max-width: 760px) { .diagnosticos { columns: 1; } }

/* ---------- 13. Destaque (RV / Avaliação rápida) ---------- */
.destaque__grade {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.4rem, 1rem + 4vw, 5.2rem); align-items: center;
}
.destaque--inverso .destaque__figura { order: 2; }
.destaque__figura img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
}
.destaque__grade h2 { font-size: var(--t-h2); margin-bottom: 1.2rem; }
.destaque__grade p { color: var(--tinta-suave); margin-bottom: 1rem; max-width: 46ch; }
.destaque__dados {
  list-style: none; padding: 0; display: grid;
  margin: 2rem 0;
}
.destaque__dados li {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.05rem 0; line-height: 1.6;
  border-top: 1px solid var(--filete);
}
.destaque__dados li:last-child { border-bottom: 1px solid var(--filete); }
.destaque__dados svg { width: 18px; height: 18px; flex: none; color: var(--verde); margin-top: .34rem; }
.destaque__dados strong { color: var(--petroleo); font-weight: 600; }
@media (max-width: 860px) {
  .destaque__grade { grid-template-columns: 1fr; }
  .destaque--inverso .destaque__figura { order: 0; }
  .destaque__figura { max-width: 440px; }
  .destaque__figura img { aspect-ratio: 4 / 3; }
}

/* ---------- 14. Passos ----------
   Sem cartão, sem sombra: número em serifada, filete no topo, foto solta. */
.passos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  counter-reset: passo;
}
.passo { display: flex; flex-direction: column; background: none; }
.passo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; margin-bottom: 1.6rem; }
.passo__corpo { padding: 0; border-top: 1px solid var(--filete-forte); padding-top: 1.35rem; }
.passo__num {
  counter-increment: passo;
  display: block;
  font-family: var(--titulo); font-weight: 700;
  font-size: 1.02rem; color: var(--verde-900);
  letter-spacing: .14em;
  margin-bottom: .7rem;
}
.passo__num::before { content: "0" counter(passo); }
.passo h3 { font-size: var(--t-h3); margin-bottom: .7rem; }
.passo p { color: var(--tinta-suave); font-size: 1rem; }

/* ---------- 15. Público ---------- */
.publicos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
}
.publico {
  padding: 2rem 2rem 2rem 0;
  border-top: 2px solid var(--petroleo);
  margin-right: 2rem;
}
.publico:last-child { margin-right: 0; }
.publico h3 { font-size: var(--t-h3); margin-bottom: .8rem; }
.publico p { color: var(--tinta-suave); font-size: 1rem; }
.publico__idade {
  display: block; margin-bottom: .85rem;
  font-size: var(--t-mini); font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--verde-900);
}
@media (max-width: 760px) { .publico { margin-right: 0; padding-right: 0; } }

/* ---------- 16. Prova social (Marquee Animado) ---------- */
.depoimentos-wrapper {
  overflow: hidden;
  position: relative;
  margin-bottom: 3.5rem;
  padding-block: 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.depoimentos-wrapper::before,
.depoimentos-wrapper::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.depoimentos-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--papel-2), transparent);
}
.depoimentos-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--papel-2), transparent);
}

.depoimentos-trilho {
  display: flex;
  gap: 1.6rem;
  width: max-content;
  animation: rolagemInfinito 42s linear infinite;
}
.depoimentos-wrapper:hover .depoimentos-trilho {
  animation-play-state: paused;
}

@keyframes rolagemInfinito {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.depoimento {
  width: 350px;
  flex: none;
  background: var(--branco);
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.depoimento:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}
.depoimento__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.depoimento__estrelas {
  color: #F59E0B;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  font-weight: 700;
}
.depoimento__google-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--verde-900);
  background: var(--verde-pilula);
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
}
.depoimento blockquote {
  font-family: var(--corpo);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--petroleo);
  margin-bottom: 1.5rem;
  flex: 1;
  font-style: normal;
}
.depoimento__autor {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filete);
}
.depoimento__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verde-900);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.depoimento__autor b {
  display: block;
  font-size: 0.98rem;
  color: var(--petroleo);
  font-weight: 700;
}
.depoimento__autor span {
  font-size: 0.84rem;
  color: var(--tinta-suave);
}

/* Credenciais */
.credenciais {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 0; margin-top: 2.4rem;
}
.credencial {
  padding: 1.9rem 2rem 1.9rem 0;
  border-top: 1px solid var(--filete-forte);
  margin-right: 2rem;
}
.credencial:last-child { margin-right: 0; }
.credencial svg { width: 22px; height: 22px; color: var(--verde); margin-bottom: 1rem; }
.credencial b {
  display: block; color: var(--petroleo); font-family: var(--titulo);
  font-size: 1.08rem; font-weight: 800; margin-bottom: .45rem;
}
.credencial span { font-size: .95rem; color: var(--tinta-suave); line-height: 1.6; }
@media (max-width: 760px) { .credencial { margin-right: 0; padding-right: 0; } }

/* ---------- 17. Transparência / convênio ---------- */
.transparencia {
  max-width: var(--estreito); margin-inline: auto;
  padding-left: clamp(1.4rem, .8rem + 1.6vw, 2.6rem);
  border-left: 2px solid var(--verde);
}
.transparencia h2 { font-size: clamp(1.55rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 1.3rem; }
.transparencia p { color: var(--tinta-suave); margin-bottom: 1.1rem; }
.transparencia p:last-child { margin-bottom: 0; }
.transparencia strong { color: var(--petroleo); font-weight: 600; }
.transparencia .etiqueta { margin-bottom: 1.2rem; }

/* ---------- 18. FAQ ---------- */
.faq { max-width: var(--estreito); margin-inline: auto; display: grid; }
.faq details {
  border-top: 1px solid var(--filete);
}
.faq details:last-of-type { border-bottom: 1px solid var(--filete); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.55rem 0;
  font-family: var(--titulo); font-size: 1.14rem; font-weight: 700;
  color: var(--petroleo);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; align-self: center;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--verde);
  border-bottom: 1.5px solid var(--verde);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--verde-900); }
.faq__resposta { padding: 0 0 1.6rem; color: var(--tinta-suave); max-width: 62ch; }

/* ---------- 19. CTA final ---------- */
.cta-final {
  background: var(--verde-900);
  color: #fff; text-align: center;
}
.cta-final h2 {
  color: #fff; font-size: var(--t-h2); margin-bottom: 1.3rem;
  max-width: 20ch; margin-inline: auto;
}
.cta-final p { color: rgba(255,255,255,.8); font-size: var(--t-lead); max-width: 44ch; margin: 0 auto 2.6rem; }
.cta-final .grupo-btn { justify-content: center; margin-bottom: 2.2rem; }
.cta-final__nota {
  margin-top: 2.5rem; font-size: var(--t-mini);
  letter-spacing: .17em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ---------- 20. Contato + formulário ---------- */
.contato__grade {
  display: grid; grid-template-columns: .86fr 1.14fr;
  gap: clamp(2.4rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.contato__dados { list-style: none; padding: 0; display: grid; margin-top: 2.2rem; }
.contato__dados li {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 0; border-top: 1px solid var(--filete);
}
.contato__dados li:last-child { border-bottom: 1px solid var(--filete); }
.contato__dados svg { width: 19px; height: 19px; flex: none; color: var(--verde); margin-top: .34rem; }
.contato__dados b {
  display: block; color: var(--verde-900);
  font-size: var(--t-mini); letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600; margin-bottom: .3rem;
}
.contato__dados a {
  color: var(--tinta); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 32px;
}
.contato__dados a:hover { color: var(--verde-900); text-decoration: underline; }
.mapa { margin-top: 2.2rem; border: 1px solid var(--filete); }
.mapa iframe { display: block; width: 100%; height: 250px; border: 0; filter: grayscale(.34); }

.formulario {
  background: var(--branco);
  padding: clamp(1.8rem, 1rem + 2.2vw, 3rem);
  border: 1px solid var(--filete);
  box-shadow: var(--sombra);
}
.formulario h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem); margin-bottom: .55rem; }
.formulario__sub { color: var(--tinta-suave); font-size: .98rem; margin-bottom: 2rem; }

.campo { margin-bottom: 1.2rem; }
.campo label {
  display: block; font-size: var(--t-mini); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--verde-900); margin-bottom: .5rem;
}
.campo label .obrig { color: #B03A2E; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .88rem 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--filete-forte);
  border-radius: 0;
  font-size: 1.04rem;
  transition: border-color .18s;
}
.campo select { padding-inline: 0; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-bottom-color: var(--verde); border-bottom-width: 2px;
  padding-bottom: calc(.88rem - 1px);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-bottom-color: #B03A2E; }
.campo__erro { display: none; color: #B03A2E; font-size: .86rem; margin-top: .38rem; }
.campo__erro.visivel { display: block; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
@media (max-width: 560px) { .dupla { grid-template-columns: 1fr; } }

.mel { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

.form-nota {
  font-size: .85rem; color: var(--tinta-suave);
  margin-top: 1.1rem; line-height: 1.55; text-align: center;
}
.form-status { margin-top: 1.2rem; padding: 1rem 1.2rem; font-size: .97rem; display: none; }
.form-status.visivel { display: block; }
.form-status--ok  { background: var(--verde-50); color: var(--verde-900); border-left: 2px solid var(--verde); }
.form-status--erro { background: #FBEDEB; color: #92291E; border-left: 2px solid #B03A2E; }

.formulario .btn { margin-top: .8rem; }

@media (max-width: 860px) { .contato__grade { grid-template-columns: 1fr; } }

/* ---------- 21. Rodapé ---------- */
.rodape {
  background: var(--petroleo-900); color: rgba(255,255,255,.66);
  padding-block: 4rem 2rem; font-size: .95rem;
}
.rodape__grade {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.8rem; padding-bottom: 2.8rem;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.rodape img.rodape__logo { width: 156px; margin-bottom: 1.4rem; }
.rodape h4 {
  color: #fff; font-family: var(--corpo); font-size: var(--t-mini);
  letter-spacing: .19em; text-transform: uppercase; margin-bottom: 1.2rem;
}
.rodape ul { list-style: none; padding: 0; display: grid; gap: .25rem; }
.rodape a {
  color: rgba(255,255,255,.72); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 34px;
}
.rodape a:hover { color: #A9CE97; }
.rodape__dna { display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem; }
.rodape__dna img { width: 58px; }
.rodape__dna span { font-size: .86rem; line-height: 1.5; }
.rodape__base {
  padding-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  justify-content: space-between; font-size: .84rem; color: rgba(255,255,255,.45);
}
@media (max-width: 780px) { .rodape__grade { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ---------- 22. WhatsApp flutuante ---------- */
.zap-flutua {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--zap); color: var(--zap-texto);
  font-family: var(--corpo); font-weight: 600; font-size: .98rem;
  padding: .95rem 1.45rem;
  border: none; border-radius: var(--r-pilula);
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(27,42,50,.5);
  transition: background-color .2s ease;
}
.zap-flutua:hover { background: var(--zap-escuro); }
.zap-flutua svg { width: 23px; height: 23px; flex: none; }
@media (max-width: 560px) {
  .zap-flutua { right: 15px; bottom: 15px; padding: .9rem 1.1rem; }
  .zap-flutua__texto { display: none; }
}

/* ---------- 23. Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 1.15rem;
  background: rgba(1, 24, 36, .62);
}
.modal.aberto { display: flex; animation: entra .22s ease; }
@keyframes entra { from { opacity: 0; } to { opacity: 1; } }

.modal__caixa {
  position: relative;
  background: var(--papel);
  width: min(100%, 450px);
  max-height: calc(100dvh - 2.3rem);
  overflow-y: auto;
  box-shadow: 0 40px 90px -30px rgba(1,24,36,.6);
  animation: sobe .28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sobe { from { transform: translateY(18px); } to { transform: none; } }

.modal__topo {
  background: var(--petroleo);
  color: #fff;
  padding: 2rem 2rem 1.75rem;
}
.modal__topo h2 { color: #fff; font-size: 1.5rem; margin-bottom: .6rem; }
.modal__topo p { color: rgba(255,255,255,.8); font-size: .95rem; line-height: 1.6; }
.modal__corpo { padding: 1.9rem 2rem 2rem; }
.modal__fechar {
  position: absolute; top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.modal__fechar:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ---------- 24. Utilitários ---------- */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 25. Revelação suave ---------- */
@media (prefers-reduced-motion: no-preference) {
  .revela { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
  .revela.visivel { opacity: 1; transform: none; }
}

/* ---------- 26. Impressão ---------- */
@media print {
  .zap-flutua, .modal, .cabecalho, .mapa { display: none !important; }
  body { background: #fff; }
}