/* ============================================================
   Dra. Cibele Rasera — Landing Page
   Sistema visual aprovado na variante A do hero
   Tipografia: Manrope (família única, sem serifada)
   Paleta derivada do logo (turquesa #48BCB8)
   ============================================================ */

:root{
  /* escuros */
  --deep:#062E2B;      /* hero e seções escuras */
  --deep2:#041F1D;     /* rodapé e hover */
  --ink:#0F4A47;       /* títulos sobre fundo claro */

  /* marca */
  --accent:#48BCB8;    /* turquesa do logo: destaque e botões */
  --soft:#A8CFCD;      /* turquesa suave sobre escuro */

  /* claros */
  --page:#FFFFFF;
  --alt:#F4F9F8;
  --tint:#EAF6F5;
  --line:#E4EAE9;

  /* texto */
  --body:#4A5654;
  --muted:#7A8584;

  --wrap:1140px;
  --f:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:76px;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;      /* junto com o do body, contém qualquer estouro lateral */
  width:100%;
}

body{
  font-family:var(--f);
  background:var(--page);
  color:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media(min-width:768px){ .wrap{padding:0 40px} }

section{padding:80px 0}
@media(min-width:768px){ section{padding:120px 0} }

.center{text-align:center;max-width:660px;margin-left:auto;margin-right:auto}

/* brilho suave, substitui qualquer textura.
   Fica dentro dos limites do pai: sem largura maior que 100%, para
   não gerar overflow horizontal em nenhuma largura de tela. */
.glow{
  position:absolute;z-index:1;pointer-events:none;
  left:0;right:0;top:0;height:66%;
  background:radial-gradient(ellipse 120% 100% at 50% 0%,rgba(72,188,184,.17) 0%,transparent 66%);
}

/* ---------- tipografia ---------- */
h1,h2,h3{color:var(--ink);font-weight:700}

h1{
  font-size:clamp(34px,8.6vw,62px);
  line-height:1.03;
  letter-spacing:-1.1px;
  color:#fff;
  text-wrap:balance;
}
@media(min-width:820px){ h1{letter-spacing:-1.9px} }
h1 span{color:var(--accent)}

h2{
  font-size:clamp(30px,5.6vw,44px);
  line-height:1.06;
  letter-spacing:-.9px;
  text-wrap:balance;
}

h3{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.3px}

.lede{font-size:17px;line-height:1.62;color:var(--body)}
@media(min-width:768px){ .lede{font-size:18px} }
.lede b{font-weight:700;color:var(--ink)}

p + p{margin-top:14px}

.kicker{margin-bottom:44px}
.mt-s{margin-top:14px}
.mt-m{margin-top:22px}
.mt-l{margin-top:34px}
.mt-xl{margin-top:48px}

/* ---------- rótulo de seção (sem cápsula) ---------- */
.eyebrow{
  font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);line-height:1.5;
}

/* ---------- botões ---------- */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:0 30px;border-radius:999px;
  font-family:var(--f);font-size:15.5px;font-weight:700;line-height:1.3;
  text-decoration:none;border:none;cursor:pointer;text-align:center;
  background:var(--accent);color:#06302B;
  box-shadow:0 0 34px rgba(72,188,184,.34);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.b:hover{transform:translateY(-2px);box-shadow:0 0 46px rgba(72,188,184,.5)}
.b:active{transform:translateY(0)}
.b:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.b svg{width:17px;height:17px;flex-shrink:0}

/* secundário: contorno */
.b2{background:transparent;box-shadow:none;font-weight:600;
  border:1px solid var(--line);color:var(--ink)}
