/* ============================================================
   Ana Claudia de Almeida Gomes — Cirurgiã-dentista
   Paleta: creme, vinho e grafite. Tipos: Spectral + Karla.
   ============================================================ */

:root{
  --cream:      #F8F6F3;
  --cream-alt:  #EFEAE5;
  --wine:       #8C1D2F;
  --wine-deep:  #6E1524;
  --ink:        #23201E;
  --ink-soft:   #6E6763;
  --rule:       #DBD3CC;

  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --topbar-h: 76px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top: var(--topbar-h); }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--wine); color:#fff; padding:.75rem 1rem; z-index:200;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
}

/* ---------- tipografia utilitária ---------- */

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--wine);
  margin:0 0 1.1rem;
}
.eyebrow--rule{ display:flex; align-items:center; gap:.9rem; }
.eyebrow--rule::before{
  content:""; width:34px; height:2px; background:var(--wine); flex:none;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:#fff; opacity:.9; }

.h2{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 1.6rem;
}

.lead{
  font-family:var(--display);
  font-size:clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
  line-height:1.5;
  color:var(--ink);
  margin:0 0 1.5rem;
}

p{ margin:0 0 1.1rem; color:var(--ink-soft); }

/* ---------- botões ---------- */

.btn{
  --btn-fg:var(--wine);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body);
  font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1.05rem 2rem;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--wine);
  color:var(--btn-fg);
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
.btn--solid{ background:var(--wine); color:#fff; }
.btn--solid:hover{ background:var(--wine-deep); border-color:var(--wine-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:var(--wine); color:#fff; transform:translateY(-2px); }
.btn--sm{ padding:.8rem 1.6rem; font-size:.72rem; }

/* ---------- topbar ---------- */

.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(248,246,243,.9);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background-color .3s ease;
}
.topbar.is-stuck{ border-bottom-color:var(--rule); }

.topbar__inner{
  max-width:var(--wrap); margin:0 auto;
  padding:0 var(--pad);
  min-height:var(--topbar-h);
  display:flex; align-items:center; gap:2rem;
}

.wordmark{
  font-family:var(--display);
  font-style:italic;
  font-size:1.3rem;
  letter-spacing:.01em;
  text-decoration:none;
  margin-right:auto;
  white-space:nowrap;
}

.nav{ display:flex; gap:2.4rem; }
.nav a{
  font-size:.74rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  transition:color .2s ease;
}
.nav a:hover{ color:var(--wine); }

.menu-toggle{
  display:none;
  width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  padding:0; place-items:center;
}
.menu-toggle span{
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.menu-toggle span + span{ margin-top:6px; }
.menu-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.menu-mobile{
  display:none;
  flex-direction:column;
  padding:.5rem var(--pad) 1.5rem;
  border-top:1px solid var(--rule);
  background:var(--cream);
}
.menu-mobile a{
  padding:.9rem 0;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.menu-mobile a:last-child{ border-bottom:0; color:var(--wine); }

/* ---------- seções ---------- */

.section{
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(4rem, 9vw, 7.5rem) var(--pad);
}
.section--alt{
  max-width:none;
  background:var(--cream-alt);
}
.section--alt > *{ max-width:var(--wrap); margin-inline:auto; }

.section__head{ margin-bottom:clamp(2rem, 4vw, 3rem); }
.section__head .h2{ margin-bottom:0; }

/* ---------- hero ---------- */

.hero{
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(2rem, 4vw, 3.5rem) var(--pad) clamp(3rem, 6vw, 5rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}

.hero__title{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.8rem, 1.6rem + 4.6vw, 5.2rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 1.5rem;
}
.hero__title em{
  display:block;
  font-style:italic;
  color:var(--wine);
}
.hero__title span{ display:block; }

.hero__lead{
  max-width:34ch;
  margin-bottom:2.2rem;
}

.mote{
  font-family:var(--display); font-style:italic;
  font-size:1.1rem;
  color:var(--wine);
  margin:0 0 1.8rem;
  padding-left:1.1rem;
  border-left:2px solid var(--wine);
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:.9rem;
  margin-bottom:clamp(2.5rem, 5vw, 3.5rem);
}

.factbar{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1.5rem;
  margin:0;
  padding-top:1.8rem;
  border-top:1px solid var(--rule);
}
.factbar dt{
  font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.35rem;
}
.factbar dd{
  margin:0;
  font-family:var(--display);
  font-size:1.05rem;
}

.hero__figure{ margin:0; }
.hero__figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 22%;
  border-radius:50% 50% 8px 8px / 32% 32% 4px 4px;
}

/* ---------- sobre ---------- */

.sobre{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(2rem, 6vw, 5rem);
  align-items:center;
}
.sobre__figure{ margin:0; }
.sobre__figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 25%;
  border-radius:50% 50% 8px 8px / 30% 30% 4px 4px;
}

.signature{
  margin:2rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.signature__name{
  display:block;
  font-family:var(--display); font-style:italic;
  font-size:1.15rem; color:var(--ink);
}
.signature__role{
  display:block;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- faixa de biossegurança ---------- */

.band{
  position:relative;
  isolation:isolate;
  min-height:clamp(320px, 46vw, 520px);
  display:flex;
  align-items:flex-end;
}
.band__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
  z-index:-2;
}
.band__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,14,14,.72) 0%, rgba(20,14,14,.35) 55%, rgba(20,14,14,.08) 100%);
  z-index:-1;
}
.band__caption{
  max-width:var(--wrap);
  width:100%;
  margin:0 auto;
  padding:var(--pad);
  color:#fff;
}
.band__text{
  font-family:var(--display);
  font-size:clamp(1.15rem, 1rem + .9vw, 1.8rem);
  line-height:1.35;
  color:#fff;
  max-width:26ch;
  margin:0;
}

/* ---------- serviços ---------- */

.servicos{ margin:0; border-top:1px solid var(--rule); }

.servico{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1rem, 4vw, 3rem);
  padding:1.8rem 0;
  border-bottom:1px solid var(--rule);
}
.servico dt{
  font-family:var(--display);
  font-size:clamp(1.15rem, 1.05rem + .4vw, 1.45rem);
  line-height:1.25;
}
.servico dd{ margin:0; color:var(--ink-soft); }

