/* ============================================================
   Dr. Abraao Peixoto - main.css (single-file production bundle)
   Auto-bundled from /base, /layout, /components, /sections and /utilities.
   ============================================================ */

/* -- base/tokens.css ---------------------------------------- */
/* ============================================================
   DESIGN TOKENS
   ─────────────────────────────────────────────────────────────
   Single source of truth for the entire visual system.
   All colours, spacing, radius, shadow and motion values live here.
   Never hardcode values outside this file.
   ============================================================ */
:root {

  /* ── Colour Palette ───────────────────────────────────────── */
  --c-bg:           #F5F7FA;    /* page background - neutral system tint  */
  --c-surface:      #FFFFFF;    /* cards, sections                        */
  --c-surface-2:    #F8FAFC;    /* alternating surface                    */

  /* Ink hierarchy — deep navy family, zero pure-black */
  --c-ink-1:        #0C1B2E;    /* headlines                              */
  --c-ink-2:        #354E68;    /* body text                              */
  --c-ink-3:        #748DA6;    /* captions, muted                        */

  /* Brand accent — medical blue */
  --c-accent:       #1A4E8A;    /* primary CTA, links                     */
  --c-accent-hover: #2770CC;    /* hover / active state                   */
  --c-accent-lt:    #E4EDFC;    /* tint backgrounds                       */
  --c-accent-dk:    #0B2A54;    /* dark variant                           */

  /* Dark sections — deep navy (replaces black entirely) */
  --c-dark:         #0D1C30;
  --c-dark-2:       #152338;    /* slightly lighter for layering          */

  /* ── Borders ─────────────────────────────────────────────── */
  --b-subtle:       rgba(26, 78, 138, 0.08);
  --b-default:      rgba(26, 78, 138, 0.14);

  /* ── Radius ──────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 100px;

  /* ── Elevation / Shadow ──────────────────────────────────── */
  --sh-xs:  0 1px  6px  rgba(12, 27, 46, 0.05);
  --sh-sm:  0 3px  16px rgba(12, 27, 46, 0.07);
  --sh-md:  0 10px 44px rgba(12, 27, 46, 0.09);
  --sh-lg:  0 28px 88px rgba(12, 27, 46, 0.11);

  /* ── Glassmorphism ───────────────────────────────────────── */
  --glass-bg:  rgba(255,255,255,0.68);
  --glass-bd:  rgba(255,255,255,0.52);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur:   0.32s;

  /* ── Fluid Spacing Scale ─────────────────────────────────── */
  /* Uses clamp(min, preferred, max) — scales with viewport     */
  --sp-2xs: clamp(0.25rem, 0.5vw,  0.5rem);
  --sp-xs:  clamp(0.5rem,  1vw,    0.75rem);
  --sp-sm:  clamp(0.75rem, 1.5vw,  1rem);
  --sp-md:  clamp(1rem,    2vw,    1.5rem);
  --sp-lg:  clamp(1.5rem,  3vw,    2.5rem);
  --sp-xl:  clamp(2.5rem,  6vw,    4.5rem);
  --sp-2xl: clamp(4rem,    10vw,   8rem);

  /* Section vertical rhythm */
  --sec-py:       clamp(3.5rem, 9vw, 8rem);
  --sec-py-tight: clamp(2.5rem, 6vw, 5rem);
}


/* -- base/reset.css ---------------------------------------- */
/* ============================================================
   RESET & BASE
   ─────────────────────────────────────────────────────────────
   Minimal, purposeful reset. Preserves browser defaults where
   they are beneficial. Box-sizing border-box on everything.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Prevent layout shift from scrollbar appearing */
  scrollbar-gutter: stable;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  background-color: var(--c-bg);
  color: var(--c-ink-1);
  line-height: 1.65;
  /* Base font size — scales with OS accessibility settings */
  font-size: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent text inflation on mobile */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; }
p { color: var(--c-ink-2); }

main { min-width: 0; }

section,
article,
aside,
header,
footer,
nav,
div,
li,
p,
h1,
h2,
h3,
h4,
a,
span {
  overflow-wrap: anywhere;
}


/* -- base/typography.css ---------------------------------------- */
/* ============================================================
   FLUID TYPOGRAPHY SYSTEM
   ─────────────────────────────────────────────────────────────
   All sizes use clamp() for smooth scaling between breakpoints.
   Formula: clamp(min, viewport-relative, max)
   Optical sizing ensures readability at every viewport.

   Breakpoint Reference (mobile-first scale):
     xs  — default          (≥ 0px)    — all phones
     sm  — @media (≥480px)  — large phones
     md  — @media (≥640px)  — phablets / landscape phones
     lg  — @media (≥768px)  — tablets
     xl  — @media (≥900px)  — small laptops
     2xl — @media (≥1100px) — desktops
   ============================================================ */

/* Serif display — headlines */
h1, h2, h3, h4 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--c-ink-1);
}

/* Fluid sizes — mobile → desktop */
h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); }

/* ── Utility type role classes ─────────────────────────────── */

/* Pull-quotes, callouts */
.t-display {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.5vw + 0.25rem, 1.65rem);
  line-height: 1.38;
  color: var(--c-ink-1);
}

/* Intro paragraphs, sub-headlines */
.t-body-lg {
  font-size: clamp(1rem, 1.4vw + 0.1rem, 1.125rem);
  line-height: 1.80;
  color: var(--c-ink-2);
}

.t-body {
  font-size: clamp(0.9rem, 1vw + 0.05rem, 1rem);
  line-height: 1.72;
  color: var(--c-ink-2);
}

.t-small {
  font-size: clamp(0.8rem, 0.8vw + 0.05rem, 0.875rem);
  color: var(--c-ink-3);
}

.t-caption {
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--c-ink-3);
}


/* -- layout/grid.css ---------------------------------------- */
/* ============================================================
   LAYOUT PRIMITIVES
   ─────────────────────────────────────────────────────────────
   Mobile-first. Base = single column.
   Grid expands progressively at breakpoints.
   All values fluid via clamp() or CSS custom properties.
   ============================================================ */

/* Centered max-width container with fluid padding */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  /* Fluid inline padding — generous on mobile, spacious on desktop */
  padding-inline: clamp(1.125rem, 5vw, 3rem);
  min-width: 0;
}

/* Section rhythm — consistent vertical breathing room */
.section        { padding-block: var(--sec-py); }
.section--tight { padding-block: var(--sec-py-tight); }

/* Background surface helpers */
.bg-page    { background-color: var(--c-bg); }
.bg-surface { background-color: var(--c-surface); }
.bg-surface2{ background-color: var(--c-surface-2); }
.bg-dark    { background-color: var(--c-dark); }

