/*
Theme Name:   Dr. García García
Theme URI:    https://drgarciagarcia.com/
Description:  Child theme for drgarciagarcia.com. Carries the "Cal y Cantera" design
              system from briefs/DESIGN-TOKENS.md (locked 2026-08-27). Tokens are global
              and inert; element styling is scoped to .drg so an unrebuilt page is
              untouched.
Author:       Rebuild
Template:     estar
Version:      0.12.6
Text Domain:  drg
*/

/* ==========================================================================
   1. Tokens. Copied verbatim from briefs/DESIGN-TOKENS.md section 2.
      Do not edit here. Edit the brief, then re-copy, then bump Version above
      or the enqueue will not cache-bust.
   ========================================================================== */

:root{
  /* colour - role names, not appearance */
  --color-bg:#FBF9F5;
  --color-surface:#F1EDE4;
  --color-text:#1E2A26;
  --color-text-muted:#59635E;
  --color-accent:#0F6A5B;
  --color-accent-hover:#0A5049;
  --color-accent-on-dark:#63C8B3;
  --color-bg-inverse:#12211E;
  --color-surface-inverse:#1C2E2A;
  --color-text-inverse:#E9EFEC;
  --color-text-muted-inverse:#9DB0AA;
  --color-border:#E2DCD0;
  --color-border-field:#8C8474;

  /* CTA - aliases only, no new hues */
  --color-cta-bg:var(--color-accent);
  --color-cta-bg-hover:var(--color-accent-hover);
  --color-cta-text:var(--color-bg);
  --color-cta-bg-inverse:var(--color-accent-on-dark);
  --color-cta-text-inverse:var(--color-bg-inverse);

  /* type - system stacks, no web fonts */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-h1:clamp(34px,26.25px + 2.066vw,56px);
  --fs-h2:clamp(30px,26.48px + 0.939vw,40px);
  --fs-h3:clamp(25px,22.89px + 0.563vw,31px);
  --fs-h4:clamp(21px,19.94px + 0.282vw,24px);
  --fs-lead:clamp(21px,19.59px + 0.376vw,25px);
  --fs-body:clamp(18px,17.30px + 0.188vw,20px);
  --fs-bodysm:clamp(16px,15.65px + 0.094vw,17px);
  --fs-caption:clamp(15px,14.65px + 0.094vw,16px);
  --fs-fine:clamp(13px,12.65px + 0.094vw,14px);
  --lh-h1:1.12;  --ls-h1:-0.018em;
  --lh-h2:1.16;  --ls-h2:-0.015em;
  --lh-h3:1.25;  --ls-h3:-0.01em;
  --lh-h4:1.30;
  --lh-lead:1.50;
  --lh-body:1.60;
  --lh-bodysm:1.55;
  --lh-caption:1.50;
  --lh-fine:1.45;
  --fw-heading:600;
  --fw-body:400;

  /* space - 4px base */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-section:clamp(48px,31.1px + 4.507vw,96px);
  --space-gutter:clamp(16px,10.37px + 1.502vw,32px);

  /* layout */
  --container:1140px;
  --container-prose:66ch;
  --radius-sm:4px;
  --radius-md:8px;
  --border-width:1px;
  --target-min:44px;

  /* Adopted 2026-09-03, DESIGN-ANSWERS section 6. Section 4 of the tokens brief
     is reworded from "no shadow scale" to "no ELEVATION shadow scale"; this is
     the one permitted box-shadow. The inverse variant has NEVER been rendered
     and must be measured against 3:1 before any dark-background field ships. */
  --focus-ring:0 0 0 3px rgba(15,106,91,.22);
  --focus-ring-inverse:0 0 0 3px rgba(99,200,179,.30);
}

/* ==========================================================================
   2. Base layer. Scoped to .drg on purpose.

      The child theme ships to a live site whose pages are not rebuilt yet.
      Global element rules would restyle every one of them the moment the
      theme is activated. Generated bodies opt in by wrapping their content
      in <div class="drg">; everything else renders exactly as it does today.
      Section 1 above stays global because custom properties are inert until
      something references them.
   ========================================================================== */

.drg{
  font-family:var(--font-sans);
  font-weight:var(--fw-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-text);
  background:var(--color-bg);
}

.drg *,
.drg *::before,
.drg *::after{ box-sizing:border-box; }

/* --- headings ----------------------------------------------------------- */

.drg h1,.drg h2,.drg h3,.drg h4{
  font-family:inherit;
  font-weight:var(--fw-heading);
  color:var(--color-text);
  margin:0 0 var(--space-4);
  text-wrap:balance;
}
.drg h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); }
.drg h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); }
.drg h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); }
.drg h4{ font-size:var(--fs-h4); line-height:var(--lh-h4); }

.drg p{ margin:0 0 var(--space-5); }
.drg p:last-child{ margin-bottom:0; }

.drg .drg-lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); }
.drg .drg-caption{ font-size:var(--fs-caption); line-height:var(--lh-caption); }

/* Blocker 3: below --fs-body is small text and needs >= 4.5:1, so it is
   limited to text / text-muted on light and their inverse pairs. Never accent. */
.drg .drg-fine{
  font-size:var(--fs-fine);
  line-height:var(--lh-fine);
  color:var(--color-text-muted);
}

/* --- layout ------------------------------------------------------------- */

.drg-container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-gutter);
}
.drg-prose{ max-width:var(--container-prose); }
.drg-section{ padding-block:var(--space-section); }

/* --- links -------------------------------------------------------------- */

.drg a{
  color:var(--color-accent);
  text-decoration:underline;
  text-underline-offset:0.15em;
}
.drg a:hover,.drg a:focus{ color:var(--color-accent-hover); }

.drg a:focus-visible,
.drg button:focus-visible,
.drg input:focus-visible,
.drg select:focus-visible,
.drg textarea:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
  /* Ring plus border colour change, never either alone: DESIGN-ANSWERS section 6.
     On a field the outline alone can be lost against --color-border-field. */
  box-shadow:var(--focus-ring);
}

.drg input:focus-visible,
.drg select:focus-visible,
.drg textarea:focus-visible{ border-color:var(--color-accent); }

/* --- calls to action ---------------------------------------------------- */
/* Blocker 5: every target >= 44px, breadcrumbs and list links included. */

.drg-cta,
.drg-cta-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--target-min);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-sm);
  font-size:var(--fs-body);
  font-weight:var(--fw-heading);
  line-height:1.2;
  text-decoration:none;
  border:var(--border-width) solid transparent;
  cursor:pointer;
}
.drg-cta{
  background:var(--color-cta-bg);
  color:var(--color-cta-text);
}
.drg-cta:hover,.drg-cta:focus{
  background:var(--color-cta-bg-hover);
  color:var(--color-cta-text);
}
.drg-cta-secondary{
  background:transparent;
  color:var(--color-accent);
  border-color:var(--color-border-field);
}
.drg-cta-secondary:hover,.drg-cta-secondary:focus{
  color:var(--color-accent-hover);
  border-color:var(--color-accent-hover);
}

