/* Bora Doutor: rules used only on the consultas page(s). Loaded after base.css. */

/* --- Hero ---------------------------------------------------------------
   The page is a triage question ("which specialist?"), so the hero answers it
   with a choice, not with decoration: the sentence on the left, the four areas
   on the right as an index you can enter at any point. Left-aligned, because
   an index is read from its left edge. Redesigned 16 Sep 2026; before this it
   was a centred headline with an eyebrow pill, one phrase in cyan, and a quiet
   three-item strip underneath that did not look clickable. */
.cg-hero { padding: 92px 0 0; background: var(--color-bg-soft); }
.cg-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 56px;
  align-items: end;
  padding-bottom: 76px;
}
.cg-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.012em;
  /* 20ch keeps "Comece por aqui" on its own line, so the question and the
     answer are separated by the line break rather than by a colour change. */
  max-width: 20ch;
  margin: 0 0 18px;
}
.cg-hero-subtitle {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.62;
  max-width: 48ch;
  margin: 0 0 30px;
}
.cg-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.cg-index { padding: var(--section-y) 0 88px; }

/* The shared flow/outcome sections centre their heading and standfirst; on this
   page everything is read from the left edge, so they follow the page. */
.cg-flow .section-title,
.cg-flow .section-subtitle,
.cg-out .section-subtitle {
  text-align: left;
  margin-left: 0;
  max-width: 62ch;
}
.cg-index-note { text-align: left; max-width: 62ch; margin-left: 0; }

/* The complaint index. This is the page's centre: most people arrive with a
   symptom and no idea whether it is "worth" a consultation, and what answers
   that is seeing it written down. Two columns, ruled rows, and a hollow square
   in the margin — the mark a paper triage sheet uses for something not yet
   ticked. On 17 Sep 2026 the square stopped being a drawing and became a real
   checkbox, so the sheet works the way it looks: you tick what is yours and
   take the list with you. */
.cg-list li {
  position: relative;
  border-bottom: 1px solid var(--color-rule);
}
.cg-list li:last-child { border-bottom: 0; }
.cg-panel .cg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }

/* The empty square in the margin always meant "not ticked yet". Now it ticks.
   A real <input type="checkbox"> inside the <label>, so the list works with
   the script dead — that is the whole list's behaviour, and only the tally
   below it needs JS. The box is a styled <span> because a native checkbox
   cannot carry the draw-in animation, and the input stays in the document
   (0x0, transparent) so it keeps its focus ring and its keyboard toggle. */
.cg-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-snap);
}
.cg-pick:hover { background: var(--color-bg-soft); }
.cg-pick-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
}
.cg-pick-box {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 0.12em;
  border: 1.5px solid rgba(0, 119, 145, 0.38);
  border-radius: 4px;
  background: var(--color-bg);
  transition: background-color 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap);
}
.cg-pick-box::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 1.5px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.3);
  opacity: 0;
  transition: opacity 0.16s linear, transform 0.24s var(--ease-snap);
}
.cg-pick-input:checked + .cg-pick-box {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}
.cg-pick-input:checked + .cg-pick-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.cg-pick-input:focus-visible + .cg-pick-box {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 3px;
}
.cg-pick-text {
  color: var(--color-text);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.45;
}
.cg-pick-input:checked ~ .cg-pick-text { color: var(--color-dark); font-weight: 400; }

/* The tally is the only part of the list that needs the script, and it stays
   [hidden] until something is ticked — so a dead script leaves a working
   checklist and no orphaned empty box.

   `display: grid` on the class beats the UA stylesheet's `[hidden]{display:
   none}`, so the attribute has to be restated here or the box shows at zero.
   Same trap base.css hit with `.cg-panel[hidden]`. */