.b2:hover{background:var(--tint);box-shadow:none}
.dark .b2,.hero .b2{border-color:rgba(255,255,255,.24);color:#DCECEB}
.dark .b2:hover,.hero .b2:hover{background:rgba(255,255,255,.07)}

.b-block{display:flex;width:100%}
@media(min-width:560px){ .b-auto{width:auto;display:inline-flex} }

.btns{display:flex;flex-direction:column;gap:12px;align-items:center}
.btns .b{width:100%;max-width:340px}
@media(min-width:560px){
  .btns{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .btns .b{width:auto}
}
.btns-left{align-items:stretch}
@media(min-width:560px){ .btns-left{justify-content:flex-start} }

/* linha de reforço abaixo dos botões: cada item com seu próprio ícone */
.reassure{
  list-style:none;margin-top:26px;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 22px;
}
.reassure li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--muted);
}
.reassure svg{width:17px;height:17px;color:var(--accent);flex-shrink:0}
.dark .reassure li,.hero .reassure li,.offer .reassure li{color:#8FB6B4}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(6,46,43,.9);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:12px;padding-bottom:12px}
.top img{height:48px;width:auto}
@media(min-width:768px){ .top img{height:58px} }

.top-cta{
  display:none;align-items:center;gap:8px;
  min-height:44px;padding:0 22px;border-radius:999px;
  background:var(--accent);color:#06302B;
  font-size:14.5px;font-weight:700;text-decoration:none;
  box-shadow:0 0 24px rgba(72,188,184,.32);
  transition:transform .25s ease,box-shadow .25s ease;
}
.top-cta:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(72,188,184,.48)}
.top-cta svg{width:16px;height:16px}
@media(min-width:768px){ .top-cta{display:inline-flex} }

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--deep);color:#fff;text-align:center;
  padding:210px 24px 84px;
}
@media(min-width:820px){ .hero{padding:300px 32px 130px} }

.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:22% 14%}
@media(min-width:820px){ .hero .bg img{object-position:center 24%} }
@media(min-width:1200px){ .hero .bg img{object-position:center 30%} }
.hero .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(4,31,29,.30) 0%,
    rgba(5,38,35,.70) 36%,
    rgba(6,46,43,.95) 76%,
    var(--deep) 100%);
}
.hero .in{position:relative;z-index:2;max-width:660px;margin:0 auto}
.hero .eyebrow{color:var(--soft)}
.hero h1{margin-top:26px}

/* ---------- entrada do hero ----------
   A foto abre primeiro, com um afastamento suave, e o texto sobe
   em cascata por cima. Cada elemento entra logo após o anterior. */
.hero .bg img{
  animation:heroFoto 1.5s cubic-bezier(.2,.6,.25,1) both;
}
@keyframes heroFoto{
  from{opacity:0;transform:scale(1.09)}
  to{opacity:1;transform:scale(1)}
}