/* --- inverse surfaces --------------------------------------------------- */
/* Blocker 1: --color-accent is 2.56:1 on --color-bg-inverse. Never here.
   Anything accent-coloured inside .drg-inverse takes --color-accent-on-dark. */

.drg-inverse{
  background:var(--color-bg-inverse);
  color:var(--color-text-inverse);
}
.drg-inverse h1,.drg-inverse h2,.drg-inverse h3,.drg-inverse h4{
  color:var(--color-text-inverse);
}
.drg-inverse .drg-fine{ color:var(--color-text-muted-inverse); }
.drg-inverse a{ color:var(--color-accent-on-dark); }
.drg-inverse a:hover,.drg-inverse a:focus{ color:var(--color-accent-on-dark); }
.drg-inverse a:focus-visible,
.drg-inverse button:focus-visible{ outline-color:var(--color-accent-on-dark); }
.drg-inverse .drg-cta{
  background:var(--color-cta-bg-inverse);
  color:var(--color-cta-text-inverse);
}
.drg-inverse .drg-cta-secondary{
  color:var(--color-accent-on-dark);
  border-color:var(--color-text-muted-inverse);
}
.drg-inverse .drg-surface{ background:var(--color-surface-inverse); }

/* --- surfaces ----------------------------------------------------------- */
/* Blocker: no shadow scale. Surfaces separate by tone, never elevation. */

.drg-surface{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:var(--space-5);
}
.drg-rule{
  border:0;
  border-top:var(--border-width) solid var(--color-border);
  margin-block:var(--space-6);
}

/* --- form fields -------------------------------------------------------- */
/* Blocker 2: --color-border is 1.30:1 and is decoration only. A field
   boundary must be perceivable, so fields take --color-border-field at
   3.52:1, which meets WCAG 1.4.11. This was the turn-5 defect. */

.drg input,.drg select,.drg textarea{
  font-family:inherit;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-text);
  background:var(--color-bg);
  min-height:var(--target-min);
  width:100%;
  padding:var(--space-2) var(--space-4);
  border:var(--border-width) solid var(--color-border-field);
  border-radius:var(--radius-sm);
}
.drg textarea{ min-height:calc(var(--target-min) * 3); }
.drg label{
  display:block;
  font-size:var(--fs-bodysm);
  line-height:var(--lh-bodysm);
  font-weight:var(--fw-heading);
  margin-bottom:var(--space-2);
}

/* --- the general-information notice ------------------------------------- */
/* Blocker 9: every page naming a condition carries this visibly, in that
   page's language, on the page and never in the footer.
   Ruling B2 (DECISIONS.md, 2026-08-27) moved it up from --fs-fine to
   --fs-caption: it must read as prominent, not merely present. */

.drg-notice{
  font-size:var(--fs-caption);
  line-height:var(--lh-caption);
  color:var(--color-text-muted);
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);
  margin-block:var(--space-6);
}
.drg-inverse .drg-notice{
  color:var(--color-text-muted-inverse);
  background:var(--color-surface-inverse);
}

/* --- images ------------------------------------------------------------- */

.drg img{ max-width:100%; height:auto; }

/* --- reduced motion ----------------------------------------------------- */
/* No motion tokens exist by decision. This is a guard, not an animation. */

@media (prefers-reduced-motion:reduce){
  .drg *{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   3. Components. Rendered by build/components.py from the approved decisions.
   ========================================================================== */

/* --- 12b credentials card ----------------------------------------------- */
/* "Weight carries the distinction." The top block holds the five approved
   credentials; below a single hairline sit the three affiliations. If the two
   are typeset identically the design asserts board certification the copy
   never claimed, so the weight and colour difference below is load-bearing.
   Do not merge these two lists. */

.drg-credentials__name{
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
  margin-bottom:var(--space-1);
}
.drg-credentials__specialty{
  font-size:var(--fs-bodysm);
  line-height:var(--lh-bodysm);
  color:var(--color-text-muted);
  margin-bottom:var(--space-5);
}
.drg-credentials__legal,
.drg-credentials__affil{
  list-style:none;
  margin:0;
  padding:0;
}
.drg-credentials__legal > li{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-heading);   /* the distinction */
  color:var(--color-text);
  padding-block:var(--space-2);
}
.drg-credentials__sub{
  font-size:var(--fs-bodysm);
  line-height:var(--lh-bodysm);
  font-weight:var(--fw-heading);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin-bottom:var(--space-3);
}
.drg-credentials__affil > li{
  font-size:var(--fs-bodysm);
  line-height:var(--lh-bodysm);
  font-weight:var(--fw-body);      /* lighter than the block above, on purpose */
  color:var(--color-text-muted);   /* 5.33:1 on --color-surface, passes 4.5:1 */
  padding-block:var(--space-1);
}

/* --- 13a reviews block --------------------------------------------------- */
/* Quotes first, then the disclosure and both profile links beneath. No stars,
   no average, no count anywhere: per-review ratings are unverifiable and an
   unverifiable "5-star selection" is the exact claim the constraints stop. */

.drg-reviews__list{
  display:grid;
  gap:var(--space-5);
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .drg-reviews__list{ grid-template-columns:repeat(2,1fr); }
}
.drg-review{ margin:0; display:flex; flex-direction:column; gap:var(--space-4); }
.drg-review__quote{ margin:0; }
.drg-review__quote p{
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  margin:0;
}
.drg-review__meta{ display:flex; flex-direction:column; gap:var(--space-1); }
.drg-review__name{
  font-size:var(--fs-bodysm);
  line-height:var(--lh-bodysm);
  font-weight:var(--fw-heading);
}
/* The provenance line. Not accent-coloured: below --fs-body is small text and
   takes the 4.5:1 rule, which limits it to text or text-muted. */
.drg-review__src{
  font-size:var(--fs-caption);
  line-height:var(--lh-caption);
  color:var(--color-text-muted);
}
/* Targets >= 44px, breadcrumbs and list links included. */
.drg-review__link,
.drg-reviews__profiles a{
  display:inline-flex;
  align-items:center;
  min-height:var(--target-min);
  font-size:var(--fs-bodysm);
}
.drg-reviews__disclosure{ margin-top:var(--space-6); max-width:var(--container-prose); }
.drg-reviews__profiles{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3) var(--space-6);
  margin-top:var(--space-3);
}

/* --- CTA block, notice and footer cédulas -------------------------------- */
/* 14a: WhatsApp primary, 56px tall, full width. Blocker 10: WhatsApp is the
   ONLY primary action and the landline is secondary. No booking widget. */

