/* ==========================================================================
   Giovanna Licastro, Nutricionista
   Estudio Araujo, 2026-08-07

   Mobile first de verdade: a base nasce em 390px e vai crescendo.
   Paleta amostrada do logo real dela (arvore em arco) e dos PDFs de consulta.
   ========================================================================== */

:root{
  /* amostradas do logo e dos materiais dela */
  --oliva:#8B8E6F;         /* preenchimento do oval do logo */
  --oliva-esc:#5F6650;     /* verde dos titulos do PDF */
  --oliva-prof:#434A38;    /* fundo verde escuro do PDF de consulta */
  --creme:#FAF7EF;         /* fundo dos materiais */
  --creme-2:#F2EDE0;       /* creme um tom abaixo, pra alternar secao */
  --areia:#E7DFCC;         /* linhas e bordas */
  --terracota:#B5825F;     /* o filete de destaque dos PDFs */
  --rose:#E4CFC5;          /* o script rosa da serie lancheira */
  --tinta:#2B3026;         /* texto */
  --tinta-2:#5A6152;       /* texto secundario */
  --branco:#FFFDF8;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* o cursivo dos posts dela. Acento pontual, nunca corpo de texto. */
  --script:"Sacramento",cursive;

  --wrap:1180px;
  --r:14px;
  --sombra:0 1px 2px rgba(43,48,38,.05), 0 8px 28px -12px rgba(43,48,38,.16);
  --sombra-alta:0 2px 6px rgba(43,48,38,.07), 0 22px 48px -18px rgba(43,48,38,.26);
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;              /* rede de seguranca, nao substitui o conserto */
  overflow-wrap:break-word;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
[hidden]{display:none !important}   /* [hidden] tem que vencer display:flex */

h1,h2,h3,h4{
  font-family:var(--serif);
  /* Fraunces e mais encorpada que a serifada anterior: peso 400 aqui pesa
     como 500 pesava antes. SOFT arredonda os cantos.
     WONK fica DESLIGADO: a alternativa dele deixa o "f" com cauda e
     "Meu filho" passa a ler como "Meu lilho". Legibilidade ganha do charme. */
  font-weight:400;
  font-variation-settings:"SOFT" 40,"WONK" 0;
  font-optical-sizing:auto;
  line-height:1.14;
  margin:0 0 .5em;
  text-wrap:balance;              /* equilibra a quebra dos titulos */
  letter-spacing:-.01em;
}
p{margin:0 0 1em;text-wrap:pretty;max-width:66ch}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.nowrap{white-space:nowrap}

/* rotulo de secao, aquele caixa-alta espacado que ela ja usa */
.rotulo{
  font-family:var(--sans);
  font-size:13px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--terracota);
  margin:0 0 14px;
}

/* Acento em script. Usar com parcimonia: e a assinatura do feed dela,
   e assinatura repetida vira papel de parede. */
.rotulo-script{
  font-family:var(--script);
  font-size:clamp(38px,9vw,54px);
  line-height:.9;
  color:var(--terracota);
  margin:0 0 10px;
}
.secao-verde .rotulo-script{color:var(--rose)}

