/* ==========================================================================
   Support Vida — Clínica do Coração
   Shared stylesheet for all pages
   ========================================================================== */

/* Design tokens -----------------------------------------------------------
   Every colour, radius and rhythm value lives here. Nothing below this block
   should hard-code a colour; change the brand by editing this block alone. */
:root {
  /* Ink */
  --ink:        #2B211E;
  --ink-soft:   #544A46;
  --ink-mute:   #6B5F5A;
  --ink-faint:  #766A65;  /* ≥4.5:1 on --bg, --bg-warm and white */
  --ink-label:  #82655A;  /* ≥4.5:1 on --bg, --bg-warm and white */

  /* Warm dark bands (the reference's navy, retuned to the brand's warmth) */
  --dark:       #241A18;
  --dark-deep:  #1C1512;
  --dark-line:  #3A2C29;
  --on-dark:    #FFF8F5;
  --on-dark-mute: #C3B2AC;
  --rose:       #E5807F;

  /* Surfaces */
  --surface:    #FFFFFF;
  --bg:         #FFF8F5;
  --bg-warm:    #FBEFEB;

  /* Brand red — one red, used for accent, icons and fills alike */
  --red:        #E52021;
  --red-hover:  #C4171A;
  --red-tint:   #FDEDEC;

  /* Hairlines */
  --line:       #EDE0DB;
  --line-soft:  #F3E7E2;

  /* Geometry */
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-pill: 999px;
  --gutter: clamp(20px, 5vw, 56px);
  --maxw:  1280px;

  --shadow-card:  0 10px 24px rgba(43, 33, 30, 0.08);
  --shadow-float: 0 18px 40px rgba(43, 33, 30, 0.14);
  --shadow-soft:  0 6px 18px rgba(43, 33, 30, 0.10);
  --shadow-lift:  0 14px 32px rgba(43, 33, 30, 0.17);

  --whatsapp: #25D366;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Work Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
/* <picture> only chooses the file; the <img> inside keeps every layout rule
   (flex/grid item, absolute fill), as if the wrapper were not there. */
picture { display: contents; }

/* Fill-the-box image helper. Kept here with the base rules: it must lose to
   the sized image rules further down (.service-photo, .hero-photo), and a
   later same-specificity selector would silently override them. */
.ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }

h1, h2, h3, .display { font-family: "Fraunces", Georgia, serif; font-weight: 600; }

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

/* Skip link: off-screen until it takes keyboard focus. main carries
   tabindex=-1 so the jump also moves focus, not just the scroll position. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Layout shell -------------------------------------------------------------
   Full-bleed elements (topbar, header, banded sections, footer) use
   width:100vw + margin-left:50% + translateX(-50%) to break out of the
   centered .page column so their background spans the viewport, while an
   inner max-width wrapper keeps their content aligned with the rest of the
   page. This stays pixel-accurate even when a vertical scrollbar shrinks the
   viewport's content width (unlike the calc(50% - 50vw) shortcut). */
.page { width: 100%; max-width: var(--maxw); margin: 0 auto; }

.bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* Scroll-reveal state. Declared HERE, before the components, on purpose:
   `.reveal.in-view` and a component's `:hover` have the same specificity, so
   whichever comes last wins. With these rules at the end of the file the
   settled reveal state silently cancelled every hover lift on the cards,
   rows and gallery tiles. Components must be free to override the rest
   state, so they have to come after it. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Type roles ---------------------------------------------------------------*/
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  /* --red-hover here, not --red: at this small/bold size, --red's contrast
     against --bg/--bg-warm falls just under WCAG AA's 4.5:1 for text. */
  color: var(--red-hover); text-transform: uppercase;
}
/* Centred eyebrow flanked by short rules, as in the reference */
.eyebrow-c {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--red-hover); text-transform: uppercase;
}

/* Visually hidden but still reachable by screen readers — used for headings
   that exist for document structure/a11y but would be visual clutter. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.eyebrow-c::before, .eyebrow-c::after {
  content: ""; height: 1px; width: clamp(28px, 6vw, 64px); background: var(--line);
}

.h-display { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.14; color: var(--ink); margin: 0; }
.h-1 { font-size: clamp(34px, 5.2vw, 56px); }
.h-2 { font-size: clamp(26px, 3.6vw, 38px); }
.h-3 { font-size: clamp(20px, 2.6vw, 26px); }
.accent { color: var(--red); }

.lede      { font-size: 17px; line-height: 1.6; color: var(--ink-mute); margin: 0; max-width: 46ch; }
.body-copy { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: 62ch; }
.meta      { font-size: 13px; color: var(--ink-mute); }

.section-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head .lede { text-align: center; max-width: 54ch; }

/* Buttons ------------------------------------------------------------------*/
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: "Work Sans", sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn svg { flex-shrink: 0; }
.btn-sm { padding: 14px 20px; font-size: 11.5px; }

.btn-primary { background: var(--red); color: var(--surface); }
.btn-primary:hover { background: var(--red-hover); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(229, 32, 33, 0.28); }

.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

