/* Bora Doutor: styles shared by every Cholo page, the blog included.
   Page-only rules live in css/pages/<page>.css, loaded after this file
   only on that page (see cholo_page_styles() in functions.php).
   Split out of the single styles.css on 14 Sep 2026; order inside each
   file is the original order. */

/* Proxima Nova — self-hosted, client-licensed.

   WOFF2 first, TTF second. A browser takes the first format it understands,
   so every browser since 2016 fetches the WOFF2 and the .ttf lines are a
   fallback that costs nothing: the file is only requested if the first one
   cannot be used. Converted 18 Sep 2026 — the faces were being served as raw
   TrueType, which the host does not compress either (WOFF2 carries its own
   compression): 289,360 B of TTF became 93,212 B of WOFF2.

   Worth knowing before adding a weight here. This family dresses BUTTONS
   only — `--font-button`, which is used by exactly three rules (.btn,
   .cal-time-btn, .skip-link), all at weight 600. Body and display type is
   Noto Sans / Noto Serif from Google Fonts (see functions.php). So the only
   face any page actually downloads is the 600 below, 19,952 B, and it is the
   only one worth preloading — which partials/site-head.php does. The other
   three are declared so a future weight resolves to a real face instead of a
   synthesised one; until something asks for them they are never fetched. */
@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ProximaNova-Regular.woff2') format('woff2'),
       url('../assets/fonts/ProximaNova-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ProximaNova-Semibold.woff2') format('woff2'),
       url('../assets/fonts/ProximaNova-Semibold.ttf') format('truetype');
}
@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ProximaNova-Bold.woff2') format('woff2'),
       url('../assets/fonts/ProximaNova-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ProximaNova-Extrabold.woff2') format('woff2'),
       url('../assets/fonts/ProximaNova-Extrabold.ttf') format('truetype');
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* One focus ring for the whole site. Nothing here ever suppressed the
   browser's own, but the UA ring is drawn in whatever colour the UA picks and
   on a cyan button or the dark footer that can be nearly invisible. Keyboard
   only: :focus-visible, so a mouse click never draws it. .btn has its own,
   more specific rule further down and keeps it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 3px;
  border-radius: 3px;
}
/* The skip link sits off screen until focused, then lands where a reader
   expects it: top left, over everything. */
.skip-link {
  position: fixed;
  top: 10px;
  left: -9999px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-strong);
  color: #fff;
  font-family: var(--font-button);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.skip-link:focus { left: 10px; }
#conteudo { display: block; scroll-margin-top: 16px; }
#conteudo:focus { outline: none; }

::selection { background: rgba(0, 209, 255, 0.28); color: var(--color-dark); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; background: none; border: 0; }
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-dark);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; }

/* Design tokens */
:root {
  --color-primary: #00D1FF;
  /* The brand cyan darkened until it clears WCAG AA (4.5:1) both ways: white
     text ON it (buttons) and it as text on the lightest ground we actually
     render on — an 8%% cyan tint over #F4F6FC, i.e. #E0F3FC, which is what the
     icon chips sit on (the eyebrow pills that also sat on it were removed on
     17 Sep 2026). #00D1FF manages only 1.7-1.8:1 there.
     Tints, borders and decorative marks stay --color-primary. */
  --color-primary-strong: #007791;
  --color-primary-dark: #006B82;
  --color-accent: #00D1FF;
  /* The deep blue from the logo mark. Its only job is to give the brand
     gradient a second stop: primary and accent are now the same cyan, so a
     primary->accent gradient would render as flat colour. */
  --color-brand-deep: #0047CC;
  --color-dark: #28292B;
  --color-text: #494949;
  --color-text-muted: #64728F;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F4F6FC;
  --color-border: #F4F6FC;
  /* Reserved for the final CTA band only — everywhere else uses solid color */
  --gradient-brand: linear-gradient(135deg, var(--color-brand-deep), var(--color-primary));
  --font-display: 'Noto Sans', sans-serif;
  --font-serif: 'Noto Serif', serif;
  --font-body: 'Noto Sans', 'Inter', system-ui, sans-serif;
  --font-button: 'Proxima Nova', 'Inter', system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container-width: 1280px;
  /* 120px. Foi para 88 na passada "corporativa" de 4 Oct e voltou no mesmo
     dia: o Olá Doutor, que virou a referência, usa exatamente 120. Editado
     aqui no token e não no fim do arquivo — `:root` é (0,1,0) e media query
     não soma especificidade, então redeclarar lá embaixo atropelaria o
     override de 64px do mobile. */
  --header-height: 120px;
  --ease-snap: cubic-bezier(0.44, 0.95, 0.57, 0.97);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  /* One section break for the whole site. Was 112/104/100/96px chosen per
     section with nothing deciding between them, each page then restating 80
     and 56 at the two breakpoints. Heroes are not on this scale — they sit
     against the header — and neither is .cta-final, which is a band. */
  --section-y: 100px;
}

/* The steps live here, adjacent and in order, NOT in the breakpoint blocks
   further down: base.css has its @media (max-width: 767px) block BEFORE its
   @media (max-width: 1024px) one, so a phone would have matched both and taken
   the tablet value from the later rule. */
@media (max-width: 1024px) { :root { --section-y: 76px; } }
@media (max-width: 767px) { :root { --section-y: 56px; } }

/* Layout */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 24px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-family: var(--font-button);
  font-size: 1rem;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.28s var(--ease-snap), filter 0.28s var(--ease-snap), background-color 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap), color 0.2s var(--ease-snap);
  white-space: nowrap;
}
/* Premium sheen sweep on hover */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn:hover { transform: translateY(-3px) scale(1.01); filter: brightness(1.03); }
.btn:active { transform: translateY(1px) scale(0.98); filter: none; }
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-primary-strong);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:active { background: var(--color-primary-dark); }

/* Signature: a soft signal-pulse ring behind the main hero CTA, echoing the logo's wifi mark */
.btn-pulse { animation: btn-pulse-ring 2.8s ease-out infinite; }
@keyframes btn-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(0, 209, 255, 0.35); }
  70% { box-shadow: 0 0 0 14px rgba(0, 209, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 209, 255, 0); }
}

.btn-outline {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary-strong); background: rgba(0, 209, 255, 0.05); }

.btn-outline-light {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.16); }

.btn-white {
  background: #fff;
  color: var(--color-primary-strong);
}
.btn-white:hover {
  background: var(--color-bg-soft);
}

.btn-lg { padding: 26px 34px; font-size: 1.125rem; border-radius: 10px; }
.btn-sm { padding: 14px 20px; font-size: 0.9rem; border-radius: 8px; }
.btn-block { width: 100%; }
.icon-sm { width: 17px; height: 17px; flex-shrink: 0; }

/* Scroll-reveal utility

   No `will-change` here, deliberately. It used to carry
   `will-change: opacity, transform, filter`, and because nothing ever removes
   it, every .reveal on the page kept a composited layer for the life of that
   page — 117 of them on /cholo-consulta/, 47 on /cholo-atestado/, measured
   18 Sep 2026. The hint is meant for an animation that is about to run or is
   running; this one runs once, for 0.75s, and never again. Chrome promotes the
   element for the duration of a transform/opacity transition on its own, which
   is the whole benefit, without holding the layer afterwards.

   `filter` is likewise not in the base transition list: only .reveal-scale
   animates a blur, and a blur is the expensive one. It declares its own
   transition below. */
/* The hidden starting state applies ONLY under the js-reveal class on <html>, which
   partials/site-head.php adds before any stylesheet loads and removes again
   if site.js has not confirmed itself within 3s. With no class — JavaScript
   off, blocked, failed or slow — every .reveal renders in its final place:
   CSS renders complete, JavaScript only enhances. Until 7 Oct 2026 .reveal
   was opacity: 0 with nothing to undo it.

   :where() because it adds no specificity. `.js-reveal .reveal-left` would be
   (0,2,0), tie with .reveal.is-visible and, coming later, win — leaving
   revealed elements 34px off their mark. Under :where() every rule keeps the
   exact weight it had before. */
