/* ═══════════════════════════════════════════════════════════════
   Artur Hirai · Estética Orofacial
   Folha de estilo compartilhada — hub, termos, anamnese e cuidados
   Herda tokens do design system (bone/ink/sage, Bodoni Moda/IBM Plex Sans/Mono)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bone:#F4F1EA; --paper:#EDE8DE; --sand:#D6C9B0; --linen:#E8E2D3;
  --ink:#1A1D1B; --charcoal:#2A2E2A; --slate:#4A4F4A; --mist:#8A8D86;
  --sage:#3A4A3E; --moss:#56665A; --ochre:#9A7E4F; --terracotta:#B8856A;
  --toshi:#B04230;
  --alert:#C46B4E;
  --ff-display:'Bodoni Moda', serif;
  --ff-body:'IBM Plex Sans', system-ui, sans-serif;
  --ff-mono:'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.2,.6,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--ff-body);font-weight:400;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--sage);text-decoration:none;border-bottom:1px solid currentColor;}
a:hover{color:var(--ink);}
em{font-style:italic;}
strong{font-weight:500;color:var(--ink);}

/* ───── topbar (igual à anamnese) ───── */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(244,241,234,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(26,29,27,.08);
}
.topbar__inner{
  max-width:1200px;margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);border:0;}
.brand__mark{
  width:36px;height:auto;display:block;flex-shrink:0;
}
.brand__mark img{width:100%;height:auto;display:block;}
.brand__name{
  font-family:var(--ff-display);font-weight:300;font-size:22px;letter-spacing:.01em;line-height:1;
}
.brand__name em{font-style:italic;}
.topbar__meta{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);
}
.topbar__back{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);border:0;
  display:inline-flex;align-items:center;gap:8px;
}
.topbar__back:hover{color:var(--sage);}

/* ───── hero ───── */
.page-hero{max-width:880px;margin:0 auto;padding:64px 32px 32px;}
.page-hero__eyebrow{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage);margin-bottom:20px;
}
.page-hero__title{
  font-family:var(--ff-display);font-weight:300;
  font-size:clamp(40px,6vw,64px);line-height:1.02;
  letter-spacing:-0.01em;margin:0 0 20px;
}
.page-hero__title em{font-style:italic;color:var(--sage);}
.page-hero__lede{
  font-size:17px;line-height:1.65;color:var(--slate);
  max-width:640px;margin:0;
}
.page-hero__lede + .page-hero__lede{margin-top:14px;}

/* ───── shell ───── */
.shell{max-width:880px;margin:0 auto;padding:32px 32px 120px;}

/* ───── note boxes ───── */
.note{
  padding:20px 22px;background:var(--paper);
  border-left:2px solid var(--sage);
  font-size:14px;line-height:1.65;color:var(--charcoal);
  margin:24px 0;
}
.note--ochre{border-left-color:var(--ochre);}
.note--alert{border-left-color:var(--alert);background:rgba(196,107,78,.06);}
.note__label{
  display:block;font-family:var(--ff-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--sage);
  margin-bottom:6px;font-weight:500;
}
.note--ochre .note__label{color:var(--ochre);}
.note--alert .note__label{color:var(--alert);}

/* ───── footer ───── */
.foot{
  margin-top:120px;padding:40px 48px;background:var(--ink);color:var(--bone);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.foot a{color:var(--bone);border-bottom-color:rgba(244,241,234,.3);}
.foot a:hover{color:var(--sage);border-bottom-color:var(--sage);}
@media(max-width:720px){
  .foot{flex-direction:column;align-items:flex-start;padding:32px 24px;}
}

/* ───── section headings ───── */
.section{margin-top:56px;}
.section__eyebrow{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage);margin-bottom:10px;
}
.section__title{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(28px,3.5vw,40px);line-height:1.1;
  margin:0 0 18px;letter-spacing:-0.01em;
}
.section__title em{font-style:italic;color:var(--sage);font-weight:300;}
.section__lede{color:var(--slate);font-size:16px;line-height:1.65;margin:0 0 28px;max-width:640px;}

/* ───── prose ───── */
.prose p{margin:0 0 14px;color:var(--charcoal);font-size:15px;line-height:1.7;}
.prose h3{
  font-family:var(--ff-display);font-weight:500;font-size:22px;
  margin:36px 0 12px;letter-spacing:-0.005em;
}
.prose h4{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage);font-weight:500;
  margin:28px 0 10px;
}
.prose ul{margin:0 0 18px;padding-left:22px;color:var(--charcoal);}
.prose ul li{margin:6px 0;line-height:1.65;font-size:15px;}
.prose ol{margin:0 0 18px;padding-left:22px;color:var(--charcoal);}
.prose ol li{margin:10px 0;line-height:1.65;font-size:15px;}

/* ───── print ───── */
@media print{
  .topbar,.foot,.no-print{display:none !important;}
  body{background:white;color:black;}
  .shell{max-width:none;padding:0;}
  .note{break-inside:avoid;}
  .section{break-inside:avoid-page;}
  a{color:black;border-bottom:none;}
}