.btn-white { background: var(--surface); color: var(--red); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* Icon chips ---------------------------------------------------------------*/
.icon-circle {
  width: 56px; height: 56px; border-radius: 50%; background: var(--surface);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--red);
  transition: transform .2s ease;
}
.icon-tint { color: var(--red); width: 44px; height: 44px; border-radius: 50%; background: var(--red-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-box { color: var(--red); width: 44px; height: 44px; border-radius: var(--r-md); background: var(--red-tint); display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; }

/* 1. Utility topbar --------------------------------------------------------*/
.topbar { background: var(--dark); color: var(--on-dark); font-size: 13px; }
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 5px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topbar-tag { display: flex; align-items: center; gap: 9px; color: var(--on-dark-mute); }
.topbar-contact { display: flex; align-items: center; gap: 18px; }
.topbar-contact a, .topbar-contact span { display: flex; align-items: center; gap: 8px; color: var(--on-dark); }
.topbar-contact a { padding: 5px 0; }
.topbar-contact a:hover { color: var(--rose); }
.topbar-sep { width: 1px; height: 16px; background: var(--dark-line); }
/* Specificity must beat `.topbar-contact span`, which sets display:flex */
@media (max-width: 860px) {
  .topbar .topbar-tag, .topbar .topbar-addr, .topbar .topbar-sep { display: none; }
  .topbar-inner { justify-content: center; }
}

/* 2. Header ----------------------------------------------------------------*/
.header {
  border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 100; transition: box-shadow .2s ease;
}
.header.scrolled { box-shadow: 0 4px 20px rgba(43, 33, 30, 0.08); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gutter); gap: 16px;
}
.header img.logo { height: 42px; width: auto; display: block; }
/* The logo's link is a flex item and was being squeezed, distorting the
   wordmark — 87px wide where its aspect ratio wants 138. Nothing in the
   header may shrink; the CTA label collapses to its icon instead. */
.header-inner > a:first-child, .header-cta, .hamburger { flex-shrink: 0; }

.nav-links { display: flex; gap: clamp(18px, 3vw, 34px); }
.navlink {
  position: relative; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 0 6px;
  transition: color .15s ease;
}
.navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.navlink:hover { color: var(--red); }
.navlink:hover::after, .navlink.current::after { transform: scaleX(1); }
.navlink.current { color: var(--red); }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 14px 10px; background: none; border: none; }
.hamburger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Lives inside .header so it sticks with it. The header's own border-bottom
   now closes the whole block, so the menu carries a border-top instead to
   keep the rule under the header bar. */
.mobile-menu {
  display: none; flex-direction: column; gap: 2px;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 4px var(--gutter) 14px;
  max-height: calc(100vh - 140px); overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.current { color: var(--red); }

@media (max-width: 860px) { .nav-links { display: none; } .hamburger { display: flex; } }
/* "Agendar no WhatsApp" is wider than the label it replaced, so the button
   has to fall back to its icon earlier — below ~500px the logo, burger and
   full label no longer fit side by side without squeezing something. */
.header-cta-short { display: none; }
@media (max-width: 540px) {
  .header-cta-text { display: none; }
  /* A bare calendar icon was ambiguous; a one-word label still fits beside
     the logo and the burger down to 360px. */
  .header-cta-short { display: inline; }
  .header-cta { padding: 14px 14px; gap: 7px; }
  .header-inner { gap: 8px; }
}

/* 3. Hero ------------------------------------------------------------------*/
.hero { background: var(--bg); }
.hero-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) var(--gutter) clamp(84px, 9vw, 124px);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hero-text { display: flex; flex-direction: column; gap: 22px; animation: fadeInUp .7s ease both; }

/* rule — heart — rule divider under the headline */
.hero-rule { display: flex; align-items: center; gap: 12px; max-width: 320px; }
.hero-rule::before, .hero-rule::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.hero-rule svg { flex-shrink: 0; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }

/* No entrance animation here: the photo is the likely LCP element, and
   starting it at opacity 0 would delay that paint. Only the text animates. */
.hero-media { position: relative; }
.hero-photo { width: 100%; height: clamp(320px, 42vw, 520px); object-fit: cover; object-position: center 20%; border-radius: var(--r-lg); display: block; }
.hero-ecg { position: absolute; left: 0; bottom: clamp(20px, 4vw, 44px); width: 100%; height: 54px; pointer-events: none; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-photo { height: clamp(260px, 52vw, 380px); }
}
/* Phones: the photo sits above the headline, so it is kept short enough for
   the main CTA to land inside the first screen (~812px tall). */
@media (max-width: 600px) {
  .hero-inner { padding-top: 24px; gap: 22px; }
  .hero-photo { height: 200px; object-position: center 22%; }
  .hero-text { gap: 16px; }
  .hero-rule { display: none; }
}

/* Hero trust row — inline facts split by hairlines (replaces the old cards) */
/* Two by two rather than a wrapping flex row: the hero column is too narrow
   for four across, and a wrapped row leaves a stray divider on the item that
   starts the second line. */