.drg-cta-block{ display:flex; flex-direction:column; gap:var(--space-3); }
.drg-cta-block .drg-cta--primary{
  min-height:56px;                 /* 14a states 56px, above the 44px floor */
  width:100%;
  font-size:var(--fs-lead);
}
.drg-cta-block__sub{
  font-size:var(--fs-bodysm);
  line-height:var(--lh-bodysm);
  color:var(--color-text-muted);
  margin:0;
}
.drg-cta-block__alt{
  font-size:var(--fs-bodysm);
  line-height:var(--lh-bodysm);
  margin:0;
}
.drg-cta-block__alt a{ display:inline-flex; align-items:center; min-height:var(--target-min); }

/* The cédula gloss on English pages. Small text, so muted only, never accent. */
.drg-gloss{ color:var(--color-text-muted); }
.drg-footer-cedulas{ margin:0; }

/* --- contacto (14a) ------------------------------------------------------ */

.drg-contacto__landline{ margin-block:var(--space-5); }
.drg-contacto__landline .drg-fine{ color:var(--color-text-muted); }
/* 14a step 3 calls for a 48px target on the landline link. */
.drg-contacto__landline a{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  font-size:var(--fs-lead);
  font-variant-numeric:tabular-nums;
}
.drg-contacto__address{
  font-style:normal;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  margin-bottom:var(--space-4);
}
/* Ruled table, tabular numerals, per 14a step 5. */
.drg-hours{
  border-collapse:collapse;
  width:100%;
  max-width:var(--container-prose);
  margin-bottom:var(--space-4);
}
.drg-hours th,
.drg-hours td{
  text-align:left;
  padding:var(--space-3) 0;
  border-bottom:var(--border-width) solid var(--color-border);
  font-weight:var(--fw-body);
}
.drg-hours th{ color:var(--color-text); }
.drg-hours td{
  color:var(--color-text-muted);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.drg-caption{ color:var(--color-text-muted); }

/* ==========================================================================
   4. The site shell. Footer.

   ⚠️ These are the theme's FIRST global rules. Sections 2 and 3 are scoped to
   .drg so that an unrebuilt page is untouched; the footer renders on every
   page by definition, so it cannot be. It is still class-scoped — no bare
   element selectors — so nothing outside .drg-footer changes.

   Spec: briefs/DESIGN-SPEC-20-footer.md §1-§7, option 19a, measured values,
         plus DESIGN-SPEC-20-footer-AMENDMENT-1-tablet.md for the 768-1151px
         middle state. Three states, not two.
   Markup: build/theme/template-parts/footer.php.

   Type here is fixed px, not the fluid --fs-* scale. The spec names var(--…)
   where it wants a token and bare px elsewhere, and 19px is not on the scale.
   ========================================================================== */

.drg-footer{
  background:var(--color-bg-inverse);
  color:var(--color-text-inverse);
  font-family:var(--font-sans);
  font-weight:var(--fw-body);
  padding:36px 16px 20px;
}

.drg-footer__inner{ max-width:var(--container); margin:0 auto; }

/* Mobile: single column, each block separated by a rule. §1. */
.drg-footer__cols{ display:grid; grid-template-columns:1fr; }

.drg-footer__col{
  display:flex;
  flex-direction:column;
  padding:20px 0;
  border-top:var(--border-width) solid var(--color-surface-inverse);
}
.drg-footer__col:first-child{ border-top:0; padding-top:0; }

/* Per-block gaps. §2 identity 4px, §3 consultorio 8px, §4 contacto 6px,
   §5 horario 8px. */
.drg-footer__col{ gap:var(--space-2); }
.drg-footer__identity{ gap:var(--space-1); }
.drg-footer__contact{ gap:6px; }

.drg-footer p{ margin:0; }

/* Block 1 — identity. §2. */
.drg-footer__name{
  font-size:20px;
  line-height:1.3;
  font-weight:var(--fw-heading);
  color:var(--color-text-inverse);
}
.drg-footer__role{
  font-size:17px;
  line-height:1.5;
  color:var(--color-text-muted-inverse);
}
/* "margin-top 8px before the cédulas" — the gap already gives 4px. */
.drg-footer__role + .drg-footer__cedula{ margin-top:var(--space-1); }
.drg-footer__cedula{
  font-size:17px;
  line-height:1.6;
  color:var(--color-text-inverse);
  font-variant-numeric:tabular-nums;
}

/* Column headings. §3-§5. */
.drg-footer__heading{
  font-size:17px;
  line-height:1.5;
  font-weight:var(--fw-heading);
  color:var(--color-text-inverse);
  margin:0;
}

.drg-footer__line{
  font-size:18px;
  line-height:1.6;
  color:var(--color-text-inverse);
}
.drg-footer__hours{ font-variant-numeric:tabular-nums; }

/* The small print under a block. 15px, so muted-inverse and never accent —
   blocker 3 bars accent under 18px. §10. */
.drg-footer__note{
  font-size:15px;
  line-height:1.5;
  color:var(--color-text-muted-inverse);
}

/* Block 3 — contacto. §4. 19px clears the 18px floor for accent-on-dark.
   nowrap so a future copy edit overflows visibly instead of splitting the
   digits of the site's only primary action. §1. */
.drg-footer__contact a{
  display:flex;
  align-items:center;
  min-height:48px;
  font-size:19px;
  line-height:1.5;
  color:var(--color-accent-on-dark);
  text-decoration:none;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Bottom row. §6 — privacy only at first paste. When a link is restored it is
   appended BEFORE the privacy link: book · teaching · privacy, privacy last
   because it is the legal link. */
.drg-footer__bottom{
  display:flex;
  flex-direction:column;
  border-top:var(--border-width) solid var(--color-surface-inverse);
  padding-top:6px;
  margin-top:var(--space-5);
  gap:10px;
}

.drg-footer__legal a{
  display:flex;
  align-items:center;
  min-height:var(--target-min);
  font-size:17px;
  color:var(--color-text-inverse);
  text-decoration:underline;
  text-underline-offset:3px;
}

.drg-footer__copyright{
  font-size:15px;
  line-height:1.5;
  color:var(--color-text-muted-inverse);
  font-variant-numeric:tabular-nums;
}

/* --- The middle state, 768-1151px. AMENDMENT 1, 2026-09-03. ---------------

   The band between phone and desktop was unspecified in parent §1 and
   measured broken: both number links are nowrap, so column 3 cannot resolve
   below 257px, and below ~1048px the entire shortfall is paid by the other
   three columns. 768px gave 127/110/257/110, with the name on two lines and
   the address on four.

   ⚠️ 1152px is DERIVED, not chosen. Four columns are only honest once column
   3 clears 257px unaided: at 1.3fr of (W - 168) that needs W >= 1048. So
   1024 — iPad landscape — sits INSIDE the broken band, which is why the
   switch is not there. If the contact copy in column 3 ever changes, this
   number changes with it.

   Spec: briefs/DESIGN-SPEC-20-footer-AMENDMENT-1-tablet.md §2-§3.
   -------------------------------------------------------------------------- */

/* Shared by both multi-column states: the mobile separators come off and the
   bottom row goes horizontal. */
@media (min-width:768px){

  .drg-footer__col{ padding:0; border-top:0; }
  .drg-footer__col:first-child{ padding-top:0; }

  .drg-footer__bottom{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-2) 28px;
  }
}

/* 2x2. grid-auto-flow:column over two rows pairs the person with the way to
   reach the person, and the clinic's address with the clinic's hours:

       row 1   identity      contacto
       row 2   consultorio   horario

   ⚠️ Source order stays identity → consultorio → contacto → horario, so the
   screen-reader order is identical in all three states. The column flow does
   the pairing. Do NOT reorder the markup and do NOT add an `order` property.
   Amendment §3.1. */
@media (min-width:768px) and (max-width:1151.98px){

  .drg-footer{ padding:44px 24px 22px; }

  /* Capped and centred: uncapped, the columns stretch to 531px at 1151px to
     hold ~250px of text. Amendment §3.2 item 1. */
  .drg-footer__cols{
    max-width:760px;
    margin-inline:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto;
    grid-auto-flow:column;
    gap:36px 40px;
  }

  /* Same cap, so the bottom row aligns with the grid's left edge. §3. */
  .drg-footer__bottom{ max-width:760px; margin-inline:auto; }

  /* The contact links keep the base 48px through this whole band — a tablet
     is a touch device. Amendment §3.2 item 2 amends parent §4, which had
     dropped them to 44px from 768px up. There is deliberately NO rule here:
     the base 48px is simply left un-overridden. */
}

/* Four columns. Parent spec §1, unchanged except for the entry width. */
@media (min-width:1152px){

  .drg-footer{ padding:52px var(--space-gutter) 24px; }

  /* Column 3 is 1.3fr and that is a measured requirement, not a preference:
     at 1fr it resolves to ~232px while the WhatsApp line needs ~252px, and
     the number broke mid-digits. §1. */
  .drg-footer__cols{
    grid-template-columns:1.15fr 1fr 1.3fr 1fr;
    gap:40px;
  }

  .drg-footer__contact a{ min-height:var(--target-min); }
}


/* ==========================================================================
   Inicio -- T21, option 21a (coverage-led). Built from
   briefs/PROMPT-T21-inicio-build.md section 5 and canvas section #21a.
   Chrome is 16a (header) and T20 section 1 (footer); neither is here.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */

.drg-inicio__hero .drg-lead{ margin-top:var(--space-4); }
.drg-inicio__hero .drg-cta-block{ margin-block:var(--space-6); }

/* The cedulas, the certifications and the distincion are three SEPARATE
   elements and that is load-bearing, not typographic. A distincion may not
   share a line with a certification (DESIGN-ANSWERS section 5): read quickly,
   one dot-separated line scans as "certified by ... Premio FEMECOT", which is
   a certification the Premio is not. Do not collapse these into one <p>. */
.drg-inicio__cedulas,
.drg-inicio__cert,
.drg-inicio__distincion{
  margin:0 0 var(--space-2);
  font-size:var(--fs-bodysm);
  line-height:var(--lh-bodysm);
  color:var(--color-text-muted);
  max-width:var(--container-prose);
}
.drg-inicio__cedulas{ color:var(--color-text); font-weight:var(--fw-heading); }
.drg-inicio__distincion{ margin-bottom:0; }

/* --- "Lo que atiendo": the flat list ------------------------------------- */
/* ONE weight, ONE size, no icons, no grouping by body region, no promoted
   rows. This is a compliance guard and not a style choice: he is a generalist
   (SITE-PROFILE "Scope of practice"), and any grid -- four cards or nine --
   asserts sub-specialisms the record forbids. A future turn that "tidies" this
   into cards has made a medical claim. build/page_inicio.py fails the build if
   a row acquires a modifier class. */

.drg-inicio__conds{
  list-style:none;
  margin:var(--space-6) 0 var(--space-5);
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:0 var(--space-6);
  border-top:var(--border-width) solid var(--color-border);
}

.drg-inicio__cond{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-body);
  padding-block:var(--space-3);
  min-height:var(--target-min);
  display:flex;
  align-items:center;
  border-bottom:var(--border-width) solid var(--color-border);
}

