/* Ciranda — Clínica Pediátrica (demo do catálogo ZFX)
   Fredoka (títulos, arredondada) + Nunito (texto). Pêssego quente, laranja-sol e verde-menta. */

:root{
  --fundo:#FFFBF5;
  --fundo2:#FFF3E2;
  --dobra:#FFF1D6;
  --papel:#FFFFFF;
  --texto:#2E2A26;
  --suave:rgba(46,42,38,.68);
  --tenue:rgba(46,42,38,.46);
  --linha:rgba(46,42,38,.13);
  --sol:#E8792F;
  --sol-escuro:#B9561A;
  --sol-claro:#FFD9A8;
  --menta:#2A9D8F;
  --menta-clara:#DDF2EC;
  --menta-escura:#1F6F65;
  --amarelo:#F4C15D;
  --coral:#E76F51;
  --gap:clamp(1.3rem,3vw,2.2rem);
  --sec-y:clamp(60px,8vw,104px);
  --wrap:1140px;
  --raio:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fundo);color:var(--texto);
  font-family:"Nunito","Segoe UI",Arial,sans-serif;
  font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{margin:0;font-weight:600;font-family:"Fredoka","Nunito",sans-serif;letter-spacing:-.01em;color:var(--texto)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--sol);color:#fff}
:focus-visible{outline:3px solid var(--menta);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:fixed;left:-999px;top:0;z-index:80;background:var(--papel);border:1px solid var(--linha);padding:.7rem 1.1rem;border-radius:8px}
.pular:focus{left:1rem;top:1rem}

.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
.grid-esp>*,.equipe>*,.primeira>*,.vacinas>*,.dicas>*,.contato>*,.marcar-campos>*,.card-prof-corpo,.hero-in>*{min-width:0}

/* ── botões ───────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.7rem;border:2px solid var(--sol);border-radius:999px;
  background:var(--sol);color:#fff;cursor:pointer;
  font-size:.92rem;font-weight:700;letter-spacing:.01em;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .15s ease;
}
.btn:hover{background:var(--sol-escuro);border-color:var(--sol-escuro)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn-grande{padding:1.05rem 2rem;font-size:1rem}
.btn-claro{background:#fff;border-color:#fff;color:var(--sol-escuro)}
.btn-claro:hover{background:var(--sol-claro);border-color:var(--sol-claro)}
.link-sub{
  display:inline-block;font-size:.9rem;font-weight:700;color:var(--sol-escuro);
  padding:0 0 .15rem;border:0;border-bottom:2px solid var(--sol-claro);background:none;cursor:pointer;
}
.link-sub:hover{border-color:var(--sol)}
.link-claro{color:#fff;border-color:rgba(255,255,255,.4)}

/* ── topo ─────────────────────────────────────── */
.topo{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(255,251,245,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
  transform:translateY(-100%);transition:transform .4s ease;
}
.topo.is-on{transform:none}
.topo-in{width:min(100% - 2rem,var(--wrap));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
.topo-marca{display:flex;align-items:center;gap:.5rem;font-family:"Fredoka",sans-serif;font-size:1.25rem;font-weight:600;color:var(--sol-escuro)}
.topo-nav{display:flex;align-items:center;gap:1.5rem}
.topo-nav a{font-size:.9rem;font-weight:600;color:var(--suave);transition:color .3s}
.topo-nav a:hover{color:var(--texto)}
.topo-cta{display:flex;align-items:center;gap:1rem}
.topo-cta .btn{padding:.6rem 1.2rem;font-size:.84rem}
.topo-menu-btn{display:none;background:none;border:none;padding:.4rem;cursor:pointer}
@media (max-width:900px){
  .topo-nav,.topo-cta .link-sub{display:none}
  .topo-menu-btn{display:block}
}

.menu-movel{
  position:fixed;inset:0;z-index:70;background:var(--dobra);
  display:flex;flex-direction:column;padding:1.4rem;overflow:auto;
  transform:translateX(100%);transition:transform .3s ease;
}
.menu-movel.is-on{transform:none}
.menu-movel-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.6rem}
.menu-movel-fechar{background:none;border:0;padding:.4rem;cursor:pointer}
.menu-movel a{display:block;padding:.9rem 0;font-family:"Fredoka",sans-serif;font-size:1.35rem;border-bottom:1px solid var(--linha)}

/* ── dobra: cartão de marcação ─────────────────── */
.hero{position:relative;background:var(--dobra);padding:clamp(3.4rem,8vw,6rem) 0 clamp(3rem,7vw,5rem);overflow:hidden;isolation:isolate}
.hero-forma{position:absolute;width:clamp(180px,26vw,340px);height:auto;z-index:-1;pointer-events:none}
.hero-forma-a{top:-60px;left:-70px}
.hero-forma-b{bottom:-90px;right:-80px}
.hero-in{text-align:center}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;max-width:14ch;margin-inline:auto}
.hero-sub{color:var(--suave);font-size:clamp(1rem,1.6vw,1.15rem);max-width:46ch;margin:1rem auto 2rem}