.hero-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; margin-top: 10px; }
.trust-item { display: flex; align-items: center; gap: 11px; padding-left: clamp(16px, 2.4vw, 30px); border-left: 1px solid var(--line); }
.hero-trust > .trust-item:nth-child(odd) { padding-left: 0; border-left: none; }
.trust-item svg { flex-shrink: 0; }
.trust-label { font-size: 14px; line-height: 1.4; }
.trust-label b { display: block; font-weight: 700; color: var(--ink); }
.trust-label span { color: var(--ink-mute); }
@media (max-width: 420px) {
  .hero-trust { grid-template-columns: 1fr; gap: 14px; }
  .trust-item { padding-left: 0; border-left: none; }
}

/* 4. Pillars band — dark card overlapping the hero -------------------------*/
.pillars-wrap { max-width: var(--maxw); margin: clamp(-104px, -8vw, -60px) auto 0; padding: 0 var(--gutter); position: relative; z-index: 2; }
.pillars {
  background: var(--dark); color: var(--on-dark); border-radius: var(--r-lg);
  display: grid; grid-template-columns: repeat(4, 1fr);
  box-shadow: var(--shadow-float);
}
.pillar { padding: clamp(28px, 3vw, 40px) clamp(18px, 2vw, 28px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; border-left: 1px solid var(--dark-line); }
.pillar:first-child { border-left: none; }
.pillar h3 { font-family: "Work Sans", sans-serif; font-size: 16px; font-weight: 700; margin: 0; }
.pillar p { font-size: 15px; line-height: 1.6; color: var(--on-dark-mute); margin: 0; }
.pillar:hover .icon-circle { transform: translateY(-4px); }
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(odd) { border-left: none; }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--dark-line); }
}
@media (max-width: 520px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-left: none; }
  .pillar + .pillar { border-top: 1px solid var(--dark-line); }
}

/* Generic banded section ---------------------------------------------------*/
.section { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 7vw, 84px) var(--gutter); }
.section-warm { background: var(--bg-warm); }

.page-title { padding: clamp(36px, 6vw, 56px) var(--gutter) 24px; display: flex; flex-direction: column; gap: 14px; }
.page-title-tight { padding-bottom: 8px; }
.page-h1 { font-size: clamp(26px, 4vw, 36px); }
.page-intro { font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 0; max-width: 62ch; }

/* Inner-page building blocks. These used to be inline styles repeated in
   each HTML file, with their own hex values — keep them here so a token
   change reaches every page. */
.section-plain { border-top: 0; border-bottom: 0; }
.section-inner-tight { padding: clamp(36px, 6vw, 56px) var(--gutter); }
.section-title { font-size: clamp(20px, 3vw, 24px); margin: 0 0 28px; }
.crm-line { font-size: 14px; font-weight: 700; color: var(--red-hover); margin-top: 6px; }
.title-list { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
.title-row-text { font-size: 15px; line-height: 1.6; padding-top: 3px; }
.service-title { font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 700; margin: 0; }
.service-desc { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
/* Exam facts and preparation (servicos.html). The preparation list is a
   native <details>: closed by default so the page stays scannable, opens
   with keyboard and screen readers without any script. */
.exam-facts { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--ink-soft); }
.exam-facts b { color: var(--ink); font-weight: 700; }
.exam-prep { margin-top: 4px; }
.exam-prep summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--red-hover); list-style: none;
}
.exam-prep summary::-webkit-details-marker { display: none; }
.exam-prep summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.exam-prep[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.exam-prep summary:hover { color: var(--red); }
.exam-prep ul { margin: 2px 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.exam-prep li { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.exam-prep-note { margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--bg-warm); font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .exam-prep summary::after { transition: none; } }

/* 5. Services grid ---------------------------------------------------------*/
/* Four cards, so the tracks step 4 -> 2 -> 1 and every row stays full.
   A three-column step would leave a 3 + 1 orphan. */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1040px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 30px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.svc-card:hover .icon-box { background: var(--red); transform: scale(1.06); }
.svc-card:hover .icon-box svg { stroke: var(--surface); }
.svc-card h3 { font-family: "Work Sans", sans-serif; font-size: 16px; font-weight: 700; margin: 0; line-height: 1.35; }
.svc-card p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 0; }

/* The fourth card is the link to the full list, carried in red so it reads as
   the action in the row rather than a fourth category. */
.svc-card-cta { background: var(--red); border-color: var(--red); color: var(--surface); }
.svc-card-cta p { color: var(--surface); }
.svc-card-cta .icon-box { background: rgba(255, 255, 255, 0.18); color: var(--surface); }
.svc-card-cta:hover { background: var(--red-hover); border-color: var(--red-hover); }
.svc-card-cta:hover .icon-box { background: var(--surface); color: var(--red); }
.svc-card-cta:hover .icon-box svg { stroke: var(--red); }

/* 6. About band — photo bleeding to the left viewport edge ------------------
   Photo, text and benefits are all direct grid children, with no wrapper in
   between. That is what lets the benefits span the full width on a phone
   while the photo stays beside the text: nested in a wrapper they could
   never leave the right-hand column.

   The band is full-bleed but its text must line up with the centred 1280
   column, so the leftover space at each side gets its own track. Folding
   that space into the last column as padding instead looks the same at
   1440 but breaks on a wide monitor: the fr units are resolved over the
   whole viewport, so at 2280px the benefits column billed 713px and kept
   only 121px for text. Tracks are sized before padding, margins are not. */
.about-band {
  --edge: max(0px, calc((100vw - var(--maxw)) / 2));
  background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns:
    var(--edge)                        /* left margin: 0 until the viewport
                                          passes 1280, then it grows so the
                                          photo stops at the centred column
                                          instead of stretching to the edge */
    clamp(240px, 21vw, 400px)          /* photo */
    minmax(0, 1.4fr)                   /* text */
    minmax(0, 1fr)                     /* benefits */
    calc(var(--edge) + var(--gutter)); /* right margin of the column */
  align-items: center;
}

/* The photo owns its column edge to edge. Note: `grid-row: 1 / -1` would NOT
   work here — with no explicit grid-template-rows, -1 resolves against the
   explicit grid and collapses to a single row, so the spans are written out
   per breakpoint instead. */
/* The photo is a framed box with the img absolutely positioned inside it.
   That is deliberate: as a plain grid item the img contributes its intrinsic
   height to the row, so on a wide screen — where the column is 900px because
   it bleeds to the viewport edge — it dragged the whole band to 1600px tall.
   Taken out of flow it cannot size the row, and the frame simply stretches
   to whatever the text beside it needs. */
.about-photo {
  grid-column: 2; grid-row: 1; align-self: stretch;
  position: relative; overflow: hidden;
  min-height: clamp(300px, 26vw, 440px);
}
.about-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%; display: block;
}