.secao{padding:64px 0}
.secao-creme{background:var(--creme-2)}
.secao-verde{background:var(--oliva-prof);color:#EFEDE2}
.secao-verde h2,.secao-verde h3{color:#FBF8F0}
.secao-verde .rotulo{color:var(--rose)}
.secao-verde p{color:#DCDCCF}

.cabeca{max-width:62ch;margin-bottom:34px}

/* registro e formacao dela, no bloco "quem vai te atender". NAO reusa
   .credenciais: aquela classe ja e a faixa de numeros embaixo do hero, com
   borda em cima e embaixo. Lista, nao pilula: "Especializacao em suplementacao
   materno-infantil" quebraria dentro de uma pilula no celular. */
.formacao{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
/* o texto vai dentro de um <span>: em flex, cada no de texto vira item e
   ganharia o gap de novo, abrindo dois espacos no meio da frase. */
.formacao li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--tinta-2)}
.formacao svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--terracota)}
.cabeca h2{font-size:clamp(30px,7vw,44px);margin-bottom:.35em}
.cabeca p{font-size:17px;color:var(--tinta-2)}
.secao-verde .cabeca p{color:#CFD0C2}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:14px 26px;
  border:1px solid transparent;border-radius:100px;
  font-family:var(--sans);font-size:16px;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease;
}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--oliva-prof);color:#FBF8F0}
.btn-primary:hover{background:#39402F;transform:translateY(-2px);box-shadow:var(--sombra)}
.btn-ghost{background:transparent;color:var(--tinta);border-color:var(--areia)}
.btn-ghost:hover{border-color:var(--oliva);background:rgba(139,142,111,.09)}
.btn-claro{background:var(--creme);color:var(--tinta)}
.btn-claro:hover{background:#fff;transform:translateY(-2px)}
.btn-zap{background:#1F8F4E;color:#fff}
.btn-zap:hover{background:#1A7A42;transform:translateY(-2px);box-shadow:var(--sombra)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--terracota);outline-offset:3px;border-radius:6px;
}

/* ---------- cabecalho ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(250,247,239,.93);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.site-header.rolou{border-bottom-color:var(--areia);box-shadow:0 6px 24px -18px rgba(43,48,38,.5)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}

.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.marca img{width:38px;height:48px;object-fit:contain}
.marca-txt{display:flex;flex-direction:column;line-height:1.1}
.marca-nome{font-family:var(--serif);font-size:18px;font-weight:500}
.marca-sub{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-2);margin-top:3px;
}

/* hamburguer: animado no celular, some no desktop */
.nav-toggle{
  position:relative;width:46px;height:46px;flex:none;
  background:transparent;border:1px solid var(--areia);border-radius:12px;
  cursor:pointer;padding:0;
}
.nav-toggle span{
  position:absolute;left:50%;width:20px;height:1.7px;
  background:var(--tinta);border-radius:2px;
  transform:translateX(-50%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .18s ease,top .3s cubic-bezier(.2,.7,.3,1);
}
.nav-toggle span:nth-child(1){top:16px}
.nav-toggle span:nth-child(2){top:22px}
.nav-toggle span:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:22px;transform:translateX(-50%) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:22px;transform:translateX(-50%) rotate(-45deg)}

.main-nav{
  position:absolute;left:0;right:0;top:100%;
  background:var(--creme);border-bottom:1px solid var(--areia);
  padding:10px 22px 24px;
  display:none;
}
.main-nav.aberto{display:block}
.main-nav ul{list-style:none;margin:0 0 16px;padding:0}
.main-nav ul a{
  display:block;padding:14px 2px;text-decoration:none;
  font-size:17px;border-bottom:1px solid var(--areia);
}
.main-nav ul a[aria-current="page"]{color:var(--terracota)}
.nav-acoes{display:flex;flex-direction:column;gap:10px}
.nav-acoes .btn{width:100%}

/* ---------- hero ---------- */
.hero{padding:34px 0 54px;position:relative;overflow:hidden}
.hero-in{display:grid;gap:30px}
/* 8.4vw e o teto pra "a lancheira da escola" caber numa linha em 390px.
   Subiu disso, o titulo quebra no meio da expressao. */
.hero h1{font-size:clamp(32px,8.4vw,62px);margin-bottom:.3em}
.hero h1 em{font-style:italic;color:var(--oliva-esc)}
.hero-lead{font-size:18px;color:var(--tinta-2);max-width:44ch}
/* A frase-promessa dela, fecha o hero. Serifada italica pra ler como assinatura,
   nao como mais um paragrafo. Medida curta: e uma frase, nao um bloco. */
.hero-frase{
  font-family:var(--serif);font-style:italic;
  font-size:16.5px;line-height:1.5;color:var(--oliva-esc);
  max-width:34ch;margin:16px 0 0;text-wrap:balance;
}
.hero-acoes{display:flex;flex-direction:column;gap:11px;margin-top:26px}

.hero-foto{position:relative}
/* Foto larga (prato visto de cima) nao cabe num hero 4/5: cortaria tudo menos
   o meio. Essa variante deixa a foto certa ficar no lugar certo. */
.hero-foto.larga img{aspect-ratio:4/3;object-position:50% 50%}
.hero-foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:var(--r);box-shadow:var(--sombra-alta);
}
/* selo da foto: onde ela atende, resolvido logo de cara */
.hero-selo{
  position:absolute;left:14px;bottom:14px;right:14px;
  background:rgba(250,247,239,.95);backdrop-filter:blur(6px);
  border-radius:11px;padding:13px 16px;
  display:flex;align-items:center;gap:11px;
  font-size:16px;line-height:1.4;
  box-shadow:var(--sombra);
}
.hero-selo svg{width:19px;height:19px;flex:none;color:var(--terracota)}
.hero-selo b{font-weight:500}

/* faixa de credenciais logo abaixo do hero */
.credenciais{
  display:grid;gap:2px;margin-top:34px;
  border-top:1px solid var(--areia);border-bottom:1px solid var(--areia);
}
.credenciais div{padding:16px 0;border-bottom:1px solid var(--areia)}
.credenciais div:last-child{border-bottom:0}
.credenciais b{
  display:block;font-family:var(--serif);font-size:24px;font-weight:500;
  color:var(--oliva-esc);line-height:1;margin-bottom:5px;
}
.credenciais span{font-size:14px;color:var(--tinta-2)}

/* ---------- cartoes de fase ---------- */
.fases{display:grid;gap:16px}
.fase{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--branco);border:1px solid var(--areia);border-radius:var(--r);
  overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.fase:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:var(--oliva)}
.fase img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fase-txt{padding:20px 20px 22px}
.fase h3{font-size:23px;margin-bottom:.3em}
.fase p{font-size:15.5px;color:var(--tinta-2);margin:0}
.fase-mais{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:14px;font-weight:500;color:var(--terracota);
}
.fase-mais svg{width:15px;height:15px;transition:transform .28s ease}
.fase:hover .fase-mais svg{transform:translateX(4px)}

/* link "ver mais" solto dentro de um card de topico (a{color:inherit} deixaria
   o link igual ao texto, e ninguem clica no que nao parece clicavel) */
.link-mais{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:14px;font-weight:500;color:var(--terracota);text-decoration:none;
}
.link-mais:hover{text-decoration:underline}
.link-mais svg{width:14px;height:14px;transition:transform .28s ease}
.link-mais:hover svg{transform:translateX(4px)}

/* ---------- passos da consulta ---------- */
.passos{display:grid;gap:0;counter-reset:p;margin-top:8px}
.passo{
  position:relative;padding:22px 0 22px 56px;
  border-bottom:1px solid rgba(231,223,204,.35);
  counter-increment:p;
}
.secao-verde .passo{border-bottom-color:rgba(231,223,204,.2)}
.passo:last-child{border-bottom:0}
.passo::before{
  content:counter(p);
  position:absolute;left:0;top:20px;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--serif);font-size:16px;
  border:1px solid var(--rose);color:var(--rose);
}
.passo h3{font-size:20px;margin-bottom:.25em}
.passo p{font-size:16px;margin:0}

