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

/* --- Emagrecimento (/cholo-emagrecimento/) ------------------------------- */
/* Same hero shape as the atestados page — content left, artifact right. The
   artifact here is a follow-up sheet rather than a document, because what this
   page sells is the return visit, not a piece of paper. */
.em-hero-subtitle {
  margin: 0 0 18px;
  color: var(--color-text);
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.65;
  max-width: 54ch;
}
.em-hero-price { margin: 0 0 26px; color: var(--color-text-muted); font-size: 0.98rem; font-weight: 300; }
.em-hero-note {
  margin: 22px 0 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 300;
}

/* The follow-up sheet. One row per consultation: when, what moved, what the
   doctor decided. The third column is the point — the treatment is the
   decision, not the number beside it. */
.em-card {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 22px 48px rgba(16, 40, 64, 0.16);
}
.em-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--color-dark);
}
.em-log { display: flex; flex-direction: column; }
.em-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1.2fr);
  gap: 12px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px dashed var(--color-rule);
}
.em-log-row:last-child { border-bottom: 0; }
.em-log-when { font-size: 0.88rem; font-weight: 600; color: var(--color-dark); }
.em-log-delta {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-primary-strong);
  text-align: center;
}
.em-log-what { font-size: 0.85rem; font-weight: 300; color: var(--color-text-muted); text-align: right; }
/* The cadence strip, above the follow-up log. Fixed aspect so the box has its
   height before the JSON lands and the card does not jump; it aligns with
   nothing below it, which is what keeps it correct when the rows wrap. */
.em-cadencia {
  width: 100%;
  aspect-ratio: 320 / 40;
  margin: 2px 0 10px;
}
.em-card-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.5;
}

/* Included vs not. Two columns, the right one muted — the same idea as the
   telemedicine boundary block on /cholo-consulta/, which this page's readers
   need for a different reason. */
.em-scope { padding: var(--section-y) 0; }
/* align-items: start so each panel is its own height. Stretched to match,
   the shorter column ended in a visible empty box. */
.em-scope-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; align-items: start; }
.em-scope-col {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.em-scope-col h3 { font-size: 1.1rem; margin: 0 0 10px; }
.em-scope-col--out { background: transparent; border: 1px dashed var(--color-rule); }
.em-scope-col--out h3 { color: var(--color-text-muted); }
.checklist--out li { color: var(--color-text-muted); font-weight: 300; }
/* The excluded column used to be bare text opposite a column of ticks, which
   read as a list someone had not finished rather than as a deliberate "not
   this". Same circle, same size, inverted: a minus in the alert tint the site
   already uses for its telemedicine-boundary block. */
.check-cross {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-alert-tint);
  color: var(--color-alert);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 6px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  /* minmax(0, …) not a bare 1fr: `1fr` carries an implicit min-width:auto, so
     the track refuses to shrink below its content's min-content width and the
     PAGE scrolls sideways instead. The base rule above already uses minmax(0,…)
     for this reason; this override had dropped it. */
  .em-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}@media (max-width: 767px) {
  .em-scope-grid { grid-template-columns: 1fr; }
  .em-card { padding: 22px 18px; }
  .em-log-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .em-log-what { grid-column: 1 / -1; text-align: left; }
}