/* ===========================================================
   Dra. Marianne Dias Rezende — Otorrinolaringologia · Sinop-MT
   =========================================================== */

:root{
  --papel:#FFFCFC;
  --branco:#FFFFFF;
  --nevoa:#FBF2F3;
  --rosa:#EFB3BC;
  --rosa-claro:#F8DFE3;
  --linha:#F0DCDF;
  --acento:#B0566B;
  --acento-escuro:#8E4256;
  --vinho:#43262E;
  --tinta:#312629;
  --tinta-suave:#6E5D62;
  --dourado:#C2922F;

  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --topo-h:84px;
  --raio:14px;
}

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

html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* height:auto é obrigatório: sem ele os atributos width/height do HTML
   vencem o aspect-ratio e a imagem sai na altura natural */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.14;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.15rem, 1.35rem + 3.4vw, 3.7rem); }
h2{ font-size:clamp(1.85rem, 1.3rem + 2.1vw, 2.85rem); }
h1 em{ font-style:italic; color:var(--acento); }

p{ margin:0 0 1.05rem; }

.container{ width:100%; max-width:1140px; margin:0 auto; padding:0 24px; }
.container-estreito{ max-width:760px; }

.sobrancelha{
  font-size:.76rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--acento);
  font-weight:400;
  margin:0 0 1.1rem;
}

/* ————— botões ————— */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.92rem 1.6rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:400;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn svg{ width:19px; height:19px; fill:currentColor; flex:none; }
.btn-acento{
  background:var(--acento);
  color:#fff;
  box-shadow:0 10px 26px -14px rgba(142,66,86,.75);
}
.btn-acento:hover{ background:var(--acento-escuro); transform:translateY(-1px); }
.btn-claro{ background:#fff; color:var(--acento); }
.btn-claro:hover{ background:var(--rosa-claro); transform:translateY(-1px); }
.btn-grande{ padding:1.05rem 2rem; font-size:1.03rem; }

/* ————— topo ————— */
.topo{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,252,252,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo-linha{
  height:var(--topo-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.topo-marca img{ height:58px; width:auto; }
.btn-topo{ padding:.7rem 1.3rem; font-size:.92rem; }

/* ————— hero ————— */
.hero{
  position:relative;
  padding:clamp(2.5rem,1.4rem + 4vw,5.5rem) 0 clamp(3rem,2rem + 3vw,5rem);
  background:
    radial-gradient(90% 70% at 88% 8%, #FDEEF0 0%, rgba(253,238,240,0) 62%),
    linear-gradient(180deg,#FFFCFC 0%, #FDF6F6 100%);
  overflow:hidden;
}
.hero-grade{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,1rem + 3vw,4.5rem);
  align-items:center;
}
.hero-texto{ max-width:34rem; }
.hero-linha{
  font-size:1.09rem;
  color:var(--tinta-suave);
  margin:1.35rem 0 2rem;
  max-width:31rem;
}
.hero-credencial{
  margin:1.4rem 0 0;
  font-size:.83rem;
  letter-spacing:.07em;
  color:var(--tinta-suave);
}

.hero-foto{
  margin:0;
  position:relative;
}
.hero-foto::before{
  content:"";
  position:absolute;
  inset:-18px -18px 28px 28px;
  border:1px solid var(--rosa);
  border-radius:28px;
  opacity:.55;
}
.hero-foto img{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:50% 32%;
  border-radius:24px;
}

/* ————— faixa de credenciais ————— */
.faixa{
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  background:var(--branco);
}
.faixa-linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.35rem 24px;
  text-align:center;
}
.faixa-linha p{
  margin:0;
  flex:1;
  font-size:.94rem;
  color:var(--tinta-suave);
  position:relative;
}
.faixa-linha p + p::before{
  content:"";
  position:absolute;
  left:-.75rem;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:1.3rem;
  background:var(--linha);
}
.faixa-linha strong{ color:var(--tinta); font-weight:500; }

/* ————— seções ————— */
.secao{ padding:clamp(3.6rem,2.4rem + 4vw,6.6rem) 0; }
.secao-cabeca{ max-width:39rem; margin-bottom:clamp(2.2rem,1.5rem + 2vw,3.2rem); }
.secao-cabeca p{
  margin:1.1rem 0 0;
  color:var(--tinta-suave);
  font-size:1.04rem;
}

/* sintomas — lista tipográfica, sem cards */
.lista-sintomas{
  list-style:none;
  margin:0;
  padding:0;
  columns:2;
  column-gap:4rem;
}
.lista-sintomas li{
  break-inside:avoid;
  padding:1.05rem 0 1.05rem 2.5rem;
  border-bottom:1px solid var(--linha);
  position:relative;
  font-size:1.03rem;
}
.lista-sintomas li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.85rem;
  width:20px;
  height:1px;
  background:var(--rosa);
}

/* ————— sobre ————— */
.sobre{ background:var(--nevoa); }
.sobre-grade{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,1rem + 3.5vw,4.5rem);
  align-items:center;
}
.sobre-foto{ margin:0; position:relative; }
.sobre-foto::after{
  content:"";
  position:absolute;
  right:-18px;
  bottom:-18px;
  width:62%;
  height:58%;
  border:1px solid var(--rosa);
  border-radius:var(--raio);
  z-index:0;
}
.sobre-foto img{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 18%;
  border-radius:var(--raio);
}
.sobre-texto h2{ margin-bottom:1.4rem; }
.sobre-texto p{ color:var(--tinta-suave); }
.sobre-texto strong{ color:var(--tinta); font-weight:400; }
.assinatura{
  margin-top:1.6rem;
  font-size:.82rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--acento);
}

/* ————— consultório ————— */
.consultorio-foto{ margin:0 0 2.6rem; }
.consultorio-foto img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:50% 55%;
  border-radius:var(--raio);
}
.consultorio-dados{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  padding-bottom:2.6rem;
  border-bottom:1px solid var(--linha);
}
.rotulo{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--acento);
  margin:0 0 .55rem;
}
.dado{ margin:0; font-size:1.02rem; line-height:1.6; }
.dado a{ text-decoration:none; border-bottom:1px solid var(--linha); }
.dado a:hover{ border-color:var(--acento); }
.link-sutil{
  display:inline-block;
  margin-top:.7rem;
  font-size:.92rem;
  color:var(--acento);
  text-decoration:none;
  border-bottom:1px solid var(--rosa);
}
.link-sutil:hover{ border-color:var(--acento); }