.cg-tally[hidden] { display: none; }
.cg-tally {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num note" "num actions";
  align-items: center;
  gap: 4px 20px;
  margin: 26px 0 0;
  padding: 20px 24px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary-strong);
  animation: cg-tally-in 0.4s var(--ease-reveal) both;
}
@keyframes cg-tally-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.cg-tally-text {
  grid-area: num;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding-right: 20px;
  border-right: 1px solid var(--color-rule);
}
.cg-tally-num {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  line-height: 1;
  font-weight: 600;
  color: var(--color-primary-strong);
}
.cg-tally-label {
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--color-text-muted);
  text-align: center;
}
.cg-tally-note {
  grid-area: note;
  margin: 0;
  color: var(--color-text);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.55;
}
.cg-tally-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 12px;
}
.cg-tally-send {
  color: var(--color-primary-strong);
  font-weight: 600;
  font-size: 0.9rem;
}
.cg-tally-send:hover { text-decoration: underline; }

/* --- What you leave with: four branches off one consultation --------------
   Four equal cards said "here are four products". They are alternatives from a
   single event, so they now hang off one spine, with a short trunk rising from
   the first branch toward the heading that names the source. The row is set
   like the hero's area index — name and destination on the left, what it is on
   the right — so the two indexes on this page read the same way.

   The stub carries the document colour (see the tarja note below), which is
   also how a reader tells the three that have a page of their own from the one
   that does not: only those three carry a destination chip.
   ------------------------------------------------------------------------- */
.cg-out { padding: var(--section-y) 0; }
.cg-branch { list-style: none; margin: 40px 0 0; padding: 0; position: relative; }
/* The trunk. Deliberately short and unattached: it points back at the heading
   without drawing a box around it. */
.cg-branch::before {
  content: '';
  position: absolute;
  left: 0;
  top: -26px;
  width: 1px;
  height: 26px;
  background: var(--color-rule);
}
.cg-branch-item {
  position: relative;
  padding-left: 40px;
  /* Where the stub meets the row, level with the name's first line. */
  --attach: 31px;
  --out-edge: var(--color-primary-strong);
}
/* The spine, per item, so rows of any height tile into one continuous line.
   The last item stops at its own stub instead of trailing past the diagram. */
.cg-branch-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-rule);
}
.cg-branch-item:last-child::before { bottom: auto; height: var(--attach); }
.cg-branch-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: var(--attach);
  width: 27px;
  height: 2px;
  margin-top: -1px;
  background: var(--out-edge);
}
.cg-branch-row {
  display: grid;
  /* A fixed name column, not a fraction: the names are two words at most, and
     a 0.4fr track left "Receita" holding 500px of empty page. */
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas: "title desc" "chip desc";
  column-gap: 40px;
  padding: 20px 18px 22px 0;
  border-bottom: 1px solid var(--color-rule);
  transition: background-color 0.18s var(--ease-snap);
}
.cg-branch-item:last-child .cg-branch-row { border-bottom: 0; }
.cg-branch-row h3 {
  grid-area: title;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
}
.cg-branch-row p {
  grid-area: desc;
  margin: 0;
  color: var(--color-text-muted);
  font-weight: 300;
  line-height: 1.6;
  font-size: 0.95rem;
  /* The track is ~890px at 1440, which is ~110 characters a line. */
  max-width: 64ch;
}
/* The whole row is the link, so the chip is a label — no arrow glued to it. */
.cg-out-more {
  grid-area: chip;
  margin-top: 7px;
  text-underline-offset: 3px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--out-edge);
}
a.cg-branch-row:hover, a.cg-branch-row:focus-visible { background: var(--color-bg); }
a.cg-branch-row:hover .cg-out-more, a.cg-branch-row:focus-visible .cg-out-more { text-decoration: underline; }

/* --- Red flags ----------------------------------------------------------- */
/* The `overflow-x: clip` that used to be here moved to `main` in base.css
   later the same day, once the same 10px of `.reveal-right` overflow turned
   up on four more pages. One rule instead of five. */
.cg-alert { padding: var(--section-y) 0; }
/* Three columns, the middle one being the crossing itself: the signs, the line
   they send you across, and where they send you. The gap IS the gate, so there
   are no magic offsets to keep in sync. */
.cg-alert-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 380px;
  /* The heading spans the top; the row underneath is the diagram, so the arrow
     centres on the list it collects rather than on the heading above it. */
  grid-template-areas:
    "head head  head"
    "list gate  panel";
  gap: 0;
  align-items: start;
}
.cg-alert-head { grid-area: head; margin-bottom: 4px; }
.cg-alert-list { grid-area: list; }
.cg-alert-gate { grid-area: gate; }
.cg-emergency { grid-area: panel; }
/* The line telemedicine stops at. A hairline against the list, because the
   emphasis belongs on the crossing, not on the border. */
