/* Clinica Giatti | CSS nao critico (abaixo da dobra). Carregado com preload + onload. */

/* ---------- Secoes ---------- */
.section{padding:clamp(52px,7vw,96px) 0}
.section--alt{background:var(--surface-2)}
.section--dark{background:var(--brand);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:#DCE6E8}
.section__head{max-width:60ch;margin-bottom:clamp(30px,4vw,48px)}
.section__head p{margin-top:14px;color:var(--ink-2);font-size:1.05rem}
.section--dark .section__head p{color:#C6D6D9}
.kicker{display:block;margin-bottom:12px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.section--dark .kicker{color:var(--gold-pale)}

.grid{display:grid;gap:18px}
@media (min-width:600px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:768px){.grid--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:600px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Cartoes ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px}
.section--alt .card{background:#fff}
/* Cartao branco sobre seção branca sumiria. Em seção clara sem o tom alternado,
   o cartao usa o tom quente para continuar se destacando. */
.section:not(.section--alt):not(.section--dark) .card,
.section:not(.section--alt):not(.section--dark) .cond a,
.section:not(.section--alt):not(.section--dark) .gcard,
.section:not(.section--alt):not(.section--dark) .faq details,
.section:not(.section--alt):not(.section--dark) .ctabar{background:var(--surface-2)}
.card h3{margin-bottom:9px}
.card p{font-size:.97rem;color:var(--ink-2);max-width:none}
.card__icon{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin-bottom:18px;
  border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.card__icon svg{width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:1.6}
/* Icones de traco reaproveitados da pagina anterior, repintados na cor da marca. */
.card__icon img{width:46px;height:46px;object-fit:contain}
/* Cartao com foto no topo, usado na secao de estetica */
#estetica .card{padding:0;overflow:hidden}
.card__foto{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-3)}
.card__foto picture{display:block;width:100%;height:100%}
.card__foto img{width:100%;height:100%;object-fit:cover}
#estetica .card h3{margin:20px 22px 9px}
#estetica .card p{margin:0 22px 22px}
.section--alt .card__icon{background:#fff}

/* Lista de condicoes: cada item ancora para o formulario */
.cond{display:grid;gap:14px}
@media (min-width:600px){.cond{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cond{grid-template-columns:repeat(4,1fr)}}
.cond a{
  display:block;height:100%;overflow:hidden;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.cond__foto{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-3)}
.cond__foto picture{display:block;width:100%;height:100%}
.cond__foto img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.cond a:hover .cond__foto img{transform:scale(1.04)}
.cond__corpo{display:block;padding:20px}
.cond a:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.cond h3{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 20px 8px;font-size:1.1rem}
.cond h3 svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--gold);stroke-width:2;transition:transform .2s var(--ease)}
.cond a:hover h3 svg{transform:translateX(3px)}
.cond p{font-size:.94rem;color:var(--ink-2);max-width:none;margin:0 20px 20px}

/* ---------- Autoridade ---------- */
.doc{display:grid;gap:clamp(28px,4vw,54px);align-items:start}
@media (min-width:900px){.doc{grid-template-columns:.85fr 1.15fr}}
.doc .shot{aspect-ratio:4/5;position:sticky;top:calc(var(--topbar-h) + 24px)}
@media (max-width:899px){.doc .shot{position:static;max-width:420px}}
.doc__body p+p{margin-top:16px}
.doc__body p{color:#DCE6E8}
.creds{display:grid;gap:12px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
@media (min-width:640px){.creds{grid-template-columns:repeat(2,1fr)}}
.creds li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:#DCE6E8;line-height:1.45}
.creds svg{width:18px;height:18px;flex:none;margin-top:3px;fill:none;stroke:var(--gold-pale);stroke-width:1.8}
.doc__name{margin-bottom:4px}
.doc__crm{font-size:.9rem;letter-spacing:.06em;color:var(--gold-pale);margin-bottom:22px}

/* ---------- Passos ---------- */
.steps{counter-reset:s;display:grid;gap:18px}
@media (min-width:768px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;position:relative;padding:26px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg)}
.steps li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:15px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:.92rem;font-weight:600;font-family:'Lora',Georgia,serif}
.steps h3{font-size:1.05rem;margin-bottom:7px}
.steps p{font-size:.94rem;color:var(--ink-2);max-width:none}

/* ---------- Estrutura e mapa ---------- */
.local{display:grid;gap:clamp(26px,4vw,44px)}
@media (min-width:900px){.local{grid-template-columns:1fr 1fr}}
.local dl{display:grid;gap:20px;margin:0}
.local dt{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.local dd{margin:0;color:var(--ink-2)}
.local dd a{font-weight:600}
.shot--wide{aspect-ratio:16/9}
/* Mais alto de proposito: enquadramento curto so mostrava o ponto, e a ideia e dar
   para reconhecer as redondezas antes de sair de casa. */
/* width:100% e obrigatorio aqui: com aspect-ratio mais min-height, o navegador deriva
   a LARGURA da altura minima (420 x 4/5 = 336px) e estoura a tela em aparelho estreito. */
.mapa{position:relative;width:100%;max-width:100%;aspect-ratio:4/5;min-height:420px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface-3)}
@media (min-width:600px){.mapa{aspect-ratio:16/12}}
@media (min-width:900px){.mapa{aspect-ratio:4/3;min-height:480px}}
.mapa iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Formulario ---------- */
.form-wrap{max-width:660px;margin-inline:auto}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
/* Cabecalho no estilo da barra de conversa do WhatsApp */
/* O cabecalho usa o verde escuro do app, que aceita texto branco. */
.form-topo{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--wa-teal);color:#fff}
.form-topo__ava{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:50%;background:#fff}
.form-topo__ava img{width:26px;height:26px;object-fit:contain}
.form-topo b{display:block;font-size:.98rem;font-weight:600;line-height:1.25}
.form-topo span{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#CFE9E2;line-height:1.3;margin-top:2px}
.form-topo span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wa)}
.form-corpo{padding:clamp(20px,3.2vw,32px);background:#F4F1EC}
.form-card .form-note{padding:0 clamp(20px,3.2vw,32px) 20px;background:#F4F1EC;margin-top:0}
.progress{margin-bottom:22px}
.progress__bar{height:5px;border-radius:99px;background:#E0DCD4;overflow:hidden}
.progress__fill{height:100%;width:33.33%;background:var(--wa);border-radius:99px;transition:width .35s var(--ease)}
.progress__txt{display:flex;justify-content:space-between;gap:12px;margin-top:11px;font-size:.84rem;color:var(--ink-2);font-weight:500}
.step[hidden]{display:none}
/* A pergunta chega como um balao recebido, e as opcoes respondem do lado do visitante */
.balao{position:relative;background:#fff;border-radius:2px 12px 12px 12px;padding:14px 17px;margin-bottom:20px;
  box-shadow:0 1px 1px rgba(16,38,43,.13)}
.balao::before{content:"";position:absolute;left:-7px;top:0;width:0;height:0;
  border-top:8px solid #fff;border-left:8px solid transparent}
.step__q{font-family:'Lora',Georgia,serif;font-size:1.22rem;font-weight:600;color:var(--brand);line-height:1.32}
.step__hint{font-size:.9rem;color:var(--ink-2);margin-top:5px}

.opts{display:grid;gap:11px;border:0;padding:0;margin:0 0 8px}
.opts legend{padding:0}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{
  display:flex;align-items:center;gap:13px;min-height:58px;padding:15px 18px;
  border:1.5px solid var(--line-strong);border-radius:var(--radius);background:#fff;
  font-weight:500;line-height:1.35;cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease);
}
.opt span::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);transition:border-color .15s,box-shadow .15s}
.opt:hover span{border-color:var(--wa-borda);background:#F0F7EE}
.opt input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.opt input:checked+span{border-color:var(--wa-borda);background:#DCF8C6}
.opt input:checked+span::before{border-color:var(--wa-borda);border-width:6px}

.field{margin-bottom:18px}
.field label{display:block;margin-bottom:7px;font-size:.93rem;font-weight:600;color:var(--ink)}
.field input,.field select{
  width:100%;min-height:52px;padding:13px 15px;border:1.5px solid var(--line-strong);
  border-radius:var(--radius);background:#fff;font-size:1rem;
  transition:border-color .15s var(--ease);
}
.field select{appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5C61' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:19px}
.field input:focus,.field select:focus{border-color:var(--wa-borda)}
.field[data-invalid] input,.field[data-invalid] select{border-color:#A32020;background:#FEF7F7}
.err{display:block;min-height:0;margin-top:6px;font-size:.87rem;font-weight:500;color:#A32020}
.err:empty{margin-top:0}

.form-nav{display:flex;flex-wrap:wrap;gap:11px;margin-top:6px}
.form-nav .btn{flex:1 1 auto;min-width:min(100%,170px)}
.form-nav .btn--ghost{flex:0 1 auto;min-width:110px}
.form-note{margin-top:18px;font-size:.84rem;color:var(--ink-2);text-align:center;max-width:none}

/* ---------- FAQ ---------- */
.faq{max-width:800px;margin-inline:auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;padding:18px 22px;cursor:pointer;list-style:none;
  font-family:'Lora',Georgia,serif;font-size:1.06rem;font-weight:600;color:var(--brand);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq summary:hover{background:var(--surface-2)}
.faq__a{padding:0 22px 22px}
.faq__a p{font-size:.98rem;color:var(--ink-2)}

/* ---------- Rodape ---------- */
.footer{background:var(--brand-deep);color:#C6D6D9;padding:clamp(44px,5vw,64px) 0 32px;font-size:.92rem}
.footer a{color:#fff;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer__grid{display:grid;gap:32px;margin-bottom:34px}
@media (min-width:768px){.footer__grid{grid-template-columns:1.3fr 1fr 1fr}}
.footer h2,.footer h3{font-size:.79rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:15px;font-family:'Inter',sans-serif}
.footer ul{display:grid;gap:10px}
.footer .brand__txt b{color:#fff}
.footer .brand__sub{display:block;color:#8FA9AE}
.footer .brand img{filter:brightness(0) invert(1);opacity:.9}
.footer__legal{padding-top:26px;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:8px;font-size:.85rem;color:#96AEB2}

/* ---------- Entrada suave ---------- */
/* ---------- Entrada suave ----------
   O estado inicial escondido depende da classe .anim no <html>, que o script inline
   coloca e retira sozinho se o app.js nao sinalizar que subiu. Sem isso, uma falha no
   JavaScript deixaria o conteudo invisivel para sempre.

   Só opacity e transform aqui, de proposito: as duas rodam no compositor, nao disparam
   layout e por isso nao mexem no CLS. Nada de animar height, top ou margin.
   A dobra nao entra: animar o elemento de LCP atrasaria a metrica. */
:root{--ease-saida:cubic-bezier(.16,.84,.44,1)}

.reveal{transition:opacity .75s var(--ease-saida),transform .75s var(--ease-saida);transition-delay:.1s}
.anim .reveal{opacity:0;transform:translateY(28px)}
.anim .reveal.is-in{opacity:1;transform:none}

/* Variacoes, para a pagina nao repetir o mesmo gesto do inicio ao fim */
.anim .reveal--zoom{transform:scale(1.06)}
.anim .reveal--zoom.is-in{transform:none}
.reveal--zoom{transition-duration:.9s}
.anim .reveal--dir{transform:translateX(26px)}
.anim .reveal--dir.is-in{transform:none}
@media (max-width:899px){.anim .reveal--dir{transform:translateY(28px)}}

/* Cascata: os filhos entram um atras do outro, o que da ritmo a grade */
.stagger > *{transition:opacity .65s var(--ease-saida),transform .65s var(--ease-saida)}
.anim .stagger > *{opacity:0;transform:translateY(24px)}
.anim .stagger.is-in > *{opacity:1;transform:none}
.anim .stagger.is-in > *:nth-child(1){transition-delay:.08s}
.anim .stagger.is-in > *:nth-child(2){transition-delay:.16s}
.anim .stagger.is-in > *:nth-child(3){transition-delay:.24s}
.anim .stagger.is-in > *:nth-child(4){transition-delay:.32s}
.anim .stagger.is-in > *:nth-child(5){transition-delay:.40s}
.anim .stagger.is-in > *:nth-child(6){transition-delay:.48s}
.anim .stagger.is-in > *:nth-child(7){transition-delay:.56s}
.anim .stagger.is-in > *:nth-child(n+8){transition-delay:.64s}

@media (prefers-reduced-motion:reduce){
  .anim .reveal,.anim .stagger > *{opacity:1;transform:none;transition:none;transition-delay:0s}
}

/* ---------- Credito da agencia ---------- */
.assinatura{margin-top:14px;font-size:.84rem;color:#96AEB2}
.assinatura a{color:#C6D6D9;text-decoration:underline;text-underline-offset:3px}
.assinatura a:hover{color:#fff}

/* ---------- Conheça a clínica ---------- */
.clinica{display:grid;gap:clamp(24px,3.5vw,44px);align-items:center;margin-bottom:clamp(34px,4vw,54px)}
@media (min-width:900px){.clinica{grid-template-columns:1fr 1fr}}
.clinica__txt h2{margin-bottom:14px}
.clinica__txt p{color:var(--ink-2)}
.clinica__txt p+p{margin-top:12px}

/* ---------- Avaliações do Google ---------- */
.gnota{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:clamp(26px,3vw,38px);
  padding:16px 22px;background:#fff;border:1px solid var(--line);border-radius:999px;width:fit-content;margin-inline:auto}
.gnota[hidden]{display:none}
.gnota__g{width:30px;height:30px;flex:none}
.gnota__num{font-family:'Lora',Georgia,serif;font-size:1.5rem;font-weight:600;color:var(--ink);margin-right:8px}
.gnota__estrelas{color:#B4740A;letter-spacing:2px}
.gnota__total{display:block;font-size:.86rem;color:var(--ink-2)}

.gcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 22px;height:100%}
.gcard header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gcard__ava{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--brand);color:#fff;font-family:'Lora',Georgia,serif;font-size:1.1rem;font-weight:600}
.gcard header b{display:block;font-size:.97rem;line-height:1.25;color:var(--ink)}
.gcard__estrelas{color:#B4740A;font-size:.95rem;letter-spacing:1px}
.gcard p{font-size:.96rem;color:var(--ink-2);max-width:none}

/* ---------- Textura de fundo das seções ----------
   A página estava chapada demais entre uma seção e outra. A marca entra como marca d'água
   bem apagada, mais um grão de ruído gerado em SVG inline (sem requisição extra).
   Tudo em pseudo-elemento atrás do conteúdo, com opacidade baixa o bastante para não
   mexer no contraste do texto. */
/* overflow:clip e nao hidden: hidden criaria contexto de rolagem e mataria o
   position:sticky da foto da medica no desktop. clip corta igual e preserva o sticky. */
.section{position:relative;isolation:isolate;overflow:clip}
/* A marca d'água entra como MÁSCARA, não como imagem colorida: um único PNG de alpha
   de ~3 KB serve as duas versões, e a cor vem do CSS. Antes eram dois PNGs somando 52 KB
   para algo que aparece a 3,5% de opacidade. Onde mask não existir, o fundo fica liso. */
.section::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-90px;right:-90px;width:min(460px,54vw);aspect-ratio:1;
  background-color:var(--brand);opacity:.035;
  -webkit-mask:url('/assets/img/marca-mask.png') no-repeat center/contain;
  mask:url('/assets/img/marca-mask.png') no-repeat center/contain;
}
@supports not ((mask:url('')) or (-webkit-mask:url(''))){.section::before{display:none}}
.section--dark::before{background-color:#fff;opacity:.07}
.section--alt::after,.section--dark::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.028;
}
.section--dark::after{opacity:.05}
/* Um brilho suave no topo da seção escura, para ela não ficar um bloco morto. */
.section--dark{background-image:radial-gradient(120% 90% at 50% -10%,rgba(37,211,102,.10),transparent 62%)}

/* ---------- Chamada ao fim das seções ---------- */
.ctabar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 22px;
  margin-top:clamp(26px,3.2vw,38px);padding:22px clamp(20px,2.6vw,30px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.section--alt .ctabar{background:#fff}
.section--dark .ctabar{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);box-shadow:none}
.ctabar p{flex:1 1 300px;margin:0;font-size:1rem;color:var(--ink);max-width:60ch}
.section--dark .ctabar p{color:#DCE6E8}
.ctabar .btn{flex:0 0 auto}
@media (max-width:560px){.ctabar .btn{flex:1 1 100%}}

/* ---------- Perfis sociais no rodapé ---------- */
.footer .social a{display:inline-flex;align-items:center;gap:9px}
.footer .social svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}

/* ---------- Contato de WhatsApp dentro do texto ---------- */
.wa-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--wa-teal);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.wa-link svg{width:17px;height:17px;flex:none;fill:currentColor;stroke:none}
.wa-link:hover{color:var(--brand)}
.footer .wa-link{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
.footer .wa-link:hover{text-decoration-color:#fff}
.step__hint .wa-link{font-size:inherit}