.nota{
  margin-top:2.2rem;
  max-width:56ch;
  font-size:.95rem;
}

/* ---------- formação ---------- */

.trilha{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.5rem, 4vw, 3rem);
}
.trilha__item{ border-top:1px solid var(--wine); padding-top:1.2rem; }
.trilha__item:last-child{ border-top-color:var(--rule); }
.trilha__item h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.3rem;
  line-height:1.25;
  margin:0 0 .7rem;
}
.trilha__item p{ font-size:.95rem; margin:0; }

.status{
  font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 .5rem;
}
.status--done{ color:var(--wine); }
.status--wip{ color:var(--ink-soft); }

/* ---------- contato ---------- */

.contato__inner{
  max-width:44rem;
  margin:0 auto;
  text-align:center;
}
.contato__lead{
  max-width:42ch;
  margin:0 auto 2.2rem;
}
.contato__actions{
  display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
}

/* ---------- rodapé ---------- */

.rodape{
  border-top:1px solid var(--rule);
  background:var(--cream);
}
.rodape__inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:2.5rem var(--pad);
  text-align:center;
}
.rodape__mote{
  font-family:var(--display); font-style:italic;
  font-size:1.35rem; line-height:1.3;
  color:var(--wine);
  margin:0 0 1.2rem;
}
.rodape__nome{
  font-family:var(--display); font-style:italic;
  font-size:1.1rem; color:var(--ink); margin:0 0 .4rem;
}
.rodape__meta{
  font-size:.78rem; letter-spacing:.06em;
  color:var(--ink-soft); margin:0 0 .2rem;
}
.rodape__links{
  display:flex; justify-content:center; align-items:center; gap:.6rem;
  margin:1rem 0 0;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rule);
}
.rodape__links a{ color:var(--wine); text-decoration:none; }
.rodape__links a:hover{ text-decoration:underline; }

/* ---------- botão flutuante WhatsApp ---------- */

.wpp-float{
  position:fixed;
  right:clamp(1rem, 3vw, 2rem);
  bottom:clamp(1rem, 3vw, 2rem);
  width:56px; height:56px;
  display:grid; place-items:center;
  background:var(--wine);
  border-radius:50%;
  box-shadow:0 10px 26px rgba(35,32,30,.22);
  z-index:90;
  transition:transform .25s ease, background-color .25s ease;
}
.wpp-float svg{ width:28px; height:28px; fill:#fff; }
.wpp-float:hover{ transform:translateY(-3px); background:var(--wine-deep); }

/* ---------- animação de entrada ---------- */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- responsivo ---------- */

@media (max-width: 900px){
  .nav, .topbar__cta{ display:none; }
  .menu-toggle{ display:grid; }
  .menu-mobile[data-open="true"]{ display:flex; }

  .hero{
    grid-template-columns:1fr;
    padding-top:1.5rem;
  }
  .hero__figure{ order:-1; }
  .hero__figure img{ aspect-ratio:1/1; }
  .hero__lead{ max-width:none; }

  .sobre{ grid-template-columns:1fr; }
  .sobre__figure img{ aspect-ratio:16/10; border-radius:8px; }

  .servico{ grid-template-columns:1fr; gap:.5rem; }
  .trilha{ grid-template-columns:1fr; }
  .band{ align-items:flex-end; min-height:400px; }
  .band__overlay{
    background:linear-gradient(180deg, rgba(20,14,14,.15) 30%, rgba(20,14,14,.75) 100%);
  }
}

@media (max-width: 480px){
  .factbar{ grid-template-columns:1fr; gap:1rem; }
  .btn{ width:100%; }
  .hero__actions, .contato__actions{ flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}