.cg-alert-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-rule);
  padding-right: 30px;
}
/* The crossing: one arrow, in the only red this site uses, from the whole list
   (any one of them) into the numbers. Decorative in the DOM sense only —
   aria-hidden — because the sentence above the list already says this. */
.cg-alert-gate { position: relative; align-self: center; height: 24px; }
.cg-alert-gate::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -16px;
  right: 12px;
  height: 2px;
  margin-top: -1px;
  background: var(--color-alert);
}
.cg-alert-gate::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left: 9px solid var(--color-alert);
}
.cg-alert-list li {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-text);
  font-weight: 300;
  line-height: 1.5;
}
.cg-alert-list li:last-child { border-bottom: 0; }
.cg-alert-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-alert-tint);
  color: var(--color-alert);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.cg-alert-mark svg { width: 13px; height: 13px; }
.cg-emergency {
  background: var(--color-alert-tint);
  border: 1px solid #F5D9D9;
  border-radius: var(--radius-lg);
  padding: 30px;
}
.cg-emergency h3 { font-size: 1.08rem; color: var(--color-alert); margin-bottom: 8px; }
.cg-emergency > p { color: var(--color-text); font-weight: 300; font-size: 0.93rem; margin: 0 0 20px; }
.cg-emergency dl { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cg-emergency div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid #F0DADA;
}
.cg-emergency dt { color: var(--color-text); font-weight: 500; font-size: 0.92rem; }
.cg-emergency dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-alert);
  font-variant-numeric: tabular-nums;
}
.cg-emergency-note { margin: 18px 0 0; font-size: 0.82rem; color: var(--color-text-muted); font-weight: 300; line-height: 1.55; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .cg-hero { padding: 64px 0 0; }
  .cg-branch-row { grid-template-columns: 200px minmax(0, 1fr); column-gap: 28px; }
  /* Stacked: the signs, then the same arrow turned down, then the numbers. */
  .cg-alert-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "list" "gate" "panel";
    gap: 0;
  }
  .cg-alert-list { border-right: 0; padding-right: 0; }
  .cg-alert-gate { height: 56px; }
  .cg-alert-gate::before {
    top: 4px;
    bottom: 14px;
    left: 50%;
    right: auto;
    width: 2px;
    height: auto;
    margin: 0 0 0 -1px;
  }
  .cg-alert-gate::after {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    margin: 0 0 0 -6px;
    border: 6px solid transparent;
    border-left-width: 6px;
    border-top: 9px solid var(--color-alert);
  }

}
@media (max-width: 767px) {
  .cg-hero { padding: 48px 0 0; }
  .cg-hero-subtitle { font-size: 1rem; }
  /* One column: the name, then what it is, then where it goes. The spine and
     its stubs stay — they are what makes this a diagram and not a list. */
  .cg-branch-item { padding-left: 30px; --attach: 28px; }
  .cg-branch-item::after { width: 18px; }
  .cg-branch-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "desc" "chip";
    padding: 18px 0 20px;
    row-gap: 5px;
  }
  .cg-out-more { margin-top: 3px; }
  .cg-emergency { padding: 24px; }

}

/* --- The four areas, as tab cards ---------------------------------------- */
/* These were four words under a hairline — correct, and far too quiet for the
   four longest sections of the page. Each tab is now a card carrying the mark
   from its own panel's diagram and the length of its own list, so the strip
   reads as an index of what is inside rather than as a switcher.

   The mark is the panel's lead infographic in miniature (see the four icons at
   the end of inc/cholo-icons.php): a loop for the sleep/anxiety cycle, five
   bars for the five metabolic markers, a spike beside a plateau for acute vs
   chronic, a staircase for dose adjustment. Nothing here is a new claim.

   Overrides .cg-tab in base.css (consultas.js names the class, so the shared
   rules live there); same specificity, and this file loads after it. */