.reveal {
  transition-property: opacity, transform;
  transition-duration: 0.75s;
  transition-timing-function: var(--ease-reveal);
}
:where(.js-reveal) .reveal { opacity: 0; transform: translateY(34px); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
:where(.js-reveal) .reveal-left { transform: translateX(-34px); }
:where(.js-reveal) .reveal-right { transform: translateX(34px); }
.reveal-scale { transition-property: opacity, transform, filter; }
:where(.js-reveal) .reveal-scale { transform: scale(0.96) translateY(18px); filter: blur(2px); }
/* .reveal-right starts 34px to the right of where it lands. On the service
   pages the revealing element is flush with the right gutter, so 34px against
   a 24px gutter puts 10px past the viewport and a horizontal scrollbar on the
   page. Measured 17 Sep 2026 at 768, 900, 1024, 1120 and 1280px on receita,
   exames, atestados and emagrecimento, and earlier on consultas.

   Clipped rather than shortened: the distance is shared by every page, and
   trimming it to fit the tightest case would flatten the motion everywhere.
   `clip`, not `hidden` — `hidden` forces overflow-y to auto and makes <main> a
   scroll container, which would break the sticky tab strip on
   /cholo-consulta/. A browser too old for `clip` ignores it and gets the 10px
   back, which is where we started: the harmless direction. */
main { overflow-x: clip; }
@media (max-width: 767px) {

  :where(.js-reveal) .reveal,
  :where(.js-reveal) .reveal-left,
  :where(.js-reveal) .reveal-right { transform: translateY(22px); }
  :where(.js-reveal) .reveal-scale { transform: scale(0.98) translateY(16px); }
}

/* Stagger grid/list children as they reveal */
.plans-grid .reveal:nth-child(1), .stats-grid .reveal:nth-child(1), .blog-track .reveal:nth-child(1), .steps-list .reveal:nth-child(1), .faq-list .reveal:nth-child(1), .pricing-grid .reveal:nth-child(1), .pricing-grid-3 .reveal:nth-child(1), .benefit-grid .reveal:nth-child(1) { transition-delay: 0s; }
.plans-grid .reveal:nth-child(2), .stats-grid .reveal:nth-child(2), .blog-track .reveal:nth-child(2), .steps-list .reveal:nth-child(2), .faq-list .reveal:nth-child(2), .pricing-grid .reveal:nth-child(2), .pricing-grid-3 .reveal:nth-child(2), .benefit-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.plans-grid .reveal:nth-child(3), .stats-grid .reveal:nth-child(3), .blog-track .reveal:nth-child(3), .steps-list .reveal:nth-child(3), .faq-list .reveal:nth-child(3), .pricing-grid-3 .reveal:nth-child(3), .benefit-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.plans-grid .reveal:nth-child(4), .stats-grid .reveal:nth-child(4), .steps-list .reveal:nth-child(4), .faq-list .reveal:nth-child(4), .benefit-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.faq-list .reveal:nth-child(5) { transition-delay: 0.32s; }
.faq-list .reveal:nth-child(6) { transition-delay: 0.4s; }

/* Shared section heading */
.section-title { font-family: var(--font-serif); font-size: 48px; line-height: 56px; font-weight: 600; text-align: center; }
@media (max-width: 1024px) {
 .section-title { font-size: 40px; line-height: 48px; }
}
@media (max-width: 767px) {
 .section-title { font-size: 24px; line-height: 32px; }
}
.section-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0 auto 48px;
  font-size: 1.05rem;
  font-weight: 300;
}
.section-title-left { text-align: left; }
.section-subtitle-left { text-align: left; margin: 0 0 40px; max-width: 44ch; }

/* Header */
.site-header {
  position: relative;
  z-index: 70;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap);
}
.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.06);
  border-color: var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 24px;
}
.brand { flex-shrink: 0; }
.brand-logo { height: 44px; width: auto; }
.main-nav { display: flex; align-items: center; }
.main-nav-brand, .main-nav-cta-wrap { display: none; }
.main-nav-links { display: flex; align-items: center; gap: 28px; }
/* Scoped to direct children so the Servicos panel's own links do not inherit
   the top-level nav sizing, underline and mobile stagger. */
.main-nav-links > a,
.nav-group-trigger {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-dark);
  font-size: 1.125rem;
  white-space: nowrap;
}
.main-nav-links > a::after,
.nav-group-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-snap);
}
.main-nav-links > a:hover,
.nav-group-trigger:hover { color: var(--color-primary-strong); }
.main-nav-links > a:hover::after,
.main-nav-links > a:focus-visible::after,
.nav-group-trigger:hover::after,
.nav-group-trigger:focus-visible::after { transform: scaleX(1); }
.header-actions { position: relative; z-index: 65; display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 44px; height: 44px; padding: 0; }
.nav-toggle span { width: 22px; height: 2px; background: var(--color-dark); border-radius: 2px; transition: transform 0.25s var(--ease-snap), opacity 0.2s var(--ease-snap); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  :root { --header-height: 64px; }
  .brand-logo { height: 36px; }
  .header-actions .btn-sm { padding: 10px 16px; font-size: 0.85rem; }
}
/* The desktop header needs ~1071px to lay out, but it does not become the
   mobile menu until 960px. Between the two it ran up to 111px past the
   viewport — a horizontal scrollbar on EVERY page at the classic 1024 laptop
   width. Measured 17 Sep 2026 at twelve widths; it had been there since the
   header was built.

   The band keeps the nav (1024 is a real screen, not a phone) and drops the
   secondary "Sou medico" button, which is a recruitment link rather than a
   patient action and is hidden below 960 anyway. */
@media (min-width: 961px) and (max-width: 1120px) {
  .header-actions .btn-outline { display: none; }
  .main-nav-links { gap: 18px; }
  .header-actions .btn-sm { padding: 10px 15px; font-size: 0.84rem; }
}

@media (max-width: 960px) {
  body.nav-open { overflow: hidden; }

  /* The panel starts BELOW the header instead of covering it, so the header is
     the menu's own bar - logo left, X right, both already there and already
     aligned. It used to sit at inset:0 and hide the header's logo behind its
     own white background, which is why it had to draw a second one, centred.
     (.main-nav is a descendant of .site-header, so its z-index:60 paints over
     the static .brand while .header-actions at 65 keeps the X on top.) */
  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    /* The panel itself never scrolls: the link list does, and the button below
       it stays put. Before this the whole thing scrolled as one and the only
       action in the menu was 167px past the bottom of the screen. */
    overflow: hidden;
    /* The panel fades; it does not slide. Sliding it meant animating the same
       property that positions it, so any hiccup in the transition left it
       offset from the header by the entrance distance. The short stagger on
       the rows below supplies the movement. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease-snap), visibility 0.2s;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; }

  /* The header is showing the real one, two rows up. */
  .main-nav-brand { display: none; }

  .main-nav-links {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: 14px 24px 10px;
  }

  /* Left-aligned, and quieter than the services below. A phone menu is a list
     to scan, and a centred list gives the eye no edge to follow. These four
     are where you go to read about the service; the services are where you go
     to get one, so they are not competing for the same weight. */
  .main-nav-links > a,
  .main-nav .nav-group-trigger {
    display: block;
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    color: var(--color-text);
    transition: color 0.2s var(--ease-snap);
  }
  .main-nav-links > a:active { color: var(--color-primary-strong); }

  /* Pinned. Whatever the phone, whatever the list does, this is on screen. */
  .main-nav-cta-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
    background: #fff;
  }
  .main-nav-cta {
    position: static;
    width: 100%;
    max-width: none;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    color: #fff;
  }
  /* Was absolutely positioned at left:24px against a 320px-wide button. */
  .main-nav-cta svg { position: static; transform: none; }
  .main-nav-medico {
    display: block;
    text-align: center;
    padding: 11px 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
  }

  /* One short opening, not a 0.9s relay. */
  .main-nav-links > *,
  .main-nav-cta-wrap {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s var(--ease-reveal), transform 0.22s var(--ease-reveal);
  }
  .main-nav.is-open .main-nav-links > *,
  .main-nav.is-open .main-nav-cta-wrap { opacity: 1; transform: none; }
  .main-nav:not(.is-open) .main-nav-links > *,
  .main-nav:not(.is-open) .main-nav-cta-wrap { transition-delay: 0s !important; }
  .main-nav.is-open .main-nav-links > *:nth-child(1) { transition-delay: 0.04s; }
  .main-nav.is-open .main-nav-links > *:nth-child(2) { transition-delay: 0.08s; }
  .main-nav.is-open .main-nav-links > *:nth-child(3) { transition-delay: 0.12s; }
  .main-nav.is-open .main-nav-links > *:nth-child(4) { transition-delay: 0.15s; }
  .main-nav.is-open .main-nav-links > *:nth-child(5) { transition-delay: 0.18s; }
  .main-nav.is-open .main-nav-cta-wrap { transition-delay: 0.1s; }

  .main-nav a::after { display: none; }
  .nav-toggle { display: flex; }
  .header-actions .btn-outline { display: none; }
  .header-actions .header-cta { display: none; }
}
@media (max-width: 480px) {
  .brand-logo { height: 28px; }
  .header-actions .btn-sm { padding: 8px 14px; font-size: 0.8rem; }
}