/* ---------- preco ---------- */
.precos{display:grid;gap:16px}
.preco{
  background:var(--branco);border:1px solid var(--areia);border-radius:var(--r);
  padding:26px 24px;
}
.preco.destaque{border-color:var(--oliva);box-shadow:var(--sombra)}
.preco h3{font-size:21px;margin-bottom:.15em}
.preco .valor{
  font-family:var(--serif);font-size:44px;line-height:1;
  color:var(--oliva-esc);margin:14px 0 4px;
}
.preco .valor small{font-size:19px;vertical-align:.42em;margin-right:2px}
/* Deixa claro que o valor e por consulta, nao mensalidade nem pacote fechado.
   Sem isso R$ 500 na tela pode ser lido como assinatura. */
.preco .valor-sub{
  margin:0;font-size:14.5px;color:var(--tinta-2);
  letter-spacing:.01em;
}
.preco ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.preco li{position:relative;padding-left:26px;font-size:15.5px;color:var(--tinta-2)}
.preco li svg{position:absolute;left:0;top:4px;width:16px;height:16px;color:var(--oliva)}
/* As duas duvidas que aparecem logo depois do preco, respondidas ali mesmo:
   por que a primeira e mais cara, e se isso vira mensalidade. */
.investimento-notas{display:grid;gap:14px;margin-top:20px}
.inv-nota{
  background:var(--creme-2);border-radius:var(--r);
  padding:20px 22px;border-left:3px solid var(--oliva);
}
.inv-nota h3{font-size:19px;margin-bottom:.3em}
.inv-nota p{margin:0;font-size:16px;color:var(--tinta-2);max-width:62ch}
.inv-nota b{color:var(--oliva-prof);font-weight:600}
.preco-nota{
  margin-top:18px;font-size:16px;color:var(--tinta-2);
  border-top:1px solid var(--areia);padding-top:16px;
}

/* ---------- unidades ---------- */
.unidades{display:grid;gap:16px}
.unidade{
  background:var(--branco);border:1px solid var(--areia);border-radius:var(--r);
  padding:24px;display:flex;flex-direction:column;
}
.unidade h3{font-size:22px;margin-bottom:.2em}
.unidade .bairro{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracota);margin-bottom:14px;
}
.unidade address{font-style:normal;font-size:16px;color:var(--tinta-2);margin-bottom:18px}
/* facilidade da unidade (estacionamento, acesso). Icone SVG, nunca emoji. */
.unidade-nota{
  /* align-self, senao o flex do card estica a pilula pela largura toda */
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;width:fit-content;
  margin:-8px 0 18px;padding:6px 13px 6px 10px;
  background:var(--creme-2);border:1px solid var(--areia);border-radius:100px;
  font:500 14px var(--sans);color:var(--oliva-prof);
}
.unidade-nota svg{width:17px;height:17px;flex:none;color:var(--terracota)}
.unidade .btn{margin-top:auto;width:100%}

/* dias de atendimento de cada consultorio */
.horarios{
  list-style:none;margin:0 0 18px;padding:14px 0 0;
  border-top:1px solid var(--areia);display:grid;gap:7px;font-size:15px;
}
.horarios li{display:flex;gap:12px;justify-content:space-between;align-items:baseline}
.horarios b{font-weight:500;color:var(--tinta);flex:none}
.horarios span{color:var(--tinta-2);text-align:right}