.cg-tabbar {
  position: sticky;
  top: 12px;
  z-index: 40;
  margin: 30px 0 44px;
  padding: 6px;
  border-radius: calc(var(--radius-md) + 6px);
  transition: background-color 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
}
/* Pinned: the strip becomes a floating bar. The painted surface is the bar,
   not the row of cards inside it — with the background on .cg-tabs, whatever
   scrolled under the bar showed through the 6px of padding and the rail's
   gutter as a moving sliver. It stays inside the container rather than
   bleeding to the viewport edges, which would need a -50vw inset and put a
   horizontal scrollbar on the page. */
.cg-tabbar.is-stuck {
  background: rgba(255, 255, 255, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(11, 18, 32, 0.1);
}
.cg-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.cg-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark name" "mark count";
  align-items: center;
  gap: 1px 13px;
  flex: none;
  padding: 15px 16px;
  text-align: left;
  white-space: normal;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.25s var(--ease-snap), transform 0.25s var(--ease-snap),
    box-shadow 0.25s var(--ease-snap), background-color 0.25s var(--ease-snap);
}
/* The active edge is drawn, not switched on: a 2px bar that grows from the
   left when the tab takes over. transform, so it costs nothing to animate. */
.cg-tab::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--color-primary-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-reveal);
}
.cg-tab.is-active::after { transform: scaleX(1); }
.cg-tab.is-active {
  background: var(--color-bg);
  color: var(--color-dark);
  border-color: rgba(0, 119, 145, 0.3);
  box-shadow: 0 10px 26px rgba(11, 18, 32, 0.07);
}
.cg-tab:hover:not(.is-active) {
  color: var(--color-dark);
  border-color: rgba(0, 119, 145, 0.22);
  transform: translateY(-2px);
}
.cg-tab-mark {
  grid-area: mark;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  transition: background-color 0.25s var(--ease-snap), color 0.25s var(--ease-snap);
}
.cg-tab-mark svg { width: 20px; height: 20px; }
.cg-tab.is-active .cg-tab-mark { background: #E0F3FC; color: var(--color-primary-strong); }
.cg-tab-name {
  grid-area: name;
  font-size: 0.99rem;
  font-weight: 500;
  color: inherit;
}
.cg-tab.is-active .cg-tab-name { font-weight: 600; }
.cg-tab-count {
  grid-area: count;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
/* Counting down to the ticked total is the one number on this page that
   changes, so it gets the colour when it does. */
.cg-tab-count.is-tallied { color: var(--color-primary-strong); font-weight: 600; }
/* Pinned, the cards shed the count line and half their padding — the strip
   loses ~28px of height at the moment it is competing with the content. */
.cg-tabbar.is-stuck .cg-tab { padding: 10px 14px; }
.cg-tabbar.is-stuck .cg-tab-mark { width: 32px; height: 32px; border-radius: 9px; }
.cg-tabbar.is-stuck .cg-tab-mark svg { width: 17px; height: 17px; }
.cg-tabbar.is-stuck .cg-tab-count { display: none; }
.cg-tabbar.is-stuck .cg-tab {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark name";
}

.cg-panel-top {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
}
/* The calm loop closes the panel instead of opening it: the infographic is the
   thing worth leading with, and a decorative loop reads better as a full stop
   than as a headline. 4:5 at every breakpoint — its canvas is 1080x1350, and a
   composed animation cannot be cropped to a second shape the way a photo could.
   Narrow and centred so a portrait does not tower over the text above it. */
.cg-calm {
  margin: 48px auto 0;
  max-width: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.cg-panel-top--full { grid-template-columns: 1fr; }
.cg-panel-top--full .cg-panel-intro { max-width: 72ch; }

.cg-panel-intro {
  margin: 0 0 26px;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.65;
}
.cg-panel-intro strong { font-weight: 600; color: var(--color-dark); }

/* --- Infographics -------------------------------------------------------- */
/* The infographic is the one place this page gets to show rather than tell, so
   it gets a sheet of its own: title and standfirst share a header row above the
   drawing, which keeps the box from reading as a large empty card. */
.cg-graphic {
  margin: 48px 0 0;
  padding: 30px 34px 30px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
}
.cg-graphic h3 { align-self: baseline; }
.cg-graphic--lead > h3 { grid-area: t; }
.cg-graphic--lead > .cg-graphic-intro { grid-area: i; }
.cg-graphic--lead > .cg-graphic-art { grid-area: a; }
.cg-graphic--lead > figcaption { grid-area: n; }
.cg-graphic--lead > .sr-only { grid-area: s; }
.cg-graphic--lead {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  grid-template-areas: "t i" "a a" "n n" "s s";
  column-gap: 40px;
}

/* The infographic leads the panel, full width. It has to: the labels are real
   text sharing the animation's viewBox, so at a narrow column width they scale
   down with it — the five metabolic markers are 19px in a 1280 viewBox, which
   is 6px if the figure sits in a 400px column. Full width keeps them legible.
   This has to come AFTER .cg-graphic: same specificity, so source order is the
   only thing deciding the margin, and declared first it lost silently — the
   card ended up flush against the paragraph below it. */
.cg-graphic--lead { margin: 0 0 40px; }
.cg-graphic h3 { font-family: var(--font-serif); font-size: 1.25rem; margin: 0 0 6px; }
.cg-graphic-intro {
  margin: 0 0 30px;
  align-self: baseline;
  max-width: 66ch;
  color: var(--color-text-muted);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.6;
}
.cg-graphic-art { display: flex; justify-content: center; }
.cg-graphic-note {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid #DEE5F0;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.6;
}

/* The static SVG infographics these styled were replaced by Lottie (see
   lottie/build_areas.py); their rules — .cg-svg-*, .cg-markers*, .cg-marker* —
   were removed on 31 Aug 2026 after `wordpress/_tools/dead-css.py` confirmed
   nothing referenced them. The vocabulary now lives in the animations
   themselves and in the SVG label overlays. */

@media (max-width: 1024px) {
  .cg-hero-inner { grid-template-columns: 1fr; gap: 36px; align-items: start; padding-bottom: 60px; }
  .cg-hero h1 { max-width: 24ch; }
  .cg-graphic--lead { grid-template-columns: 1fr; grid-template-areas: "t" "i" "a" "n" "s"; }
  .cg-roles, .cg-readings { grid-template-rows: none; }
  .cg-role, .cg-reading { grid-row: auto; grid-template-rows: none; border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .cg-role:last-child, .cg-reading:last-child { border-bottom: 0; }
  .cg-panel-top { grid-template-columns: 1fr; gap: 32px; }
  .cg-calm { max-width: 300px; }
  .cg-graphic { padding: 28px 26px 32px; }
  /* Four cards across stop fitting their names here — "Reposição hormonal"
     wraps to three lines at 1024px — so they go two by two. */
  .cg-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cg-hero { padding-top: 64px; }
  .cg-hero-inner { padding-bottom: 44px; }
  /* The cards scroll sideways rather than stacking into four full-width rows:
     stacked, they push the first panel below the fold on a phone. Snap points
     so a flick lands on a card rather than between two. */
  .cg-tabs {
    display: flex;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 6px 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    /* The last card is cut by the viewport edge, which reads as clipped rather
       than scrollable; fading it says there is more to the right. */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .cg-tabs::-webkit-scrollbar { display: none; }
  /* base.css gives .cg-tab flex:none;width:100% at this width for the old
     stacked switcher; the cards are a scrolling row now. */
  .cg-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 186px;
    scroll-snap-align: start;
    font-size: 0.95rem;
  }
  .cg-tab:hover:not(.is-active) { transform: none; }
  /* The cards keep their own white while the bar behind them is translucent,
     so a card never goes see-through over the text it is covering. */
  .cg-tabbar.is-stuck .cg-tab { background: var(--color-bg); }
  .cg-tally { grid-template-columns: 1fr; grid-template-areas: "num" "note" "actions"; gap: 12px; padding: 20px; }
  .cg-tally-text {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .cg-tally-label { margin-top: 0; text-align: left; }
  /* One column here. base.css already says so, but this file loads after it and
     its own .cg-panel .cg-list rule is not in a media query, so without this the
     two-column index survives onto a 390px screen. */
  .cg-panel .cg-list { grid-template-columns: 1fr; gap: 0; }
  /* The container's 24px gutter and the card's own padding stacked to 44px a
     side — a quarter of a 390px screen, most of it spent on the animation's
     account. The card reaches back over the gutter and keeps a slimmer inset,
     which buys the drawing ~45px of width. */
  .cg-graphic { margin-left: -16px; margin-right: -16px; padding: 20px 14px 24px; }
  .cg-graphic--lead { margin-bottom: 32px; }
  /* The two wide diagrams cannot shrink to a phone. Their labels are text in
     the animation's viewBox, so they scale with the box: the five metabolic
     markers land at 4.9px across a 332px card, which is a picture of a diagram
     rather than a diagram. Give them a floor and let the row scroll sideways —
     10.7px and 16.3px at 720. The dots stay on one rail, which is the whole
     point of that drawing; stacking them would say something different. */
  .cg-graphic-art--wide {
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .cg-graphic-art--wide .cg-lottie { min-width: 720px; flex: none; scroll-snap-align: center; }
  .cg-graphic-art--wide::-webkit-scrollbar { height: 4px; }
  .cg-graphic-art--wide::-webkit-scrollbar-thumb { background: var(--color-rule); border-radius: 2px; }
  .cg-graphic-intro { margin-bottom: 18px; }
  .cg-graphic-note { margin-top: 20px; padding-top: 16px; }
  .cg-calm { margin-top: 36px; }
}

/* --- Per-tab deep-dive blocks -------------------------------------------
   One extra block per area, between the complaint list and the infographic.
   Each area gets a different shape, for the same reason the three
   infographics do: three tabs that all look alike stop being worth switching
   between. Saúde mental gets a role comparison, metabolismo gets the same
   number read three ways, doenças gets an honest scope split. */
.cg-sub { margin-top: 52px; }
.cg-sub > h3 { font-family: var(--font-serif); font-size: 1.3rem; margin: 0 0 8px; }
.cg-sub-intro {
  margin: 0 0 28px;
  max-width: 72ch;
  color: var(--color-text-muted);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.6;
}
.cg-sub-note {
  margin: 24px 0 0;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.6;
}
.cg-sub-note a { color: var(--color-primary-strong); font-weight: 600; }
.cg-sub-note a:hover { text-decoration: underline; }

/* Saúde mental — who does what */
/* Three roles being compared, so they are read across rather than as three
   separate cards: one sheet, hairline columns, and subgrid so the name, the
   description and the prescribe/does-not line sit on shared baselines. */
.cg-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cg-role {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 10px;
  background: none;
  border: 0;
  border-right: 1px solid var(--color-rule);
  border-radius: 0;
  padding: 24px 22px;
}
.cg-role:last-child { border-right: 0; }
.cg-role h4 { font-size: 1.05rem; margin: 0 0 8px; }
.cg-role h4 { margin-bottom: 0; }
.cg-role p { color: var(--color-text-muted); font-weight: 300; font-size: 0.92rem; line-height: 1.55; margin: 0; }
.cg-role-chip {
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #E3F6EA;
  color: #15803D;
}
.cg-role-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.cg-role-chip--no { background: var(--color-bg-soft); color: var(--color-text-muted); }

/* Metabolismo — one value, three readings */
/* The same number read three ways, so the number leads and the three readings
   line up for comparison, like the roles above. */
.cg-readings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Four rows since 17 Sep 2026: number, where it came from, context, verdict.
     The cards line their rules up by sharing these tracks through subgrid, so
     a child added to a card without a track for it here lands on an implicit
     row and paints on top of the verdict. */
  grid-template-rows: auto auto auto 1fr;
  gap: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cg-reading {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  background: none;
  border: 0;
  border-right: 1px solid var(--color-rule);
  border-radius: 0;
  padding: 26px 24px;
}
.cg-reading:last-child { border-right: 0; }
.cg-reading-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
  margin: 0 0 2px;
}
.cg-reading-num i { font-style: normal; font-weight: 500; font-size: 0.8rem; color: var(--color-text-muted); }
.cg-reading-ctx {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-text-muted);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.5;
}
.cg-reading-verdict { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--color-text); font-weight: 300; }
.cg-reading-verdict b { display: block; font-weight: 600; margin-bottom: 3px; color: var(--color-primary-strong); }
.cg-reading--watch .cg-reading-verdict b { color: var(--color-amber); }
.cg-reading--good .cg-reading-verdict b { color: #15803D; }

/* Doenças — honest scope */
.cg-scope { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cg-scope-col {
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 14px;
  padding: 26px 24px;
}
.cg-scope-col h4 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0 0 16px; }
.cg-scope-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #E3F6EA;
  color: #15803D;
}
.cg-scope-col--out .cg-scope-icon { background: var(--color-alert-tint); color: var(--color-alert); }
.cg-scope-icon svg { width: 15px; height: 15px; }
.cg-scope-col li {
  padding: 11px 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-text-muted);
  font-weight: 300;
  font-size: 0.93rem;
  line-height: 1.5;
}
.cg-scope-col li:last-child { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 1024px) {
  .cg-roles, .cg-readings { grid-template-columns: 1fr; }
  .cg-scope { grid-template-columns: 1fr; }
  .cg-role, .cg-reading { padding: 22px 20px; }
}
@media (max-width: 767px) {
  .cg-sub { margin-top: 40px; }
  .cg-sub > h3 { font-size: 1.15rem; }
}

/* --- The three tab loops (rendered in Remotion) -------------------------- */
/* Replaced the inline SVG/CSS infographics; same drawings, animated. The
   poster is a still of frame 0, so a browser that refuses autoplay still
   shows the complete diagram rather than a blank box — the resting state
   never depends on the animation running (see WARNINGS.md). */
/* Lottie replaced the rendered videos. Vector, so there is no resolution to
   pick and no poster to ship: it paints on the first frame and stays sharp at
   any size. The six together are ~35 KB over the wire against 14.5 MB of
   WebM. The aspect-ratio is set inline per animation, from its own canvas, so
   the box is reserved before the JSON lands and nothing shifts. */
.cg-lottie {
  position: relative;
  display: block;
  width: 100%;
  /* Each animation paints its own #F4F6FC plate, so on the white sheet the
     drawing reads as the figure and the sheet as its frame. */
  max-width: 620px;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  overflow: hidden;
}
.cg-graphic-art--wide .cg-lottie { max-width: 880px; }
.cg-panel-lottie { position: relative; width: 100%; height: 100%; }

.cg-lottie-stage { position: absolute; inset: 0; }
.cg-lottie-stage svg { display: block; width: 100%; height: 100%; }

/* Description for screen readers: a <video> is opaque to them, and these
   diagrams carry information rather than decoration. */
/* .sr-only moved to base.css on 17 Sep 2026 — every page with a
   compare table needs it, not just this one. */

/* A single CTA inside the Saúde mental tab, for people who arrived with TDAH
   in mind. Deliberately NOT a service of its own: the consulta is the entry
   point and the copy says what it can and cannot do, because diagnosing TDAH
   is not something a general consultation claims to finish. */
.cg-tdah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding: 26px 30px 26px 26px;
  border: 0;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-bg-soft);
}
.cg-tdah-text { flex: 1 1 420px; }
.cg-tdah h3 { font-size: 1.15rem; margin: 0 0 8px; }
.cg-tdah p {
  margin: 0;
  color: var(--color-text-muted);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 62ch;
}
@media (max-width: 767px) {
  .cg-tdah { padding: 24px 20px; gap: 20px; }
}