/* --- "Serviços" nav group ------------------------------------------------
   A disclosure in the top nav holding the three service pages. Opens on
   hover, on focus-within (so it is reachable by keyboard with no script) and
   on click via .is-open, which main.js toggles — the click path is what makes
   it work on a touch device wide enough to still be showing the desktop nav.
   Under 960px it stops being a disclosure entirely: the panel is always open
   and renders as an indented sub-list inside the full-screen menu. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-group-caret { width: 15px; height: 15px; transition: transform 0.25s var(--ease-snap); }
.nav-group:hover .nav-group-caret,
.nav-group:focus-within .nav-group-caret,
.nav-group.is-open .nav-group-caret { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 296px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(11, 18, 32, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease-snap), transform 0.22s var(--ease-snap), visibility 0.22s;
}
/* Bridges the 14px gap between the trigger and the panel, so moving the
   pointer down into the panel does not cross a dead zone and close it. */
.nav-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav-group:hover .nav-panel,
.nav-group:focus-within .nav-panel,
.nav-group.is-open .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s var(--ease-snap);
}
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--color-bg-soft); }
.nav-panel a b {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-dark);
  transition: color 0.2s var(--ease-snap);
}
.nav-panel a span {
  display: block;
  margin-top: 2px;
  font-size: 0.83rem;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.nav-panel a:hover b, .nav-panel a:focus-visible b { color: var(--color-primary-strong); }

/* Under 960px the Serviços disclosure stops being one: the panel is always
   open and renders as the service list inside the menu.

   These rules MUST stay after the desktop .nav-panel block above. They are the
   same single-class specificity, so source order is the only thing deciding
   them - put them earlier and .nav-panel{position:absolute;opacity:0} wins and
   the five service links vanish with no error anywhere. */
@media (max-width: 960px) {
  /* The five service pages are what the menu is for, so they carry the site's
     tarja - the coloured edge that says "these are one family", the same
     device the receituário and atestado cards use. One accent, one place. */
  .nav-group { display: block; width: 100%; margin: 16px 0 12px; }
  .main-nav .nav-group-trigger {
    padding: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: default;
  }
  .nav-group-caret { display: none; }
  .nav-panel {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 0 16px;
    background: none;
    border: 0;
    border-left: 2px solid var(--color-primary);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    /* INHERIT, never `visible`. The closed menu is hidden with visibility:
       hidden, and an explicit `visible` on a child overrides that: the five
       service links stayed tappable while the menu was closed, invisible
       (opacity 0) and fixed over the page, so a tap on a FAQ question, or
       anywhere else in that band, opened a service page. Found 14 Sep 2026;
       at 960px they covered every FAQ question on the homepage. `inherit`
       makes the list hidden exactly when the menu is. */
    visibility: inherit;
    gap: 0;
  }
  /* The desktop open-states above still match on touch screens: focus lands
     on a link when it is tapped, and the trigger's click handler adds
     .is-open. They set `visible` and a -50% shift, which re-arms the same bug
     and slides the list sideways. Neutralise them here. */
  .nav-group:hover .nav-panel,
  .nav-group:focus-within .nav-panel,
  .nav-group.is-open .nav-panel { visibility: inherit; transform: none; }
  .nav-panel::before { display: none; }
  /* 11px top and bottom puts these at 44px, which is the smallest target
     that is comfortable to hit with a thumb. */
  .nav-panel a {
    padding: 11px 0;
    border-radius: 0;
    text-align: left;
  }
  .nav-panel a:hover, .nav-panel a:focus-visible { background: none; }
  .nav-panel a b {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.25;
  }
  /* The one-line descriptions earn their place on a wide panel and are only
     noise under a name that already says it. */
  .nav-panel a span { display: none; }
}
/* Homepage hero entrance stagger, part of the motion brought over from the Sobre
   hero. It sits in base.css only because its selectors also name .reveal, which
   every page uses; it can only ever match the homepage hero. The ring and route
   placement (.hero > .hero-scroll, .hero .hero-caminho) is in pages/home.css and
   reuses the about-* rules further down this file. */

/* Video modal */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11, 18, 32, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-snap), visibility 0.3s;
}
.video-modal-overlay.is-open { opacity: 1; visibility: visible; }
body.video-open { overflow: hidden; }
.video-modal-overlay.is-open .video-modal { transform: scale(1); }

.video-modal-player { width: 100%; height: 100%; display: block; object-fit: cover; }

.video-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  transition: background-color 0.2s var(--ease-snap);
}
.video-modal-close:hover { background: rgba(0, 0, 0, 0.55); }@media (max-width: 500px) {
  .video-modal-overlay { padding: 0; }
}
.booking-lottie { width: 100%; height: 100%; }
.booking-lottie svg { display: block; }
.plan-card {
  background: #fff;
  border: 1px solid #EEF2FF;
  border-radius: 16px;
  padding: 56px 40px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition: transform 0.4s var(--ease-snap), border-color 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
}
.plan-card:hover { --lift: -4px; border-color: var(--color-primary); box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.1); }
@media (max-width: 767px) {
 .plan-card { padding: 24px; }
}
.plan-card:hover .plan-icon { transform: scale(1.08); }
.plan-card h3 { font-size: clamp(1.25rem, 1.5vw + 1rem, 2rem); margin-bottom: 4px; }
.plan-checklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.plan-checklist li { position: relative; padding-left: 28px; font-size: 0.95rem; }
.plan-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.blog-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.blog-track::-webkit-scrollbar { display: none; }
.blog-track .blog-card { scroll-snap-align: start; flex: 0 0 min(420px, 85vw); }
@media (max-width: 767px) {
  .blog-track .blog-card { flex-basis: 80vw; }
}
.blog-card {
  background: #fff;
  border: 1px solid #EEF2FF;
  border-radius: 16px;
  overflow: hidden;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition: transform 0.4s var(--ease-snap), border-color 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  --lift: -4px;
  border-color: var(--color-primary);
  box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.1);
}
.blog-card:hover .blog-card-media img { transform: scale(1.06); }
.stat-card {
  background: #fff;
  border: 1px solid #EEF2FF;
  border-radius: 16px;
  padding: 40px 24px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition: transform 0.4s var(--ease-snap), border-color 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
}
.stat-card:hover { --lift: -4px; border-color: var(--color-primary); box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.1); }
@media (max-width: 767px) {
 .stat-card { padding: 12px; }
}
.stat-card:hover .stat-icon { transform: scale(1.08); }

/* FAQ */
.faq { padding: var(--section-y) 0; background: var(--color-bg-soft); }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: 1px solid #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #FBFCFF;
  transition: background-color 0.3s var(--ease-snap), border-color 0.3s var(--ease-snap), border-width 0.3s var(--ease-snap);
}
.faq-item.is-open { background: #fff; border: 2px solid #FBFCFF; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 16px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-dark);
  transition: color 0.3s var(--ease-snap);
}
.faq-item.is-open .faq-question { color: var(--color-primary-strong); }
.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-primary);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; transition: transform 0.3s var(--ease-snap); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  transition: max-height 0.3s var(--ease-snap), padding 0.3s var(--ease-snap);
}
/* The open height is set by JS to the answer's own height, then released
   to none. This 60rem is the fallback for the moment before that happens and
   for any page where the script does not run: generous enough that nothing is
   ever cut, where the 240px it replaced was clipping the two longest answers
   on /cholo-consulta/ by about three lines at phone width. */