.drg-inicio__negative{ color:var(--color-text-muted); }

/* --- "Que pasa en la consulta" ------------------------------------------- */

.drg-inicio__band{ background:var(--color-surface); }

.drg-inicio__steps{
  list-style:none;
  counter-reset:step;
  margin:var(--space-6) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
}

.drg-inicio__step{ counter-increment:step; }

.drg-inicio__step::before{
  content:counter(step);
  display:block;
  margin-bottom:var(--space-3);
  font-size:var(--fs-h4);
  font-weight:var(--fw-heading);
  color:var(--color-accent);
}

.drg-inicio__step p{ margin:0; }

/* --- "Quien le atiende" --------------------------------------------------- */

.drg-inicio__who-grid{
  margin-top:var(--space-6);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  align-items:start;
}

.drg-inicio__portrait{
  display:block;
  width:340px;
  max-width:100%;
  margin:0;
}

.drg-inicio__portrait img{
  display:block;
  width:340px;
  max-width:100%;
  height:400px;
  object-fit:cover;
  /* MEASURED, not chosen. Source 1064x1600 in a 340x400 frame with cover:
     scale 0.3195, scaled height 511px, overflow 111px, so 32% offsets by
     35.5px and the visible band is source y in [111,1363] -- his eyes.
     22% lands on his forehead. Do not round this number. */
  object-position:center 32%;
  border-radius:var(--radius-md);
}

/* Placeholder while the JPEG is not yet in the media library. Reserves the
   frame so the layout does not reflow when the real image lands. */
.drg-inicio__portrait--pending{
  width:340px;
  max-width:100%;
  height:400px;
  background:var(--color-surface);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-md);
}

.drg-inicio__who-body .drg-prose{ margin-top:var(--space-5); }
.drg-inicio__who-body cite{ font-style:italic; }

/* --- "Como pedir una consulta" ------------------------------------------- */

.drg-inicio__ask-grid{
  margin-top:var(--space-6);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  align-items:start;
}

.drg-inicio__channels{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-block:var(--space-5);
}

/* Every target >= 44px, list links included (tokens blocker 5). nowrap so a
   number cannot break mid-digits, which is the defect the T20 footer's 1.3fr
   column exists to prevent. */
.drg-inicio__channels a{
  display:flex;
  align-items:center;
  min-height:var(--target-min);
  white-space:nowrap;
  font-size:var(--fs-bodysm);
}

.drg-inicio__clinic{ padding:var(--space-6); border-radius:var(--radius-md); }
.drg-inicio__clinic h3{ margin:0 0 var(--space-4); font-size:var(--fs-h4); }

.drg-inicio__address{
  font-style:normal;
  margin-bottom:var(--space-5);
  line-height:var(--lh-body);
}

