/* =========================================================
   Dra. Isadora Araújo — Periodontia
   HTML/CSS/JS puro · mobile-first
   ========================================================= */

:root{
  /* paleta */
  --base:      #FAF8F5;
  --creme:     #F2ECE4;
  --mogno:     #7B4A2D;
  --mogno-esc: #5A3520;
  --verde:     #4A6B47;
  --dourado:   #C9A961;
  --tinta:     #2E2823;
  --tinta-med: #6B605A;
  --branco:    #FFFDFB;

  /* tipografia */
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --corpo:   'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* medidas */
  --wrap: 1180px;
  --gut: clamp(1.25rem, 5vw, 3rem);
  --sec-y: clamp(4.5rem, 11vw, 8.5rem);
  --r: 2px;

  --transi: 420ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--corpo);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72;
  color:var(--tinta);
  background:var(--base);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; object-fit:cover; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; padding:0; }

h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.1; letter-spacing:-.015em; }
h1{ font-size:clamp(2.6rem,1.8rem + 4vw,4.8rem); }
h2{ font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem); }
h3{ font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem); letter-spacing:0; }

::selection{ background:var(--dourado); color:var(--branco); }

:focus-visible{ outline:2px solid var(--mogno); outline-offset:3px; border-radius:var(--r); }
.sec--madeira :focus-visible,.sec--escuro :focus-visible{ outline-color:var(--dourado); }

.sr,.skip-link{
  position:absolute; width:1px; height:1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:.6rem; left:.6rem; z-index:999;
  width:auto; height:auto; clip:auto;
  padding:.7rem 1.1rem; background:var(--mogno); color:var(--branco);
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.estreito{ max-width:760px; }
.sec{ padding-block:var(--sec-y); }
.sec--creme{ background:var(--creme); }
.sec--madeira{ background:var(--mogno); color:var(--branco); }
.sec--escuro{ background:var(--mogno-esc); color:var(--branco); }

.olho{
  font-size:.74rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mogno); margin-bottom:1.1rem;
}
.olho--claro{ color:var(--dourado); }
.claro{ color:var(--branco); }
.claro-suave{ color:rgba(255,253,251,.8); }

