/* ==========================================================================
   VIGOR VITAL — site oficial (gerado a partir da versão 2) · rodada 3 "ilustrado"
   Natureza, sol, céu. O mockup dele é ILUSTRADO (ícones com volume, folha em
   aquarela, frase manuscrita com traço) — não só tipográfico.
   Regras dele: foto de ponta a ponta, CONTEÚDO FININHO no meio.
   ========================================================================== */

:root {
  --tinta:      #0B2545;
  --fumaca:     #4B6479;
  --marinho:    #0B2F6E;   /* rodada 5: puxado pro marinho da logo oficial */
  --verde:      #16A34A;
  --verde-escuro:#0B7A45;
  --verde-vivo: #4ADE80;
  --ceu:        #0EA5E9;
  --sol:        #FACC15;
  --papel:      #FBFAF1;   /* calor de sol — o branco-menta dava cara de hospital */
  --menta:      #EEF6E4;
  --linha:      rgba(11, 37, 69, .10);

  --grad:       linear-gradient(95deg, #1FB45A 0%, #12A150 45%, #0B8A5A 100%);
  /* verde mais fundo e rico, como nos mockups do ChatGPT — o verde-limão lia como "barato" */
  --grad-btn:   linear-gradient(120deg, #17A65A 0%, #0E8A4E 50%, #0A6B4F 100%);

  --shell:       920px;    /* conteúdo fininho — e o topo usa a MESMA coluna (pedido dele, 13/09) */
  --shell-topo:  var(--shell);
  --shell-largo: var(--shell);   /* rodapé TAMBÉM na coluna (regra dele: do menu ao rodapé) */
  --sobe:        0px;      /* cartão flutuante desligado: com o banner baixo ele comia a foto */
  --gutter:  clamp(20px, 5vw, 44px);
  --respiro: clamp(60px, 7vw, 100px);
  --raio:    20px;

  --fonte:   "Figtree", "Segoe UI", system-ui, sans-serif;
  --script:  "Satisfy", "Segoe Script", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  /* rodada 9: página BRANCA — a cor mora nos elementos, não no fundo */
  margin: 0; background: #fff; color: var(--tinta);
  font-family: var(--fonte); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
::selection { background: var(--verde); color: #fff; }
:focus-visible { outline: 3px solid var(--ceu); outline-offset: 3px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.topo .shell, .hero .shell, .beneficios .shell { max-width: var(--shell-topo); }
.rodape .shell { max-width: var(--shell-largo); }
/* grid/flex não pode crescer além da tela por conteúdo que não quebra */
.hero > *, .topo__grid > *, .beneficios__grid > *, .cuidado__grid > *, .modalidades > *,
.condicoes > *, .joelma__grid > *, .guia__grid > *, .vozes > *, .contato__grid > *,
.rodape__grid > * { min-width: 0; }
section[id] { scroll-margin-top: 96px; }

.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.etiqueta { margin-bottom: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--verde); }
.titulo { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--marinho); }
.centro { text-align: center; margin-top: clamp(30px, 3.4vw, 44px); }

/* frase manuscrita + traço verde embaixo (como no mockup) */
.hero__script, .final__script {
  font-family: var(--script); font-weight: 400; line-height: 1.02;
  color: var(--verde-escuro); transform: rotate(-8deg);
}
.traco { display: block; width: 78%; height: 16px; margin: 4px 0 0 12%; color: var(--verde); }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  font: inherit; font-size: .95rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: filter .25s, transform .25s, box-shadow .25s, background-color .25s, color .25s;
}
.btn--verde { background: var(--grad-btn); color: #fff; box-shadow: 0 12px 28px rgba(10, 107, 79, .34); }
.btn--verde:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(10, 107, 79, .42); }
.btn--linha { border: 2px solid var(--verde); color: var(--verde-escuro); background: #fff; }
.btn--linha:hover { background: var(--verde); color: #fff; }
.btn--grande { padding: 16px 30px; font-size: 1rem; }
.ico-wa { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ----------------------------------------------------------------- topo */
/* faixa branca própria: o banner começa embaixo dela, não por baixo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--linha); transition: background-color .3s, box-shadow .3s; }
.topo--rolado { background: rgba(255, 255, 255, .94); box-shadow: 0 8px 26px rgba(11, 37, 69, .09); backdrop-filter: blur(10px); }
/* compacto de propósito: logo, menu e botão cabem na mesma coluna estreita do conteúdo */
.topo__grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 84px; }
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.marca img { width: auto; height: 46px; }
.marca__txt b { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--marinho); }
.marca__txt b i { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca__txt small { display: block; margin-top: 4px; font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marinho); }
.menu { display: flex; justify-content: center; gap: clamp(12px, 1.35vw, 20px); }
.menu a { position: relative; padding: 6px 0; font-size: .86rem; font-weight: 600; color: var(--marinho); text-decoration: none; white-space: nowrap; }
.topo__cta { padding: 11px 20px; font-size: .88rem; }
.menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad); transition: right .3s; }
.menu a:hover::after { right: 0; }
.hamburguer, .menu-movel { display: none; }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative; display: grid; align-items: center;
  min-height: clamp(430px, 33vw, 560px);   /* banner BAIXO e LARGO (pedido dele, 13/09) */
  overflow: clip; isolation: isolate;
}
/* 50% 0%: a foto (21:9) corta embaixo, nunca na cabeça */
.hero__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* véu LEVE só atrás do texto: a cor da foto tem que aparecer (o de 88% é que deixava pálido) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 42% 82% at 31% 50%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.44) 50%, rgba(255,255,255,0) 100%);
}
.hero__conteudo { padding-block: clamp(36px, 3.6vw, 56px) calc(var(--sobe) + clamp(36px, 3.6vw, 56px)); }
.hero__texto { max-width: 500px; }
.hero .etiqueta { font-size: .74rem; letter-spacing: .22em; color: var(--verde-escuro); }
.hero h1 { font-size: clamp(2.4rem, 4.3vw, 3.8rem); font-weight: 800; line-height: .98; letter-spacing: -.04em; color: var(--marinho); }
.hero__sub { margin-top: 16px; font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.45; color: #1A3354; }
.hero .btn { margin-top: 24px; }
.hero .btn--grande { padding: 16px 30px; font-size: 1.02rem; }
.prova { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: .9rem; line-height: 1.35; color: #1A3354; }
.prova b { color: var(--marinho); }
.rostos { display: flex; flex: none; }
.rostos span {
  display: grid; place-items: center; width: 36px; height: 36px; margin-left: -6px; border-radius: 50%;
  border: 2.5px solid #fff; color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(135deg, #22C55E, #0B7A45); box-shadow: 0 4px 12px rgba(11, 37, 69, .18);
}
.rostos span:first-child { margin-left: 0; }
.rostos span:nth-child(2) { background: linear-gradient(135deg, #38BDF8, #1D4ED8); }
.rostos span:nth-child(3) { background: linear-gradient(135deg, #FBBF24, #16A34A); }
.rostos span:nth-child(4) { background: #fff; color: var(--marinho); font-size: .66rem; }
.estrelas { color: #F5B301; letter-spacing: .08em; margin-right: 8px; }
.hero__script {
  position: absolute; z-index: 1; right: clamp(18px, 2.4vw, 60px); top: 11%;
  font-size: clamp(1.7rem, 2.25vw, 2.4rem); line-height: 1.0; color: var(--marinho); transform: rotate(-12deg);
  text-shadow: 0 0 20px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.9);
}
.hero__script .traco { width: 70%; margin: 10px 0 0 26%; }
@media (prefers-reduced-motion: no-preference) {
  .hero__texto > * { animation: subir .7s cubic-bezier(.2,.7,.3,1) backwards; }
  .hero__texto > :nth-child(2) { animation-delay: .08s; }
  .hero__texto > :nth-child(3) { animation-delay: .16s; }
  .hero__texto > :nth-child(4) { animation-delay: .24s; }
  .hero__texto > :nth-child(5) { animation-delay: .32s; }
}
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- benefícios */
/* faixa branca logo abaixo do banner, na mesma coluna (como a imagem 3 dele) */
.beneficios { position: relative; background: #fff; box-shadow: 0 1px 0 var(--linha); overflow-x: clip; }
.beneficios__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: clamp(26px, 2.8vw, 38px); }
.beneficio { text-align: center; padding-inline: 12px; }
.beneficio + .beneficio { border-left: 1px solid var(--linha); }
.beneficio__ico {
  display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F0F8EE 58%, #DFF1E4 100%);
  box-shadow: 0 10px 24px rgba(11, 122, 69, .16), inset 0 0 0 1px rgba(11, 122, 69, .08);
}
.beneficio__ico img { width: 56px; height: 56px; object-fit: contain; }
.beneficio:nth-child(3) .beneficio__ico img { width: 64px; height: 64px; }   /* a lua tem estrelinhas: o desenho ocupa menos a caixa */
.beneficio h2 { font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; color: var(--marinho); }
.beneficio p { margin-top: 4px; font-size: .86rem; color: var(--fumaca); line-height: 1.45; }

/* -------------------------------------------------------------- seções */
.secao { position: relative; padding-block: var(--respiro); overflow-x: clip; }
.cabeca { text-align: center; max-width: 600px; margin: 0 auto clamp(30px, 3.6vw, 46px); }

/* -------------------------------------------------------------- cuidado */
/* rodada 9c (mockup dele): página branca, elementos de ALTO contraste. Traço sob a palavra forte, botão
   cheio com ícone em círculo branco, citação com aspas e traço; foto sobre forma verde orgânica + contorno,
   folhas 3D, 3 cartões coloridos flutuando sobre a foto e frase manuscrita. */
.cuidado__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4vw, 48px); align-items: center; }
.cuidado__texto .titulo { margin-bottom: 18px; }
.cuidado__texto > p { color: var(--fumaca); margin-bottom: 26px; }
.cuidado .etiqueta--pilula::before { display: none; }
.traco-sob { position: relative; white-space: nowrap; }
.traco-sob::after { content: ""; position: absolute; left: 0; right: -4%; bottom: -.18em; height: .3em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14C60 5 140 3 196 9' fill='none' stroke='%2322C55E' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.btn--circulo { padding: 8px 26px 8px 8px; gap: 14px; font-size: 1rem; }
.btn__circulo { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--verde-escuro); }
.btn__circulo .ico-wa { width: 22px; height: 22px; }
.citacao { position: relative; margin: 30px 0 0; padding: 4px 0 20px 52px; font-size: 1.05rem; font-style: italic; color: #33506B; max-width: 32ch; }
.citacao::before { content: "“"; position: absolute; left: 0; top: -16px; font-family: Georgia, "Times New Roman", serif; font-size: 4.4rem; line-height: 1; font-style: normal; font-weight: 700; color: var(--verde); }
.citacao::after { content: ""; position: absolute; left: 52px; bottom: 0; width: 44%; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14C60 5 140 3 196 9' fill='none' stroke='%2322C55E' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }

.cuidado__visual { position: relative; padding: 28px 0 46px 16px; }
/* forma verde orgânica atrás da foto + contorno fino deslocado */
.cuidado__visual::before { content: ""; position: absolute; z-index: 0; left: 0; right: 24%; top: 4%; bottom: 2%; border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%; background: linear-gradient(150deg, #34C46F 0%, #16A34A 55%, #0F7A3A 100%); transform: rotate(-7deg); }
.cuidado__visual::after { content: ""; position: absolute; z-index: 0; left: -5%; right: 18%; top: -2%; bottom: -1%; border: 1.5px solid rgba(22, 163, 74, .55); border-radius: 54% 46% 58% 42% / 44% 56% 44% 56%; transform: rotate(6deg); }
/* foto deslocada pra direita (a forma verde aparece à esquerda) e os cartões só encostam na borda dela */
.cuidado__foto { position: relative; z-index: 1; width: 66%; margin: 0 0 0 9%; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 30px 60px rgba(11, 37, 69, .24); }
.cuidado__foto > img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.cuidado__folha { position: absolute; z-index: 3; right: 10%; top: -10px; width: 84px; height: auto; transform: rotate(-26deg); filter: drop-shadow(0 10px 14px rgba(21, 128, 61, .32)); }
.cuidado__folha--2 { right: -2%; top: 26px; width: 60px; transform: rotate(22deg); }
.cuidado__cartoes { position: absolute; z-index: 4; right: -40px; top: 20%; width: 52%; display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.mini-cartao { --mc-tinta: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%); --mc-borda: #BBF7D0; --mc-grad: linear-gradient(145deg, #34C46F, #15803D); --mc-sombra: rgba(21, 128, 61, .20);
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--mc-tinta); border: 1px solid var(--mc-borda); box-shadow: 0 16px 30px var(--mc-sombra); }
.mini-cartao--azul { --mc-tinta: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); --mc-borda: #BFDBFE; --mc-grad: linear-gradient(145deg, #3B8BF5, #1D4ED8); --mc-sombra: rgba(29, 78, 216, .20); }
.mini-cartao--laranja { --mc-tinta: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); --mc-borda: #FED7AA; --mc-grad: linear-gradient(145deg, #FB923C, #C2410C); --mc-sombra: rgba(194, 65, 12, .20); }
.mini-cartao__ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--mc-grad); box-shadow: 0 8px 16px var(--mc-sombra); }
.mini-cartao__ico svg { width: 24px; height: 24px; color: #fff; }
.mini-cartao__txt { min-width: 0; font-size: .78rem; line-height: 1.3; color: #475569; }
.mini-cartao__txt b { display: block; margin-bottom: 1px; font-size: .92rem; line-height: 1.2; color: var(--marinho); }
.cuidado__script { position: absolute; z-index: 4; right: -44px; bottom: -18px; margin: 0; font-family: var(--script); font-size: 1.7rem; line-height: 1; text-align: right; color: var(--verde-escuro); transform: rotate(-9deg); text-shadow: 0 0 12px #fff, 0 0 4px #fff; }
.cuidado__script .traco { width: 78%; margin: 6px 0 0 22%; }

.joelma__foto { position: relative; margin: 0; border-radius: var(--raio); overflow: hidden; box-shadow: 0 24px 50px rgba(11, 37, 69, .14); }
.cuidado__foto figcaption { font-size: .76rem; padding: 8px 12px 8px 8px; }
.cuidado__foto figcaption img { width: 26px; height: 26px; }
.cuidado__foto figcaption, .joelma__foto figcaption {
  position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  border-radius: 14px; font-size: .82rem; font-weight: 700; line-height: 1.25; color: var(--marinho);
}
.cuidado__foto figcaption img, .joelma__foto figcaption img { width: 30px; height: 30px; flex: none; }

/* ---------------------------------------------------------- tratamentos */
/* rodada 9 (mockups dele do ChatGPT): fundo BRANCO e cor forte DENTRO dos cartões. O verde-clarinho de
   fundo "não é branco nem é cor" — deixava a seção morta. */
.tratamentos { background: #fff; }
.etiqueta--pilula { display: inline-block; padding: 6px 16px; border-radius: 999px; background: #F0FDF4; border: 1px solid rgba(22, 163, 74, .35); color: var(--verde-escuro); }
.cabeca__sub { margin-top: 12px; color: var(--fumaca); }

.modalidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.modalidade {
  --m-grad: linear-gradient(165deg, #2F6BFF 0%, #1D4ED8 42%, #1E3A8A 100%); --m-escuro: #1E3A8A; --m-sombra: rgba(30, 58, 138, .34);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: 22px; border-radius: 22px; background: var(--m-grad); color: #fff;
  box-shadow: 0 24px 46px var(--m-sombra), 0 2px 6px rgba(15, 23, 42, .10);
  transition: transform .25s, box-shadow .25s;
}
.modalidade:hover { transform: translateY(-5px); box-shadow: 0 32px 58px var(--m-sombra); }
.modalidade--verde   { --m-grad: linear-gradient(165deg, #22B35E 0%, #15803D 42%, #0F5A2C 100%); --m-escuro: #14532D; --m-sombra: rgba(20, 83, 45, .34); }
.modalidade--laranja { --m-grad: linear-gradient(165deg, #F07A1C 0%, #C24A0A 40%, #8F330B 100%); --m-escuro: #9A3412; --m-sombra: rgba(154, 52, 18, .34); }
/* foto em cima com a borda de baixo em curva; frase manuscrita por cima da foto */
.modalidade__foto { position: relative; margin: 0; height: 172px; clip-path: ellipse(120% 100% at 50% 0%); }
.modalidade__foto img { width: 100%; height: 100%; object-fit: cover; }
/* enquadrar o ASSUNTO de cada foto na faixa baixa do cartão (agulhas, sementes, pedras) */
.modalidade--azul .modalidade__foto img { object-position: 42% 42%; }
.modalidade--verde .modalidade__foto img { object-position: 56% 46%; }
.modalidade--laranja .modalidade__foto img { object-position: 82% 62%; }
.modalidade__foto figcaption {
  position: absolute; right: 16px; bottom: 26px; font-family: var(--script); font-size: 1.45rem; line-height: 1;
  text-align: right; color: #fff; transform: rotate(-8deg); text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.modalidade__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 74px; height: 74px; margin: -38px 0 0 20px; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.modalidade__ico img { width: 50px; height: 50px; object-fit: contain; }
.modalidade h3 { margin: 12px 22px 0; font-size: 1.32rem; color: #fff; }
.modalidade p { margin: 6px 22px 0; font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .93); }
.checks { list-style: none; margin: 14px 22px 20px; padding: 0; display: grid; gap: 7px; }
.checks li { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; }
.checks svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #fff; color: var(--m-escuro); }
.btn--branco { margin: auto 22px 0; align-self: flex-start; background: #fff; color: var(--m-escuro); box-shadow: 0 10px 22px rgba(0, 0, 0, .18); }
.btn--branco:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, .24); }

.subtitulo-lista { margin: clamp(34px, 3.8vw, 46px) 0 16px; text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-escuro); }
/* itens: cor clara do tema + ícone em círculo de cor cheia + setinha branca */
.condicoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cond { --c-tinta: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); --c-borda: #BFDBFE; --c-grad: linear-gradient(145deg, #3B82F6, #1E3A8A); --c-forte: #1D4ED8; --c-sombra: rgba(29, 78, 216, .16); }
.cond--turquesa { --c-tinta: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%); --c-borda: #99F6E4; --c-grad: linear-gradient(145deg, #14B8A6, #0F766E); --c-forte: #0F766E; --c-sombra: rgba(15, 118, 110, .16); }
.cond--roxo     { --c-tinta: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%); --c-borda: #DDD6FE; --c-grad: linear-gradient(145deg, #8B5CF6, #5B21B6); --c-forte: #6D28D9; --c-sombra: rgba(109, 40, 217, .16); }
.cond--laranja  { --c-tinta: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); --c-borda: #FED7AA; --c-grad: linear-gradient(145deg, #FB923C, #C2410C); --c-forte: #C2410C; --c-sombra: rgba(194, 65, 12, .16); }
.cond--vermelho { --c-tinta: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%); --c-borda: #FECACA; --c-grad: linear-gradient(145deg, #EF4444, #991B1B); --c-forte: #B91C1C; --c-sombra: rgba(185, 28, 28, .16); }
.cond--ciano    { --c-tinta: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); --c-borda: #BAE6FD; --c-grad: linear-gradient(145deg, #0EA5E9, #075985); --c-forte: #0369A1; --c-sombra: rgba(3, 105, 161, .16); }
.cond a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px; border-radius: 16px; background: var(--c-tinta); border: 1px solid var(--c-borda); box-shadow: 0 10px 22px var(--c-sombra); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.cond a:hover { transform: translateY(-3px); box-shadow: 0 16px 30px var(--c-sombra); }
.cond__ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-grad); box-shadow: 0 8px 16px var(--c-sombra); }
.cond__ico svg { width: 28px; height: 28px; color: #fff; }
.cond__txt { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.35; color: #475569; }
.cond__txt b { display: block; margin-bottom: 1px; font-size: .96rem; color: var(--marinho); }
.cond__seta { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--c-forte); font-size: 1.2rem; font-weight: 800; line-height: 1; box-shadow: 0 4px 10px var(--c-sombra); }

.faixa-lema { display: flex; align-items: center; gap: 22px; margin-top: clamp(30px, 3.6vw, 44px); padding: 18px 24px; border-radius: 20px; background: linear-gradient(180deg, #FFFFFF 0%, #F2FBF3 100%); border: 1px solid rgba(22, 163, 74, .20); box-shadow: 0 18px 40px rgba(15, 23, 42, .08); }
.faixa-lema__txt { display: flex; align-items: center; gap: 12px; flex: none; font-size: 1.08rem; font-weight: 800; line-height: 1.15; color: var(--marinho); }
.faixa-lema__txt img { width: 46px; height: 46px; }
.faixa-lema__txt em { font-style: normal; color: var(--verde-escuro); }
.faixa-lema__itens { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.faixa-lema__itens li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-inline: 6px; border-left: 1px solid var(--linha); font-size: .76rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--fumaca); }
.faixa-lema__itens svg { width: 26px; height: 26px; color: var(--verde); }

/* --------------------------------------------------------------- joelma */
.joelma { background: #fff; }
.joelma__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 4.6vw, 56px); align-items: center; }
.joelma__foto { aspect-ratio: 4 / 3.6; }
.joelma__foto > img { width: 100%; height: 100%; object-fit: cover; }
.joelma__texto .titulo { margin-bottom: 14px; }
.joelma__texto > p { color: var(--fumaca); }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0 0; }
.numeros div { padding: 16px 10px; border-radius: 16px; text-align: center; color: #fff; background: linear-gradient(150deg, #2F6BFF, #1E3A8A); box-shadow: 0 14px 28px rgba(30, 58, 138, .28); }
.numeros div:nth-child(2) { background: linear-gradient(150deg, #22B35E, #14532D); box-shadow: 0 14px 28px rgba(20, 83, 45, .28); }
.numeros div:nth-child(3) { background: linear-gradient(150deg, #F07A1C, #9A3412); box-shadow: 0 14px 28px rgba(154, 52, 18, .28); }
.numeros dt { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; }
.numeros dd { margin: 6px 0 0; font-size: .78rem; color: rgba(255, 255, 255, .92); line-height: 1.3; }
.nota { margin-top: 12px; font-size: .76rem; color: var(--fumaca); }

/* ----------------------------------------------------------------- guia */
.guia { background: #fff; }
.guia__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.6vw, 56px); align-items: center; }
.guia__texto .titulo { margin-bottom: 14px; }
.guia__texto > p { color: var(--fumaca); }
.selos { list-style: none; margin: 20px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.selos li { padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, #EFF6FF, #DBEAFE); border: 1px solid #BFDBFE; color: #1E3A8A; font-size: .8rem; font-weight: 700; }
.selos li:nth-child(2) { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); border-color: #BBF7D0; color: #14532D; }
.selos li:nth-child(3) { background: linear-gradient(135deg, #FFF7ED, #FFEDD5); border-color: #FED7AA; color: #9A3412; }
.guia__foto { margin: 0; border-radius: var(--raio); overflow: hidden; box-shadow: 0 24px 50px rgba(11, 37, 69, .16); aspect-ratio: 4 / 3.4; }
.guia__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }

/* ---------------------------------------------------------- depoimentos */
/* rodada 9: fundo branco; o destaque é o cartão (cor clara do tema + borda + sombra) */
.depoimentos { background: #fff; }
.vozes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* rodada 9b (mockup dele): cartão branco com BORDA de cor, aspas grandes na cor, onda de cor no canto.
   Rosto de quem avaliou NÃO entra (avaliação real, ninguém mandou foto): iniciais com anel da cor. */
.voz { --v-cor: #16A34A; --v-clara: #DCFCE7; --v-sombra: rgba(22, 163, 74, .16);
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px 26px 26px;
  border-radius: 22px; background: linear-gradient(160deg, #FFFFFF 55%, var(--v-clara) 140%); border: 2px solid var(--v-cor);
  box-shadow: 0 20px 40px var(--v-sombra); }
.voz:nth-child(2) { --v-cor: #2F80ED; --v-clara: #DBEAFE; --v-sombra: rgba(47, 128, 237, .16); }
.voz:nth-child(3) { --v-cor: #F5B400; --v-clara: #FEF3C7; --v-sombra: rgba(245, 180, 0, .18); }
/* onda no canto de baixo, na cor do cartão */
.voz::after { content: ""; position: absolute; right: 0; bottom: 0; width: 62%; height: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(160deg, var(--v-clara) 0%, var(--v-cor) 100%); opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M100 0C86 18 78 40 40 50 24 54 10 57 0 60h100z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M100 0C86 18 78 40 40 50 24 54 10 57 0 60h100z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.voz > * { position: relative; z-index: 1; }
/* Georgia: a aspa da Figtree sai reta ("dois tracinhos"); a serifada dá a aspa curva do mockup */
.voz::before { content: "“"; position: absolute; z-index: 1; right: 20px; top: 0; font-family: Georgia, "Times New Roman", serif; font-size: 5.6rem; line-height: 1; font-weight: 700; color: var(--v-cor); opacity: .8; }
.voz blockquote { margin: 0; flex: 1; font-size: 1.04rem; line-height: 1.55; color: var(--tinta); }
.voz .estrelas { font-size: 1.2rem; letter-spacing: .06em; }
.voz figcaption { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.02rem; color: var(--marinho); }
.voz figcaption small { display: block; font-weight: 500; font-size: .78rem; color: var(--fumaca); }
.avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; flex: none; color: #fff; font-size: .95rem; font-weight: 800; background: linear-gradient(135deg, #22C55E, #15803D); border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--v-cor), 0 8px 16px var(--v-sombra); }
.avatar--b { background: linear-gradient(135deg, #3B8BF5, #1E40AF); }
.avatar--c { background: linear-gradient(135deg, #FBBF24, #D97706); }

/* -------------------------------------------------------------- contato */
.contato { background: #fff; }
.contato__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.6vw, 56px); align-items: start; }
.contato__txt { margin: 16px 0 24px; color: var(--fumaca); max-width: 36ch; }
.contato .etiqueta { color: var(--verde-escuro); }   /* 14/09: verde claro no fundo creme = 3,2:1 (Lighthouse); o escuro dá 5,2:1 */
.dados { margin: 0; display: grid; padding: 8px 24px; border-radius: var(--raio); color: #fff; background: linear-gradient(150deg, #1D4ED8 0%, #1E3A8A 60%, #172554 100%); box-shadow: 0 24px 48px rgba(30, 58, 138, .30); }
.dados div { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.dados div:last-child { border-bottom: 0; }
.dados dt { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #86EFAC; }
.dados dt svg { width: 16px; height: 16px; fill: currentColor; color: #86EFAC; }
.dados dd { margin: 5px 0 0 24px; line-height: 1.55; font-size: .95rem; }
.dados dd a { color: #fff; font-weight: 700; }

/* ---------------------------------------------------------------- final */
.final { position: relative; overflow: clip; isolation: isolate; background: #CFE8C0 url(/imagens/floresta.jpg) center / cover no-repeat; }
.final::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 44% 72% at 50% 50%, rgba(251,250,241,.90) 0%, rgba(251,250,241,.58) 55%, rgba(251,250,241,0) 100%);
}
.final__conteudo { text-align: center; padding-block: clamp(70px, 8vw, 120px); }
.final h2 { font-size: clamp(2rem, 4vw, 2.9rem); max-width: 16ch; margin-inline: auto; color: var(--marinho); }
.final__sub { margin: 12px auto 26px; color: #25405C; max-width: 38ch; }
.final__script {
  position: absolute; right: clamp(24px, 6vw, 120px); top: 50%; margin-top: -40px;
  font-size: clamp(1.6rem, 2.3vw, 2.3rem);
  text-shadow: 0 0 14px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.95);
}

/* --------------------------------------------------------------- rodapé */
.rodape { background: #fff; overflow-x: clip; }
.rodape__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr .8fr; gap: 28px; padding-block: 44px 30px; }
.rodape__marca .marca img { height: 42px; }
.rodape__lema { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .88rem; color: var(--fumaca); }
.rodape__lema img { width: 22px; height: 22px; }
img[src*="ico-"] { object-fit: contain; }   /* 14/09: os ícones não são quadrados (folha 231×256, coração 256×230); em caixa quadrada ficavam esmagados */
.rodape__col { display: flex; flex-direction: column; gap: 9px; }
.rodape__col h3 { font-size: .86rem; color: var(--marinho); margin-bottom: 4px; }
.rodape__col a, .rodape__col span { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--fumaca); text-decoration: none; }
.rodape__col a:hover { color: var(--verde); }
.rodape__col svg { width: 16px; height: 16px; flex: none; fill: currentColor; color: var(--verde); }
.redes { display: flex; gap: 10px; }
.redes a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--menta); }
.redes svg { width: 18px; height: 18px; color: var(--verde-escuro); }
.rodape__fim { display: grid; gap: 6px; padding-block: 18px 26px; border-top: 1px solid var(--linha); }
.rodape__fim p { font-size: .76rem; color: var(--fumaca); line-height: 1.5; }

/* pílula com linhas dos lados (mockups dele) */
.etiqueta--pilula { position: relative; }
.etiqueta--pilula::before, .etiqueta--pilula::after { content: ""; position: absolute; top: 50%; width: 64px; height: 1.5px; background: var(--verde); opacity: .55; }
.etiqueta--pilula::before { right: calc(100% + 14px); }
.etiqueta--pilula::after { left: calc(100% + 14px); }

/* botão do Google: verde cheio, "G" em círculo branco, raios dos lados, nota média embaixo */
.google-cta { margin-top: clamp(30px, 3.4vw, 42px); text-align: center; }
.google-cta__linha { display: flex; align-items: center; justify-content: center; gap: 14px; }
.raios { width: 30px; height: 44px; color: var(--verde); flex: none; }
.raios--dir { transform: scaleX(-1); }
.btn--google { padding: 10px 26px 10px 10px; gap: 14px; font-size: 1.06rem; background: var(--grad-btn); color: #fff; box-shadow: 0 14px 30px rgba(10, 107, 79, .36); }
.btn--google:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn--google__g { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.g-google { width: 26px; height: 26px; }
.google-cta__media { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; font-size: .88rem; color: var(--fumaca); }
.google-cta__media .estrelas { margin: 0; padding-right: 12px; border-right: 1px solid var(--linha); font-size: 1.1rem; }

/* rodapé com cor VIVA (pedido dele, 13/09): azul da marca cheio, texto branco, destaques em verde claro.
   Azul e não verde: logo acima está a faixa de floresta, verde sobre verde emendaria. */
.rodape { background: linear-gradient(135deg, #1D4ED8 0%, #1E3A8A 55%, #172554 100%); color: #fff; }
.rodape .marca__txt b { color: #fff; }
.rodape .marca__txt b i { background: linear-gradient(95deg, #A7F3C0, #4ADE80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rodape .marca__txt small { color: #BFDBFE; }
.rodape__lema { color: #DBEAFE; }
.rodape__col h3 { color: #fff; }
.rodape__col a, .rodape__col span { color: rgba(255, 255, 255, .88); }
.rodape__col a:hover { color: #86EFAC; }
.rodape__col svg { color: #86EFAC; }
.redes a { background: rgba(255, 255, 255, .14); }
.redes svg { color: #fff; }
.rodape__fim { border-top-color: rgba(255, 255, 255, .18); }
.rodape__fim p { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------- whatsapp fixo */
.flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25D366; box-shadow: 0 10px 26px rgba(37, 211, 102, .45); transition: transform .25s; }
.flutuante:hover { transform: scale(1.06); }
.flutuante svg { width: 30px; height: 30px; fill: #fff; }

/* ============================================================ TABLET ==== */
@media (max-width: 1100px) {
  .hero__script, .final__script, .cuidado__script { display: none; }   /* sem espaço sobrando nas bordas */
}
@media (max-width: 960px) {
  .menu, .topo__cta { display: none; }
  .topo__grid { grid-template-columns: 1fr auto; min-height: 72px; }
  .hamburguer { display: grid; gap: 5px; place-content: center; width: 44px; height: 44px; padding: 0; background: #fff; border: 1px solid var(--linha); border-radius: 12px; cursor: pointer; }
  .hamburguer span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .3s, opacity .2s; }
  .menu-aberto .hamburguer span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-aberto .hamburguer span:nth-child(2) { opacity: 0; }
  .menu-aberto .hamburguer span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu-movel { display: grid; max-height: 0; overflow: hidden; padding-inline: var(--gutter); background: rgba(255,255,255,.98); transition: max-height .35s ease, padding-bottom .35s ease; }
  .menu-aberto .menu-movel { max-height: 460px; padding-bottom: 18px; box-shadow: 0 1px 0 var(--linha); }
  .menu-movel a { padding: 13px 0; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--linha); }
  .menu-movel .btn { margin-top: 14px; border-bottom: 0; }

  .beneficios__grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .prova { flex-wrap: wrap; }
  .beneficio + .beneficio { border-left: 0; }
  .cuidado__grid, .joelma__grid, .guia__grid, .contato__grid { grid-template-columns: 1fr; }
  .joelma__foto { order: 2; }
  .condicoes { grid-template-columns: 1fr 1fr; }
  .cuidado__visual { max-width: 480px; margin-inline: auto; width: 100%; }
  .modalidades { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .faixa-lema { flex-direction: column; align-items: stretch; text-align: center; }
  .faixa-lema__txt { justify-content: center; }
  .vozes { grid-template-columns: 1fr 1fr; }
  .rodape__grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================== CELULAR ==== */
@media (max-width: 640px) {
  /* rodada 8 — texto POR CIMA da foto, como na Fiêrri. Antes: banner de 195vw = rosto gigante e o
     texto só começava lá embaixo. Agora: banner mais baixo, rosto à direita, texto no céu à esquerda
     com véu vindo da esquerda que some antes do rosto. */
  /* altura = a do TEXTO (sem mínimo fixo): a foto termina logo depois das avaliações.
     Com min-height de 480px sobravam ~125px de foto vazia num celular de 360px (ele notou). */
  .hero { min-height: 0; align-items: start; }
  .hero__foto { object-position: 64% center; }
  .hero::after { background: linear-gradient(104deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,.5) 52%, rgba(255,255,255,.08) 66%, rgba(255,255,255,0) 76%); }
  .hero__conteudo { padding-block: 32px 34px; }
  .hero__texto { max-width: min(64%, 300px); }
  .hero .etiqueta { font-size: .62rem; letter-spacing: .12em; margin-bottom: 10px; white-space: nowrap; }
  .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .hero__sub { margin-top: 12px; font-size: .9rem; }
  .hero__sub br { display: none; }
  .hero .btn { width: max-content; white-space: nowrap; margin-top: 20px; padding: 14px 22px; font-size: .95rem; }
  .prova { font-size: .8rem; margin-top: 16px; }
  .beneficios__grid { padding-block: 24px; }
  .guia .btn, .final .btn { width: 100%; }
  .btn { white-space: normal; text-align: center; }

  .modalidades, .condicoes, .vozes { grid-template-columns: 1fr; }
  .numeros dt { font-size: 1.55rem; }
  .faixa-lema__itens { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .faixa-lema__itens li:nth-child(3) { border-left: 0; }
  .cuidado__visual { padding: 18px 6px 10px; }
  .cuidado__foto { width: 100%; }
  .cuidado__cartoes { position: static; width: auto; margin-top: 18px; }
  /* 🩸 o borrão verde (::before, posicionado) pintava POR CIMA dos mini-cartões e cobria o texto no celular
     (achado no print 600px, 13/09 noite): borrão só atrás da foto + cartões com z-index de verdade */
  .cuidado__visual::before { bottom: 38%; }
  .cuidado__visual::after { bottom: 36%; }
  .cuidado__cartoes { position: relative; z-index: 4; top: auto; right: auto; }
  .cuidado__foto { margin-left: 0; }
  .cuidado__folha { width: 64px; right: 4%; top: -6px; }
  .cuidado__folha--2 { display: none; }
  .btn--circulo { padding-right: 18px; }
  .etiqueta--pilula::before, .etiqueta--pilula::after, .raios { display: none; }
  .btn--google { font-size: .95rem; padding-right: 20px; }
  .rodape__grid { grid-template-columns: 1fr; }
}

/* site oficial: links legais no rodapé (rodapé azul cheio desde 13/09 → link claro) */
.rodape__fim .legal a { margin-left: 14px; color: rgba(255, 255, 255, .85); }