/*
   Two-column grid — stack on mobile, side-by-side at ≥850px
   Uses gap that scales with viewport
*/
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 850px) {
  .grid-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* Section header block — intro for each section */
.section-header {
  margin-bottom: clamp(2rem, 5vw, 4rem);
  /* Optical max-width for readability */
  max-width: 52ch;
}

.section-header h2 {
  margin-top: var(--sp-xs);
}

/* ── Utility helpers ─────────────────────────────────────────── */
.text-center { text-align: center; }
.mx-auto     { margin-inline: auto; }
.max-prose   { max-width: 65ch; }    /* Optimal reading line length       */
.max-narrow  { max-width: 48ch; }    /* Tighter blocks (sub-headlines)    */


/* -- components/buttons.css ---------------------------------------- */
/* ============================================================
   COMPONENT: BUTTONS
   ─────────────────────────────────────────────────────────────
   Touch target: min 48px tall (WCAG 2.5.5)
   Smooth transition on all interactive properties.
   Variants: primary, ghost, ghost-light, block.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Fluid horizontal padding — comfortable on mobile */
  padding: 0.875rem clamp(1.25rem, 3vw, 1.875rem);
  /* Minimum 48px height for reliable touch */
  min-height: 48px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: normal;
  text-align: center;
  max-width: 100%;
  transition:
    background-color var(--dur) var(--ease),
    color            var(--dur) var(--ease),
    border-color     var(--dur) var(--ease),
    box-shadow       var(--dur) var(--ease),
    transform        var(--dur) var(--ease);
  /* Prevent tap highlight on mobile */
  -webkit-tap-highlight-color: transparent;
}

/* ── Primary — solid blue ──────────────────────────────────── */
.btn--primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  box-shadow: 0 4px 18px rgba(26, 78, 138, 0.28);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  box-shadow: 0 8px 26px rgba(26, 78, 138, 0.38);
  transform: translateY(-1px);
}

/* ── Ghost — transparent with border ──────────────────────── */
.btn--ghost {
  background: transparent;
  color: var(--c-ink-1);
  border-color: var(--b-default);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--c-surface);
  border-color: var(--c-accent);
  color: var(--c-accent);
  transform: translateY(-1px);
}

/* ── Ghost on dark backgrounds ─────────────────────────────── */
.btn--ghost-lt {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.32);
}
.btn--ghost-lt:hover,
.btn--ghost-lt:focus-visible {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.62);
}

/* ── Block — full-width on mobile, auto on larger ──────────── */
.btn--block { width: 100%; }

@media (min-width: 480px) {
  .btn--block { width: auto; }
}


/* -- components/labels.css ---------------------------------------- */
/* ============================================================
   COMPONENT: LABELS, DIVIDERS & TAGS
   ─────────────────────────────────────────────────────────────
   Eyebrow labels draw the eye before headlines.
   Accent dividers create rhythm before headings.
   Pill tags mark small taxonomy items.
   ============================================================ */

/* ── Eyebrow label ─────────────────────────────────────────── */
.label {
  display: inline-block;
  font-size: 0.685rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-accent-hover);
  line-height: 1;
}

.label--light { color: rgba(255,255,255,0.42); }

/* ── Accent rule ───────────────────────────────────────────── */
.divider {
  width: 32px;
  height: 1.5px;
  background: var(--c-accent-hover);
  margin-block: var(--sp-md);
  border: none;
}

.divider--light  { background: rgba(255,255,255,0.22); }
.divider--center { margin-inline: auto; }

/* ── Pill tag ──────────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: var(--c-surface);
  border: 1px solid var(--b-default);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  color: var(--c-ink-2);
  /* Prevent small tags from being too small to tap */
  min-height: 32px;
  line-height: 1.5;
}


/* -- components/cards.css ---------------------------------------- */
/* ============================================================
   COMPONENT: CARD VARIANTS
   ─────────────────────────────────────────────────────────────
   Base classes composable with BEM modifiers.
   Radius and shadow scale with card size via design tokens.
   Three surfaces: glass, solid, tinted.
   ============================================================ */

/* ── Glass card ─────────────────────────────────────────────── */
.card-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  min-width: 0;
}

/* ── Solid card ─────────────────────────────────────────────── */
.card-solid {
  background: var(--c-surface);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  min-width: 0;
}

/* ── Tinted card ────────────────────────────────────────────── */
.card-tinted {
  background: var(--c-surface-2);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-md);
  min-width: 0;
}

/* ── Interactive lift modifier (progressive enhancement) ────── */
@media (hover: hover) {
  .card-lift {
    transition:
      transform     var(--dur) var(--ease),
      box-shadow    var(--dur) var(--ease),
      border-color  var(--dur) var(--ease);
  }
  .card-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: rgba(26, 78, 138, 0.22);
  }
}


/* -- sections/nav.css ---------------------------------------- */
/* ============================================================
   SECTION: NAVIGATION
   ─────────────────────────────────────────────────────────────
   Sticky enterprise nav with responsive hamburger menu.
   Desktop: logo left, links center, lang-picker + CTA right.
   Mobile (<768px): logo + hamburger + lang-picker + CTA.
   Glass effect activates on scroll (via JS .is-scrolled).
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: 0.875rem;
  transition:
    background     var(--dur) var(--ease),
    box-shadow     var(--dur) var(--ease),
    padding-block  var(--dur) var(--ease);
}

.nav.is-scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--b-subtle);
  box-shadow: 0 1px 20px rgba(12, 27, 46, 0.06);
  padding-block: 0.75rem;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

@media (min-width: 768px) {
  .nav__inner { gap: 1rem; }
}

/* Logo */
.nav__logo {
  font-family: inherit;
  font-size: clamp(0.875rem, 1.8vw, 1rem);
  color: var(--c-ink-1);
  text-decoration: none;
  letter-spacing: 0;
  flex-shrink: 0;
  min-width: 0;
}

.nav__logo span { color: var(--c-accent-hover); }

/* ─── HAMBURGER TOGGLE ──────────────────────────────────────
   Visible ONLY on Portuguese pages (lang="pt-BR" / "pt") below 768px.
   English & Spanish are single-page landings — no menu needed.
   ============================================================ */
.nav__toggle {
  -webkit-appearance: none;
  appearance: none;
  display: none; /* hidden by default — opt-in per language below */
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--b-default);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--c-ink-1);
  transition:
    background     var(--dur) var(--ease),
    border-color   var(--dur) var(--ease),
    color          var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

/* Show hamburger ONLY on Portuguese pages, on mobile */
@media (max-width: 767px) {
  html[lang="pt-BR"] .nav__toggle,
  html[lang="pt-br"] .nav__toggle,
  html[lang="pt"]    .nav__toggle {
    display: inline-flex;
  }
}