/* "O que pode sair da consulta" lists four DOCUMENTS, so it speaks the same
   language as the receituário cards on /cholo-receita/ and the situação →
   documento rows on /cholo-atestado/: coloured by what kind of document it is.
   Same families, same colours, three pages. It was a tarja across the top of a
   card until 16 Sep 2026; the cards became branches and the colour moved to
   the stub, where it does more work — it is now the branch's own mark.
   The icons are gone for the reason they went on the exames panels — a generic
   document glyph next to the word "Receita" repeated the heading. */
.cg-branch-item--pedido         { --out-edge: var(--rx-special); }
.cg-branch-item--atestado       { --out-edge: var(--color-text-muted); }
.cg-branch-item--encaminhamento { --out-edge: var(--color-brand-deep); }

/* --- Switching a panel ---------------------------------------------------
   A tab swap used to be a hard cut: one long panel vanished and another
   appeared, with nothing to say they were the same drawer. The incoming
   panel's blocks now rise in sequence, which reads as "this drawer opened"
   rather than "the page changed". The class is added by consultas.js and
   removed when the animation ends; a dead script means an instant swap, which
   is exactly what it was before.
   ------------------------------------------------------------------------- */
.cg-panel.is-entering > * { animation: cg-panel-in 0.5s var(--ease-reveal) both; }
.cg-panel.is-entering > *:nth-child(2) { animation-delay: 70ms; }
.cg-panel.is-entering > *:nth-child(3) { animation-delay: 140ms; }
.cg-panel.is-entering > *:nth-child(4) { animation-delay: 200ms; }
.cg-panel.is-entering > *:nth-child(n + 5) { animation-delay: 250ms; }
@keyframes cg-panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* How far through this panel you are. The rail is under the pinned strip, so
   it only means anything while the strip is pinned — it is hidden otherwise.
   scaleX from a scroll handler; no JS, no rail, and nothing looks missing. */