.faq-item.is-open .faq-answer { max-height: 60rem; padding: 0 24px 20px; }
.faq-answer p { color: var(--color-text-muted); margin: 0; font-weight: 300; }

/* CTA final */
.cta-final { padding: 64px 0; }
@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 135deg;
}
@keyframes gradient-drift {
  0% { --gradient-angle: 115deg; }
  100% { --gradient-angle: 155deg; }
}
.cta-final-inner {
  background: linear-gradient(var(--gradient-angle, 135deg), var(--color-brand-deep), var(--color-primary));
  animation: gradient-drift 10s ease-in-out infinite alternate;
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cta-final-text h2 { color: #fff; font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem); margin: 0; }
.cta-final-action { text-align: right; }
.cta-final-action p { color: rgba(255, 255, 255, 0.9); margin-bottom: 12px; font-size: 0.95rem; }
.cta-final-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .cta-final-inner { flex-direction: column; text-align: center; padding: 40px 28px; }
  .cta-final-action { text-align: center; }
  .cta-final-buttons { justify-content: center; }
}
.pricing-price { font-family: var(--font-display); color: var(--color-dark); font-size: 0.95rem; line-height: 1.4; margin-bottom: 4px; }
.pricing-price strong { font-size: 1.75rem; font-weight: 800; color: var(--color-primary-strong); }
.pricing-card .plan-checklist { margin-top: 4px; }
.pricing-card .btn { margin-top: auto; }

/* Footer — black, rebuilt 17 Sep 2026 -------------------------------------
   Pure #000, not a tinted near-black: the brief said black, and a #0B0B0B
   standing in for it is the tell you see on every generated page. The closing
   CTA band above is the brand gradient, so the page ends gradient -> black,
   which is the hardest edge on the site and the reason the footer can be this
   quiet inside.

   Four columns, not three. The ten links under "Páginas" were one tall lump
   beside a four-item column; they are really two lists — the five services you
   can buy, and the rest of the site — so they say which is which now.

   Type is set in three weights of white and nothing else: 0.95 for the column
   heads, 0.72 for links, 0.62 for prose. Everything clears 4.5:1 on black at
   those alphas, the lowest of them by a wide margin.
   ------------------------------------------------------------------------- */
.site-footer {
  background: #000;
  color: rgba(255, 255, 255, 0.62);
  padding: 72px 0 26px;
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 320px; }
/* logo-mark.png is a palette PNG with an opaque #FCFCFC ground — 78% of the
   file — so on any dark surface it lands as a pale tile. It did that on the
   old var(--color-dark) footer too; black just made it obvious. Knocking the white out
   is not an option because the glyph's own counters are white, so the mark
   gets the chip it was drawn for and reads as deliberate. */
.footer-mark {
  width: 46px;
  height: 46px;
  padding: 7px;
  background: #fff;
  border-radius: 13px;
  object-fit: contain;
}
.footer-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
}
.footer-brand p { margin: 0; font-size: 0.9rem; font-weight: 300; line-height: 1.6; max-width: 34ch; }

/* 40px targets with a hairline ring, which is what gives them a shape against
   black; the glyph stays 18px. Below the 44px floor on purpose — they are
   spaced far enough apart that the gap is part of the target. */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap),
    background-color 0.2s var(--ease-snap);
}
.footer-social a:hover {
  color: #000;
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.footer-social svg { width: 18px; height: 18px; }

.footer-links { min-width: 0; }
/* Sentence case. A tracked-out ALL-CAPS label above every column is the
   commonest footer tell, and these are short enough not to need the help. */
.footer-links h3 {
  font-family: var(--font-display);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  margin: 0 0 14px;
}
/* 4px vertical padding takes the row from 23.6px to 31.6px, over WCAG
   2.5.8's 24px floor. The margin drops by the same amount so the list
   spacing is unchanged. */
.footer-links a {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  padding: 4px 0;
  margin-bottom: 4px;
  transition: color 0.2s var(--ease-snap);
}
.footer-links a:hover { color: var(--color-accent); }

/* The safety band. The emergency sentence used to be the first of four
   paragraphs set at copyright size; it is the one line down here that could
   matter to someone, so it gets a surface, a mark and the brightest text in
   the footer. The red is the site's alert red lightened to clear contrast on
   black — same signal, not a second one. */
.footer-safety {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 30px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.045);
  border-radius: var(--radius-md);
}
.footer-safety-mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(240, 138, 143, 0.14);
  color: var(--color-alert-on-dark);
}
.footer-safety-mark svg { width: 15px; height: 15px; }
.footer-safety p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.6;
  max-width: 92ch;
}
.footer-safety p + p { margin-top: 8px; color: rgba(255, 255, 255, 0.62); }

/* Registration, responsável técnico, LGPD, copyright: bookkeeping, one row. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 32px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
  line-height: 1.6;
}
.footer-legal p { margin: 0; color: rgba(255, 255, 255, 0.5); }

/* Widest first, and adjacent: base.css declares its 767px block BEFORE its
   1024px one further up, so a footer rule dropped into those would give
   phones the tablet value. These two stay together, here, in order. */
@media (max-width: 1024px) {
  /* Four columns put "Atestados e declarações" on three lines. The brand
     takes a row of its own and the three lists share the next. */
  .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
  .footer-brand { grid-column: 1 / -1; max-width: 46ch; }
}
@media (max-width: 767px) {
  .site-footer { padding: 52px 0 24px; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .footer-brand p { max-width: none; }
  .footer-safety { flex-direction: column; gap: 12px; padding: 18px 20px; }
  .footer-legal { flex-direction: column; gap: 6px; }
}
/* The shorter-route animation in the Sobre hero. White strokes: it sits over
   the photo's dark overlay, where the h1 is #fff. Fixed aspect so the box has
   its height before the JSON lands and the CTA below does not jump. */
.about-caminho {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 200 / 64;
  margin: 20px 0 4px;
}
.about-hero-cards .reveal:nth-child(2) { transition-delay: 0.08s; }
.about-hero-cards .reveal:nth-child(3) { transition-delay: 0.16s; }

/* "Role para baixo" ring, bottom-right. The text is an SVG textPath on a
   circle and the whole ring spins; the button in the middle stays still. Not
   gated on prefers-reduced-motion, like every other motion on the site (see
   WARNINGS.md). SHARED: the homepage hero uses .about-scroll and .about-caminho
   too (placement in the Hero block, as .hero-scroll / .hero-caminho), so a change
   here changes both pages. */
.about-scroll {
  position: relative;
  justify-self: end;
  align-self: end;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  color: #fff;
}
.about-scroll-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: about-spin 14s linear infinite; }
.about-scroll-ring text {
  font-family: var(--font-body);
  font-size: 8.6px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: #fff;
}
.about-scroll-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.28s var(--ease-snap), background-color 0.2s var(--ease-snap);
}
.about-scroll-btn svg { width: 22px; height: 22px; }
.about-scroll:hover .about-scroll-btn { transform: translateY(3px); background: var(--color-primary-dark); }
@keyframes about-spin { to { transform: rotate(360deg); } }
.about-list .reveal:nth-child(2) { transition-delay: 0.08s; }
.about-list .reveal:nth-child(3) { transition-delay: 0.16s; }
.about-list .reveal:nth-child(4) { transition-delay: 0.24s; }@media (max-width: 1024px) {
  .about-scroll { display: none; }
}

/* ===========================================================================
   Renovação de receita page (template-cholo-receita.php)

   Every selector is prefixed rx- (from "Rx", the prescription mark) so this
   block cannot touch the landing, pricing, Sobre or blog pages. It reuses the
   site's tokens, buttons, .section-title, .faq and .cta-final as-is;
   what is new here is the receituário system below.

   The design idea: the page is about a specific Brazilian artifact — the
   prescription form — so the artifact is the design. The receituário types
   have real, different colours and real, different validity windows, so the
   cards are built as paper: a coloured top edge, a stamped uppercase label,
   and the validity as the largest number on the card.

   Two types are shown, branca simples and branca em duas vias. The azul and
   amarela cards were removed on 5 Sep 2026 — the client cannot handle those
   yet and the site must not mention them — and their modifiers, chips and
   colour tokens went with them rather than being left as dead rules.
   =========================================================================== */