.nav__toggle:hover,
.nav__toggle:focus-visible {
  background: var(--c-surface);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.nav__toggle-icon,
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  content: '';
  display: block;
  width: 18px;
  height: 1.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.32s var(--ease), opacity 0.18s var(--ease), top 0.18s var(--ease);
  position: relative;
}

.nav__toggle-icon {
  position: relative;
}

.nav__toggle-icon::before,
.nav__toggle-icon::after {
  position: absolute;
  left: 0;
  width: 18px;
}

.nav__toggle-icon::before { top: -6px; }
.nav__toggle-icon::after  { top: 6px; }

/* Animated X when open */
.nav.is-menu-open .nav__toggle-icon { background: transparent; }
.nav.is-menu-open .nav__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.nav.is-menu-open .nav__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Hide hamburger on tablet+ */
@media (min-width: 768px) {
  .nav__toggle { display: none; }
}

/* ─── NAV LINKS (mobile slide-down + desktop inline) ──────── */
.nav__links {
  /* Mobile: hidden by default, slides down when open */
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--b-subtle);
  box-shadow: 0 24px 60px rgba(12, 27, 46, 0.10);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(5rem, 14vw, 6.5rem) clamp(1.125rem, 5vw, 2rem) clamp(1.5rem, 4vw, 2rem);
  margin: 0;
  list-style: none;
  max-height: 100vh;
  max-height: 100svh;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  opacity: 0;
  transition:
    transform 0.40s var(--ease),
    opacity   0.32s var(--ease),
    visibility 0s linear 0.40s;
  z-index: 95;
  -webkit-overflow-scrolling: touch;
}

.nav.is-menu-open .nav__links {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
  transition:
    transform 0.42s var(--ease),
    opacity   0.32s var(--ease),
    visibility 0s linear 0s;
}

.nav__links li {
  list-style: none;
  border-bottom: 1px solid var(--b-subtle);
}

.nav__links li:last-child { border-bottom: none; }

.nav__links a {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--c-ink-1);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 1.125rem 0.25rem;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
  position: relative;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--c-accent);
  padding-left: 0.5rem;
}

.nav__links a[aria-current="page"] {
  color: var(--c-accent);
  font-weight: 600;
}

/* Mobile menu CTA inside the panel */
.nav__menu-cta {
  margin-top: clamp(1rem, 3vw, 1.5rem);
  padding-top: clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--b-default);
}

.nav__menu-cta .btn {
  width: 100%;
  justify-content: center;
}

/* Body lock when menu open */
body.has-menu-open {
  overflow: hidden;
}

/* Backdrop overlay (mobile only) */
.nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 27, 46, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0s linear 0.32s;
  z-index: 90;
}

.nav.is-menu-open ~ .nav__backdrop,
.nav__backdrop.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s var(--ease), visibility 0s linear 0s;
}

/* ─── DESKTOP NAV LINKS — reset to inline ─────────────────── */
@media (min-width: 1024px) {
  .nav__links {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    flex-direction: row;
    gap: clamp(0.875rem, 1.5vw, 1.5rem);
    flex: 1;
    justify-content: center;
    padding: 0;
    max-height: none;
    overflow: visible;
    transform: none;
    visibility: visible;
    opacity: 1;
    transition: none;
    z-index: auto;
  }

  .nav__links li {
    border-bottom: none;
  }

  .nav__links a {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--c-ink-2);
    padding: 0;
    letter-spacing: 0.01em;
  }

  .nav__links a:hover,
  .nav__links a:focus-visible {
    color: var(--c-accent);
    padding-left: 0;
  }

  .nav__links a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 1px;
    background: var(--c-accent);
    transform: scaleX(0);
    transition: transform 0.25s var(--ease);
  }

  .nav__links a:hover::after,
  .nav__links a:focus-visible::after { transform: scaleX(1); }

  .nav__menu-cta { display: none; }
  .nav__backdrop { display: none; }

  body.has-menu-open {
    overflow: auto;
  }
}

/* ─── CTA BUTTON ──────────────────────────────────────────── */
.nav__cta {
  display: none;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .nav__cta { display: inline-flex; }
}

@media (max-width: 1023px) {
  .nav__cta { display: none; }
}

/* On smallest phones, keep just lang-picker + hamburger */
@media (max-width: 479px) {
  .nav__inner { gap: 0.4rem; }
}

/* ============================================================
   LANGUAGE PICKER (Globe button + dropdown)
   ============================================================ */
.lang-picker {
  position: relative;
  margin-right: 0.45rem;
  flex-shrink: 0;
}

.lang-picker__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  background: transparent;
  border: 1px solid var(--b-default);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-ink-2);
  line-height: 1;
  transition:
    border-color var(--dur) var(--ease),
    color        var(--dur) var(--ease),
    background   var(--dur) var(--ease);
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
}

.lang-picker__toggle:hover,
.lang-picker__toggle:focus-visible {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-surface);
}

.lang-picker__globe {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lang-picker__current {
  letter-spacing: 0.08em;
  font-weight: 600;
}

.lang-picker__caret {
  width: 10px;
  height: 10px;
  margin-left: 0.1rem;
  opacity: 0.55;
  transition: transform var(--dur) var(--ease);
}

.lang-picker.is-open .lang-picker__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.lang-picker__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  min-width: 180px;
  padding: 0.4rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease),
    visibility 0.22s;
  z-index: 200;
}

.lang-picker.is-open .lang-picker__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-picker__menu li { list-style: none; }

.lang-picker__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-xs);
  font-size: 0.88rem;
  color: var(--c-ink-2);
  text-decoration: none;
  transition: background var(--dur), color var(--dur);
  min-height: 40px;
}

.lang-picker__menu a:hover,
.lang-picker__menu a:focus-visible {
  background: var(--c-accent-lt);
  color: var(--c-accent-dk);
}

.lang-picker__menu a.is-active {
  color: var(--c-accent);
  font-weight: 600;
  background: var(--c-accent-lt);
}

.lang-picker__menu a .lang-code {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--c-ink-3);
  text-transform: uppercase;
}

.lang-picker__menu a.is-active .lang-code { color: var(--c-accent); }

@media (max-width: 400px) {
  .lang-picker__current { display: none; }
  .lang-picker__toggle  { padding: 0.45rem 0.55rem; }
}


/* -- sections/hero.css ---------------------------------------- */
/* ============================================================
   SECTION: HERO — PERFORMANCE MEDICINE
   ─────────────────────────────────────────────────────────────
   Eye-flow: eyebrow → headline → sub → CTAs → micro-proof
   High-end performance angle. Commanding first impression.
   Mobile: single column. Desktop: 55/45 text | micro-proof card.
   ============================================================ */