.hero .in > *{
  animation:heroTexto .85s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes heroTexto{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:none}
}
.hero .in > *:nth-child(1){animation-delay:.30s}
.hero .in > *:nth-child(2){animation-delay:.42s}
.hero .in > *:nth-child(3){animation-delay:.54s}
.hero .in > *:nth-child(4){animation-delay:.66s}
.hero .in > *:nth-child(5){animation-delay:.78s}
.hero .lede{margin-top:24px;color:#A9C9C7;max-width:46ch;margin-left:auto;margin-right:auto}
.hero .lede b{color:#EAF5F4}
.hero .btns{margin-top:36px}

/* ---------- seções escuras ---------- */
.dark{background:var(--deep);color:#C3DEDC;position:relative;overflow:hidden}
.dark h2,.dark h3{color:#fff}
.dark .lede{color:#A9C9C7}
.dark .lede b{color:#EAF5F4}
.dark .eyebrow{color:var(--soft)}
.dark .in{position:relative;z-index:2}

.alt{background:var(--alt)}

/* ---------- listas ---------- */
.items{display:grid;gap:14px;margin-top:30px}
@media(min-width:768px){ .items{gap:17px} .items-2{grid-template-columns:1fr 1fr;gap:18px 44px} }

.item{display:flex;gap:13px;align-items:flex-start;font-size:16.5px;line-height:1.55;color:var(--body)}
.item svg{width:19px;height:19px;flex-shrink:0;margin-top:4px;color:var(--accent)}
.item strong{color:var(--ink);font-weight:700}

/* itens de problema: ícone próprio, em quadro destacado */
.item-hl{gap:16px;align-items:center;font-size:17px;font-weight:600;color:var(--ink)}
.item-ic{
  width:52px;height:52px;flex-shrink:0;border-radius:15px;
  background:var(--tint);border:1px solid rgba(72,188,184,.28);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease,background .3s ease;
}
.item-ic svg{width:25px;height:25px;margin:0;color:var(--ink)}
.item-hl:hover .item-ic{transform:translateY(-3px);background:#DCF0EF}
@media(min-width:768px){
  .item-hl{font-size:17.5px}
  .item-ic{width:56px;height:56px}
  .item-ic svg{width:27px;height:27px}
}
.dark .item{color:#C3DEDC}
.dark .item strong{color:#fff}

.turn{
  margin-top:38px;font-size:19px;font-weight:700;color:var(--ink);
  line-height:1.45;max-width:50ch;letter-spacing:-.3px;
}
@media(min-width:768px){ .turn{font-size:22px} }

/* ---------- split foto + texto ----------
   No celular a ordem do HTML manda: nome, foto, texto.
   No desktop a foto vai para a coluna da direita, ocupando as duas faixas. */
.split{display:grid;gap:32px}
@media(min-width:900px){
  .split{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "head fig"
      "body fig";
    gap:24px 72px;
    align-items:start;
  }
  .split-head{grid-area:head}
  .split-fig{grid-area:fig;align-self:center}
  .split-body{grid-area:body}
}

.split-fig{border-radius:20px;overflow:hidden;background:var(--alt)}
.split-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 22%}
@media(min-width:900px){ .split-fig img{aspect-ratio:4/5;object-position:center} }

/* ---------- nome da doutora em destaque ---------- */
.dr-name{
  margin-top:14px;
  font-size:clamp(30px,6vw,42px);
  line-height:1.08;
  letter-spacing:-1.1px;
  font-weight:800;
  color:var(--ink);
}
.dr-cro{
  margin-top:10px;font-size:15px;font-weight:600;color:var(--muted);
  line-height:1.5;
}
.dark .dr-name{color:#fff}
.dark .dr-cro{color:var(--soft)}

/* ---------- big numbers ---------- */
.stats-sec{padding:64px 0}
@media(min-width:768px){ .stats-sec{padding:80px 0} }

.stats{display:grid;gap:34px;text-align:center}
@media(min-width:640px){
  .stats{grid-template-columns:repeat(2,1fr);gap:40px}
  .stat-wide{grid-column:1 / -1}
}
@media(min-width:900px){
  .stats{grid-template-columns:repeat(3,1fr);gap:48px}
  .stat-wide{grid-column:auto}
}

.stat{display:flex;flex-direction:column;align-items:center;gap:8px}
.stat-n{
  font-size:clamp(46px,10vw,64px);
  line-height:1;
  letter-spacing:-2.4px;
  font-weight:800;
  color:var(--accent);
}
.stat-txt{font-size:clamp(30px,6.6vw,42px);letter-spacing:-1.4px}

/* reserva a altura da linha para o texto digitado não empurrar o layout */
.stat-txt[data-type]{min-height:1.05em;display:inline-block}

/* cursor do efeito de digitação */
.typing::after{
  content:"";
  display:inline-block;
  width:3px;height:.86em;
  margin-left:4px;
  vertical-align:-.06em;
  background:var(--accent);
  animation:cursor .75s steps(1) infinite;
}
@keyframes cursor{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
.stat-l{
  font-size:15.5px;line-height:1.45;font-weight:600;
  color:#A9C9C7;max-width:22ch;
}
@media(min-width:768px){ .stat-l{font-size:16.5px} }

/* ---------- passos ---------- */
.steps{display:grid;gap:34px;margin-top:52px}
@media(min-width:768px){ .steps{grid-template-columns:repeat(3,1fr);gap:44px} }

.step .ic{
  width:56px;height:56px;border-radius:16px;background:var(--tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.step:hover .ic{transform:translateY(-6px)}
.step .ic svg{width:24px;height:24px;color:var(--ink)}
.step .n{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.step p{font-size:16px;line-height:1.6;color:var(--body);margin-top:10px}

/* ---------- casos ----------
   as fotos clínicas são retrato 3:4; usar contain preserva o
   enquadramento original em vez de cortar a arcada */
.cases{display:grid;gap:24px;margin-top:52px}
@media(min-width:768px){ .cases{grid-template-columns:repeat(3,1fr)} }
.case img{
  width:100%;aspect-ratio:3/4;object-fit:contain;
  border-radius:16px;background:#0b0b0b;
}
.case figcaption{padding:16px 4px 0;font-size:15px;color:var(--muted);line-height:1.5}

/* ---------- galeria de depoimentos ---------- */
/* 6 itens em 2 ou 3 colunas fecha exato nas duas larguras.
   Uma grade de 4 colunas deixaria 2 órfãos na última linha. */
.gal{
  display:grid;gap:14px;margin-top:52px;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:700px){ .gal{grid-template-columns:repeat(3,1fr);gap:18px} }

.gal-item{
  position:relative;display:block;padding:0;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in;
  aspect-ratio:3/4;transition:transform .25s ease,box-shadow .25s ease;
}
/* largura sempre inteira: só o excesso de altura é cortado, nunca as
   laterais, porque os prints têm larguras iguais e alturas diferentes */
.gal-item img{
  width:100%;height:auto;display:block;
}
.gal-item::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.92));
  pointer-events:none;
}
.gal-item:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(6,46,43,.13)}
.gal-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.gal-note{margin-top:22px;font-size:14px;color:var(--muted);text-align:center}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(4,31,29,.94);backdrop-filter:blur(6px);
  padding:64px 12px;
}
.lb[hidden]{display:none}
.lb-img{
  max-width:min(460px,86vw);max-height:82vh;
  width:auto;height:auto;border-radius:14px;background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lb-close{
  position:absolute;top:16px;right:16px;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-close svg{width:22px;height:22px}
.lb-nav{
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-nav svg{width:24px;height:24px}
@media(max-width:560px){
  .lb{padding:56px 8px}
  .lb-nav{position:absolute;bottom:14px}
  .lb-prev{left:calc(50% - 58px)}
  .lb-next{right:calc(50% - 58px)}
}

/* ---------- oferta ---------- */
.offer{
  background:var(--deep);color:#C3DEDC;border-radius:24px;
  padding:48px 24px;text-align:center;position:relative;overflow:hidden;
}
@media(min-width:768px){ .offer{padding:76px 64px} }
.offer h2{color:#fff}
.offer .lede{color:#A9C9C7;max-width:50ch;margin-left:auto;margin-right:auto}
.offer .eyebrow{color:var(--soft)}
.offer .in{position:relative;z-index:2}
.offer .items{max-width:430px;margin-left:auto;margin-right:auto;text-align:left}
.offer .item{color:#C3DEDC}

/* ---------- faq ---------- */
.faq{max-width:800px;margin:52px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:24px 0;font-size:17.5px;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;line-height:1.42;letter-spacing:-.2px;
}
.faq summary::-webkit-details-marker{display:none}
.faq .chev{flex-shrink:0;width:20px;height:20px;color:var(--accent);
  transition:transform .3s ease;margin-top:3px}
.faq details[open] .chev{transform:rotate(180deg)}
.faq .ans{padding:0 0 26px;font-size:16px;line-height:1.7;color:var(--body);max-width:66ch}

/* ---------- rodapé ---------- */
.foot{background:var(--deep2);color:#A9C9C7;padding:64px 0 32px;font-size:15px}
.foot-grid{display:grid;gap:40px}
@media(min-width:768px){ .foot-grid{grid-template-columns:1.5fr 1fr} }
.foot img{height:56px;width:auto;margin-bottom:18px}
.foot h4{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);margin-bottom:14px}
.foot a{text-decoration:none;font-weight:600;color:#DCECEB;transition:color .2s}
.foot a:hover{color:var(--accent)}
.foot-end{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;line-height:1.65;color:#7FA5A3}

/* ---------- cta flutuante mobile ---------- */
.float{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;
  display:none;transform:translateY(130%);
  transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.float.on{transform:translateY(0)}
.float .b{box-shadow:0 10px 34px rgba(6,46,43,.4),0 0 30px rgba(72,188,184,.34)}
.float .b:hover{transform:none}
@media(max-width:767px){ .float{display:block} }

/* ---------- entrada ao rolar ---------- */
.rise{opacity:0}
.rise.up{animation:fadeUp .75s cubic-bezier(.2,.7,.3,1) both}
@keyframes fadeUp{
  from{opacity:0;transform:translate3d(0,30px,0)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-delay:0s!important;
    transition-duration:.001ms!important;
  }
  html{scroll-behavior:auto}
  .rise{opacity:1}
  .hero .in > *,.hero .bg img{opacity:1;transform:none}
  .b:hover,.top-cta:hover{transform:none}
}