:root {
  /* Paper edges, in the order the forms escalate in control */
  --rx-simple: #94A3B8;
  --rx-special: #475569;
  --color-amber: #C98A00;
  --color-rule: #E7ECF5;
}
.rx-slip-mark { display: flex; align-items: center; gap: 9px; }
.rx-slip-mark img { width: 26px; height: 26px; }
.rx-slip-mark b { font-size: 0.82rem; font-weight: 700; color: var(--color-dark); letter-spacing: 0.01em; }
.rx-stencil {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* There is deliberately no entrance animation on the stamp. It started life
   as one (opacity 0, scale 1.75, settling on load) and that is exactly the
   failure this project has already shipped three times with the Lottie: an
   element whose resting state lives inside an animation is invisible or
   malformed whenever the animation does not run — a backgrounded tab, a
   throttled renderer, a load in a hidden iframe. The stamp is the signature of
   this page; it must be correct with zero JavaScript and zero animation
   frames. Its entrance comes from .rx-hero-art's .reveal, which has a
   no-IntersectionObserver fallback that just shows the element. */

/* --- Steps: a real sequence, so it is numbered -------------------------- */
.flow { padding: var(--section-y) 0; }
/* --- Index rows ----------------------------------------------------------
   A short list where each row is a name, a line about it, and one figure held
   at the right edge: the four areas in the consultas hero ("10 motivos"), the
   three values in the Preços hero ("R$ 49,90"). Written against direct
   children so the row can be an <a> where it navigates and an <li> where it
   is just a fact. Promoted from consultas.css on 17 Sep 2026, when the second
   one appeared and a copy would have drifted.
   ------------------------------------------------------------------------- */
.index-rows {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.index-rows > * {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--color-rule);
  transition: background-color 0.18s var(--ease-snap);
}
.index-rows > *:last-child { border-bottom: 0; }
.index-rows b {
  grid-area: 1 / 1;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-dark);
  transition: color 0.18s var(--ease-snap);
}
.index-rows span {
  grid-area: 2 / 1;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 300;
}
.index-rows em {
  grid-area: 1 / 2;
  grid-row: 1 / 3;
  align-self: center;
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.index-rows a:hover, .index-rows a:focus-visible { background: var(--color-bg-soft); }
.index-rows a:hover b, .index-rows a:focus-visible b { color: var(--color-primary-strong); }

.index-rows { list-style: none; margin: 0; padding: 0; }

/* --- The step axis -------------------------------------------------------
   "Como funciona" on four pages: consultas, receita, exames, emagrecimento.
   Replaced the numbered card strip (.flow-grid / .flow-num) on 17 Sep 2026;
   that strip was three identical cards with a 42px cyan number badge, which
   said nothing the order of the columns did not already say.

   A step's segment runs from its own node to the next, so a segment IS that
   step's duration. Every one of these four pages states exactly one bounded
   duration — "Em até 30 min" — and that is the only segment drawn as a band:
   a range that stops dead at the next node. Everything else stays a hairline,
   because "2 minutos", "Na hora" and "A cada consulta" are phrases rather than
   measurements, and drawing them to a length would invent figures nobody
   signed off. Put --wait on the step whose own label carries the bound.
   ------------------------------------------------------------------------- */
.flow-axis {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
}
.flow-axis-step { display: flex; flex-direction: column; align-items: flex-start; }
.flow-axis-track { position: relative; display: block; width: 100%; height: 12px; margin-bottom: 20px; }
/* The node. The white ring is what lets the band run underneath and still
   read as stopping at the node rather than passing through it. */
.flow-axis-track::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--color-primary-strong);
  box-shadow: 0 0 0 5px var(--color-bg);
  z-index: 1;
}
/* The connector, drawn per step from its own node across the gap to the next
   one — base.css's idiom, for the same reason: a single line across the grid
   overshoots the last node and trails off. The last step draws none. */
.flow-axis-track::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: calc(100% + 21px);
  height: 1px;
  margin-top: -0.5px;
  transform-origin: left center;
  background: repeating-linear-gradient(90deg, var(--color-rule) 0 8px, transparent 8px 16px);
}
.flow-axis-step:last-child .flow-axis-track::after { content: none; }
/* The bounded stretch: assessment to plan, "em até 30 min". */
.flow-axis-track--wait::after {
  height: 9px;
  margin-top: -4.5px;
  border-radius: 5px;
  background: rgba(0, 209, 255, 0.22);
}
.flow-axis-step .flow-time { margin-bottom: 10px; }
.flow-axis-step h3 { font-size: 1.15rem; margin: 0 0 6px; }
.flow-axis-step p { color: var(--color-text-muted); font-weight: 300; margin: 0; max-width: 34ch; }

/* The one orchestrated moment on this page: the axis draws itself once, left
   to right, when it first comes into view. It is armed by JS and only when
   the section has not been seen yet, so the finished diagram — not an empty
   one — is what CSS renders on its own. No JS, late JS, or a failed observer
   all land on the same complete drawing. */
.flow-axis.is-armed .flow-axis-track::before { opacity: 0; transform: scale(0.4); }
.flow-axis.is-armed .flow-axis-track::after { transform: scaleX(0); }
.flow-axis.is-drawn .flow-axis-track::before {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.25s linear, transform 0.4s var(--ease-snap);
}
.flow-axis.is-drawn .flow-axis-track::after { transform: scaleX(1); transition: transform 0.65s var(--ease-reveal); }
.flow-axis.is-drawn .flow-axis-step:nth-child(2) .flow-axis-track::before { transition-delay: 0.6s; }
.flow-axis.is-drawn .flow-axis-step:nth-child(2) .flow-axis-track::after { transition-delay: 0.68s; }
.flow-axis.is-drawn .flow-axis-step:nth-child(3) .flow-axis-track::before { transition-delay: 1.1s; }

/* The axis is defined above, so its breakpoints have to come after it: at
   equal specificity the later rule wins, and a media query adds none. */
@media (max-width: 1024px) {
  .flow-axis { column-gap: 24px; }
  .flow-axis-track::after { width: calc(100% + 13px); }
}
@media (max-width: 767px) {
  /* The axis turns vertical rather than breaking into three loose blocks:
     the band still runs from "conte o que está sentindo" to the node that
     says até 30 min, which is the whole point of drawing it. */
  .flow-axis { grid-template-columns: 1fr; column-gap: 0; margin-top: 32px; }
  .flow-axis-step { position: relative; padding: 0 0 28px 30px; }
  .flow-axis-step:last-child { padding-bottom: 0; }
  .flow-axis-track { position: absolute; left: 0; top: 4px; bottom: 0; width: 11px; height: auto; margin: 0; }
  .flow-axis-track::before { top: 0; margin-top: 0; }
  .flow-axis-track::after {
    left: 5px;
    top: 11px;
    width: 1px;
    height: calc(100% - 11px);
    margin-top: 0;
    background: repeating-linear-gradient(180deg, var(--color-rule) 0 8px, transparent 8px 16px);
  }
  .flow-axis-track--wait::after { left: 1px; width: 9px; border-radius: 5px; background: rgba(0, 209, 255, 0.22); }
  .flow-axis-step p { max-width: none; }
  /* The sweep is horizontal by construction and JS only arms it above this
     width. If a resize ever lands an armed axis here, show it whole. */
  .flow-axis.is-armed .flow-axis-track::before { opacity: 1; transform: none; }
  .flow-axis.is-armed .flow-axis-track::after { transform: none; }
}

/* Set as a figure rather than a tag, the same way the receituário cards set
   their validity: it is data, not a label. The pill went with the promotion —
   a chip that size reads as metadata. */