.hero {
  min-height: auto;
  display: grid;
  place-items: center;
  padding-top: clamp(6rem, 14vw, 9rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
  background-color: var(--c-surface);
}

/* Atmospheric background — commanding, not decorative */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 92% 8%,  rgba(26, 78, 138, 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 4%  92%, rgba(26, 78, 138, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(228, 237, 252, 0.40) 0%, transparent 70%);
  pointer-events: none;
}

/* Grid — stacked mobile, side-by-side desktop */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    align-items: center;
  }
}

/* ── Left: primary message ──────────────────────────────────── */

/* Eyebrow tag */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  max-width: 100%;
}

.hero__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent-hover);
  flex-shrink: 0;
}

.hero__eyebrow-text {
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent-hover);
  line-height: 1.45;
}

/* Headline */
.hero__headline {
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 13ch;
}

@media (max-width: 899px) {
  .hero__headline { max-width: 16ch; }
}

.hero__headline em {
  font-style: italic;
  color: var(--c-accent-hover);
}

/* Sub-headline */
.hero__sub {
  max-width: 52ch;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* CTA group */
.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 380px) {
  .hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* Proof line below CTAs */
.hero__proof-line {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.78rem;
  color: var(--c-ink-3);
  flex-wrap: wrap;
}

.hero__proof-line::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--b-default);
  flex-shrink: 0;
}

/* ── Right: micro-proof panel ──────────────────────────────── */
.hero__panel { display: none; }

@media (min-width: 900px) {
  .hero__panel { display: block; }
}

.hero__panel-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
}

/* Decorative glow behind the card */
.hero__panel-card::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,112,204,0.09) 0%, transparent 68%);
  pointer-events: none;
}

.hero__panel-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 1.5rem;
}

/* Micro-proof bullet list */
.micro-proof {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.micro-proof__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--c-surface-2);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-sm);
  font-size: 0.83rem;
  color: var(--c-ink-2);
  min-width: 0;
}

.micro-proof__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-accent-lt);
  border: 1px solid rgba(26, 78, 138, 0.16);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.micro-proof__check::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent-hover);
}

/* Doctor identity strip at bottom of panel */
.hero__panel-footer {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--b-subtle);
}

.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent-lt), var(--c-accent-hover));
  display: grid;
  place-items: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-info p:first-child {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-ink-1);
  line-height: 1.3;
}

.avatar-info p:last-child {
  font-size: 0.73rem;
  color: var(--c-ink-3);
}


/* -- sections/problema.css ---------------------------------------- */
/* ============================================================
   SECTION: PROBLEMA (ICP RECOGNITION)
   ─────────────────────────────────────────────────────────────
   Makes the ICP self-identify immediately.
   Pattern: symptom list → insight breakout → implicit CTA.
   Mobile: stacked. Desktop: two columns (symptoms | insight).
   ============================================================ */
.problema {
  position: relative;
  overflow: hidden;
}

/* Subtle warm tint to break from hero */
.problema::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(26, 78, 138, 0.045) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Two-column layout on desktop ──────────────────────────── */
.problema__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  position: relative;
  z-index: 1;
}

@media (min-width: 860px) {
  .problema__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ── Left: intro + symptom list ────────────────────────────── */
.problema__intro {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.75;
  color: var(--c-ink-2);
  min-width: 0;
  max-width: 50ch;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.problema__intro strong {
  color: var(--c-ink-1);
  font-weight: 600;
}

/* Symptom list */
.symptom-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.symptom-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(0.875rem, 2vw, 1.125rem) clamp(1rem, 2.5vw, 1.375rem);
  background: var(--c-surface);
  border: 1px solid var(--b-subtle);
  border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  font-size: clamp(0.875rem, 1.4vw, 0.96rem);
  color: var(--c-ink-2);
  transition:
    background      var(--dur) var(--ease),
    border-color    var(--dur) var(--ease),
    transform       var(--dur) var(--ease);
}

@media (hover: hover) {
  .symptom-item:hover {
    background: var(--c-surface-2);
    border-left-color: var(--c-accent);
    transform: translateX(3px);
  }
}

.symptom-item__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0.45;
  flex-shrink: 0;
  transition: opacity var(--dur);
}

.symptom-item:hover .symptom-item__dot { opacity: 1; }

/* ── Right: insight breakout card ──────────────────────────── */
.problema__insight {
  position: sticky;
  top: calc(72px + 2rem); /* below fixed nav */
  min-width: 0;
}

.insight-card {
  background: var(--c-ink-1);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3rem);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

/* Decorative radial glow */
.insight-card::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,112,204,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.insight-card::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,112,204,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.insight-card__eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent-hover);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  z-index: 1;
}

.insight-card__quote {
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw + 0.25rem, 1.75rem);
  line-height: 1.35;
  color: #fff;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  position: relative;
  z-index: 1;
}

.insight-card__line {
  width: 40px;
  height: 1.5px;
  background: rgba(255,255,255,0.18);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  z-index: 1;
}

.insight-card__sub {
  font-size: clamp(0.85rem, 1.3vw, 0.95rem);
  line-height: 1.72;
  color: rgba(255,255,255,0.45);
  position: relative;
  z-index: 1;
}

.insight-card__sub strong {
  color: rgba(255,255,255,0.78);
  font-weight: 500;
}


/* -- sections/value.css ---------------------------------------- */
/* ============================================================
   SECTION: VALUE PROPOSITION
   ─────────────────────────────────────────────────────────────
   "O que muda quando seu sistema é organizado"
   3 outcome blocks: Energy · Clarity · Control
   Mobile: 1 col → Tablet: 2 col → Desktop: 3 col
   ============================================================ */
/* ── Before → After comparison strip ───────────────────────── */
.value-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 559px) {
  .value-comparison {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .value-comparison__arrow { display: none; }
}

.value-comparison__col {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--r-md);
  min-width: 0;
}

.value-comparison__col--before {
  background: rgba(13, 28, 48, 0.04);
  border: 1px solid rgba(13, 28, 48, 0.08);
}

.value-comparison__col--after {
  background: rgba(26, 78, 138, 0.06);
  border: 1px solid rgba(26, 78, 138, 0.18);
}

.value-comparison__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.875rem;
}

.value-comparison__col--before .value-comparison__label { color: var(--c-ink-3); }
.value-comparison__col--after  .value-comparison__label { color: var(--c-accent-hover); }

.value-comparison__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.value-comparison__col--before .value-comparison__list li {
  font-size: 0.875rem;
  color: var(--c-ink-3);
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.6;
}

.value-comparison__col--before .value-comparison__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(180, 60, 60, 0.55);
}