.unidade-online{background:var(--oliva-prof);color:#EFEDE2;border-color:var(--oliva-prof)}
.unidade-online h3{color:#FBF8F0}
.unidade-online address{color:#CFD0C2}
.unidade-online .bairro{color:var(--rose)}
.unidade-online .horarios{border-top-color:rgba(231,223,204,.26)}
.unidade-online .horarios b{color:#EFEDE2}
.unidade-online .horarios span{color:#CFD0C2}

/* ---------- serie lancheira (faixa que desliza) ---------- */
.faixa{
  display:grid;grid-auto-flow:column;grid-auto-columns:74%;
  gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:10px;margin-inline:-22px;padding-inline:22px;
  scrollbar-width:none;
}
.faixa::-webkit-scrollbar{display:none}
.faixa figure{margin:0;scroll-snap-align:center}
.faixa img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r);box-shadow:var(--sombra);
}
.dica-arrasta{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin-top:14px;font-size:14.5px;color:var(--tinta-2);
}
.dica-arrasta svg{width:16px;height:16px}

/* ---------- topicos (paginas de fase) ---------- */
.topicos{display:grid;gap:18px}
.topico{
  background:var(--branco);border:1px solid var(--areia);border-radius:var(--r);
  padding:24px 22px;
}
.topico h3{font-size:21px;margin-bottom:.3em}
.topico p{font-size:16px;color:var(--tinta-2);margin:0}
.topico-ico{
  width:40px;height:40px;border-radius:11px;margin-bottom:16px;
  background:var(--creme-2);color:var(--oliva-esc);
  display:grid;place-items:center;
}
.topico-ico svg{width:21px;height:21px}

/* trilha de migalhas */
.migalhas{font-size:15px;color:var(--tinta-2);padding:18px 0 0}
.migalhas a{text-decoration:none;color:var(--tinta-2)}
.migalhas a:hover{color:var(--terracota);text-decoration:underline}
.migalhas span{margin:0 7px;color:var(--areia)}

/* citacao curta, uma por pagina no maximo */
.citacao{
  border-left:2px solid var(--terracota);
  padding:6px 0 6px 22px;margin:30px 0 0;
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,4vw,26px);
  line-height:1.4;color:var(--oliva-esc);max-width:34ch;
  text-wrap:balance;   /* citacao curta e titulo: equilibra as linhas */
}
.secao-verde .citacao{color:#EFEDE2;border-left-color:var(--rose)}

/* ---------- formulario de agendamento ---------- */
.form-card{
  background:var(--branco);border:1px solid var(--areia);border-radius:var(--r);
  padding:26px 22px;box-shadow:var(--sombra);
}
.campo{margin-bottom:22px}
.campo > label,.campo > legend{
  display:block;font-size:14px;font-weight:500;margin-bottom:9px;padding:0;
}
.campo .ajuda{font-size:14.5px;color:var(--tinta-2);margin:-4px 0 10px}
.campo input[type=text],.campo select,.campo textarea{
  width:100%;min-height:52px;padding:13px 15px;
  font:400 16px/1.4 var(--sans);color:var(--tinta);
  background:var(--creme);border:1px solid var(--areia);border-radius:11px;
}
.campo textarea{min-height:96px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oliva);outline-offset:1px}
fieldset{border:0;margin:0 0 22px;padding:0}

.opcoes{display:grid;gap:9px}
.opcao{
  position:relative;display:flex;gap:13px;align-items:flex-start;
  padding:15px 16px;border:1px solid var(--areia);border-radius:12px;
  background:var(--creme);cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease;
}
.opcao:hover{border-color:var(--oliva)}
.opcao input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin:2px 0 0;border-radius:50%;
  border:1.6px solid var(--oliva);background:transparent;cursor:pointer;
}
.opcao input:checked{
  border-width:6px;border-color:var(--oliva-prof);
}
.opcao:has(input:checked){border-color:var(--oliva-prof);background:#F1EFE2}
.opcao b{display:block;font-weight:500;font-size:16px;margin-bottom:2px}
.opcao span{display:block;font-size:14px;color:var(--tinta-2);line-height:1.4}

/* horario e multipla escolha: quadrado com visto, nao bolinha */
.opcao input[type=checkbox]{border-radius:6px}
.opcao input[type=checkbox]:checked{
  border-width:1.6px;border-color:var(--oliva-prof);background-color:var(--oliva-prof);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF8F0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.7 9.4 17.6 19.5 6.8'/%3E%3C/svg%3E");
  background-size:13px 13px;background-position:center;background-repeat:no-repeat;
}

.form-erro{
  background:#FBEAE5;border:1px solid #E0A899;color:#8A3520;
  border-radius:11px;padding:13px 15px;font-size:15px;margin-bottom:18px;
}
.form-nota{font-size:14.5px;color:var(--tinta-2);margin:18px 0 0;line-height:1.5}

.resumo{
  background:var(--creme-2);border:1px solid var(--areia);border-radius:12px;
  padding:18px 18px;margin-bottom:20px;font-size:15px;
}
.resumo h3{font-family:var(--sans);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terracota);margin:0 0 10px;font-weight:500}
.resumo dl{margin:0;display:grid;gap:7px}
.resumo .linha{display:flex;gap:10px;justify-content:space-between;align-items:baseline}
.resumo dt{color:var(--tinta-2);flex:none}
.resumo dd{margin:0;text-align:right;font-weight:500}
.resumo .grupo + .grupo{margin-top:14px;padding-top:14px;border-top:1px solid var(--areia)}
.resumo .grupo > b{display:block;font-weight:500;margin-bottom:6px}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--areia)}
.faq details{border-bottom:1px solid var(--areia)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--serif);font-size:19px;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:1.6px solid var(--oliva);border-bottom:1.6px solid var(--oliva);
  transform:rotate(45deg);transition:transform .28s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .resposta{padding:0 0 22px}