/* The photo bleeds, so the page padding lives on the text columns instead. */
.about-text {
  grid-column: 3;
  padding: clamp(36px, 4.5vw, 60px) clamp(28px, 3vw, 52px);
}
.about-text { display: flex; flex-direction: column; gap: 18px; }
.about-sign .name { font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 600; }
.about-sign .crm { font-size: 14px; color: var(--ink-mute); margin-top: 3px; }

.benefits {
  grid-column: 4;
  display: flex; flex-direction: column; gap: 26px;
  border-left: 1px solid var(--line);
  padding: clamp(36px, 4.5vw, 60px) 0 clamp(36px, 4.5vw, 60px) clamp(24px, 2.4vw, 40px);
}
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.benefit { display: flex; gap: 14px; align-items: flex-start; }
.step-num { font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 600; color: var(--red-hover); }
.text-link { color: var(--red-hover); text-decoration: underline; text-underline-offset: 2px; }
.text-link:hover { color: var(--red); }
.benefit h3 { font-family: "Work Sans", sans-serif; font-size: 16px; font-weight: 700; margin: 0 0 5px; }
.benefit p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 0; }

/* Tablet — keeps the desktop shape (photo beside the text); only the
   benefits drop below the text instead of sitting in a third column. */
@media (max-width: 1040px) {
  .about-band {
    grid-template-columns: clamp(220px, 30vw, 380px) minmax(0, 1fr) var(--gutter);
  }
  .about-photo { grid-column: 1; grid-row: 1 / span 2; }
  .about-text { grid-column: 2; grid-row: 1; padding-bottom: 26px; }
  .benefits {
    grid-column: 2; grid-row: 2;
    border-left: none; border-top: 1px solid var(--line);
    padding: 26px 0 clamp(36px, 5vw, 60px) clamp(28px, 3vw, 52px);
  }
}

/* Phone — photo still beside the text, but narrower, and the benefits run
   the full width underneath so the icon rows are not squeezed into a
   ~200px column. */
@media (max-width: 720px) {
  .about-band { grid-template-columns: clamp(122px, 36vw, 230px) minmax(0, 1fr); }
  .about-photo { grid-row: 1; min-height: 0; }
  .about-text { padding: 32px var(--gutter) 0 18px; gap: 14px; }
  .about-text .h-2 { font-size: clamp(23px, 6.4vw, 30px); }
  .benefits {
    grid-column: 1 / -1; grid-row: 2;
    margin-top: 28px;
    padding: 26px var(--gutter) 34px;
    border-top: 1px solid var(--line);
  }
}