.value-comparison__col--after .value-comparison__list li {
  font-size: 0.875rem;
  color: var(--c-ink-1);
  padding-left: 1.375rem;
  position: relative;
  line-height: 1.6;
}

.value-comparison__col--after .value-comparison__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--c-accent-hover);
}

.value-comparison__arrow {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--c-accent-hover);
  font-weight: 300;
  opacity: 0.60;
  text-align: center;
}

/* ── Outcome cards ──────────────────────────────────────────── */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(0.5rem, 2vw, 1rem);
}

@media (min-width: 560px) {
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.value-card {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

/* Animated accent bottom bar */
.value-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

@media (hover: hover) {
  .value-card:hover::after { transform: scaleX(1); }
}

/* Outlined number */
.value-card__num {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  margin-bottom: var(--sp-sm);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(26, 78, 138, 0.18);
}

/* Outcome label */
.value-card__outcome {
  display: inline-block;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-hover);
  margin-bottom: 0.5rem;
}

.value-card h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.value-card p  { font-size: 0.92rem; line-height: 1.72; }


/* -- sections/cost.css ---------------------------------------- */
/* ============================================================
   SECTION: THE COST — HIGH-PERFORMANCE ANGLE
   ─────────────────────────────────────────────────────────────
   Dark navy. Signals urgency without aggression.
   "Alta performance com sistema desorganizado não sustenta."
   Mobile: stacked. Desktop: 2 col.
   ============================================================ */
.cost {
  position: relative;
  overflow: hidden;
}

/* Atmospheric glow on dark surface */
.cost::before {
  content: '';
  position: absolute;
  top: -140px; left: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,112,204,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.cost::after {
  content: '';
  position: absolute;
  bottom: -100px; right: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,112,204,0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Typography overrides for dark surface */
.cost h2                  { color: #fff; }
.cost .t-display          { color: rgba(255,255,255,0.90); }

.cost-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.cost-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(0.875rem, 2vw, 1.125rem) clamp(1rem, 2.5vw, 1.5rem);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.065);
  border-left: 3px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  font-size: clamp(0.875rem, 1.5vw, 0.95rem);
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  transition: background var(--dur), border-left-color var(--dur);
}

@media (hover: hover) {
  .cost-item:hover {
    background: rgba(255,255,255,0.07);
    border-left-color: var(--c-accent-hover);
  }
}

.cost-item__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
  margin-top: 6px;
}

/* Right column: closing statement + CTA */
.cost__right {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.cost-closing {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(39, 112, 204, 0.15);
  border: 1px solid rgba(39, 112, 204, 0.28);
  border-radius: var(--r-md);
}

.cost-closing .t-display {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.cost-note {
  padding: clamp(1.25rem, 3vw, 1.875rem);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid rgba(39, 112, 204, 0.55);
  border-radius: var(--r-md);
  font-size: clamp(0.875rem, 1.4vw, 0.95rem);
  color: rgba(255,255,255,0.80);
  line-height: 1.82;
}

.cost-note p + p { margin-top: 0.75rem; }


/* -- sections/plan.css ---------------------------------------- */
/* ============================================================
   SECTION: THE PLAN
   ─────────────────────────────────────────────────────────────
   3-step process — clear sequence.
   Mobile: vertical stack. Desktop: horizontal row.
   ============================================================ */
.plan-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 680px) {
  .plan-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.plan-step {
  padding: clamp(1.5rem, 3vw, 2rem);
}

.plan-step__num {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(26, 78, 138, 0.16);
  margin-bottom: var(--sp-sm);
}

.plan-step h3 { margin-bottom: 0.4rem; }
.plan-step p  { font-size: 0.91rem; }

.plan__cta {
  text-align: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}


/* -- sections/pricing.css ---------------------------------------- */
/* ============================================================
   SECTION: PRICING
   ─────────────────────────────────────────────────────────────
   3 options. Middle card is featured (dark, elevated).
   Mobile: vertical stack — most important card first.
   Desktop: 3 column.
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 680px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  /* Restore visual order on larger screens */
  .price-card--featured { order: 0; }
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile: featured shows first */
.price-card--featured { order: -1; }

.price-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  position: relative;
  min-width: 0;
}

/* ── Featured card — deep navy ──────────────────────────────── */
.price-card--featured {
  background: var(--c-dark) !important;
  border-color: var(--c-dark) !important;
  box-shadow: var(--sh-lg);
}

@media (hover: hover) {
  .price-card--featured:hover { transform: translateY(-6px); }
}

.price-card--featured h3                   { color: #fff; }
.price-card--featured .price-card__tagline  { color: rgba(255,255,255,0.42); }
.price-card--featured .price-card__amount   { color: #fff; }
.price-card--featured .price-card__period   { color: rgba(255,255,255,0.35); }
.price-card--featured .price-card__divider  { background: rgba(255,255,255,0.09); }
.price-card--featured .price-feature        { color: rgba(255,255,255,0.70); }
.price-card--featured .check                {
  background: rgba(39,112,204,0.25);
  border-color: rgba(39,112,204,0.42);
}
.price-card--featured .check::after { background: rgba(255,255,255,0.78); }

/* ── Featured badge ─────────────────────────────────────────── */
.featured-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-accent-hover);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: var(--r-pill);
  white-space: normal;
  max-width: calc(100% - 1.5rem);
  text-align: center;
}

/* ── Card internals ─────────────────────────────────────────── */
.price-card h3                { font-size: clamp(1rem, 2vw, 1.125rem); margin-bottom: 0.3rem; }
.price-card__tagline          { font-size: 0.83rem; color: var(--c-ink-3); margin-bottom: var(--sp-md); }
.price-card__amount           { font-family: inherit; font-weight: 700; font-size: clamp(1.875rem, 3.5vw, 2.25rem); line-height: 1; color: var(--c-ink-1); margin-bottom: 0.25rem; }
.price-card__amount--muted    { font-size: 1.5rem; color: var(--c-ink-3); }
.price-card__period           { font-size: 0.77rem; color: var(--c-ink-3); margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.price-card__divider          { height: 1px; background: var(--b-subtle); margin-bottom: var(--sp-md); }

.price-features {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.price-feature {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--c-ink-2);
  align-items: flex-start;
}

/* ── Check icon ─────────────────────────────────────────────── */
.check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-accent-lt);
  border: 1px solid rgba(26, 78, 138, 0.16);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.check::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-accent-hover);
}

.price-backend-note  { font-size: 0.74rem; color: var(--c-ink-3); font-style: italic; margin-top: var(--sp-sm); }
.pricing-footnote    { text-align: center; margin-top: var(--sp-lg); font-size: 0.84rem; color: var(--c-ink-3); font-style: italic; }