.sec__cabeca{ max-width:660px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec__sub{ margin-top:1.1rem; color:var(--tinta-med); font-size:1.05rem; }

.destaque{ font-style:italic; color:var(--mogno); }

/* ---------- botões ---------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 2rem; border-radius:var(--r);
  font-size:.82rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; transition:all var(--transi);
}
.botao--primario{ background:var(--mogno); color:var(--branco); }
.botao--primario:hover{ background:var(--mogno-esc); transform:translateY(-2px); }
.botao--fantasma{ border:1px solid rgba(46,40,35,.28); color:var(--tinta); }
.botao--fantasma:hover{ border-color:var(--mogno); color:var(--mogno); }
.botao--zap{ background:var(--dourado); color:#3A2A12; }
.botao--zap:hover{ background:#DBBE7C; transform:translateY(-2px); }
.botao--zap svg{ width:20px; height:20px; fill:currentColor; }

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,245,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transi), background var(--transi);
}
.topo.rolou{ border-bottom-color:rgba(46,40,35,.1); }
.topo__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:76px; }

.marca{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.marca__selo{ width:46px; height:46px; flex:none; }
.selo__anel{ fill:none; stroke:var(--mogno); stroke-width:1; opacity:.5; }
.selo__dente{ fill:none; stroke:var(--mogno); stroke-width:1.6; stroke-linejoin:round; }
.selo__txt{ font-family:var(--corpo); font-size:7.4px; letter-spacing:1.1px; fill:var(--mogno); }
.marca__nome{ display:flex; flex-direction:column; line-height:1.18; }
.marca__nome strong{ font-family:var(--display); font-size:1.22rem; font-weight:500; }
.marca__nome em{ font-style:normal; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-med); }

.nav__btn{ display:none; }
.nav__lista{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem); }
.nav__lista a{ font-size:.82rem; text-decoration:none; letter-spacing:.03em; transition:color var(--transi); }
.nav__lista a:not(.nav__cta):hover{ color:var(--mogno); }
.nav__cta{
  padding:.62rem 1.35rem; border:1px solid var(--mogno); color:var(--mogno);
  border-radius:var(--r); letter-spacing:.12em; text-transform:uppercase; font-size:.72rem!important;
}
.nav__cta:hover{ background:var(--mogno); color:var(--branco); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding-block:clamp(3rem,7vw,6rem) clamp(4rem,9vw,7rem); }
.hero__grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.hero__txt .lead{
  margin-top:1.6rem; font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
  color:var(--tinta-med); max-width:46ch;
}
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.3rem; }
.hero__cred{
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid rgba(46,40,35,.12);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-med);
}
.hero__foto{ position:relative; }
.hero__foto img{ width:100%; aspect-ratio:1/1; border-radius:var(--r); }
.hero__foto::after{
  content:''; position:absolute; inset:auto -14px -14px auto;
  width:58%; height:58%; border:1px solid var(--dourado); border-radius:var(--r); z-index:-1;
}

/* =========================================================
   PERIODONTIA
   ========================================================= */
.analogia{ margin-top:2.2rem; display:grid; gap:1.3rem; }
.analogia p{ font-size:clamp(1.06rem,1rem + .4vw,1.25rem); color:rgba(255,253,251,.88); }
.analogia strong{ color:var(--branco); font-weight:500; }

.cadeia{
  display:grid; gap:1rem; margin-top:3.2rem;
  padding-top:2.6rem; border-top:1px solid rgba(255,253,251,.18);
}
.cadeia__item{ display:flex; align-items:flex-start; gap:1rem; }
.cadeia__item span{
  flex:none; width:2.1rem; height:2.1rem; display:grid; place-items:center;
  border:1px solid var(--dourado); border-radius:50%;
  font-family:var(--display); font-size:1rem; color:var(--dourado);
}
.cadeia__item p{ color:rgba(255,253,251,.85); font-size:.98rem; padding-top:.2rem; }
.cadeia__item--fim p{ color:var(--dourado); }
.cadeia__seta{ width:1px; height:1.5rem; background:rgba(255,253,251,.25); margin-left:1.05rem; }

.nota-fonte{
  margin-top:2.6rem; font-family:var(--display); font-style:italic;
  font-size:1.15rem; color:var(--dourado);
}

/* =========================================================
   SINAIS
   ========================================================= */
.sinais{ display:grid; gap:1px; background:rgba(46,40,35,.12); border-block:1px solid rgba(46,40,35,.12); }
.sinal{ background:var(--base); padding:clamp(1.8rem,3vw,2.6rem); }
.sinal svg{
  width:30px; height:30px; margin-bottom:1.2rem;
  fill:none; stroke:var(--verde); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.sinal h3{ margin-bottom:.55rem; }
.sinal p{ color:var(--tinta-med); font-size:.96rem; }

.aviso{
  margin-top:2rem; font-size:.85rem; color:var(--tinta-med);
  font-style:italic; text-align:center;
}

/* =========================================================
   SOBRE
   ========================================================= */
.sobre__grid{ display:grid; gap:clamp(2.2rem,5vw,4.5rem); align-items:center; }
.sobre__foto img{ width:100%; border-radius:var(--r); }
.sobre__txt p{ margin-top:1.2rem; color:var(--tinta-med); }
.sobre__txt strong{ color:var(--tinta); font-weight:500; }

.credenciais{ margin-top:2.4rem; display:grid; gap:0; }
.credenciais div{
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem;
  padding-block:.95rem; border-top:1px solid rgba(46,40,35,.14);
}
.credenciais div:last-child{ border-bottom:1px solid rgba(46,40,35,.14); }
.credenciais dt{
  flex:none; min-width:8.5rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-med);
  padding-top:.22rem;
}
.credenciais dd{ font-family:var(--display); font-size:1.15rem; }

/* =========================================================
   TRATAMENTOS
   ========================================================= */
.trats{ display:grid; gap:1px; background:rgba(46,40,35,.12); }
.trat{ background:var(--base); padding:clamp(1.9rem,3.4vw,2.8rem); transition:background var(--transi); }
.trat:hover{ background:var(--creme); }
.trat h3{ color:var(--mogno); margin-bottom:.7rem; }
.trat p{ color:var(--tinta-med); font-size:.98rem; }

/* =========================================================
   GALERIA
   ========================================================= */
.galeria{ display:grid; gap:1rem; }
.galeria__item{ overflow:hidden; border-radius:var(--r); }
.galeria__item img{ width:100%; height:100%; transition:transform 900ms cubic-bezier(.22,.61,.36,1); }
.galeria__item:hover img{ transform:scale(1.04); }

/* =========================================================
   AVALIAÇÕES
   ========================================================= */
.nota{ margin-top:1.2rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.estrelas{ color:var(--dourado); letter-spacing:.16em; font-size:1.05rem; }
.nota strong{ font-family:var(--display); font-size:1.5rem; font-weight:500; }

.depos{ display:grid; gap:1.4rem; }
.depo{
  display:flex; flex-direction:column;
  background:var(--branco); padding:clamp(1.7rem,3vw,2.4rem);
  border-left:2px solid var(--dourado); border-radius:var(--r);
}
.depo p{ font-family:var(--display); font-size:clamp(1.1rem,1.05rem + .3vw,1.3rem); font-style:italic; line-height:1.5; }
.depo cite{
  display:flex; flex-direction:column; gap:.15rem; margin-top:auto; padding-top:1.3rem;
  font-style:normal; font-size:.88rem; font-weight:500;
}
.depo cite span{ font-weight:300; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-med); }

.depos__link{ margin-top:2rem; text-align:center; font-size:.88rem; }
.depos__link a{ color:var(--mogno); text-underline-offset:4px; }

/* =========================================================
   CONTATO
   ========================================================= */
.contato__grid{ display:grid; gap:clamp(2.4rem,5vw,4.5rem); align-items:center; }
.contato__txt .botao--zap{ margin-top:2.2rem; }
.endereco{
  margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid rgba(255,253,251,.2);
  font-style:normal; font-size:.98rem; line-height:1.85; color:rgba(255,253,251,.78);
}
.endereco strong{
  display:block; margin-bottom:.5rem; color:var(--branco);
  font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; font-weight:500;
}
.endereco__linhas{ display:block; }
.endereco a{ display:block; margin-top:1.1rem; color:var(--dourado); font-size:.85rem; text-underline-offset:4px; }
.contato__foto img{ width:100%; border-radius:var(--r); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{ background:var(--tinta); color:rgba(255,253,251,.62); padding-block:3rem; }
.rodape__inner{ display:grid; gap:1.4rem; }
.rodape__marca{ font-family:var(--display); font-size:1.3rem; color:var(--branco); }
.rodape__marca span{
  display:block; margin-top:.35rem;
  font-family:var(--corpo); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,253,251,.55);
}
.rodape__leg{ font-size:.8rem; line-height:1.7; max-width:44ch; }

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.zap-flutuante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:90;
  width:54px; height:54px; display:grid; place-items:center;
  background:#25D366; border-radius:50%;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.9);
  transition:all var(--transi);
}
.zap-flutuante.ativo{ opacity:1; visibility:visible; transform:none; }
.zap-flutuante svg{ width:29px; height:29px; fill:#fff; }
.zap-flutuante:hover{ transform:scale(1.07); }

/* =========================================================
   ANIMAÇÃO DE ENTRADA
   ========================================================= */
[data-anim]{ opacity:0; transform:translateY(22px); }
[data-anim].vis{ opacity:1; transform:none; transition:opacity 600ms ease, transform 600ms cubic-bezier(.22,.61,.36,1); }

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (min-width:640px){
  .sinais{ grid-template-columns:1fr 1fr; }
  .trats{ grid-template-columns:1fr 1fr; }
  .rodape__inner{ grid-template-columns:1fr auto; align-items:end; }
  .rodape__leg{ text-align:right; }
}

@media (min-width:900px){
  .hero__grid{ grid-template-columns:1.08fr .92fr; }
  .sobre__grid{ grid-template-columns:.85fr 1.15fr; }
  .contato__grid{ grid-template-columns:1.05fr .95fr; }
  .depos{ grid-template-columns:repeat(3,1fr); }
  .sinais{ grid-template-columns:repeat(4,1fr); }
  .trats{ grid-template-columns:repeat(4,1fr); }
  .galeria{ grid-template-columns:1.5fr 1fr 1fr; grid-auto-rows:clamp(320px,42vw,520px); }
  .galeria__item--grande{ grid-row:span 1; }
  .cadeia{ grid-template-columns:1fr 3rem 1fr 3rem 1fr; align-items:start; gap:1.4rem; }
  .cadeia__seta{ margin-top:1rem; }
  .cadeia__item{ flex-direction:column; text-align:center; gap:.9rem; }
  .cadeia__seta{ width:100%; height:1px; margin:0; }
}

/* ---------- menu mobile ---------- */
@media (max-width:899px){
  .nav__btn{
    display:grid; place-items:center; width:44px; height:44px;
    position:relative; z-index:110;
  }
  .nav__barra,.nav__barra::before,.nav__barra::after{
    content:''; display:block; width:23px; height:1.5px; background:var(--tinta);
    transition:transform var(--transi), opacity var(--transi);
  }
  .nav__barra::before{ position:absolute; transform:translateY(-7px); }
  .nav__barra::after{ position:absolute; transform:translateY(7px); }
  .nav[data-aberto] .nav__barra{ background:transparent; }
  .nav[data-aberto] .nav__barra::before{ transform:rotate(45deg); }
  .nav[data-aberto] .nav__barra::after{ transform:rotate(-45deg); }

  .nav__lista{
    position:fixed; inset:0; z-index:105;
    flex-direction:column; justify-content:center; gap:2rem;
    background:var(--base);
    opacity:0; visibility:hidden; transition:opacity var(--transi), visibility var(--transi);
  }
  .nav[data-aberto] .nav__lista{ opacity:1; visibility:visible; }
  .nav__lista a{ font-family:var(--display); font-size:1.75rem; }
  .nav__cta{ font-family:var(--corpo)!important; font-size:.8rem!important; }
}

/* ---------- acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  [data-anim]{ opacity:1; transform:none; }
}

/* ---------- impressão ---------- */
@media print{
  .topo,.zap-flutuante,.nav,.hero__acoes{ display:none; }
  body{ background:#fff; color:#000; }
  [data-anim]{ opacity:1; transform:none; }
}