.drg-inicio__clinic .drg-hours{ margin-bottom:var(--space-4); }

/* --- "Material de ensenanza" --------------------------------------------- */
/* Under N10(b) these stay teaching pages and the strip says so. When the
   patient pages exist the destinations change and the label moves to
   Docencia; nothing else on Inicio moves. */

.drg-inicio__cards{
  list-style:none;
  margin:var(--space-6) 0 var(--space-6);
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
}

.drg-inicio__card{
  padding-top:var(--space-5);
  border-top:var(--border-width) solid var(--color-border);
}

.drg-inicio__card h3{
  margin:0 0 var(--space-2);
  font-size:var(--fs-h4);
  line-height:var(--lh-h4);
}

.drg-inicio__card h3 a{
  display:flex;
  align-items:center;
  min-height:var(--target-min);
}

.drg-inicio__card .drg-caption{ margin:0; color:var(--color-text-muted); }

/* --- the notice ----------------------------------------------------------- */
/* Ruling B2 / DESIGN-ANSWERS section 7: --fs-caption, not --fs-fine. On the
   page, never in the footer. .drg-notice already carries the size; this only
   sets the position at the foot of the body. */

.drg-inicio .drg-notice{
  margin-block:0 var(--space-8);
  padding-top:var(--space-5);
  border-top:var(--border-width) solid var(--color-border);
  max-width:var(--container-prose);
}

/* --- two columns ---------------------------------------------------------- */

@media (min-width:768px){

  .drg-inicio__conds{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .drg-inicio__steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .drg-inicio__cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  .drg-inicio__who-grid{ grid-template-columns:340px minmax(0,1fr); gap:var(--space-7); }
  .drg-inicio__ask-grid{ grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:var(--space-7); }
}

/* --- four columns --------------------------------------------------------- */

@media (min-width:1024px){

  /* Sixteen rows over four columns is four per column. Fourteen ships today
     because two rows are held for the owner (build/page_inicio.py HELD_ROWS),
     so the last column runs one short until they are cleared. Deliberate:
     dropping to three columns to balance would regroup the list, and grouping
     is the thing the flat list exists to avoid. */
  .drg-inicio__conds{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}


/* ==========================================================================
   SPEC-22b. The route out of a teaching page into its patient page.

   Section 3 is the whole job: it ships QUIET. A mid-article block that reads
   as an advertisement inside a teaching text is wrong even when every word
   passes, so there is no fill, no button, and no colour the page does not
   already use. The accent belongs to the link and nowhere else.

   head and end are single lines between hairlines. Only mid is bordered, and
   even mid is a 1px outline over the page ground, never a card.
   ========================================================================== */

.drg .drg-route{
  margin-block:var(--space-7);
  /* Design ruling 2026-09-07: BODY scale, not small-body. The distinction from
     the breadcrumb above it is a stack of three -- caption vs body scale, plain
     vs bold 2px-underlined links, no rules vs hairlines -- and the scale leg
     only works if the gap is more than the 1px that --fs-caption vs 17px gave.
     --fs-body floors at 18px, which also clears SPEC-22b section 5 outright. */
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-text);
}
.drg .drg-route p{ margin:0; }

/* --- head and end: a line, not a box ------------------------------------- */

.drg .drg-route--head,
.drg .drg-route--end{
  border-block:1px solid var(--color-border);
  padding-block:var(--space-4);
}
.drg .drg-route__for{ color:var(--color-text-muted); }

/* --- mid: outlined, unfilled --------------------------------------------- */

.drg .drg-route--mid{
  border:1px solid var(--color-border);
  background:transparent;          /* section 3: no fill. Not a card. */
  padding:var(--space-6);
}
.drg .drg-route__title{
  font-weight:var(--fw-heading);
  margin-bottom:var(--space-2);
}
.drg .drg-route__body{ color:var(--color-text-muted); }
.drg .drg-route__routes{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:0 var(--space-2);
  margin-top:var(--space-3);
}

/* --- the routes ----------------------------------------------------------- */

/* Section 5: 44px minimum, 48px for the primary. The padding does the work,
   because a route sitting inside a sentence cannot take a fixed height without
   pushing the lines around it apart. */
.drg .drg-route__link{
  display:inline-flex; align-items:center;
  min-height:44px;
  padding-inline:var(--space-2);
  margin-inline:calc(var(--space-2) * -1);   /* hit area grows, text does not */
  color:var(--color-accent);
  font-weight:var(--fw-heading);          /* bold: leg two of the distinction */
  text-decoration:underline;
  text-decoration-thickness:2px;          /* the breadcrumb's links stay 1px */
  text-underline-offset:4px;   /* prompt T22 section 3 */
}
.drg .drg-route__link:hover{ color:var(--color-accent-hover); }
.drg .drg-route__link--primary{
  min-height:48px;   /* every link is bold now, so 48px is what marks the primary */
}

/* Destination unset. It renders as a <span>, so it is not focusable and not
   clickable; this only stops it LOOKING like a control. Nothing ships in this
   state -- components.py refuses it -- but a staged preview must not show a
   live-looking link that goes nowhere. */
.drg .drg-route__link--pending{
  color:var(--color-text-muted);
  text-decoration:none;
  cursor:default;
}
/* --color-border-field is 3.52:1 on the ground. It is a field-outline token and
   this is rendered text, so the separator takes the muted text token (5.92:1)
   instead. The hairlines stay --color-border at 1.30:1: 1.4.11 governs what is
   needed to identify a control, and the control here is identified by being an
   underlined accent link, not by the box around it. */
.drg .drg-route__sep{ color:var(--color-text-muted); }

/* --- the two lines every placement carries -------------------------------- */

.drg .drg-route__notice,
.drg .drg-route__by{
  font-size:var(--fs-caption);
  line-height:var(--lh-caption);
  color:var(--color-text-muted);
}
.drg .drg-route__notice{ margin-top:var(--space-3); }
.drg .drg-route__by{ margin-top:var(--space-1); }

@media (max-width:600px){
  /* The three routes stack rather than wrapping mid-run, so the 48px primary
     is never sharing a line with a 44px sibling. */
  .drg .drg-route__routes{ flex-direction:column; align-items:flex-start; gap:var(--space-1); }
  .drg .drg-route__sep{ display:none; }
}



/* ==========================================================================
   AIOSEO breadcrumb — NOT HERE ON PURPOSE.

   The rule that brings .aioseo-breadcrumb down to --fs-caption lives in
   build/snippets/breadcrumb-scale.css and ships as a WPCode CSS snippet, per
   PROMPT-T22-breadcrumb-scale-build-2026-09-07-1125.md section 2. It is
   deliberately not a theme edit: THEME-PASTE-2026-09-03.md is still blocked on
   cPanel/SFTP, and this change must not wait on that.

   Do not move it back into this file.
   ========================================================================== */

/* --- sobre el doctor ----------------------------------------------------- */
/* The portrait. Crop point from design/SPEC-portrait-crop.md, 2026-09-11.
   26%, NOT inicio's 32%. object-position's percentage is a fraction of the
   OVERFLOW, not of the image, so it does not survive a change of box aspect.
   Source 681x1024 into 300x376 with cover: scale 0.4405, scaled height 451.1px,
   overflow 75.1px. The crop point is a property of the photograph -- source
   y=472, 46.1% of image height, his eyes -- and re-solving it for this box
   gives 26.5%, shipped as 26%. Copying 32% across would drop the crop by about
   9.4 source px. Re-derive, never copy, for any new box. Both percentages are
   invalidated by a new derivative replacing the 681x1024.

   ⚠️ Design's spec puts these on .drg-sobre__portrait itself. Corrected here:
   that class is on the <picture>, which is not a replaced element, so
   object-fit and object-position would do nothing. They go on the img, which is
   the pattern .drg-inicio__portrait img already uses. */
.drg-sobre__portrait{
  display:block;
  width:300px;
  max-width:100%;
  margin:0;
}

.drg-sobre__portrait img{
  display:block;
  width:300px;
  max-width:100%;
  height:376px;
  object-fit:cover;
  object-position:center 26%;
  background:var(--color-surface);
  border-radius:var(--radius-md);
}

/* aspect-ratio here is load-bearing, not decoration: it pins the box at 0.798
   as the width fluidifies, and that ratio is the only thing keeping 26%
   correct below 520px. Dropping it silently re-crops the photograph. */
@media (max-width:520px){
  .drg-sobre__portrait,
  .drg-sobre__portrait img{
    width:100%;
    height:auto;
    aspect-ratio:300 / 376;
  }
}

/* The book card. 23a's treatment (Docencia canvas 65-78), lifted onto this page
   when the owner cleared BOOK_CARD on 2026-09-11. Two deviations from the draw,
   both recorded in page_sobre.py: no cover image (23a marks it «[pendiente]»
   and no asset exists), and the action is .drg-cta-secondary rather than 23a's
   filled green button, because WhatsApp is the only primary action on a page.
   #FFFFFF is not a token: it is the canvas's deliberate lift off --color-bg. */
.drg-book{
  margin:var(--space-5) 0 0;
  padding:var(--space-4);
  background:#FFFFFF;
  border:1px solid var(--color-accent);
  border-radius:var(--radius-md);
}

.drg-book > p{ margin:0 }
.drg-book > p + p{ margin-top:var(--space-2) }

.drg-book__eyebrow{
  font-size:.9375rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--color-accent);
}