/* -- sections/testimonials.css ---------------------------------------- */
/* ============================================================
   SECTION: TESTIMONIALS
   ─────────────────────────────────────────────────────────────
   Glass cards — light and credible.
   Mobile: 1 col. Tablet+: 3 col.
   ============================================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 560px) {
  .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.testimonial-card {
  padding: clamp(1.375rem, 3vw, 1.875rem);
  min-width: 0;
}

/* Decorative opening quotation mark */
.testimonial-card__mark {
  font-family: inherit;
  font-weight: 700;
  font-size: 3rem;
  line-height: 0.75;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 78, 138, 0.18);
  margin-bottom: var(--sp-sm);
  user-select: none;
}

.testimonial-card__text {
  font-size: clamp(0.875rem, 1.5vw, 0.96rem);
  font-style: italic;
  color: var(--c-ink-2);
  line-height: 1.72;
  margin-bottom: var(--sp-md);
}

.testimonial-card__author {
  font-size: 0.77rem;
  font-weight: 500;
  color: var(--c-ink-3);
  letter-spacing: 0.04em;
}


/* -- sections/explanation.css ---------------------------------------- */
/* ============================================================
   SECTION: EXPLANATION (RATIONAL DEPTH)
   ─────────────────────────────────────────────────────────────
   Convinces rationally. Long-form copy + pull-quote visual.
   Two-column: text left, insight right.
   ============================================================ */
.explanation__body {
  font-size: clamp(0.95rem, 1.5vw, 1.075rem);
  line-height: 1.90;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-md);
  max-width: 56ch;
}

.explanation__body p + p {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.explanation__visual {
  background: var(--c-ink-1);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  place-items: center;
  min-height: clamp(220px, 30vw, 320px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-lg);
  min-width: 0;
}

/* Large decorative opening quote */
.explanation__visual::before {
  content: '';
  width: clamp(5rem, 12vw, 9rem);
  height: clamp(5rem, 12vw, 9rem);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  position: absolute;
  top: -1.5rem;
  left: 1rem;
  pointer-events: none;
}

/* Radial glow inside dark card */
.explanation__visual::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,112,204,0.18) 0%, transparent 68%);
  pointer-events: none;
}

.explanation__visual .t-display {
  position: relative;
  text-align: center;
  z-index: 1;
  color: rgba(255,255,255,0.88);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}


/* -- sections/video.css ---------------------------------------- */
/* ============================================================
   SECTION: VIDEO
   ─────────────────────────────────────────────────────────────
   Centered 16/9 player with glass play button.
   Dark gradient background reinforces brand depth.
   ============================================================ */
.video-wrap {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.video-wrap h2 {
  margin-top: var(--sp-xs);
  margin-bottom: var(--sp-lg);
}

.video-player {
  aspect-ratio: 16 / 9;
  background: var(--c-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--sh-lg);
  border: 1px solid rgba(255,255,255,0.04);
}

.video-player__inner {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #081627, #0d2a52, #050e1c);
}

/* ── Play button ────────────────────────────────────────────── */
.play-btn {
  width: clamp(56px, 8vw, 72px);
  height: clamp(56px, 8vw, 72px);
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-bd);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .play-btn:hover {
    transform: scale(1.09);
    background: rgba(255,255,255,0.88);
  }
}

/* CSS triangle icon */
.play-btn__icon {
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent var(--c-ink-1);
  margin-left: 3px;
}

.video-caption {
  margin-top: var(--sp-md);
}


/* -- sections/method.css ---------------------------------------- */
/* ============================================================
   SECTION: METHOD / PILLARS
   ─────────────────────────────────────────────────────────────
   7 pillars. Mobile: 2×4 (4 rows). Tablet: 4+3. Desktop: 7×1.
   Eye scans left-to-right across all 7.
   ============================================================ */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 560px) {
  /* Show 4 columns — last row has 3 + 1 gap */
  .pillars-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  /* All 7 in a single horizontal row */
  .pillars-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.pillar-card {
  padding: clamp(1.125rem, 2.5vw, 1.5rem) 0.875rem;
  text-align: center;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--b-subtle);
  min-width: 0;
  transition:
    transform      var(--dur) var(--ease),
    background     var(--dur) var(--ease),
    border-color   var(--dur) var(--ease),
    box-shadow     var(--dur) var(--ease);
}

@media (hover: hover) {
  .pillar-card:hover {
    background: var(--c-accent-lt);
    border-color: rgba(26, 78, 138, 0.20);
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
  }

  .pillar-card:hover .pillar-card__name { color: var(--c-accent); }
}

/* Outlined number — typographic decoration */
.pillar-card__num {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 78, 138, 0.16);
  display: block;
  margin-bottom: 0.375rem;
  line-height: 1;
}

.pillar-card__name {
  font-size: clamp(0.72rem, 1.2vw, 0.82rem);
  font-weight: 500;
  color: var(--c-ink-2);
  line-height: 1.3;
  transition: color var(--dur);
}


/* -- sections/about.css ---------------------------------------- */
/* ============================================================
   SECTION: AUTHORITY / ABOUT
   ─────────────────────────────────────────────────────────────
   Builds trust without vanity.
   "Médico com abordagem integrada focada em energia, clareza e prevenção."
   Mobile: photo above text. Desktop: side by side.
   ============================================================ */
.about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 800px) {
  .about__inner { grid-template-columns: auto 1fr; }
}

/* Photo container */
.about__photo {
  width: clamp(160px, 28vw, 220px);
  height: clamp(200px, 35vw, 280px);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-accent-lt), rgba(39,112,204,0.14));
  border: 1px solid rgba(26, 78, 138, 0.12);
  display: grid;
  place-items: center;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 4rem);
  color: var(--c-accent-hover);
  flex-shrink: 0;
  box-shadow: var(--sh-md);
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}

@media (min-width: 800px) {
  .about__photo { margin-inline: 0; }
}

.about__photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(26,78,138,0.09), transparent);
}

/* Text block */
.about__role {
  font-size: 0.875rem;
  color: var(--c-accent-hover);
  font-weight: 500;
  margin-bottom: var(--sp-md);
}

.about__bio {
  max-width: 54ch;
  margin-bottom: var(--sp-lg);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.82;
}

.about__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Credential row */
.about__crm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-ink-3);
  letter-spacing: 0.06em;
  margin-top: var(--sp-md);
  padding: 0.35rem 0.875rem;
  background: var(--c-surface-2);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-pill);
  max-width: 100%;
}