.flow-time {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-primary-strong);
}
.flow-time svg { width: 15px; height: 15px; opacity: 0.5; align-self: center; }
.section-note {
  max-width: 78ch;
  margin: 32px auto 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.6;
}
.section-note strong { color: var(--color-text); font-weight: 600; }
.checklist { display: flex; flex-direction: column; gap: 4px; }
.checklist li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--color-rule); }
.checklist li:last-child { border-bottom: 0; }
.check-tick {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 209, 255, 0.1);
  color: var(--color-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.check-tick svg { width: 14px; height: 14px; }
.check-body b { display: block; font-weight: 600; color: var(--color-dark); margin-bottom: 3px; }
.check-body span { color: var(--color-text-muted); font-weight: 300; font-size: 0.93rem; }@media (max-width: 1024px) {
}@media (max-width: 767px) {
  .rx-hero-actions .btn { width: 100%; }
}
.ex-read-point .check-tick { flex-shrink: 0; }@media (max-width: 767px) {
  .ex-hero-actions .btn, .at-hero-actions .btn { width: 100%; }
}

/* ===========================================================================
   Consultas em Geral (template-cholo-consultas.php) — prefix cg-

   This is the umbrella page over the three service pages, so it deliberately
   does NOT get an artifact card in the hero the way receita, exames and
   atestados each do. Those pages are about one object; this one is about
   breadth, and the breadth is the argument. So the hero is typographic and the
   centre of the page is an index: the complaints people actually arrive with,
   written the way they would say them, dense enough that the length itself
   answers "do you handle my thing?".

   Second new hue on the site, after the receituário amber: a red, used only in
   the "procure atendimento presencial" block. A safety signal is the one place
   red is not decoration.
   =========================================================================== */

:root {
  --color-alert: #B4232B;
  --color-alert-tint: #FDF1F1;
  /* The same signal, lightened until it clears 4.5:1 on the black footer.
     #B4232B on #000 is 2.2:1 — a warning you have to hunt for. */
  --color-alert-on-dark: #F08A8F;
}@media (max-width: 767px) {
  .cg-hero-actions .btn { width: 100%; }
}
.cg-tab {
  flex: 1;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background-color 0.25s var(--ease-snap), color 0.25s var(--ease-snap);
}
.cg-tab.is-active { background: var(--color-primary-strong); color: #fff; }
.cg-tab:hover:not(.is-active) { color: var(--color-primary-strong); }
.cg-panel[hidden] { display: none; }
/* Two columns of complaints inside a panel; the hairline rules line up across
   both because every row is the same height. */
.cg-panel .cg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.cg-panel .cg-list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }@media (max-width: 767px) {
  .cg-tab { flex: none; width: 100%; }
  .cg-panel .cg-list { grid-template-columns: 1fr; gap: 0; }
  .cg-panel .cg-list li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--color-rule); }
}

/* The labels are browser text in an SVG sharing the animation's viewBox, not
   Lottie text layers. lottie-web sets Lottie text glyph by glyph with metrics
   it derives itself, and against Noto Sans that came out cramped enough to
   read as broken — 79 <text> nodes for seven labels on the cycle. None of this
   text animates, so nothing is lost by lifting it out, and it gains correct
   kerning, real font loading, selectability and a screen reader. */
.cg-lottie-labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font-family: var(--font-body);
}
@media (max-width: 767px) {
  /* Every other service hero does this. Without it the long "Começar o
     acompanhamento" label sets the min-content width of the single `1fr`
     track — `1fr` has an implicit min-width:auto, so the track refuses to go
     below ~340px and the whole PAGE scrolls sideways by 19px on a 360px
     phone. Nothing looks broken; the page just drifts under your thumb. */
  .em-hero-actions .btn { width: 100%; }
}@media (max-width: 767px) {
  .cg-tdah .btn { width: 100%; }
}



/* =============================================================================
   FUNNEL COMPONENTS — shared, 17 Sep 2026
   Built for /cholo-consulta/ and promoted here when five more pages wanted
   them, the same route .flow-axis and .index-rows took. Every one of them is
   a frame for claims the page already makes somewhere else: the proof strip
   restates facts, the matrix restates the choice, the value stack restates
   what the page said comes out of the service, and the dock restates the
   price. None of them invents a figure.

   Order below is the order they appear on a page: strip, matrix, band, dock.
   ============================================================================= */

/* Visually hidden, still read aloud. Was .cg-sr in the consultas file; the
   compare table's <caption> needs it on every page that has a matrix. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- The strip that closes the hero band ---------------------------------
   Four cells on the hero's own soft ground, divided by hairlines rather than
   boxed as cards: it is a footer to the hero, not a new section. Two of them
   are figures and two are facts, and they are set differently on purpose —
   a figure leads with the number, a fact leads with its mark. See the
   PLACEHOLDER block in the template: the two figures are not measured yet.
   ------------------------------------------------------------------------- */
.proof-strip {
  border-top: 1px solid var(--color-rule);
  padding: 30px 0 34px;
}
.proof-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 0;
  align-items: start;
}
.proof-cell { padding: 0 30px; }
.proof-cell + .proof-cell { border-left: 1px solid var(--color-rule); }
.proof-cell:first-child { padding-left: 0; }
.proof-cell:last-child { padding-right: 0; }
.proof-num {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 2.05rem;
  line-height: 1;
  font-weight: 600;
  color: var(--color-primary-strong);
  font-variant-numeric: tabular-nums;
}
.proof-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.5;
}
.proof-cell--fact { display: flex; gap: 13px; align-items: flex-start; }
.proof-mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #E0F3FC;
  color: var(--color-primary-strong);
}
.proof-mark svg { width: 17px; height: 17px; }

/* --- Three paths, as a matrix --------------------------------------------
   A real table, because it is tabular data and the row headers are what keep
   it readable when it scrolls sideways. The third column is marked as the
   recommended one the way a pricing table marks one — the comparison is not
   neutral and should not pretend to be.
   ------------------------------------------------------------------------- */
.compare { padding: var(--section-y) 0 0; }
.compare .section-subtitle { text-align: left; margin-left: 0; max-width: 62ch; }
.compare-wrap {
  margin-top: 36px;
  overflow-x: auto;
  scrollbar-width: none;
}
.compare-wrap::-webkit-scrollbar { display: none; }
.compare-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}
.compare-table th,
.compare-table td {
  padding: 17px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-text);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.5;
}
.compare-table thead th {
  vertical-align: bottom;
  padding-bottom: 16px;
  color: var(--color-dark);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}