.drg-book__title{
  font-size:1.125rem;
  font-weight:600;
  line-height:1.3;
  color:var(--color-text);
  text-wrap:pretty;
}

.drg-book__meta{
  font-size:1rem;
  line-height:1.5;
  color:var(--color-text-muted);
  text-wrap:pretty;
  font-variant-numeric:tabular-nums;
}

.drg-book__isbn{
  font-size:.9375rem;
  line-height:1.5;
  color:var(--color-text-muted);
  font-variant-numeric:tabular-nums;
}

.drg-book__action{ margin-top:var(--space-3) }
.drg-book__action .drg-cta-secondary{ width:100% }

/* --- docencia e investigacion -------------------------------------------- */
/* Canvas 23b. The dated chronology: a row is a year cell and a fact, and the
   shape is the rule -- a dated row cannot silently become a tally. 86px holds
   "1991 –", the widest cell the record has. */
.drg-record{ display:flex; flex-direction:column }

.drg-record__row{
  display:flex;
  gap:var(--space-3);
  padding:var(--space-3) 0;
  border-top:1px solid var(--color-border);
}
.drg-record__row:last-child{ border-bottom:1px solid var(--color-border) }

.drg-record__year{
  width:86px;
  flex:none;
  font-size:1rem;
  font-weight:600;
  line-height:1.5;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
}

.drg-record__what{
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--color-text);
  text-wrap:pretty;
}

/* <cite> is the work's title, not an emphasis. The theme must not let a UA
   sheet decide this. */
.drg-record__what cite,
.drg-obra__title cite{ font-style:italic }

/* The mid-page route-out. 23b puts it after the teaching record and before the
   citations. A text line and a link, never a filled button: the one primary
   action on this page is WhatsApp in the theme's header (blocker 10). */
.drg-routeout{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2) var(--space-4);
  margin:var(--space-5) 0 0;
  padding:var(--space-3) 0;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}

.drg-routeout__lead{
  font-size:1.125rem;
  line-height:1.5;
  color:var(--color-text-muted);
  text-wrap:pretty;
}

.drg-routeout a{
  display:inline-flex;
  align-items:center;
  min-height:var(--target-min);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.4;
  color:var(--color-accent);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.drg-routeout a:hover,.drg-routeout a:focus{ color:var(--color-accent-hover) }

/* Obra publicada: the three publications the owner cleared 2026-09-08. */
.drg-obra{ display:flex; flex-direction:column; gap:var(--space-4) }

.drg-obra__item{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  padding:var(--space-3) var(--space-4);
  background:var(--color-surface);
  border-radius:var(--radius-md);
}

.drg-obra__item > p{ margin:0 }

.drg-obra__title{
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--color-text);
  text-wrap:pretty;
}

.drg-obra__meta{
  font-size:.9375rem;
  line-height:1.45;
  color:var(--color-text-muted);
  text-wrap:pretty;
  font-variant-numeric:tabular-nums;
}

.drg-obra__action a{
  display:inline-flex;
  align-items:center;
  min-height:var(--target-min);
  font-size:1.0625rem;
  font-weight:600;
  line-height:1.4;
  color:var(--color-accent);
  text-decoration:none;
}
.drg-obra__action a:hover,.drg-obra__action a:focus{
  color:var(--color-accent-hover);
  text-decoration:underline;
}

/* ==========================================================================
   T26 — Boletín (Jetpack subscriptions). COLOUR ONLY.

   Design's ruling, 2026-09-13:
   briefs/DESIGN-LOG-T26-boletin-css-ruling-2026-09-13-1517.md section 1.

   Jetpack writes an inline `style` attribute on both controls —
   font-size:16px; padding:15px 23px; border-radius:0px; border-width:1px
   (the button adds margin-left:10px). An inline style beats every selector,
   so T26's geometry is inert and the only routes were `!important`, which is
   banned, or nothing. What ships is the half that wins, and it is also the
   real defect: today the submit renders solid accent with white text, i.e. a
   second filled primary. That is blocker 10.

   Two traps, both deliberate:

   - `border-color`, NEVER the `border` shorthand. The shorthand's width half
     loses to the inline style while reading as though it applied, which makes
     a colour-only rule look like a failed geometry rule.
   - the `.wp-block-jetpack-subscriptions` ancestor is load-bearing. The
     sidebar widget renders the same ids without that class, so the ancestor
     is the whole reason these rules stay off it. Do not "simplify" it away.
     Measured live: subscribe-email x2, subscribe-submit x2, subscribe-field x1.

   One substitution against the ruling, and it is a written-rule fix, not a
   preference: the ruling asks for `border-color:#C9C2B4` on the field.
   briefs/DESIGN-TOKENS.md is LOCKED and its ship-blocker 2 names that exact
   value as a measured failure — 1.68:1, "the defect fixed in turn 5" — and
   names the replacement for inputs itself: --color-border-field at 3.52:1,
   which is what WCAG 1.4.11 asks of a UI component boundary. The token file
   wins. Reported to Design 2026-09-13.

   Radius and border-width, if ever wanted, are an admin change in the Jetpack
   block's own settings so it emits different inline values. Not CSS.
   ========================================================================== */