/* -- sections/faq.css ---------------------------------------- */
/* ============================================================
   SECTION: FAQ
   ─────────────────────────────────────────────────────────────
   Accordion — removes friction from objections.
   Max-width 680px maintains comfortable reading line length.
   ARIA-compliant: aria-expanded managed by JS module.
   ============================================================ */
.faq-list {
  max-width: 680px;
  margin-top: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq-item + .faq-item {
  border-top: 1px solid var(--b-subtle);
}

.faq-item { background: var(--c-surface-2); }

.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  /* Fluid padding — comfortable tap target on mobile */
  padding: clamp(1.125rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.875rem);
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 0.97rem);
  font-weight: 500;
  color: var(--c-ink-1);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  /* Minimum 48px touch target */
  min-height: 48px;
  transition: background var(--dur);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .faq-question:hover { background: var(--c-surface); }
}

/* Arrow indicator */
.faq-arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--b-default);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--c-ink-3);
  transition:
    transform      0.28s var(--ease),
    background     0.28s var(--ease),
    border-color   0.28s var(--ease);
}

.faq-item.is-open .faq-arrow {
  transform: rotate(180deg);
  background: var(--c-accent-lt);
  border-color: rgba(26, 78, 138, 0.20);
  color: var(--c-accent);
}

/* Animated panel */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s var(--ease);
}

.faq-item.is-open .faq-answer { max-height: 220px; }

.faq-answer__inner {
  padding: 0 clamp(1.25rem, 3vw, 1.875rem) clamp(1.125rem, 2.5vw, 1.5rem);
  font-size: clamp(0.875rem, 1.4vw, 0.92rem);
  line-height: 1.78;
  color: var(--c-ink-2);
}


/* -- sections/cta.css ---------------------------------------- */
/* ============================================================
   SECTION: FINAL CTA
   ─────────────────────────────────────────────────────────────
   The decision moment. Maximum contrast and clarity.
   Premium blue gradient. No distractions — only action.
   ============================================================ */
.final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--c-accent) 0%, var(--c-accent-dk) 100%);
}

/* Atmospheric depth layers */
.final-cta::before {
  content: '';
  position: absolute;
  top: -130px; right: -90px;
  width: clamp(300px, 40vw, 520px);
  height: clamp(300px, 40vw, 520px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.final-cta::after {
  content: '';
  position: absolute;
  bottom: -110px; left: -70px;
  width: clamp(220px, 30vw, 400px);
  height: clamp(220px, 30vw, 400px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.final-cta__inner {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.final-cta h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: var(--sp-sm);
}

.final-cta .t-body-lg {
  color: rgba(255,255,255,0.58);
  margin-top: var(--sp-xs);
}

.final-cta__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  margin-top: var(--sp-lg);
}

@media (min-width: 420px) {
  .final-cta__buttons {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Small reassurance line below buttons */
.final-cta__reassurance {
  margin-top: var(--sp-md);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.30);
  letter-spacing: 0.02em;
}


/* -- sections/footer.css ---------------------------------------- */
/* ============================================================
   SECTION: FOOTER
   ─────────────────────────────────────────────────────────────
   Deep black-navy background. Minimal typography.
   Mobile: stacked. Tablet+: brand left, social right.
   ============================================================ */
.footer {
  background: #060F1D;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  min-width: 0;
}

@media (min-width: 560px) {
  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.footer__brand {
  font-family: inherit;
  font-weight: 650;
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: rgba(255,255,255,0.86);
  margin-bottom: 0.375rem;
}

.footer__tagline {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.26);
  margin-bottom: var(--sp-md);
}

/* ── Footer links ───────────────────────────────────────────── */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.125rem;
  min-width: 0;
}

.footer__links a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.32);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: color 0.20s;
}

.footer__links a:hover { color: rgba(255,255,255,0.76); }

/* ── Social buttons ─────────────────────────────────────────── */
.footer__social {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.social-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,255,255,0.42);
  transition:
    background     var(--dur),
    color          var(--dur),
    border-color   var(--dur);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .social-btn:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.86);
    border-color: rgba(255,255,255,0.22);
  }
}

/* ── Footer bottom bar ──────────────────────────────────────── */
.footer__bottom {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.71rem;
  color: rgba(255,255,255,0.17);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: space-between;
  min-width: 0;
}


/* -- sections/seo-pages.css ---------------------------------------- */
/* ============================================================
   SECTIONS: SEO LOCAL PAGES
   ─────────────────────────────────────────────────────────────
   Componentes compartilhados pelas páginas locais:
     /medico-em-armacao-dos-buzios
     /consulta-medica-domiciliar-buzios
     /medico-para-hotel-e-pousada-em-buzios
     /doctor-in-buzios
     /consulta-clinica-em-buzios
     /avaliacao-360-buzios
     /sobre-dr-abraao-peixoto
     /contato
     /perguntas-frequentes
     /blog/*
   ============================================================ */

/* ── Breadcrumbs ────────────────────────────────────────────── */
.breadcrumbs {
  padding-block: clamp(5.5rem, 10vw, 7rem) 0;
  font-size: 0.82rem;
  color: var(--c-ink-3);
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumbs__sep { color: var(--c-ink-3); opacity: 0.55; }
.breadcrumbs a {
  color: var(--c-ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.breadcrumbs a:hover { color: var(--c-accent); }
.breadcrumbs [aria-current="page"] { color: var(--c-ink-2); }

/* ── Local Hero (mais comercial que o da home) ─────────────── */
.local-hero {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}
.local-hero__inner { max-width: 62ch; }
.local-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--c-accent-lt);
  color: var(--c-accent-dk);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-md);
  max-width: 100%;
  line-height: 1.4;
}
.local-hero__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  display: inline-block;
}
.local-hero h1 {
  font-size: clamp(1.85rem, 4.5vw + 0.25rem, 3.25rem);
  line-height: 1.08;
  margin-bottom: var(--sp-md);
}
.local-hero__sub {
  font-size: clamp(1rem, 1.4vw + 0.1rem, 1.15rem);
  line-height: 1.75;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-lg);
}
.local-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--sp-md);
}
.local-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.82rem;
  color: var(--c-ink-3);
}
.local-hero__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.local-hero__meta span::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
  display: inline-block;
}

/* ── Content block (prose) ─────────────────────────────────── */
.content-block { max-width: 65ch; }
.content-block h2 {
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
}
.content-block h2:first-child { margin-top: 0; }
.content-block h3 {
  margin-top: var(--sp-lg);
  margin-bottom: var(--sp-sm);
  color: var(--c-ink-1);
}
.content-block p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--c-ink-2);
  margin-bottom: 1rem;
}
.content-block p strong { color: var(--c-ink-1); }
.content-block ul,
.content-block ol {
  margin: 0 0 1.25rem 0;
  padding-left: 1.25rem;
  color: var(--c-ink-2);
  line-height: 1.72;
}
.content-block li { margin-bottom: 0.45rem; }
.content-block a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.content-block a:hover { color: var(--c-accent-hover); }