.compare-table thead td { border-bottom-color: transparent; }
.compare-table tbody th {
  width: 188px;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.86rem;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
/* The recommended column: a tinted rail running the height of the table,
   closed top and bottom so it reads as one object rather than as five tinted
   cells that happen to line up. */
.compare-table .is-pick { background: #F2FBFE; color: var(--color-dark); font-weight: 400; }
.compare-table thead .is-pick {
  border-top: 2px solid var(--color-primary-strong);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding-top: 18px;
}
.compare-table tbody tr:last-child .is-pick { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.compare-table thead .is-pick { font-weight: 600; }
.compare-table .is-pick b { font-weight: 600; color: var(--color-primary-strong); font-size: 1.1rem; }
.compare-yes,
.compare-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.compare-yes { background: #E7F7EE; color: #15803D; }
.compare-no { background: #ECEFF6; color: var(--color-text-muted); }
.compare-yes svg,
.compare-no svg { width: 13px; height: 13px; }
.compare-note { text-align: left; margin-left: 0; max-width: 78ch; }
.compare-note a { color: var(--color-primary-strong); font-weight: 600; }
.compare-note a:hover { text-decoration: underline; }

/* --- The one loud band ---------------------------------------------------
   The logo's deep blue, used as a surface nowhere else: the closing CTA owns
   the brand gradient and the footer owns the dark. Everything the band says
   is a restatement of the four branches directly above it and of
   cholo_price(), which is why it can afford to shout.
   ------------------------------------------------------------------------- */
.value-stack {
  background: var(--color-brand-deep);
  color: #fff;
  padding: calc(var(--section-y) * 0.88) 0;
}
.value-stack-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas: "lead list" "foot list";
  gap: 34px 64px;
  align-items: start;
}
.value-stack-lead { grid-area: lead; }
.value-stack-list { grid-area: list; }
.value-stack-foot { grid-area: foot; }
.value-stack-lead h2 {
  margin: 0 0 16px;
  max-width: 21ch;
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.9vw, 42px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #fff;
}
.value-stack-lead p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.65;
}
.value-stack-list {
  align-self: center;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.value-stack-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name flag" "desc flag";
  gap: 3px 22px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.value-stack-list b { grid-area: name; font-size: 1.06rem; font-weight: 600; }
.value-stack-list span {
  grid-area: desc;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 300;
  font-size: 0.88rem;
  line-height: 1.5;
}
.value-stack-list em {
  grid-area: flag;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
}
.value-stack-price { display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px; }
.value-stack-price span { color: rgba(255, 255, 255, 0.78); font-size: 0.86rem; font-weight: 300; }
.value-stack-price b {
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  font-weight: 600;
}
/* White on the blue, not the cyan button: --color-primary-strong against
   var(--color-brand-deep) is 1.6:1, which is a button you have to hunt for. */
.value-stack-btn { background: #fff; color: var(--color-brand-deep); }
.value-stack-btn:hover { background: rgba(255, 255, 255, 0.88); color: var(--color-brand-deep); }
.value-stack-btn svg { color: var(--color-brand-deep); }
.value-stack-note {
  margin: 18px 0 0;
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .proof-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .proof-cell:nth-child(odd) { padding-left: 0; border-left: 0; }
  .proof-cell:nth-child(even) { padding-right: 0; }
  .value-stack-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "lead" "list" "foot";
    gap: 30px;
  }
  .value-stack-lead h2 { max-width: 20ch; }
}
@media (max-width: 767px) {
  .proof-strip-inner { grid-template-columns: 1fr; gap: 20px; }
  .proof-cell { padding: 0; border-left: 0; }
  .proof-cell + .proof-cell { padding-top: 20px; border-top: 1px solid var(--color-rule); }
  .proof-num { font-size: 1.8rem; }
  /* The matrix keeps its width and scrolls, the way the two wide diagrams do.
     Stacking it into three cards would lose the row-by-row comparison, which
     is the only reason it is a table. */
  .compare-wrap {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .compare-table { min-width: 680px; }
  .compare-table th, .compare-table td { padding: 14px 16px; font-size: 0.9rem; }
  .compare-table tbody th { width: 140px; }
  .value-stack-list li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "desc" "flag"; gap: 4px; }
  .value-stack-list em { justify-self: start; margin-top: 6px; }
  .value-stack-btn { width: 100%; justify-content: center; }
}
/* --- The bar that follows you --------------------------------------------
   Appears once the hero has scrolled away and stands down when the closing
   CTA arrives, so it never competes with the button it duplicates. Fixed, and
   [hidden] until the observer says otherwise: with no JS it never appears,
   which is the harmless direction for a bar that covers content.
   z-index sits above the header (70) and below the booking modal (1000). */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: 12px 0;
  /* Opaque, and no backdrop-filter. This was rgba(255,255,255,0.94) over
     blur(12px): a fixed, full-width element that blurs what is behind it has
     to re-blur the page on every scrolled frame, and at 94% white there was
     almost nothing showing through to blur. The 6% is not worth a per-frame
     repaint the width of the viewport. */
  background: var(--color-bg);
  border-top: 1px solid var(--color-rule);
  box-shadow: 0 -10px 30px rgba(11, 18, 32, 0.07);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-reveal);
}
.dock.is-up { transform: none; }
.dock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dock-text { display: flex; flex-direction: column; margin: 0; line-height: 1.35; }
.dock-text b { font-size: 0.98rem; font-weight: 600; color: var(--color-dark); }
.dock-text span { font-size: 0.85rem; font-weight: 300; color: var(--color-text-muted); }
.dock-text strong { font-weight: 600; color: var(--color-primary-strong); }
@media (max-width: 767px) {
  .dock { padding: 10px 0; }
  .dock-inner { gap: 12px; }
  .dock-text b { font-size: 0.9rem; }
  .dock-text span { font-size: 0.78rem; }
  .dock .btn { padding: 11px 16px; font-size: 0.88rem; white-space: nowrap; }
}


/* === Bandas: a página como uma pilha de capítulos ==========================

   Medido em 17 Sep 2026, antes disto: /cholo-atestado/ tinha 8 seções, 6.305px
   de altura, DUAS bandas de contraste — as duas nos últimos 20% — e 3.565px
   entre o botão do herói e o botão seguinte. Os 60% de cima eram uma lavagem
   só de #F4F6FC e branco, sem nada separando uma seção da outra e sem um
   motivo para agir em lugar nenhum.

   O sistema abaixo declara o chão de cada seção em vez de deixá-lo acontecer.
   A sequência de uma página de serviço passa a ser:

     herói (soft) → prova (INK) → conteúdo (branco) → cta-break (MARCA)
     → conteúdo (soft) → comparação (branco) → value-stack (PROFUNDO)
     → FAQ (soft) → fechamento (gradiente) → rodapé (preto)

   Quatro momentos de contraste em vez de dois, três deles na metade de cima.
   Nada aqui inventa conteúdo: são as mesmas seções, com chão declarado.

   Estas regras vêm DEPOIS das regras de seção lá em cima de propósito: mesma
   especificidade (0,1,0), então quem vem por último ganha, e uma banda
   sobrescreve o fundo que .faq ou .proof-strip já traziam. */

/* `section.` on purpose, not a bare class.
   The page stylesheet (css/pages/<page>.css) is enqueued AFTER base.css, so a
   page rule like `.at-map { background: var(--color-bg-soft) }` at (0,1,0)
   beats a band at (0,1,0) simply by loading later. Element + class is (0,1,1)
   and wins without editing six page stylesheets to remove a background each.
   A page that really wants its own ground can still say `section.at-map`. */
section.band-white { background: var(--color-bg); }
section.band-soft  { background: var(--color-bg-soft); }

/* O preto do rodapé, de novo logo abaixo do herói. A página fica presa entre
   duas âncoras escuras em vez de desbotar de cima a baixo. */
section.band-ink {
  background: #0E1116;
  color: rgba(255, 255, 255, 0.72);
  border-top: 0;
}
.band-ink .section-title,
.band-ink h2,
.band-ink h3,
.band-ink strong,
.band-ink b { color: #fff; }

/* --- a faixa de prova, agora sobre o escuro --- */
.proof-strip.band-ink { border-top: 0; padding: 40px 0 44px; }
.proof-strip.band-ink .proof-num { color: var(--color-primary); }
.proof-strip.band-ink .proof-label { color: rgba(255, 255, 255, 0.66); }
/* `border-color`, not `border-left-color`. The divider between cells is a
   left border on desktop but becomes a TOP border under 768px (see the
   stacking rule above), and recolouring only the left edge left the mobile
   separators drawn in --color-rule — a light grey meant for a light ground,
   which on the ink band reads as bright white lines. */
.proof-strip.band-ink .proof-cell + .proof-cell { border-color: rgba(255, 255, 255, 0.14); }
.proof-strip.band-ink .proof-mark {
  background: rgba(0, 209, 255, 0.14);
  color: var(--color-primary);
}

/* Um corte em diagonal entre a faixa escura e a seção seguinte foi tentado e
   removido em 17 Sep 2026. Numa faixa de 1.324px de largura, os 44px de altura
   que davam para gastar produzem um angulo de 1,9 graus: na tela aquilo nao le
   como uma diagonal de proposito, le como uma borda torta. Para ler de verdade
   precisaria de uns 90px, ou seja, 90px de escuro vazio. A borda reta separa
   as bandas melhor e nao levanta a duvida. */

/* === O CTA do meio da página ==============================================

   Uma página de funil dá um motivo para agir a cada duas seções. Esta é fina
   de propósito — interrompe a leitura, não substitui uma seção — e usa a
   MESMA frase e o MESMO botão que a página já tem no herói e no fechamento.
   Nenhuma promessa nova entra por aqui. */

.cta-break { padding: 0 0 var(--section-y); }
.cta-break-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 26px 34px;
  border-radius: var(--radius-md);
  background: linear-gradient(112deg, var(--color-brand-deep), var(--color-primary));
  color: #fff;
}
.cta-break-text { min-width: 0; }
.cta-break-text b {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
.cta-break-text span {
  display: block;
  margin-top: 5px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.cta-break .btn { flex: none; }

/* === Profundidade ========================================================
   Os cartões estavam todos no mesmo plano do fundo. Uma sombra de verdade e
   um levantar no hover é o que separa uma página densa de uma página chapada.
   Só onde já havia cartão — nada ganha borda nova. */

.compare-table,
.value-stack-list,
.faq-item {
  box-shadow: 0 2px 10px rgba(11, 18, 32, 0.05);
}
.faq-item {
  transition: box-shadow 0.25s var(--ease-snap), transform 0.25s var(--ease-snap);
}
.faq-item:hover { box-shadow: 0 8px 24px rgba(11, 18, 32, 0.09); }

/* === Escala dos títulos ==================================================
   Os títulos de seção competiam com o texto corrido. Numa página de funil o
   título é o que carrega a leitura de um capítulo para o outro. */
.section-title { letter-spacing: -0.015em; }

@media (min-width: 1025px) {
  .section-title { font-size: clamp(2rem, 2.6vw, 2.6rem); line-height: 1.14; }
}

@media (max-width: 1024px) {
  .cta-break-inner { padding: 22px 26px; }
}

@media (max-width: 767px) {
  .cta-break-inner { flex-direction: column; align-items: flex-start; padding: 22px; }
  .cta-break .btn { width: 100%; justify-content: center; }
  .cta-break-text b { font-size: 1.16rem; }
  .proof-strip.band-ink { padding: 30px 0 34px; }
}

/* === A oferta, como o documento que ela é ==================================

   Estas páginas não vendem "telemedicina". Cada uma vende um DOCUMENTO: um
   receituário, um pedido de exames, um atestado, uma folha de acompanhamento.
   Os heróis já sabem disso — o artefato é o centro de todos eles, e as bordas
   de papel (--rx-simple / --rx-special) já estão nos tokens desde agosto.

   Abaixo da dobra a página esquecia a própria linguagem: cartões arredondados
   iguais, o mesmo raio em tudo, a mesma sombra cinza, gradiente como enfeite.
   Isto é o kit de cartão de SaaS — o motivo pelo qual a página lia como
   modelo pronto por mais bandas que se acrescentasse.

   O bloco da oferta é o momento mais importante de uma página de funil: é onde
   o que você recebe é declarado, item por item. Numa página que vende
   documentos, esse bloco É um documento. Papel branco sobre o azul, borda de
   assinatura, linhas de formulário, cada item marcado na margem.

   É o único lugar onde a ousadia é gasta. O resto da página continua quieto. */

.value-stack-list {
  align-self: center;
  background: var(--color-bg);
  /* 4px, não os 16px do resto. O raio aqui é informação, não estilo: este
     elemento é papel, os outros são interface. Formulário de verdade não tem
     canto arredondado de cartão. */
  border-radius: 4px;
  border-top: 0;
  border-left: 5px solid var(--color-primary-strong);
  box-shadow: 0 18px 46px rgba(3, 20, 63, 0.30);
  padding: 4px 28px;
}
.value-stack-list li {
  padding: 18px 0;
  /* A pauta de um formulário, não a borda de um cartão. */
  border-bottom: 1px solid rgba(40, 41, 43, 0.11);
}
.value-stack-list li:last-child { border-bottom: 0; }
.value-stack-list b { color: var(--color-dark); }
.value-stack-list span { color: var(--color-text-muted); }

/* "Incluso" era uma pílula translúcida — um enfeite de interface. Num
   documento, o item conferido leva uma marca na margem. A pílula sai. */
.value-stack-list em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--color-primary-strong);
  font-size: 0.8rem;
  font-weight: 600;
}
.value-stack-list em::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  /* O tique desenhado na própria máscara: sem <svg> novo em seis templates. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 767px) {
  .value-stack-list { padding: 2px 20px; }
  .value-stack-list li { padding: 15px 0; }
}


/* === Heróis das páginas de serviço ==========================================

   Um bloco, quatro páginas. Atestado, emagrecimento, exame e receita
   declaravam o mesmo herói cada uma no seu arquivo — a mesma grade, o mesmo
   tipo do h1, o mesmo subtítulo — e mudar o herói queria dizer mudar quatro
   arquivos, ou mudar um e deixar três divergirem em silêncio.

   Está no FIM do base.css de propósito. Os arquivos de página são
   enfileirados depois do base.css, então uma regra que vivia lá e ganhava de
   tudo que há aqui continua ganhando: a última regra deste arquivo vence o que vem
   antes com a mesma especificidade, e qualquer regra de página ainda carrega
   depois e vence as duas. A mudança é neutra na cascata por construção —
   e foi conferida propriedade por propriedade antes de ser escrita.

   O que continua em css/pages/ é o que realmente difere: cada página tem o
   seu próprio gap em 1024px, e receita tem o seu próprio padding. */
.at-hero h1, .ex-hero h1, .rx-hero h1 {
  font-family: var(--font-serif);
  font-size: 52px;
  line-height: 60px;
  font-weight: 600;
  margin-bottom: 20px;
}
.at-hero, .em-hero, .ex-hero {
  padding: 64px 0 80px;
  background: var(--color-bg-soft);
}
.at-hero-actions, .em-hero-actions, .ex-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.at-hero-inner, .em-hero-inner, .ex-hero-inner, .rx-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.at-hero-subtitle, .ex-hero-subtitle, .rx-hero-subtitle {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  font-weight: 300;
  max-width: 46ch;
  margin-bottom: 32px;
}
.em-hero-price strong, .rx-hero-price strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-primary-strong);
}
@media (max-width: 1024px) {
  .at-hero h1, .ex-hero h1, .rx-hero h1 {
    font-size: 42px;
    line-height: 50px;
  }
  .at-hero, .ex-hero {
    padding: 56px 0 64px;
  }
  .at-hero-inner, .ex-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}