.wp-block-jetpack-subscriptions #subscribe-field{
  background:#fff;
  color:var(--color-text);
  border-color:var(--color-border-field);
}

.wp-block-jetpack-subscriptions #subscribe-submit button.wp-block-button__link{
  background:transparent;
  color:var(--color-accent);
  border-color:var(--color-accent);
}

/* Focus is the token file's own state, not a new decision: ring PLUS border
   colour change, never either alone. The .drg focus rules further up cannot
   reach this block — the 28 posts are not rebuilt pages and carry no .drg
   wrapper — so the same state is restated on this scope. */
.wp-block-jetpack-subscriptions #subscribe-field:focus-visible,
.wp-block-jetpack-subscriptions #subscribe-submit button.wp-block-button__link:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}
.wp-block-jetpack-subscriptions #subscribe-field:focus-visible{
  border-color:var(--color-accent);
}

/* Hide the resubmittable form after a success.
   briefs/DESIGN-LOG-T26-build-measurements-2026-09-13-1549.md section 3.

   Design's original `.wp-block-jetpack-subscriptions div.success + form` matches
   nothing: measured, `div.success` is NOT inside the block — it is the block
   wrapper's previous sibling. The form below is the working equivalent, no
   `!important` needed.

   It self-scopes away from the sidebar widget for free: the widget empties its
   own form on success, so the widget's `div.success` is never followed by a
   `.wp-block-jetpack-subscriptions` wrapper and this never matches there. That
   is why the class is in the selector and not just `div.success + * form`.

   ⚠️ Measured on a POST, where the panel and the block share
   `div.wp-block-group__inner-container`. On the two indexes the block is printed
   by the child `template-parts/archive.php`, and whether Jetpack emits the panel
   inside that echo is unverified — see that file's header note. If it lands
   outside `.drg-sub`, this rule stops matching there and the form stays up after
   a success. Load /articulos/?subscribe=success once the template is pasted. */
div.success + .wp-block-jetpack-subscriptions form{
  display:none;
}

/* Status panels. briefs/SPEC-T26-boletin-values.md section 1.

   The panels sit OUTSIDE .wp-block-jetpack-subscriptions, so the ancestor scope
   used above cannot reach them. `:has(+ block)` self-scopes on the same
   principle: the widget's panel is followed by a container that lacks the class,
   so the widget stays untouched while it still exists.

   ⚠️ Two deviations from the spec as written, both deliberate:

   1. The spec says `var(--color-base)`. THAT TOKEN DOES NOT EXIST. DESIGN-TOKENS.md
      (LOCKED) defines `--color-text` at the same #1E2A26; there is no `--color-base`
      anywhere in the token file or this stylesheet. Shipped verbatim it would
      resolve to nothing and both the field ink and the success ink would fall back
      to whatever they inherit. Same class of defect as the #C9C2B4 reintroduction,
      and settled the same way: the LOCKED file is the source.

   2. `p.error` adjacency is now MEASURED, and Design's open item is closed.
      /en/ankle-sprain-treatment/?subscribe=many_pending_subs, 2026-09-13: the
      block's p.error has the block wrapper as its next element sibling
      (`adj:true`), exactly as div.success does. The widget's p.error does not —
      its next sibling is `.wp-block-jetpack-subscriptions__container`, which
      lacks the class — so `:has(+ block)` self-scopes off the widget for free,
      by measurement rather than by argument. Confirmed on all four states.

   GROUND, MEASURED 2026-09-14, because a fill is meaningless without it. The
   live index paints body{background:#fff} and nothing between body and the panel
   paints anything else: the only other opaque light grounds on the page are the
   header, the submenu and .site-info, all #fff. This sheet declares NO background
   on .drg-sub. So the panels sit on #fff today, and on --color-bg #FBF9F5 if the
   index is ever rebuilt inside .drg. #F1EDE4 is a visible wash on both.

   CONTRAST, RECOMPUTED HERE, not carried across — build/theme/README.md says a
   changed colour gets recomputed and a number never gets copied. Two claims that
   stood in this comment were inherited and both were wrong:
     #7a3224 on #F1EDE4 is 7.78:1, not the 4.5:1 recorded before (9.09:1 on #fff).
     #8a3a2a on #F1EDE4 is 6.61:1 and PASSES; the old note said it did not. It is
     a border colour by Design's choice, not because contrast forbids text.
   Neither pair is in the token file, so both are literals here by necessity. */
div.success:has(+ .wp-block-jetpack-subscriptions){
  background:rgba(15,106,91,.09);
  color:var(--color-text);
  border-left:3px solid var(--color-accent);
  border-radius:3px;
  padding:14px 15px;
}
/* The success panel is the only one of the two whose text is NOT the panel
   element itself. views.php line 310 runs the message through wpautop() before
   printing it inside the div, so the sentence arrives wrapped in its own <p>,
   and that <p> brings the theme's paragraph margins inside a box this sheet has
   just given padding to. Padding suppresses margin collapse, so the spec'd
   14px/15px would render as 14px at the top and 14px plus a paragraph margin at
   the bottom. Zeroing the outer margins is what makes the spec'd padding the
   padding you actually see; the rule is written per-edge so a message that ever
   ran to two paragraphs would still be spaced between them.
   Read from jetpack/tags/16.2/modules/subscriptions/views.php, 2026-09-13.
   The error panel needs none of this: views.php prints those states as the
   <p class="error"> itself, with no inner markup at all. */
div.success:has(+ .wp-block-jetpack-subscriptions) > p:first-child{
  margin-top:0;
}
div.success:has(+ .wp-block-jetpack-subscriptions) > p:last-child{
  margin-bottom:0;
}

p.error:has(+ .wp-block-jetpack-subscriptions){
  background:#F1EDE4;
  color:#7a3224;
  border-left:3px solid #8a3a2a;
  border-radius:3px;
  padding:14px 15px;
}