.faq .resposta p{font-size:16px;color:var(--tinta-2);margin-bottom:.6em}
.faq .resposta p:last-child{margin-bottom:0}

/* ---------- chamada final ---------- */
.chamada{text-align:center;padding:70px 0}
.chamada h2{font-size:clamp(30px,7.6vw,48px)}
.chamada p{margin-inline:auto;font-size:18px}
.chamada .acoes{
  display:flex;flex-direction:column;gap:11px;
  max-width:340px;margin:30px auto 0;
}

/* ---------- rodape ----------
   Um tom abaixo do verde das secoes, senao a chamada final e o rodape viram
   um bloco verde so e a pagina parece que nao terminou. */
.rodape{background:#353B2C;color:#CFD0C2;padding:52px 0 26px;font-size:16px}
.rodape a{color:#EFEDE2;text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape-grid{display:grid;gap:32px}
.rodape h4{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose);margin:0 0 14px;font-weight:500;
}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rodape .marca-rodape{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.rodape .marca-rodape img{width:40px;height:50px;object-fit:contain}
.rodape .marca-rodape span{font-family:var(--serif);font-size:19px;color:#FBF8F0}
.rodape-fim{
  border-top:1px solid rgba(231,223,204,.16);
  margin-top:36px;padding-top:22px;
  font-size:14px;color:#A8AC9B;
  display:grid;gap:8px;
}

/* selo do que ainda falta confirmar, some quando confirmar */
.pendente{
  display:inline-block;background:#FFF3D6;color:#7A5A12;
  border:1px dashed #C9A44C;border-radius:6px;
  padding:1px 7px;font-size:12px;letter-spacing:.02em;
}

/* ---------- barra fixa do celular ---------- */
.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(250,247,239,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--areia);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:9px;
  transform:translateY(115%);
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.barra-fixa.visivel{transform:translateY(0)}
.barra-fixa .btn{flex:1;min-height:48px;padding-inline:12px;font-size:15px}
body.tem-barra{padding-bottom:82px}

/* ---------- botao flutuante do WhatsApp ----------
   Fica acima da barra fixa no celular (a barra tem 82px de altura util) e
   desce pro canto quando a barra some, no desktop. Alvo de 56px, bem acima
   dos 44px minimos. */
.zap-flutuante{
  position:fixed;right:16px;z-index:80;
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:56px;height:56px;padding:0;border-radius:100px;
  background:#1F8F4E;color:#fff;text-decoration:none;
  font:600 16px var(--sans);line-height:1;
  box-shadow:0 10px 26px rgba(20,60,35,.28);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease,
             bottom .34s cubic-bezier(.2,.7,.3,1);
}
/* quando a barra fixa do celular sobe, o botao sobe junto pra nao ficar em cima
   dela. So no celular: no desktop a barra e display:none e a classe "visivel"
   continua la, o que subiria o botao a toa. */
@media (max-width:920px){
  body:has(.barra-fixa.visivel) .zap-flutuante{bottom:calc(94px + env(safe-area-inset-bottom))}
}
.zap-flutuante svg{width:28px;height:28px;flex:none}
.zap-flutuante .zap-txt{display:none}
.zap-flutuante:hover{background:#1A7A42;transform:translateY(-2px);box-shadow:0 14px 30px rgba(20,60,35,.32)}
.zap-flutuante:active{transform:translateY(0) scale(.98)}
/* pagina sem barra fixa (agendar): o corpo ganha folga pro botao nao cobrir o
   fim do formulario */
body:not(:has(.barra-fixa)){padding-bottom:76px}

@media (min-width:921px){
  .zap-flutuante{
    right:24px;bottom:24px;
    width:auto;height:auto;min-height:56px;padding:0 22px 0 18px;
  }
  .zap-flutuante .zap-txt{display:inline}
}

/* ---------- reveal ao rolar ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.visto{opacity:1;transform:none}

/* alvo de toque no celular: link de lista precisa de 40px de altura util.
   Vive so aqui embaixo, o desktop segue igual. */
@media (max-width:920px){
  .rodape ul a,.rodape ul li > a{display:inline-block;padding:9px 0}
  .rodape ul{gap:2px}
  .migalhas a{display:inline-block;padding:8px 0}
  .faq .resposta a,.topico p a,.receita a{display:inline-block;padding:9px 0}
}

/* ==========================================================================
   Reduced motion: tira o MOVIMENTO, nunca a funcionalidade nem o conteudo
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .barra-fixa{transition:none}
  .faixa{scroll-behavior:auto}
}

/* ==========================================================================
   Telas maiores. O celular ja esta resolvido acima.
   ========================================================================== */
@media (min-width:560px){
  .hero-acoes{flex-direction:row;flex-wrap:wrap}
  .hero-acoes .btn{flex:1 1 auto}
  .credenciais{grid-template-columns:repeat(3,1fr);gap:0}
  .credenciais div{border-bottom:0;border-right:1px solid var(--areia);padding:18px 20px}
  .credenciais div:first-child{padding-left:0}
  .credenciais div:last-child{border-right:0}
  .fases{grid-template-columns:repeat(2,1fr)}
  .precos{grid-template-columns:repeat(2,1fr)}
  /* eram 2 notas; com o recibo do convenio (confirmado por ela em 18/08/2026)
     passaram a 3, e em 2 colunas a terceira ficava orfa na linha de baixo */
  .investimento-notas{grid-template-columns:repeat(3,1fr)}
  .topicos{grid-template-columns:repeat(2,1fr)}
  .faixa{grid-auto-columns:44%}
  .chamada .acoes{flex-direction:row;max-width:none;justify-content:center}
}

@media (min-width:860px){
  .rodape-grid{grid-template-columns:1.5fr 1fr 1fr}
  .unidades{grid-template-columns:repeat(3,1fr)}
  .faixa{grid-auto-columns:30%}
}

@media (min-width:921px){
  body{font-size:17.5px}
  .secao{padding:92px 0}

  /* menu vira barra e o hamburguer some de vez */
  .nav-toggle{display:none}
  .main-nav{
    position:static;display:flex !important;align-items:center;gap:26px;
    background:transparent;border:0;padding:0;
  }
  .main-nav ul{display:flex;gap:26px;margin:0}
  .main-nav ul a{border:0;padding:6px 0;font-size:15.5px;position:relative}
  .main-nav ul a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
    background:var(--terracota);transition:right .3s ease;
  }
  .main-nav ul a:hover::after,.main-nav ul a[aria-current="page"]::after{right:0}
  .nav-acoes{flex-direction:row;gap:9px}
  .nav-acoes .btn{width:auto;min-height:44px;padding:10px 20px;font-size:15px}

  .hero{padding:56px 0 84px}
  .hero-in{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px}
  .hero-foto img{aspect-ratio:3/4}
  /* Paginas de fase: o texto e mais curto que a foto 3/4, e centralizado ele
     comecava 146px ABAIXO do topo da foto. Pedido dela em 02/09/2026 ("aqui
     daria pra subir a escrita?"). So nas paginas com esse desenho: a home, a de
     adultos e a do ebook tem o texto mais alto que a foto e ficam como estao. */
  .hero-topo .hero-in{align-items:start}

  .fases{grid-template-columns:repeat(3,1fr)}
  .faixa{grid-auto-columns:22%}

  .barra-fixa{display:none}
  body.tem-barra{padding-bottom:0}
  body:not(:has(.barra-fixa)){padding-bottom:0}

  /* passos em duas colunas no desktop */
  .passos-2col{grid-template-columns:repeat(2,1fr);column-gap:44px}
  .passos-2col .passo:nth-last-child(2){border-bottom:0}
}

@media (min-width:1100px){
  .hero h1{font-size:60px}
  .secao-dupla{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .secao-dupla .cabeca{margin-bottom:0}
}

/* ==========================================================================
   Cupons de parceiro. A pagina existe como CURADORIA ("marcas que eu uso"),
   nao como pagina de desconto: e prova de autoridade, nao promocao.
   ========================================================================== */
.cupons{display:grid;gap:14px}
.cupom{
  background:var(--branco);border:1px solid var(--areia);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .22s ease,box-shadow .22s ease;
}
.cupom:hover{border-color:var(--oliva);box-shadow:var(--sombra)}
/* Chip da marca: fundo branco fixo pra normalizar logos que vem em fundo
   claro, preto, verde, azul e rosa. Sem isso a grade vira colcha de retalhos. */
.cupom-marca{
  position:relative;height:96px;
  background:#fff;border:1px solid var(--areia);border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  padding:10px 18px;overflow:hidden;
}
.cupom-marca img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
/* fallback pra marca sem arquivo de logo utilizavel */
.cupom-marca .sem-logo{
  font-family:var(--serif);font-size:24px;color:var(--oliva-esc);letter-spacing:-.01em;
}
.cupom-marca .off{position:absolute;right:8px;top:8px}
/* logo horizontal comprido: abre espaco pro selo de desconto nao cair em cima dele */
.cupom-marca.logo-largo{padding-right:82px}

.cupom h3{margin:0;font-size:21px}
.cupom-desc{
  margin:-4px 0 0;font-size:15px;line-height:1.45;color:var(--tinta-2);max-width:none;
}
.cupom-loja{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:500;color:var(--terracota);text-decoration:none;
  min-height:40px;
}
.cupom-loja svg{width:15px;height:15px;flex:none;transition:transform .22s ease}
.cupom-loja:hover{text-decoration:underline}
.cupom:hover .cupom-loja svg{transform:translate(2px,-2px)}
.cupom .off{
  flex:none;font-family:var(--sans);font-size:12.5px;font-weight:600;
  background:var(--oliva-prof);color:#FBF8F0;
  border-radius:100px;padding:4px 11px;white-space:nowrap;
}
/* No celular o codigo fica numa linha so e o botao embaixo. Codigo quebrado
   no meio ("GIOVANNALICASTR / O") faz a pessoa errar ao digitar na mao. */
.cupom-codigo{
  display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:auto;
  background:var(--creme);border:1px dashed var(--oliva);border-radius:11px;
  padding:12px 14px;
}
.cupom-codigo code{
  min-width:0;font-family:var(--sans);font-size:15.5px;font-weight:600;
  letter-spacing:.02em;color:var(--tinta);
  word-break:normal;overflow-wrap:anywhere;text-align:center;
}
.copiar{
  flex:none;min-height:42px;padding:8px 14px;width:100%;justify-content:center;
  background:var(--oliva-prof);color:#FBF8F0;border:0;border-radius:100px;
  font:500 14px var(--sans);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:background-color .2s ease;
}
.copiar svg{width:15px;height:15px}
.copiar:hover{background:#39402F}
.copiar.feito{background:#1F8F4E}

/* ==========================================================================
   Ebook
   ========================================================================== */
.ebook-capa{
  background:var(--creme-2);border:1px solid var(--areia);border-radius:var(--r);
  padding:30px 24px;text-align:center;
}
.ebook-capa .script{
  font-family:var(--script);font-size:clamp(42px,10vw,58px);
  color:var(--oliva-esc);margin:0 0 6px;line-height:.95;
}
.ebook-capa .sub{font-size:16px;color:var(--tinta-2);margin:0}
.ebook-capa img{width:64px;height:80px;object-fit:contain;margin:0 auto 18px}

.indice{list-style:none;margin:0;padding:0;display:grid;gap:0}
.indice li{
  display:flex;gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--areia);font-size:16.5px;
}
.indice li:last-child{border-bottom:0}
.indice b{
  flex:none;width:26px;font-family:var(--serif);font-size:17px;
  color:var(--terracota);font-weight:400;
}

.receita{
  background:var(--branco);border:1px solid var(--areia);border-radius:var(--r);
  padding:26px 22px;
}
.receita h3{font-size:23px;margin-bottom:.5em}
.receita h4{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracota);margin:22px 0 10px;font-weight:500;
}
.receita ul,.receita ol{margin:0;padding-left:20px;display:grid;gap:7px}
.receita li{font-size:16px;color:var(--tinta-2);line-height:1.5}

/* Foto da receita: UM slot so, 16/9 nas tres abas, no celular e no desktop.
   O recorte de cada foto ja foi feito nesse mesmo aspecto, entao o cover nao
   amputa nada. No celular a faixa sangra ate a borda do card; no desktop ela
   vira a coluna da esquerda, colada no canto. */
.receita-foto{margin:-26px -22px 22px;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.receita-foto img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.receita-foto figcaption{
  font-size:11.5px;letter-spacing:.02em;color:var(--tinta-2);opacity:.62;
  padding:7px 22px 0;
}
.receita-foto figcaption a{color:inherit}

@media (min-width:921px){
  /* o card da receita para de esticar em 900px: a linha de texto passaria de
     80 caracteres na largura cheia, e a faixa da foto ficaria alta demais */
  .receita{max-width:900px;padding:30px 30px 34px}
  .receita-foto{margin:-30px -30px 26px}
  .receita-foto figcaption{padding:8px 30px 0}
}

.compras{display:grid;gap:20px}
.compras section h4{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracota);margin:0 0 9px;font-weight:500;
}
.compras ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.compras li{
  position:relative;padding-left:24px;font-size:16px;color:var(--tinta-2);line-height:1.45;
}
.compras li::before{
  content:"";position:absolute;left:0;top:8px;
  width:11px;height:11px;border:1px solid var(--oliva);border-radius:3px;
}

@media (min-width:680px){
  .cupons{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .cupons{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:560px){
  .compras{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:921px){
  .compras{grid-template-columns:repeat(3,1fr)}
}

/* ==========================================================================
   Receitas: multiplicador de porcao, lista de compras que marca, abas.
   Tudo funciona sem JS: sem script, aparece 1x, os checkbox sao normais
   e as tres receitas ficam abertas.
   ========================================================================== */

/* ---------- multiplicador ---------- */
.dobrar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:var(--branco);border:1px solid var(--areia);border-radius:var(--r);
  padding:16px 18px;margin-bottom:26px;
}
.dobrar p{margin:0;font-size:15.5px;color:var(--tinta-2);flex:1 1 210px}
.dobrar b{color:var(--tinta);font-weight:500}
.dobrar-btns{display:flex;gap:7px;background:var(--creme);border-radius:100px;padding:4px}
.dobrar-btns button{
  min-height:42px;padding:8px 18px;border:0;border-radius:100px;
  background:transparent;color:var(--tinta-2);cursor:pointer;
  font:500 15px var(--sans);transition:background-color .2s ease,color .2s ease;
}
.dobrar-btns button:hover{color:var(--tinta)}
.dobrar-btns button[aria-pressed="true"]{background:var(--oliva-prof);color:#FBF8F0}

.q{font-variant-numeric:tabular-nums;font-weight:600;color:var(--tinta)}
.un{font-weight:500;color:var(--tinta)}
/* Na secao verde o texto e claro: a quantidade tem que clarear junto, senao
   fica quase preto sobre verde escuro e ninguem le. */
.secao-verde .q,.secao-verde .un{color:#FBF8F0}
.secao-verde .q.mudou{animation:pisca-escuro .5s ease}
@keyframes pisca-escuro{0%{background:rgba(228,207,197,.35)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.secao-verde .q.mudou{animation:none}}
.q.mudou{animation:pisca .5s ease}
@keyframes pisca{0%{background:#FFF3D6}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.q.mudou{animation:none}}

/* ---------- lista de compras que marca ---------- */
.lista-topo{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:20px;
}
.lista-progresso{flex:1 1 200px;min-width:0}
.lista-progresso p{margin:0 0 7px;font-size:15px;color:var(--tinta-2)}
.lista-progresso .barra{height:6px;background:var(--areia);border-radius:100px;overflow:hidden}
.lista-progresso .barra i{
  display:block;height:100%;width:0;background:var(--oliva);
  border-radius:100px;transition:width .35s ease;
}
@media (prefers-reduced-motion:reduce){.lista-progresso .barra i{transition:none}}
.lista-acoes{display:flex;gap:8px;flex-wrap:wrap}
.lista-acoes button{
  min-height:44px;padding:10px 16px;
  background:transparent;border:1px solid var(--areia);border-radius:100px;
  font:500 14.5px var(--sans);color:var(--tinta);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:border-color .2s ease,background-color .2s ease;
}
.lista-acoes button:hover{border-color:var(--oliva);background:rgba(139,142,111,.08)}
.lista-acoes button svg{width:16px;height:16px}
.lista-acoes button.feito{border-color:#1F8F4E;color:#1F8F4E}

.compras li{list-style:none}
.compras label{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;cursor:pointer;min-height:44px;
  font-size:16px;color:var(--tinta-2);line-height:1.45;
}
.compras label input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:21px;height:21px;margin:2px 0 0;
  border:1.6px solid var(--oliva);border-radius:6px;background:var(--branco);
  cursor:pointer;position:relative;transition:background-color .18s ease;
}
.compras label input:checked{background:var(--oliva-prof);border-color:var(--oliva-prof)}
.compras label input:checked::after{
  content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #FBF8F0;border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.compras label:has(input:checked) span{text-decoration:line-through;opacity:.5}
.compras li::before{content:none}

/* ---------- abas das receitas ---------- */
/* Sao so tres abas: quebrar linha mostra todas. Rolar de lado deixaria a
   terceira cortada na borda da tela sem ninguem perceber. */
.abas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.abas button{
  flex:none;min-height:46px;padding:11px 20px;
  background:var(--branco);border:1px solid var(--areia);border-radius:100px;
  font:500 15px var(--sans);color:var(--tinta-2);cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.abas button:hover{border-color:var(--oliva);color:var(--tinta)}
.abas button[aria-selected="true"]{
  background:var(--oliva-prof);border-color:var(--oliva-prof);color:#FBF8F0;
}
.painel[hidden]{display:none !important}
.painel + .painel{margin-top:26px}   /* sem JS as tres ficam empilhadas */

.receita .rende{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;color:var(--tinta-2);
  background:var(--creme-2);border-radius:100px;padding:6px 14px;margin-bottom:4px;
}
.receita .rende svg{width:15px;height:15px;color:var(--oliva)}

.aviso-copia{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);
  background:var(--oliva-prof);color:#FBF8F0;
  padding:12px 20px;border-radius:100px;font-size:15px;
  box-shadow:var(--sombra-alta);z-index:90;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.aviso-copia.aberto{opacity:1;transform:translate(-50%,0)}
@media (min-width:921px){.aviso-copia{bottom:32px}}

/* ---------- como chegar (unidades) ---------- */
.unidade-acoes{display:grid;gap:9px;margin-top:auto}
.unidade-acoes .btn{width:100%}
.como-chegar{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 16px;
  border:1px solid var(--areia);border-radius:100px;
  font:500 15px var(--sans);color:var(--tinta);text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.como-chegar:hover{border-color:var(--oliva);background:rgba(139,142,111,.08)}
.como-chegar svg{width:17px;height:17px;flex:none;color:var(--terracota)}
.unidade-online .como-chegar{
  border-color:rgba(231,223,204,.4);color:#EFEDE2;
}
.unidade-online .como-chegar:hover{background:rgba(231,223,204,.12)}

/* ---------- grade de fases com 4 caminhos (entrou a de performance) ----------
   O padrao de 3 colunas deixaria o 4o card sozinho numa linha. Aqui a grade vai
   de 1 coluna (celular) pra 2 (tablet) e 4 (desktop largo), sempre linha cheia.
   Nada disso muda a grade de 3 cards das outras secoes. */
@media (min-width:920px){.fases-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.fases-4{grid-template-columns:repeat(4,1fr);gap:14px}}
@media (min-width:1080px){
  .fases-4 .fase h3{font-size:21px}
  .fases-4 .fase p{font-size:15px}
  .fases-4 .fase-txt{padding:18px 17px 20px}
}