@media (max-width: 767px) {
  .at-hero h1, .ex-hero h1, .rx-hero h1 {
    font-size: 30px;
    line-height: 38px;
  }
  .at-hero, .ex-hero {
    padding: 44px 0 52px;
  }
  .at-hero-subtitle, .ex-hero-subtitle, .rx-hero-subtitle {
    font-size: 1rem;
  }
}


/* === O cabeçalho, alinhado ao Olá Doutor ==================================
   4 Oct 2026, fim do dia. O bloco "corporativo" de mais cedo foi removido
   daqui inteiro em vez de ser revertido linha a linha — ele levava o
   cabeçalho na direção oposta à da referência que o cliente escolheu.

   Medido em https://oladoutor.app/ no mesmo dia:
     altura        120px   (o Bora já era 120; eu tinha posto 88)
     fundo         branco, SEM fio inferior e SEM sombra
     itens do menu Noto Sans 18px, peso 300, #28292B
     espaço        ~60px entre itens
     botões        raio 8px, 16px 24px, 16px, peso 500
     logotipo      72x56

   Os itens de menu do Bora Doutor já eram 1.125rem (=18px) peso 300: a
   tipografia do cabeçalho dos dois sempre foi a mesma. O que eu tinha feito
   — 16px peso 500, fio permanente, 88px — era a divergência. */
.site-header .btn { border-radius: 8px; }
/* O anel pulsando fica desligado: a referência não tem nada piscando no topo. */
.site-header .btn-pulse { animation: none; }

/* Mais perto ainda do Olá Doutor, no cabeçalho. Medido neles:
     botões do topo   16px 24px, corpo 16px, peso 500  -> ~74px de altura
     "Sou médico"     sem borda, texto na cor da marca, fundo transparente
     espaço entre itens  ~60px

   O Bora usava `.btn-sm` no cabeçalho (14px 20px, 0.9rem), que dá ~46px — os
   botões deles são visivelmente maiores, e é parte grande do ar da barra.

   O espaço de 60px fica só acima de 1120px. Entre 961 e 1120 existe uma faixa
   documentada em WARNINGS.md onde o cabeçalho já corria 111px além da tela;
   alargar o espaçamento ali reabriria exatamente aquele bug. */
.header-actions .btn-sm {
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 500;
}
.header-actions .btn-outline {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary-strong);
}
.header-actions .btn-outline:hover {
  background: transparent;
  color: var(--color-primary-dark);
}
/* 1280, nao 1121. Calculado antes de subir: a 1121px o cabecalho precisaria
   de ~1095px num container de 1073 — 22px de barra horizontal, que e
   exatamente o bug da faixa 961-1120 em WARNINGS.md, so que deslocado para
   cima. A 1280 o container tem 1232 e sobra folga. */
@media (min-width: 1280px) {
  .main-nav-links { gap: 44px; }
}