/* The consent line. briefs/SPEC-T26-boletin-values.md section 6: it sits inside
   the block at --fs-caption, whose 15px floor is the same token argument that
   raised the general-information notice from 14px. Muted ink, because it is
   supporting text under a promise, not the promise itself.

   Deliberately NOT a checkbox — Design's position, recorded in the same section:
   a visible notice, not a consent gate. That is a design call, not legal advice,
   and the privacy-policy additions it leans on are still owner-confirmed text
   (design/subscribe/SUBSCRIBE-QC-AND-SPEC.md section 5-bis).

   THE HEADING IS LEFT TO THE THEME ON PURPOSE. No spec value exists for it and
   Design is out of credit, so inventing one here would be originating design
   rather than implementing it. The theme's own h2 is the honest default. A
   documented gap, not an oversight. */
.drg-sub__consent{
  font-size:var(--fs-caption);
  line-height:var(--lh-caption);
  color:var(--color-text-muted);
}

/* ==========================================================================
   The clinic page's restored tail — SPEC-T31, option 31a, ruled 2026-09-16.

   ⚠️ THIS CSS IS NOT OPTIONAL DECORATION. 31a was chosen over 31b on exactly
   two arguments, and the second one is this stylesheet: "31a's recessed panel
   and muted ink leave the only accent-green CTA on the page as the clinic's
   WhatsApp" (§3, argument 2). Ship the markup without these rules and the
   eight borrowed numbers render as eight body-size accent links — which is the
   defect 31b was rejected for, arriving through the back door. The written
   constraint it serves is §1's: "the page must not read as having ten phone
   numbers."

   So: the clinic's two numbers keep accent ink. The eight directory numbers
   and the third-party ambulance number are muted and underlined, never
   buttons. His own row is highlighted and carries no number at all (§0).

   ⚠️ THE THREE-COLUMN TABLE IS RATIFIED, Design 2026-09-17. It had been
   the build's choice against a canvas drawing a two-column grid with the
   physician on a <br> under the discipline. Design had compared its drawing to
   SPEC-T31 §3's prose rather than to this markup, called the undercount its
   own, and kept the table: the data is a uniform 8x3 matrix, <table> is the
   right element, and the visually-hidden <thead> gives the phone column a
   programmatic header a grid cannot provide. Two conditions, both already met
   by the tokens below, neither to be "simplified" away later:
     - discipline #1E2A26 (tbody th), physician #59635E (td). That <br> was
       encoding the hierarchy by position; ink alone carries it now, so three
       columns must NOT become three equal-weight columns.
     - the phone column stays muted.
   Accepted cost, in Design's words: cells wrap at 720px where two columns did
   not. The named fallback, if it ever reads badly, is a two-column table with
   a <th scope="row"> holding both tiers -- EXPLICITLY NOT ASKED FOR, because
   it buys a refinement for a build cycle.

   ⚠️ THE NARROW-WIDTH STACK IS STILL A BUILD DECISION, not a drawn one.
   The canvas arrived 2026-09-17 (committed df50678) and draws no mobile state
   for this block. A table this wide at 375px either scrolls horizontally or
   overflows, and both fail WCAG 1.4.10 reflow. The stack is the smallest fix
   that keeps the row's reading order; if Design draws something else, this
   block is what changes.
   ========================================================================== */
.drg .drg-directory{
  background:var(--color-surface);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-gutter);
  margin-bottom:var(--space-4);
}
.drg .drg-directory__table{
  border-collapse:collapse;
  width:100%;
  font-size:var(--fs-bodysm);
  line-height:var(--lh-bodysm);
}
.drg .drg-directory__table th,
.drg .drg-directory__table td{
  text-align:left;
  padding:var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom:var(--border-width) solid var(--color-border);
  font-weight:var(--fw-body);
  vertical-align:baseline;
}
.drg .drg-directory__table thead th{
  font-size:var(--fs-fine);
  line-height:var(--lh-fine);
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.drg .drg-directory__table tbody tr:last-child th,
.drg .drg-directory__table tbody tr:last-child td{ border-bottom:0; }
.drg .drg-directory__table tbody th{ color:var(--color-text); }
.drg .drg-directory__table td{ color:var(--color-text-muted); }
/* Muted, underlined, and NOT a button. The 44px touch target is met by the
   row's own padding plus the line box, not by a pill. */
.drg .drg-directory__table a{
  color:var(--color-text-muted);
  text-decoration:underline;
  text-underline-offset:2px;
  font-variant-numeric:tabular-nums;
  /* A telephone number must never wrap mid-number -- Design, T31 English
     pass 2026-09-17 §5. It sits on the ANCHOR, not the cell, which is what
     keeps his row correct: «Es mi consultorio · » is prose outside the link
     and stays wrappable, and only «WhatsApp» is held together. That is the
     same §5 asking for nowrap off that span -- the span never had it. */
  white-space:nowrap;
}
.drg .drg-directory__table a:hover,
.drg .drg-directory__table a:focus-visible{ color:var(--color-text); }
/* §0 / §3: his row is the wayfinding cue that stops the list reading as
   self-listing. It is highlighted by ink and rule, not by colour alone. */
.drg .drg-directory__own th,
.drg .drg-directory__own td{
  color:var(--color-text);
  font-weight:var(--fw-heading);
  border-bottom-color:var(--color-text-muted);
}
.drg .drg-directory__own a{ color:var(--color-accent); font-weight:var(--fw-body); }
.drg .drg-directory__own a:hover,
.drg .drg-directory__own a:focus-visible{ color:var(--color-accent-hover); }

/* The ambulance number is a third party's (owner, «3rd», 2026-09-16), so it is
   muted like the directory's eight. The rental's number IS the clinic's
   landline, so it keeps accent ink and matches the «Cómo pedir consulta»
   treatment — one number, one appearance, twice on the page. */
.drg .drg-angelus__amb{ margin-bottom:var(--space-4); }
.drg .drg-angelus__amb a{
  color:var(--color-text-muted);
  text-decoration:underline;
  text-underline-offset:2px;
  font-variant-numeric:tabular-nums;
}
.drg .drg-angelus__amb a:hover,
.drg .drg-angelus__amb a:focus-visible{ color:var(--color-text); }
.drg .drg-angelus__landline,
.drg .drg-angelus__renta{ margin-bottom:var(--space-4); }
.drg .drg-angelus__landline .drg-fine{ color:var(--color-text-muted); }
.drg .drg-angelus__landline a,
.drg .drg-angelus__renta a{ font-variant-numeric:tabular-nums; }

@media (max-width:599px){
  .drg .drg-directory__table thead{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%);
    white-space:nowrap;
  }
  .drg .drg-directory__table tr{
    display:block;
    padding:var(--space-3) 0;
    border-bottom:var(--border-width) solid var(--color-border);
  }
  .drg .drg-directory__table tr:last-child{ border-bottom:0; }
  .drg .drg-directory__table th,
  .drg .drg-directory__table td{
    display:block;
    padding:0;
    border-bottom:0;
  }
  .drg .drg-directory__table tbody th{ font-weight:var(--fw-heading); }
  .drg .drg-directory__own{ border-bottom-color:var(--color-text-muted); }
}