/* 7. Testimonials — columns split by hairlines, not cards -------------------*/
.quotes-layout { display: grid; grid-template-columns: 1fr clamp(230px, 22vw, 290px); gap: clamp(28px, 4vw, 48px); align-items: center; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); }
.quote { padding: 0 clamp(16px, 2.2vw, 28px); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.quote:first-child { border-left: none; padding-left: 0; }
.quote-mark { font-family: "Fraunces", Georgia, serif; font-size: 44px; line-height: .6; color: var(--red); }
.quote p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.quote-by { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.quote-by .who { font-size: 14px; font-weight: 700; }
.quote-source { display: block; font-size: 13px; font-weight: 500; color: var(--ink-mute); margin-top: 2px; }
.stars { color: var(--red-hover); font-size: 13px; letter-spacing: 2px; }

.quote-aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; }
.quote-aside .head { display: flex; align-items: center; gap: 13px; }
.quote-aside h3 { font-family: "Work Sans", sans-serif; font-size: 16px; font-weight: 700; margin: 0; line-height: 1.4; }
.google-reviews-link { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-mute); text-decoration: none; padding-top: 2px; }
.google-reviews-link .stars { font-size: 12px; }
.google-reviews-link:hover { color: var(--red); }
@media (max-width: 1040px) { .quotes-layout { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .quotes { grid-template-columns: 1fr; gap: 26px; }
  .quote { border-left: none; padding: 0 0 26px; border-bottom: 1px solid var(--line); }
  .quote:last-child { border-bottom: none; padding-bottom: 0; }
}

/* 8. Red CTA banner --------------------------------------------------------*/
.cta-wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter); }
.cta-banner {
  background-color: var(--red); color: var(--surface); border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 52px);
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' viewBox='0 0 240 80'><path d='M0 40h48l8-1 7-24 10 48 8-27 6 4h33l8-1 7-24 10 48 8-27 6 4h81' fill='none' stroke='white' stroke-opacity='0.2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  /* The trace runs along the bottom edge so it never cuts through the title. */
  background-repeat: repeat-x; background-position: center calc(100% + 26px);
}
.cta-copy { flex: 1 1 460px; min-width: 0; display: flex; align-items: center; gap: 20px; }
.cta-copy h2 { font-size: clamp(21px, 2.8vw, 30px); line-height: 1.22; margin: 0; }
.cta-copy p { font-size: 15px; margin: 6px 0 0; }
.cta-banner .icon-circle { background: rgba(255, 255, 255, 0.16); }
/* Centres the button once it wraps onto a line of its own, with no extra
   breakpoint: while it still shares a line, .cta-copy (flex-grow: 1) has
   already absorbed the free space, so these auto margins resolve to 0 and
   the button stays pinned right. */
.cta-banner .btn { margin-inline: auto; }
/* Turning the row into a column moves flex-basis onto the vertical axis, so
   `flex: 1 1 460px` would become a 460px minimum HEIGHT. Reset it here. */
@media (max-width: 680px) {
  .cta-banner { flex-direction: column; align-items: stretch; }
  .cta-copy { flex: 0 0 auto; width: 100%; }
  .cta-copy .icon-circle { display: none; }
  .cta-banner .btn { width: 100%; }
}

/* Inner pages: services list, bio, forms -----------------------------------*/
.row { border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, transform .2s ease, box-shadow .2s ease; }
.row:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.rows-wrap { display: flex; flex-direction: column; gap: 16px; padding: 24px var(--gutter) clamp(40px, 6vw, 64px); }
.service-row { display: flex; gap: 24px; border-radius: var(--r-sm); padding: clamp(16px, 3vw, 24px); align-items: flex-start; flex-wrap: wrap; }
.service-photo { width: 110px; height: 110px; border-radius: var(--r-sm); flex-shrink: 0; object-fit: cover; }
.service-body { flex: 1 1 200px; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.service-cta { align-self: center; }
@media (max-width: 560px) {
  .service-row { flex-direction: column; }
  .service-photo { width: 100%; height: auto; aspect-ratio: 1/1; }
  /* Same trap as the CTA banner: in a column, `flex: 1 1 200px` would floor
     the body at 200px tall regardless of how short its text is. */
  .service-body { flex: 0 0 auto; width: 100%; min-width: 0; }
  .service-cta { align-self: stretch; }
}

/* Services accordion — category cards that expand to their sub-services ----
   Built on a <button> (aria-expanded/aria-controls) + a panel toggled via the
   native `hidden` attribute, so it works with no JS (just stays collapsed)
   and gets the free a11y semantics (the panel leaves the a11y tree when
   hidden, instead of just being visually clipped). */
.categories-wrap { display: flex; flex-direction: column; gap: 16px; padding: 24px var(--gutter) clamp(40px, 6vw, 64px); }

/* Anchored from the home cards: clears the sticky header on arrival. */
.category-card { scroll-margin-top: 110px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.category-card.is-open { border-color: var(--red); box-shadow: var(--shadow-card); }

.category-toggle {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: clamp(18px, 3vw, 26px); background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.category-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.category-title { font-size: 18px; margin: 0; color: var(--ink); }
.category-count { font-size: 14px; color: var(--ink-mute); }
.category-chevron { flex-shrink: 0; color: var(--ink-mute); transition: transform .25s ease, color .25s ease; }
.category-toggle[aria-expanded="true"] .category-chevron { transform: rotate(180deg); color: var(--red); }
.category-toggle:hover .icon-box { background: var(--red); }
.category-toggle:hover .icon-box svg { stroke: var(--surface); }

.category-panel { padding: 0 clamp(18px, 3vw, 26px) clamp(18px, 3vw, 26px); border-top: 1px solid var(--line); }
.category-panel[hidden] { display: none; }
.category-panel:not([hidden]) { animation: panelEntra .22s ease both; }
@keyframes panelEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Exames Cardiológicos / Demais Exames panels: a vertical list reusing the
   existing .row.service-row card (photo + body + CTA) — same look as the
   flat list this replaces, just nested one level in. */
.sub-rows { display: flex; flex-direction: column; gap: 14px; padding-top: clamp(16px, 2.4vw, 22px); }

/* Consultas médicas panel: no distinct photo per item, so it reuses the
   existing icon .svc-card (home page "why us" tiles) instead — each one a
   full-card link straight to booking. */
.consultas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: clamp(16px, 2.4vw, 22px); }
@media (max-width: 640px) { .consultas-grid { grid-template-columns: 1fr; } }

.card { border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, transform .2s ease, box-shadow .2s ease; }
.card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.info-card { background: var(--surface); border: 1px solid var(--line); }

.bio-row { display: flex; gap: clamp(24px, 5vw, 56px); padding: 0 var(--gutter) clamp(36px, 6vw, 56px); align-items: flex-start; flex-wrap: wrap; }
.bio-photo { flex: 1 1 280px; min-width: 260px; height: clamp(240px, 32vw, 380px); border-radius: var(--r-lg); }
.bio-text { flex: 1.3 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: 18px; }
.title-row { display: flex; gap: 14px; align-items: flex-start; }
.num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--red-tint); color: var(--red-hover); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }

/* 16px: legible, and iOS Safari does not zoom the page into a focused field. */
input, textarea, select { font-family: "Work Sans", sans-serif; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); width: 100%; color: var(--ink); }
/* The ring, not just the 1px border colour, is what makes the focused field
   findable at a glance; it uses the tint so it reads as focus, not error. */
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--red); background: var(--surface); box-shadow: 0 0 0 3px var(--red-tint), 0 0 0 4px var(--red); }
/* Native select chrome varies wildly between platforms, so it is replaced
   with the site's own chevron. */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5F5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
label { font-size: 11.5px; font-weight: 700; color: var(--ink-label); letter-spacing: 0.1em; text-transform: uppercase; }
.social {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red-tint); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.social svg { width: 18px; height: 18px; }
.social:hover { background: var(--red); color: var(--surface); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .social:hover { transform: none; } }
.contact-grid { display: flex; gap: clamp(24px, 5vw, 48px); padding: 24px var(--gutter) clamp(40px, 6vw, 64px); flex-wrap: wrap; }
.contact-col { flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: 24px; }
.form-card { display: flex; flex-direction: column; gap: 18px; }
.panel { border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); }
.form-title { font-size: 20px; margin: 0 0 2px; }
.form-submit { align-self: flex-start; }
.field { display: flex; flex-direction: column; gap: 8px; }
.info-list { display: flex; flex-direction: column; gap: 16px; }
.info-item { display: flex; flex-direction: column; gap: 3px; }
/* Same look as a field label, but these caption static text, not inputs. */
.info-label { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--ink-label); letter-spacing: 0.1em; text-transform: uppercase; }
.info-value { margin: 0; font-size: 15px; line-height: 1.55; }
.info-social { display: flex; gap: 12px; margin-top: 4px; }
.form-hint { font-size: 14px; line-height: 1.5; color: var(--ink-mute); margin: 0; }
.form-hint a { color: var(--red-hover); text-decoration: underline; }
/* A button that reads as an inline link (e.g. reopening cookie preferences). */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--red-hover); text-decoration: underline; cursor: pointer; }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row > div { flex: 1 1 140px; display: flex; flex-direction: column; gap: 8px; }
.map-embed { flex: 1; min-height: 260px; border-radius: var(--r-lg); overflow: hidden; }
.map-embed iframe { border: 0; width: 100%; height: 100%; display: block; min-height: 260px; }

/* Facility gallery ---------------------------------------------------------
   The frame keeps its size and clips the photo, so the zoom on hover happens
   inside the tile instead of pushing the neighbouring tiles around. */
/* The row height lives on the grid, not on the img: the wide first tile
   stretches its whole row, and a fixed image height would leave the
   neighbouring tiles with bare background below the photo. */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 16px; }
.gallery-item {
  overflow: hidden; border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--shadow-soft); cursor: zoom-in;
  transition: box-shadow .25s ease, transform .25s ease;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease;
}
.gallery-item:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.gallery-item:hover img { transform: scale(1.06); }

/* The facade is the arrival shot, so it takes two columns. That also fills
   the grid exactly: 7 photos over 8 cells, with no empty slot at the end. */
.gallery-item:first-child { grid-column: span 2; }

@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; } }
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery-item:first-child { grid-column: auto; }
}

/* Facility gallery lightbox -------------------------------------------------
   Rides on the .modal dialog machinery below (backdrop, showModal, Esc), just
   with its own oversized, transparent card so the photo fills the viewport
   instead of sitting in a fixed-size dialog. The slides sit in a flex track
   that either eases to the next/previous slide or follows a finger 1:1 while
   dragging — see the gallery lightbox block in js/main.js. */
.lightbox .modal-card {
  width: min(1180px, calc(100vw - 24px));
  background: transparent; box-shadow: none; padding: 0; overflow: visible;
  max-height: calc(100dvh - 24px);
}
/* The backdrop blurs whatever is behind the dialog (page content), and the
   stage itself is a frosted glass pane over that blur, so the photo reads
   as floating on tinted, translucent glass rather than a flat dark card. */
