/* Shared visual rules for all seven pages; component layout stays local. */
:root {
  --green: #153e33;
  --green2: #28594a;
  --cream: #f5f4ee;
  --surface: #e9ece2;
  --muted: #657264;
  --line: #cbd4c4;
  --accent: #78906c;
  --site-gutter: clamp(22px, 4vw, 56px);
  --site-width: 1280px;
  --section-space: clamp(60px, 7vw, 96px);
  --heading-xl: clamp(38px, 4.4vw, 64px);
  --heading-lg: clamp(32px, 3.3vw, 46px);
  --heading-md: clamp(24px, 2.2vw, 28px);
  --body-size: 14px;
  --control-height: 52px;
}
body { background: var(--cream); color: var(--green); line-height: 1.7; }
::selection { background: var(--green); color: var(--cream); text-shadow: none; }
.wrap { width: min(var(--site-width), calc(100% - var(--site-gutter) * 2)); }
.header.wrap { width: 100%; padding-inline: max(var(--site-gutter), calc((100vw - var(--site-width)) / 2)); }
.section { padding-block: var(--section-space); }
#conteudo h2,
#conteudo .treatment-reading .home-section-heading h2 { font-size: var(--heading-lg); line-height: 1.16; letter-spacing: -.04em; }
#conteudo h3 { font-size: var(--heading-md); line-height: 1.25; letter-spacing: -.03em; }
#conteudo .page-heading h1,
#conteudo .treatment-reading .page-heading h1,
#conteudo .doctor-hero h1 { font-size: var(--heading-xl); line-height: 1.12; letter-spacing: -.045em; }
#conteudo .doctor-hero h1 em { font-size: 1em; }
#conteudo .contact-panel h2,
#conteudo .detail-aside h2 { font-size: var(--heading-md); line-height: 1.25; }
#conteudo .contact-information h2 { font-size: 16px; line-height: 1.45; letter-spacing: -.02em; }
#conteudo .treatment-reading .treatment-entry h3 { font-size: 26px; line-height: 1.25; }
#conteudo :is(.intro-grid, .clinic-story-copy, .editorial-doctor-copy, .doctor-hero-copy, .detail-copy, .contact-panel, .location-copy, .reputation-grid, .values-grid) p { font-size: var(--body-size); line-height: 1.85; }
#conteudo .page-heading > p { font-size: var(--body-size); line-height: 1.85; max-width: 670px; }
#conteudo .treatment-entry-copy p { font-size: var(--body-size); line-height: 1.85; }
.eyebrow { font-size: 10px; font-weight: 550; line-height: 1.6; letter-spacing: .13em; }
.breadcrumbs { font-size: 11px; line-height: 1.7; margin-bottom: 32px; }
.page-heading { padding-top: 32px; padding-bottom: 48px; }
.doctor-hero { padding-top: 32px; padding-bottom: var(--section-space); }
.doctor-hero .breadcrumbs { margin-bottom: 32px; }
.intro-grid, .clinic-story-grid, .doctor-hero-grid, .treatment-detail, .contact-page { column-gap: 64px; }
.button { min-height: var(--control-height); min-width: 0; padding: 10px 12px 10px 24px; gap: 24px; border-radius: 999px; font-size: 12px; line-height: 1.4; font-weight: 550; letter-spacing: -.015em; }
.button > span:not(.journey-next-label) { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid currentColor; border-radius: 50%; display: inline-grid; place-items: center; }
.button > span .icon { width: 16px; height: 16px; }
.button-light { background: var(--green); color: #fff; }
.button-light:hover { background: var(--green2); }
.clinic-hero .button-light { background: #e7eedc; color: var(--green); }
.clinic-hero .button-light:hover { background: #f4f5eb; }
.button-outline { color: #edf2e4; border: 1px solid #aec1a1; background: transparent; }
.button:focus-visible, .text-link:focus-visible, select:focus-visible, .journey-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.header-cta { min-height: 44px; font-size: 11px; padding: 7px 10px 7px 20px; gap: 18px; }
.button.header-cta > span { width: 28px; height: 28px; }
.text-link, .treatment-reading .treatment-card .text-link { min-height: 42px; font-size: 12px; line-height: 1.6; gap: 18px; align-items: center; }
.text-link .icon { width: 17px; height: 17px; }
.detail-aside, .contact-panel { padding: 32px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.detail-aside li, .contact-information p { font-size: 13px; line-height: 1.85; }
.contact-panel select { min-height: var(--control-height); font-size: 14px; border-color: #bac8b0; border-radius: 0; }
.contact-panel label, .contact-panel .contact-phone { font-size: 12px; }
.info-symbol, .detail-symbol { width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #e3eadb; color: #617b52; }
.info-symbol > .icon, .detail-symbol > .icon { width: 23px; height: 23px; }
.values-grid { gap: 32px; }
.values-grid article { border-color: var(--line); }
.values-grid article > span { color: #617b52; }
.values-grid article > span .icon { width: 28px; height: 28px; }
.care-journey { background: var(--cream); }
.journey-widget, .treatment-reading .journey-widget { padding: 28px 0; border: 1px solid var(--line); border-inline: 0; background: transparent; }
.journey-tabs, .treatment-reading .journey-tabs { margin-bottom: 28px; }
.journey-tab, .treatment-reading .journey-tab { font-size: 11px; }
.journey-panel, .treatment-reading .journey-panel { grid-template-columns: 64px minmax(0, 1fr); gap: 28px; padding: 28px 0; min-height: 230px; }
.journey-panel-mark, .treatment-reading .journey-panel-mark { width: 64px; height: 64px; border-radius: 18px; }
.journey-panel-mark .icon, .treatment-reading .journey-panel-mark .icon { width: 32px; height: 32px; }
#conteudo .journey-panel h3,
#conteudo .treatment-reading .journey-panel h3 { font-size: 26px; margin: 0 0 14px; }
.journey-panel p, .treatment-reading .journey-panel p { font-size: 14px; line-height: 1.85; }
.journey-panel .journey-detail { font-size: 12px; }
/* Hidden stages stay hidden when responsive layouts change panel display. */
#conteudo .journey-panel[hidden] { display: none; }
.journey-controls .button, .treatment-reading .journey-controls .button { min-height: var(--control-height); font-size: 12px; }
.journey-back { min-height: 44px; }
/* One closing component, aligned with each page's content. */
.contact, .treatment-closing { background: var(--cream); }
.contact-inner, .treatment-closing .contact-inner { padding-block: 60px 76px; border-top: 1px solid var(--line); text-align: left; }
.contact .eyebrow { justify-content: flex-start; }
#conteudo .contact h2 { max-width: 820px; margin-block: 24px; font-size: var(--heading-lg); line-height: 1.16; text-wrap: pretty; }
.contact .contact-inner > p { max-width: 620px; margin: 0 0 28px; font-size: 14px; line-height: 1.85; }
.contact-location { margin-top: 24px; font-size: 11px; }
.contact-location > span { font-size: 10px; }
.contact-orbit { display: none; }
.site-footer { background: var(--cream); padding-block: 54px 24px; }
.site-footer h2 { font-size: 12px; line-height: 1.5; font-weight: 600; }
.footer-grid > div > a:not(.brand), .footer-grid > div > p { font-size: 11px; line-height: 1.85; }
.site-footer .footer-base p { font-size: 10px; line-height: 1.7; }
@media (max-width: 1100px) {
  .intro-grid, .clinic-story-grid, .doctor-hero-grid, .treatment-detail, .contact-page { column-gap: 40px; }
}
@media (max-width: 800px) {
  .intro-grid, .clinic-story-grid, .doctor-hero-grid, .treatment-detail, .contact-page { column-gap: 28px; }
  .journey-tab, .treatment-reading .journey-tab { font-size: 10px; }
}
@media (max-width: 600px) {
  :root { --heading-xl: clamp(36px, 9.5vw, 48px); --heading-lg: clamp(30px, 8vw, 38px); --heading-md: 24px; --section-space: 60px; }
  .header-cta { font-size: 10px; padding: 7px 10px 7px 14px; gap: 10px; }
  .button { gap: 20px; }
  .page-heading { padding-top: 24px; padding-bottom: 36px; }
  .doctor-hero { padding-top: 24px; }
  .breadcrumbs, .doctor-hero .breadcrumbs { margin-bottom: 26px; }
  .detail-aside, .contact-panel { padding: 24px; }
  .journey-panel, .treatment-reading .journey-panel { display: block; min-height: 300px; }
  .journey-panel-mark, .treatment-reading .journey-panel-mark { margin-bottom: 22px; }
  .journey-tab, .treatment-reading .journey-tab { font-size: 8px; }
  .journey-controls .journey-current { display: none; }
  .contact-inner, .treatment-closing .contact-inner { padding-block: 46px 60px; }
  .footer-grid { gap: 28px; }
}
@media (max-width: 400px) {
  .header-cta { font-size: 0; padding: 8px; gap: 0; }
  .button.header-cta > span { width: 28px; height: 28px; }
}