.marcar{
  background:var(--papel);border-radius:calc(var(--raio) + 6px);text-align:left;
  padding:clamp(1.2rem,3vw,2rem);max-width:980px;margin-inline:auto;
  box-shadow:0 24px 60px -30px rgba(185,86,26,.35),0 2px 0 rgba(46,42,38,.04);
  display:grid;gap:1.3rem;
}
.marcar-rotulo{display:flex;align-items:center;gap:.6rem;font-family:"Fredoka",sans-serif;font-size:1.05rem;margin-bottom:.7rem}
.marcar-rotulo .num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sol);color:#fff;font-size:.82rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:999px;
  border:2px solid var(--linha);background:var(--fundo);cursor:pointer;font-weight:700;font-size:.9rem;
  transition:border-color .2s,background .2s,color .2s;
}
.chip svg{color:var(--sol)}
.chip:hover{border-color:var(--sol-claro);background:var(--fundo2)}
.chip[aria-pressed="true"]{border-color:var(--sol);background:var(--sol);color:#fff}
.chip[aria-pressed="true"] svg{color:#fff}
.chip-prof{padding:.45rem 1rem .45rem .45rem}
.chip-prof img,.chip-prof .avatar-ini{width:36px;height:36px;border-radius:50%;object-fit:cover}
.chip-prof span{display:flex;flex-direction:column;line-height:1.2}
.chip-prof small{font-weight:400;font-size:.74rem;opacity:.75}
.avatar-ini{display:inline-grid;place-items:center;background:var(--menta-clara);color:var(--menta-escura);font-family:"Fredoka",sans-serif;font-weight:600;font-size:.9rem}
.chip[aria-pressed="true"] .avatar-ini{background:rgba(255,255,255,.25);color:#fff}

.slots{display:grid;gap:.9rem}
.slots-dia b{display:block;font-size:.84rem;color:var(--tenue);text-transform:capitalize;margin-bottom:.4rem}
.slots-dia .chips{gap:.45rem}
.chip-hora{padding:.5rem .9rem;font-variant-numeric:tabular-nums;background:#fff}
.slots-vazio,.slots-carregando{color:var(--tenue);font-size:.92rem;padding:.6rem 0}
.slots-mais{justify-self:start}

.marcar-form{display:grid;gap:1rem;border-top:1px dashed var(--linha);padding-top:1.2rem}
.marcar-resumo{background:var(--menta-clara);color:var(--menta-escura);border-radius:12px;padding:.8rem 1rem;font-weight:700;font-size:.94rem}
.marcar-campos{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.marcar-campos label,.form label{display:block;font-size:.82rem;font-weight:700;margin-bottom:.35rem}
.marcar-campos input,.form input,.form textarea{
  width:100%;padding:.8rem .9rem;border:2px solid var(--linha);border-radius:12px;background:var(--fundo);font-size:.95rem;
}
.marcar-campos input:focus-visible,.form input:focus-visible,.form textarea:focus-visible{outline:3px solid var(--menta);outline-offset:0;border-color:transparent}
.marcar-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
@media (max-width:860px){.marcar-campos{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.marcar-campos{grid-template-columns:1fr}.hero-forma-a{width:150px}}

/* ── seções ───────────────────────────────────── */
.secao{padding-block:var(--sec-y)}
.secao-alt{background:var(--fundo2)}
.secao-verde{background:var(--menta-clara)}
.secao-cab{max-width:620px;margin-bottom:clamp(2rem,4vw,3rem)}
.secao-cab h2{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.15}
.secao-cab p{margin-top:.8rem;color:var(--suave);font-size:1.05rem}

/* especialidades */
.grid-esp{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card-esp{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:1.7rem;display:flex;flex-direction:column;gap:.5rem}
.card-esp-ico{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--sol-claro);color:var(--sol-escuro);margin-bottom:.4rem}
.card-esp h3{font-size:1.15rem}
.card-esp p{color:var(--suave);font-size:.93rem;flex:1}
.card-esp .link-sub{align-self:flex-start;margin-top:.6rem}
@media (max-width:900px){.grid-esp{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-esp{grid-template-columns:1fr}}

/* equipe */
.equipe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card-prof{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:1.6rem;display:flex;gap:1.1rem;align-items:flex-start}
.card-prof-foto img,.card-prof-foto .avatar-ini{width:72px;height:72px;border-radius:50%;object-fit:cover;font-size:1.3rem;flex:none}
.card-prof-foto{flex:none}
.card-prof h3{font-size:1.08rem}
.card-prof .esp{display:inline-block;font-size:.74rem;font-weight:700;color:var(--menta-escura);background:var(--menta-clara);border-radius:999px;padding:.24rem .65rem;margin:.35rem .3rem .2rem 0}
.card-prof .reg{display:block;font-size:.76rem;color:var(--tenue)}
.card-prof .bio{margin:.6rem 0 .7rem;color:var(--suave);font-size:.9rem}
@media (max-width:1000px){.equipe{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.equipe{grid-template-columns:1fr}}

/* primeira consulta */
.primeira{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.primeira-foto{border-radius:var(--raio);overflow:hidden;aspect-ratio:4/5;background:var(--fundo2)}
.primeira-foto img{width:100%;height:100%;object-fit:cover}
.passos{display:grid;gap:1.2rem;counter-reset:passo}
.passos li{position:relative;padding-left:3.2rem}
.passos li::before{
  counter-increment:passo;content:counter(passo);
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--amarelo);font-family:"Fredoka",sans-serif;font-weight:600;
}
.passos h3{font-size:1.05rem;margin-bottom:.2rem}
.passos p{color:var(--suave);font-size:.93rem}
@media (max-width:800px){.primeira{grid-template-columns:1fr}.primeira-foto{aspect-ratio:16/9}}

/* vacinas */
.vacinas{display:grid;grid-template-columns:1.4fr .8fr;gap:var(--gap);align-items:start}
.tab-vacinas{width:100%;border-collapse:collapse;background:var(--papel);border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha)}
.tab-vacinas th,.tab-vacinas td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--linha);vertical-align:top;font-size:.9rem}
.tab-vacinas thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue);background:var(--fundo2)}
.tab-vacinas-rolar{overflow-x:auto;border-radius:var(--raio)}
.tab-vacinas tbody th{font-family:"Fredoka",sans-serif;font-weight:600;color:var(--menta-escura);width:110px}
.vac{display:inline-block;margin:.15rem .45rem .15rem 0}
.vac small{color:var(--tenue);font-size:.78rem}
.vacinas-cta{background:var(--papel);border-radius:var(--raio);padding:1.8rem;border:1px solid var(--linha);display:grid;gap:.7rem;justify-items:start;position:sticky;top:84px}
.vacinas-cta svg{color:var(--sol)}
.vacinas-cta h3{font-size:1.2rem}
.vacinas-cta p{color:var(--suave);font-size:.93rem}
.vacinas-cta small{font-size:.76rem;color:var(--tenue);line-height:1.5}
@media (max-width:820px){.vacinas{grid-template-columns:1fr}.vacinas-cta{position:static}}

/* dicas */
.dicas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.card-dica{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column}
.card-dica-foto{aspect-ratio:3/2;background:var(--fundo2)}
.card-dica-foto img{width:100%;height:100%;object-fit:cover}
.card-dica-corpo{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-dica h3{font-size:1.05rem}
.card-dica p{color:var(--suave);font-size:.9rem}
.card-dica details{margin-top:auto;font-size:.9rem}
.card-dica summary{cursor:pointer;font-weight:700;color:var(--sol-escuro);list-style:none;padding-top:.4rem}
.card-dica summary::-webkit-details-marker{display:none}
.card-dica summary::after{content:" +"}
.card-dica details[open] summary::after{content:" −"}
.dica-texto{padding-top:.6rem;color:var(--suave);line-height:1.6}
@media (max-width:1000px){.dicas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dicas{grid-template-columns:1fr}}

/* convênios */
.convenios{display:flex;flex-wrap:wrap;gap:.7rem}
.convenios li{display:inline-flex;align-items:center;gap:.5rem;background:var(--papel);border:1px solid var(--linha);border-radius:999px;padding:.6rem 1.1rem;font-weight:700;font-size:.92rem}
.convenios svg{color:var(--menta)}

/* faq */
.faq{display:grid;gap:.7rem;max-width:760px}
.faq-item{border:1px solid var(--linha);border-radius:var(--raio);background:var(--papel);overflow:hidden}
.faq-pergunta{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;text-align:left;background:none;border:none;cursor:pointer;font-weight:700;font-size:.98rem}
.faq-pergunta svg{flex:none;transition:transform .3s ease;color:var(--sol)}
.faq-item.is-on .faq-pergunta svg{transform:rotate(45deg)}
.faq-resposta{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-resposta-in{padding:0 1.3rem 1.2rem;color:var(--suave);font-size:.94rem}

/* contato */
.contato{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem)}
.contato-info{display:grid;gap:1.1rem}
.contato-item{display:flex;gap:.8rem;align-items:flex-start}
.contato-item svg{flex:none;color:var(--menta-escura);margin-top:.15rem}
.contato-item b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);margin-bottom:.1rem}
.form{display:grid;gap:1rem;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:clamp(1.3rem,3vw,2rem);align-self:start}
.form textarea{resize:vertical;min-height:120px}
.form .linha2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .btn{justify-self:start}
@media (max-width:820px){.contato{grid-template-columns:1fr}.form .linha2{grid-template-columns:1fr}}
.form-msg{font-size:.92rem;padding:.8rem 1rem;border-radius:12px}
.form-msg.ok{background:var(--menta-clara);color:var(--menta-escura)}
.form-msg.erro{background:#FBE3DC;color:#9A3A22}

/* rodapé */
.rodape{background:#2B3A36;color:rgba(255,251,245,.8);padding-block:var(--sec-y)}
.rodape-topo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.6rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.12)}
.rodape-marca{font-family:"Fredoka",sans-serif;font-size:1.4rem;color:#fff;display:flex;align-items:center;gap:.5rem}
.rodape-marca small{font-family:"Nunito",sans-serif;font-size:.85rem;opacity:.7;margin-left:.3rem}
.rodape-marca svg{color:var(--amarelo)}
.rodape-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.rodape-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-top:2.2rem}
.rodape-col h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-bottom:.9rem;font-family:"Nunito",sans-serif}
.rodape-col ul{display:grid;gap:.6rem;font-size:.92rem}
.rodape-col a:hover{color:#fff}
.rodape-fim{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:rgba(255,255,255,.45);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem}
@media (max-width:760px){.rodape-cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.rodape-cols{grid-template-columns:1fr}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .topo,.menu-movel,.faq-resposta,.chip,.btn{transition:none}
}