.cg-tabbar-progress {
  display: block;
  height: 2px;
  margin: 8px 4px 2px;
  border-radius: 2px;
  background: var(--color-rule);
  opacity: 0;
  transition: opacity 0.3s var(--ease-snap);
}
.cg-tabbar.is-stuck .cg-tabbar-progress { opacity: 1; }
.cg-tabbar-progress > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--color-primary-strong);
  transform: scaleX(0);
  transform-origin: left;
}

/* --- The intro above each list, as a callout ------------------------------
   Four panels each open with a paragraph that is the panel's thesis. Set as
   body copy it read as the first of many paragraphs; the rule and the tint
   mark it as the one sentence to read if you read nothing else. The tint is
   the brand cyan at 5%, the same wash the icon chips sit on. */
.cg-panel-intro {
  padding: 20px 26px 20px 24px;
  background: linear-gradient(90deg, rgba(0, 209, 255, 0.06), rgba(0, 209, 255, 0));
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* --- Where the number came from ------------------------------------------
   Only on the metabolism panel, whose three cards read the same 105 mg/dL
   three ways. Two of them state a previous value in the copy ("vinha de 140",
   "vinha de 92"), so the mark draws exactly what the sentence already says:
   a direction and the figure it came from. The first card has no previous
   value, and gets a dash rather than an invented arrow. */
.cg-reading-trend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.cg-reading-trend::before {
  content: "";
  width: 22px;
  height: 10px;
  background: currentColor;
  -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
  clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
}
/* The line tilts to the direction the value moved, and the arrowhead is the
   same clip path with a head on it. */
.cg-reading-trend--down::before,
.cg-reading-trend--up::before {
  -webkit-clip-path: polygon(0 46%, 66% 46%, 66% 20%, 100% 50%, 66% 80%, 66% 54%, 0 54%);
  clip-path: polygon(0 46%, 66% 46%, 66% 20%, 100% 50%, 66% 80%, 66% 54%, 0 54%);
}
.cg-reading-trend--down::before { transform: rotate(18deg); }
.cg-reading-trend--up::before { transform: rotate(-18deg); }
.cg-reading--good .cg-reading-trend { color: #15803D; }
.cg-reading--watch .cg-reading-trend { color: var(--color-amber); }

/* --- Three steps, numbered ------------------------------------------------
   .cg-roles is used twice on this page. On the mental-health panel it holds
   three professions, which are not a sequence and carry no numbers. On the
   hormone panel it holds "três etapas, sempre na mesma ordem" — that IS a
   sequence, and the numbers are the point of it, so only that one gets them. */
.cg-roles--steps .cg-role { counter-increment: cg-step; }
.cg-roles--steps { counter-reset: cg-step; }
.cg-roles--steps .cg-role h4::before {
  content: counter(cg-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  background: #E0F3FC;
  color: var(--color-primary-strong);
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
}
.cg-roles--steps .cg-role h4 { display: flex; align-items: center; }