/* ── Feature grid (3 ou 4 cards locais) ─────────────────────── */
.local-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .local-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .local-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.local-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .local-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){ .local-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.local-card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  min-width: 0;
}
.local-card__num {
  font-family: inherit;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-accent-hover);
  opacity: 0.55;
}
.local-card h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin: 0;
}
.local-card p {
  font-size: 0.93rem;
  color: var(--c-ink-2);
  line-height: 1.65;
  margin: 0;
}
.local-card__link {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.local-card__link:hover { color: var(--c-accent-hover); gap: 0.6rem; }

/* ── Two-col layout (texto + lista) ─────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
.two-col__list {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--c-surface-2);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-md);
  min-width: 0;
}
.two-col__list h3 {
  margin: 0 0 var(--sp-sm) 0;
  font-size: 1.05rem;
}
.two-col__list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.two-col__list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.4rem;
  border-bottom: 1px solid var(--b-subtle);
  font-size: 0.95rem;
  color: var(--c-ink-2);
  line-height: 1.55;
}
.two-col__list li:last-child { border-bottom: none; }
.two-col__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-accent-lt);
  border: 2px solid var(--c-accent);
}

/* ── Banda de confiança (ribbon) ────────────────────────────── */
.trust-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--c-surface);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.trust-ribbon__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--c-ink-2);
  min-width: 0;
}
.trust-ribbon__item::before {
  content: '';
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-accent-lt);
  border: 1px solid rgba(26, 78, 138, 0.18);
  box-shadow: inset 0 0 0 6px var(--c-surface), inset 0 0 0 10px var(--c-accent);
  flex-shrink: 0;
}

/* ── Bloco "Quando procurar" (checklist) ────────────────────── */
.when-to-look {
  display: grid;
  gap: 0.6rem;
}
.when-to-look__item {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--b-subtle);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  color: var(--c-ink-2);
  line-height: 1.55;
}
.when-to-look__item::before {
  content: '';
  flex-shrink: 0;
  width: 8px; height: 8px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--c-accent);
}

/* ── CTA inline (meio da página) ────────────────────────────── */
.inline-cta {
  margin-block: var(--sp-xl);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--c-accent-lt);
  border-radius: var(--r-md);
  text-align: center;
  border: 1px solid rgba(26, 78, 138, 0.14);
}
.inline-cta h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  margin: 0 0 0.6rem;
}
.inline-cta p {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-md);
}
.inline-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ── Info list (sobre, contato) ─────────────────────────────── */
.info-list {
  display: grid;
  gap: 0.85rem;
  margin-block: var(--sp-md);
}
.info-list__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--b-subtle);
  min-width: 0;
}
@media (max-width: 560px) {
  .info-list__row { grid-template-columns: 1fr; gap: 0.15rem; }
}
.info-list__row dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.info-list__row dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--c-ink-1);
  line-height: 1.55;
}
.info-list__row dd a { color: var(--c-accent); text-decoration: none; }
.info-list__row dd a:hover { text-decoration: underline; }

/* ── Article card (blog/apoio) ──────────────────────────────── */
.article-card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
}
.article-card__meta {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.article-card h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin: 0;
  line-height: 1.2;
}
.article-card p {
  font-size: 0.92rem;
  color: var(--c-ink-2);
  line-height: 1.6;
  margin: 0;
}

/* ── Long-form article (páginas de apoio) ──────────────────── */
.article-body {
  max-width: 65ch;
  margin-inline: auto;
}
.article-body h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
}
.article-body h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  margin-top: var(--sp-lg);
  margin-bottom: var(--sp-sm);
}
.article-body p,
.article-body li {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--c-ink-2);
}
.article-body p { margin-bottom: 1.1rem; }
.article-body ul, .article-body ol {
  margin-bottom: 1.3rem;
  padding-left: 1.3rem;
}
.article-body li { margin-bottom: 0.45rem; }
.article-body a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body blockquote {
  margin: var(--sp-lg) 0;
  padding: var(--sp-md) var(--sp-lg);
  border-left: 3px solid var(--c-accent);
  background: var(--c-surface-2);
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--c-ink-1);
  font-size: 1.1rem;
  line-height: 1.5;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ── Language switcher (PT/EN) ──────────────────────────────── */
.lang-switch {
  position: absolute;
  top: 1.125rem;
  right: clamp(1.125rem, 5vw, 3rem);
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  z-index: 101;
}
.lang-switch a {
  padding: 0.25rem 0.5rem;
  color: var(--c-ink-3);
  text-decoration: none;
  border-radius: var(--r-xs);
  transition: color var(--dur) var(--ease);
}
.lang-switch a.is-active {
  color: var(--c-accent);
  font-weight: 600;
}
.lang-switch a:hover { color: var(--c-accent); }


/* -- utilities/animations.css ---------------------------------------- */
/* ============================================================
   UTILITY: MOTION & ANIMATIONS
   ─────────────────────────────────────────────────────────────
   Triggered by IntersectionObserver (see js/modules/scroll-reveal.js).
   Stagger delay via nth-child — max 7 children.
   ============================================================ */
/*
  Progressive enhancement guard:
  .fade-up elements are ONLY hidden when JS has confirmed it is running
  (.js-ready added to <html> in main.js). Without JS, elements remain
  fully visible — no blank whitespace or missing content.
*/

.js-ready .fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity    0.60s var(--ease),
    transform  0.60s var(--ease);
}

.js-ready .fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.js-ready .fade-up:nth-child(1) { transition-delay: 0.00s; }
.js-ready .fade-up:nth-child(2) { transition-delay: 0.09s; }
.js-ready .fade-up:nth-child(3) { transition-delay: 0.18s; }
.js-ready .fade-up:nth-child(4) { transition-delay: 0.27s; }
.js-ready .fade-up:nth-child(5) { transition-delay: 0.36s; }
.js-ready .fade-up:nth-child(6) { transition-delay: 0.45s; }
.js-ready .fade-up:nth-child(7) { transition-delay: 0.54s; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .js-ready .fade-up,
  .js-ready .fade-up.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* -- utilities/accessibility.css ---------------------------------------- */
/* ============================================================
   UTILITY: ACCESSIBILITY
   ─────────────────────────────────────────────────────────────
   Respects user preference. No flashing, no layout shifts.
   Focus ring visible for keyboard users.
   Skip-to-content link for screen readers.
   ============================================================ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }

  .fade-up { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 2.5px solid var(--c-accent-hover);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Skip to content — screen reader / keyboard */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--c-accent);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 999;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}