.lightbox::backdrop {
  background: rgba(43, 33, 30, 0.4);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.lightbox-stage {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  height: calc(100dvh - 24px); max-height: 78vh;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 60px rgba(20, 12, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.lightbox-track { display: flex; height: 100%; touch-action: pan-y; cursor: grab; transition: transform .3s ease; }
.lightbox-track:active { cursor: grabbing; }
.lightbox-track.sem-transicao { transition: none; }
.lightbox-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; height: 100%; }
.lightbox-slide img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}

/* Glass pills for the controls: same frosted recipe as the stage, just a
   touch lighter so they read as UI sitting on top of the glass. */
.lightbox .modal-fechar {
  top: 12px; right: 12px; z-index: 2;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.lightbox .modal-fechar:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }

.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); cursor: pointer;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  transition: background .15s ease, opacity .15s ease;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox-nav:disabled { opacity: 0; pointer-events: none; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

.lightbox-counter {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px; z-index: 2; letter-spacing: .02em;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

@media (max-width: 640px) { .lightbox-nav { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .lightbox-track { transition: none; } }

/* Contact channel modal ----------------------------------------------------
   Built on <dialog> + showModal(), which brings focus trapping, Esc to
   close and the inert backdrop for free. The dialog itself is stretched to
   the viewport and only holds the card, so a click landing on the dialog —
   that is, outside the card — can close it. Setting display on the dialog
   overrides the UA's display:none, hence the :not([open]) rule. */
/* inset:0 rather than 100vw/100dvh: a modal dialog is already fixed to the
   viewport, and 100vw counts the scrollbar, which left 8px of horizontal
   overflow behind the backdrop. */
.modal {
  inset: 0; margin: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  border: 0; padding: 0; background: transparent; overflow: hidden;
  place-items: center; display: grid;
}
.modal:not([open]) { display: none; }
.modal::backdrop { background: rgba(43, 33, 30, 0.55); }

.modal-card {
  position: relative;
  width: min(430px, calc(100vw - 36px));
  background: var(--surface); border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 34px);
  box-shadow: var(--shadow-float);
  animation: modalEntra .22s ease both;
}
@keyframes modalEntra { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.modal-card .h-3 { padding-right: 34px; }
.modal-sub { font-size: 14px; line-height: 1.55; color: var(--ink-mute); margin: 10px 0 22px; }

.modal-fechar {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--ink-mute);
  transition: background .15s ease, color .15s ease;
}
.modal-fechar:hover { background: var(--bg); color: var(--ink); }

/* Form inside a dialog ------------------------------------------------------
   The card can outgrow a short viewport once it holds a form, so it scrolls
   rather than spilling past the screen edge. */
.modal-card { max-height: calc(100dvh - 32px); overflow-y: auto; }

.modal-form { display: flex; flex-direction: column; gap: 16px; }
.modal-campo { display: flex; flex-direction: column; gap: 7px; }
/* fieldset/legend so each radio group is announced as one labelled group */
.modal-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.modal-form legend {
  padding: 0; font-size: 11.5px; font-weight: 700; color: var(--ink-label);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.modal-form .btn { width: 100%; margin-top: 2px; }

/* Radio pills: all options visible at once, one tap each. The input stays
   in the DOM and focusable — only visually replaced by its label. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* .pill is itself a <label>, so it inherits the global field-label styling —
   uppercase, tracked out, bold. Reset it: these are choices to read, not
   field captions. */
.pill {
  position: relative;
  text-transform: none; letter-spacing: normal;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.pill input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.pill span {
  display: block; padding: 9px 15px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 14px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pill span:hover { border-color: var(--red); }
.pill input:checked + span { background: var(--red); border-color: var(--red); color: var(--surface); }
.pill input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.pill input:disabled + span { opacity: .4; cursor: not-allowed; border-style: dashed; }
.pill input:disabled + span:hover { border-color: var(--line); }

.modal-opcoes { display: flex; flex-direction: column; gap: 10px; }
.modal-opcao {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.modal-opcao:hover { border-color: var(--red); background: var(--bg); transform: translateY(-2px); }
.modal-opcao .icon-tint { width: 40px; height: 40px; }
.modal-opcao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal-opcao .rotulo { font-size: 15px; font-weight: 700; }
.modal-opcao .valor { font-size: 14px; color: var(--ink-mute); }

/* WhatsApp keeps its own colour so the three options are told apart at a
   glance rather than by reading all three labels. */
.modal-opcao-whats .icon-tint { background: rgba(37, 211, 102, 0.14); color: var(--whatsapp); }
.modal-opcao-whats:hover { border-color: var(--whatsapp); }

@media (prefers-reduced-motion: reduce) {
  .modal-card { animation: none; }
  .modal-opcao:hover { transform: none; }
}

/* Legal pages --------------------------------------------------------------*/
.legal-body { padding: 16px var(--gutter) clamp(40px, 6vw, 64px); max-width: 76ch; }
.legal-body h2 { font-size: 19px; margin: 32px 0 10px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.legal-body a { color: var(--red-hover); text-decoration: underline; }
.legal-body ul { margin: 6px 0; padding-left: 20px; }
.updated { font-size: 13px; color: var(--ink-faint); margin-top: 36px; }

/* 9. Footer ----------------------------------------------------------------*/
.location-strip { background: var(--dark); color: var(--on-dark); }
.location-strip-inner { display: flex; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; }
.location-col { flex: 1 1 240px; padding: clamp(30px, 5vw, 48px) var(--gutter); }
.location-col + .location-col { border-left: 1px solid var(--dark-line); }
.location-col h2 { font-family: "Work Sans", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); margin: 0 0 14px; }
.location-line { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.6; }
.location-line + .location-line { margin-top: 10px; }
.location-line svg { flex-shrink: 0; margin-top: 3px; }
.location-line a:hover { color: var(--rose); }

/* In the footer the marks drop the circle and match the address/phone/mail
   icons above them: same 16px, same rose. The padding keeps a 28px tap
   target around a 16px glyph, and the negative left margin cancels that
   padding so the first icon still lines up with the ones above. */
.location-social { display: flex; gap: 0; margin: 10px 0 0 -14px; }
.location-social .social {
  width: auto; height: auto; padding: 14px; border-radius: var(--r-sm);
  background: none; color: var(--rose);
}
.location-social .social svg { width: 16px; height: 16px; }
.location-social .social:hover { background: none; color: var(--on-dark); transform: none; }
@media (max-width: 700px) { .location-col + .location-col { border-left: none; border-top: 1px solid var(--dark-line); } }

/* Brand, technical lead and site links, plus the emergency note. A cardiology
   site gets visitors with symptoms; they must not wait on a chat reply. */
.footer-meta { background: var(--dark); color: var(--on-dark-mute); border-top: 1px solid var(--dark-line); }
.footer-emergencia {
  max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gutter);
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; line-height: 1.5; color: var(--on-dark);
  border-bottom: 1px solid var(--dark-line);
}
.footer-emergencia svg { flex-shrink: 0; margin-top: 2px; color: var(--rose); }
.footer-emergencia a { color: var(--rose); font-weight: 700; text-decoration: underline; }
.footer-meta-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
}
.footer-brand p { margin: 0; }
.footer-name { font-family: "Fraunces", Georgia, serif; font-size: 17px; font-weight: 600; color: var(--on-dark); }
.footer-rt { font-size: 14px; margin-top: 2px; }
.footer-nav { display: flex; flex-wrap: wrap; column-gap: 6px; margin: 0 -10px; }
.footer-nav a { padding: 14px 10px; font-size: 14px; font-weight: 600; color: var(--on-dark); }
.footer-nav a:hover { color: var(--rose); }

.legal-bar {
  background: var(--dark-deep); color: var(--on-dark-mute); padding: 2px var(--gutter);
  display: flex; flex-wrap: wrap; column-gap: 14px; justify-content: center; font-size: 13px;
}
/* 44px-tall tap targets without making the bar visually heavier. */
.legal-bar a, .legal-bar .link-btn { padding: 15px 4px; }
.legal-bar a, .legal-bar .link-btn { color: var(--on-dark-mute); }
.legal-bar .link-btn { text-decoration: none; font-size: 13px; }
.legal-bar .link-btn:hover { color: var(--surface); }
.legal-bar a:hover, .legal-bar a.current { color: var(--surface); }
/* Developer credit: last line of the page, same band as the legal links. */
.site-credito {
  margin-block: 0; background: var(--dark-deep); color: var(--on-dark-mute); /* margin-block only: .bleed owns margin-left */
  border-top: 1px solid var(--dark-line); padding: 0 var(--gutter);
  text-align: center; font-size: 13px;
}
.site-credito a { display: inline-block; padding: 13px 2px; color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }
.site-credito a:hover { color: var(--rose); }
/* Phones: room under the last line so the floating WhatsApp button never
   sits on top of the credit link. */
@media (max-width: 640px) { .site-credito { padding-bottom: 80px; } }

/* Motion -------------------------------------------------------------------*/
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-text { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .svc-card:hover, .row:hover { transform: none; }
  .gallery-item:hover, .gallery-item:hover img { transform: none; }
  .category-panel:not([hidden]) { animation: none; }
}

/* Floating WhatsApp button -------------------------------------------------*/
.whatsapp-float {
  position: fixed; right: clamp(16px, 4vw, 28px); bottom: clamp(16px, 4vw, 28px);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--whatsapp); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  z-index: 200; transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(37, 211, 102, 0.5); }
.whatsapp-float svg { width: 28px; height: 28px; }
@media (max-width: 480px) { .whatsapp-float { width: 52px; height: 52px; } .whatsapp-float svg { width: 25px; height: 25px; } }

/* Inline-SVG colours ------------------------------------------------------
   The icons in the markup are drawn with currentColor so their colour comes
   from these tokens rather than from a hex repeated across eight HTML files.
   Kept last: each rule must win over the inherited or generic colour above. */
.topbar-tag svg    { color: var(--rose); }
.hero-rule svg     { color: var(--red); }
.trust-item svg    { color: var(--red); }
.hero-ecg          { color: var(--surface); }
.location-line svg { color: var(--rose); }
.cta-banner .icon-circle { color: var(--surface); }

/* Cookie consent banner (js/consent.js) ------------------------------------
   Not modal: the page stays usable, the banner just waits at the bottom.
   Sits above the floating WhatsApp button so neither covers the other's
   controls. */
.cookie-banner {
  position: fixed; left: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px); z-index: 250;
  width: min(440px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-float); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.cookie-banner[hidden] { display: none; }
.cookie-texto { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.cookie-texto a { color: var(--red-hover); text-decoration: underline; }
.cookie-acoes { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 480px) { .cookie-acoes .btn { flex: 1; } }