.mapa{
  margin-top:2.6rem;
  border-radius:var(--raio);
  overflow:hidden;
  border:1px solid var(--linha);
  line-height:0;
}
.mapa iframe{ width:100%; height:340px; border:0; filter:saturate(.85); }

/* ————— chamada final ————— */
.chamada{
  background:linear-gradient(160deg,#B0566B 0%, #8E4256 100%);
  color:#fff;
  padding:clamp(3.6rem,2.4rem + 4vw,6rem) 0;
  text-align:center;
}
.chamada h2{ margin-bottom:1rem; }
.chamada p{
  color:rgba(255,255,255,.86);
  margin-bottom:2.1rem;
  font-size:1.05rem;
}

/* ————— rodapé ————— */
.rodape{
  background:var(--vinho);
  color:rgba(255,255,255,.78);
  padding:3.4rem 0 2.4rem;
  font-size:.95rem;
}
.rodape-grade{
  display:flex;
  justify-content:space-between;
  gap:2.5rem;
  flex-wrap:wrap;
  padding-bottom:2.2rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.rodape-logo{ height:70px; width:auto; opacity:.95; }
.rodape-crm{
  margin:1rem 0 0;
  font-size:.76rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.rodape-info{ display:flex; gap:3rem; flex-wrap:wrap; }
.rodape-info p{ margin:0; line-height:1.75; }
.rodape-info a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); }
.rodape-info a:hover{ border-color:var(--rosa); }
.rodape-aviso{
  margin:1.8rem 0 0;
  font-size:.8rem;
  color:rgba(255,255,255,.45);
}

/* ————— barra fixa mobile ————— */
.barra-wa{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:70;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  background:var(--acento);
  color:#fff;
  text-decoration:none;
  font-size:1.02rem;
  letter-spacing:.02em;
  padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 26px -18px rgba(67,38,46,.9);
}
.barra-wa svg{ width:20px; height:20px; fill:currentColor; }

/* ————— revelação ao rolar ————— */
.com-js .revelar{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.com-js .revelar.visivel{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .com-js .revelar{ opacity:1; transform:none; transition:none; }
}

/* ===========================================================
   RESPONSIVO
   =========================================================== */

@media (max-width:1000px){
  .hero-grade{ gap:2.2rem; }
  .sobre-grade{ grid-template-columns:1fr 1.25fr; }
}

@media (max-width:860px){
  body{ font-size:16.5px; padding-bottom:0; }

  .topo-linha{ height:70px; }
  .topo-marca img{ height:48px; }
  .btn-topo{ display:none; }

  .hero{ padding-top:1.9rem; }
  .hero-grade{ grid-template-columns:1fr; gap:1.9rem; }
  .hero-texto{ order:2; max-width:none; }
  .hero-foto{ order:1; }
  .hero-foto{ max-width:320px; margin-inline:auto; }
  .hero-foto::before{ inset:-12px -12px 20px 20px; border-radius:24px; }
  .hero-foto img{
    aspect-ratio:1/1;
    object-position:50% 30%;
    border-radius:20px;
  }
  .hero-linha{ margin:1.1rem 0 1.7rem; font-size:1.04rem; }
  .btn-grande{ width:100%; justify-content:center; }

  .faixa-linha{ flex-direction:column; gap:.85rem; padding:1.4rem 24px; }
  .faixa-linha p + p::before{ display:none; }

  .lista-sintomas{ columns:1; }
  .lista-sintomas li{ padding:.95rem 0 .95rem 2.2rem; }
  .lista-sintomas li::before{ top:1.7rem; width:16px; }

  .sobre-grade{ grid-template-columns:1fr; gap:2.2rem; }
  .sobre-foto{ max-width:400px; }
  .sobre-foto img{ aspect-ratio:1/1; }
  .sobre-foto::after{ right:-12px; bottom:-12px; }

  .consultorio-foto img{ aspect-ratio:4/3; }
  .consultorio-dados{ grid-template-columns:1fr; gap:1.7rem; }
  .mapa iframe{ height:280px; }

  .rodape{ padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
  .rodape-grade{ flex-direction:column; gap:1.8rem; }
  .rodape-info{ flex-direction:column; gap:1.1rem; }

  /* a barra só entra depois que o CTA do hero sai de vista —
     assim a primeira dobra fica limpa e os dois botões não competem */
  .barra-wa{ display:flex; }
  .com-js .barra-wa{ transform:translateY(115%); transition:transform .35s ease; }
  .com-js .barra-wa.visivel{ transform:none; }
}

@media (max-width:420px){
  .hero-foto{ max-width:270px; }
  .btn-grande{ padding:1rem 1.2rem; font-size:1rem; }
}