/* ============================================================
   Variant A — "Clinical Light"
   Juan Manuel Morales Tamajon · Osteópata D.O. · Marbella
   Ivory ground · near-black ink · sand accents · deep bronze CTA accent
   Contrast (WCAG 2.2): ink/ivory 16.9:1 · ink-soft/ivory 7.2:1 ·
   bronze/ivory 6.6:1 · ivory/bronze-deep 7.8:1 · ivory/ink 16.9:1
   ============================================================ */

/* Self-hosted fonts (C4.1, 2026-09-23): byte-identical mirror of the Google Fonts
   css2 response for Newsreader (ital,opsz,wght 0,6..72,400/500/600 + 1,6..72,400)
   and Hanken Grotesk (wght 400/500/600/700) — same variable woff2 files, same
   unicode-range subsets, font-display: swap. No third-party request remains. */
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/hanken-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/newsreader-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/newsreader-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/newsreader-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/newsreader-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/newsreader-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/newsreader-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/newsreader-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/newsreader-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/newsreader-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/newsreader-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* palette */
  --ivory:       #FAF8F5;
  --ivory-deep:  #F3EFE8;
  --sand:        #E7DFD2;
  --sand-line:   #DDD2BE;
  --sand-mute:   #8A7A5C;   /* decorative only — never body text */
  --ink:         #191713;
  --ink-soft:    #5A5344;
  --bronze:      #6B5636;   /* text-level accent, links */
  --bronze-deep: #5E4C2E;   /* filled accents w/ ivory text */

  /* type */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Hanken Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* display scale: the 375 floor is sized so the longest real word on the site
     ("Estructural", "Biomechanical") fits one phone line — R1 DQ #1 */
  --fs-hero:  clamp(2.125rem, 3.6vw + 1.1rem, 4.5rem);
  --fs-h2:    clamp(1.875rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3:    clamp(1.3125rem, 1vw + 1rem, 1.625rem);
  --fs-lead:  clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-kick:  0.8125rem;

  /* spacing */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.75rem;
  --sp-4: 2.75rem;
  --sp-5: 4.5rem;
  --sp-6: 7rem;

  --measure: 38rem;
  --wrap: 74rem;
  --r-pill: 999px; /* the only radius on the site (plus 2px on chips) */
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* subtle paper grain — breaks computer-perfect flatness */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bronze); }
:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 3px; border-radius: 1px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; }
/* orphan control is done by the line-breaker, not by hard nbsp glue in the markup:
   a glued pair ("Biomechanical Correction") is one unbreakable 24-character word and
   is what forced the mid-word break at 375 (R1 DQ #1). */
h1 { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
/* display type must never push the page sideways — break as a last resort
   (R1 DQ #1: 5 pages scrolled at 375).
   NB: no `hyphens: auto` — with balanced wrapping Chromium hyphenates Spanish display
   type even when the line has room ("dominan-do el movimiento hu-mano"). Breaking is a
   last resort, not a setting. */
h1, h2, h3, .pullquote, .statement p, .rate-card .rate-line {
  overflow-wrap: break-word;
}

p, li { max-width: var(--measure); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--ivory);
  padding: 0.6em 1.2em; z-index: 3000; text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; color: var(--ivory); }

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  max-width: var(--wrap); margin-inline: auto;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { width: 40px; height: 34px; }
.brand-text { line-height: 1.2; }
.brand-text strong { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; display: block; letter-spacing: 0.01em; white-space: nowrap; }
.brand-text small { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

.site-nav { margin-left: auto; display: flex; gap: 1.6rem; }
.site-nav a { text-decoration: none; font-size: var(--fs-small); font-weight: 500; padding: 0.2rem 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { box-shadow: 0 1px 0 0 var(--bronze); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--bronze); }

.langs { display: flex; gap: 0.65rem; font-size: 0.8125rem; letter-spacing: 0.06em; align-items: center; }
.langs a { text-decoration: none; font-weight: 700; }
.langs a[aria-current="true"] { color: var(--bronze); box-shadow: 0 1px 0 0 var(--bronze); }
.langs .lang-soon { color: var(--sand-mute); cursor: help; font-weight: 400; }

.nav-toggle {
  display: none; margin-left: auto;
  font: 600 var(--fs-small) var(--font-body);
  background: none; border: 1px solid var(--sand-line); color: var(--ink);
  padding: 0.45em 1em; border-radius: var(--r-pill); cursor: pointer;
}

@media (max-width: 860px) {
  .site-head { flex-wrap: wrap; gap: 0.9rem; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; width: 100%; flex-direction: column; gap: 0.2rem;
    border-top: 1px solid var(--sand-line); padding-top: 0.8rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.55rem 0; font-size: 1.0625rem; }
  .langs { order: 3; }
  .site-nav { order: 4; }
}
/* phone header: ES / EN only. The four not-yet-translated markers stay in the footer,
   they don't deserve a prime row under the brand on every page (R1 P2-12). */
@media (max-width: 560px) {
  .site-head .langs .lang-soon { display: none; }
}

/* ---------- kicker + plumb-line motif (bespoke detail) ---------- */
.kicker {
  font-size: var(--fs-kick); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze); display: flex; align-items: center; gap: 0.7rem;
}
.kicker::before {
  content: ""; width: 2.25rem; height: 1px; background: var(--sand-mute); flex: none;
}
.plumb { position: relative; padding-top: 2.6rem; }
.plumb::before {
  content: ""; position: absolute; top: 0; left: 2px;
  width: 1px; height: 1.9rem; background: var(--sand-mute);
}
.plumb::after {
  content: ""; position: absolute; top: 1.9rem; left: -1px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--bronze-deep);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font: 600 var(--fs-small)/1.2 var(--font-body);
  padding: 0.9em 1.9em; border-radius: var(--r-pill);
  text-decoration: none; text-align: center;
  background: var(--ink); color: var(--ivory); border: 1px solid var(--ink);
  transition: background 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); color: var(--ivory); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ivory); }
.btn-note { display: block; font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.5rem; font-style: italic; }

/* ---------- pending chips (facts not yet confirmed — never invented) ----------
   NO dashed/dotted border anywhere: a dash reads as an unstyled developer wireframe
   or a discount coupon, not as a designed annotation (outside critique 2026-09-18).
   Same language as variant B's fix, inverted where the variants differ:
     · quiet tonal wash of the OPPOSITE ground (ink tint on the ivory grounds, ivory
       tint inside the black rate card) + a hairline of that same family
     · tracked micro-caps, 0.1em — annotation type, not body type
     · radius carries "information, not a button" — and here the site's CONTROLS are
       fully-rounded pills (--r-pill), so the annotation is the SQUARE-CORNER tag.
       That is B's argument run the other way: in B the buttons are 2px-square and the
       chips are pills; in A the buttons are pills and the chips are 2px-square. The
       differentiator is the contrast with the local button language, not a fixed shape.
   Two tiers, because A renders some pending facts in a control slot:
     .pending      — inline fact tag (square, micro-caps)
     .btn.pending  — a control that is not live yet: keeps control geometry (pill,
                     aligned with the live CTA beside it) but goes quiet, so it never
                     competes with the real button. */
.pending {
  display: inline-block;
  border: 1px solid rgba(25, 23, 19, 0.14);
  background: rgba(25, 23, 19, 0.055);
  color: var(--ink-soft);
  font: 600 0.75rem/1.45 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.24em 0.66em;
  border-radius: 2px;
  text-decoration: none;
  cursor: help;
  vertical-align: 0.06em;
}
a.pending:hover {
  color: var(--ink); background: rgba(25, 23, 19, 0.085);
  border-color: rgba(25, 23, 19, 0.28);
}
/* Inside the black rate card the ground flips, so the wash and the hairline flip with
   it — an ivory tint of the ink ground instead of a light box punched into it (the old
   --ivory-deep fill read as a pasted label on the one dark surface on the site). */
.rate-card .pending, .svc-urgent .pending {
  color: var(--sand);
  background: rgba(250, 248, 245, 0.085);
  border-color: rgba(250, 248, 245, 0.17);
}
.rate-card a.pending:hover, .svc-urgent a.pending:hover {
  color: var(--ivory); background: rgba(250, 248, 245, 0.13);
  border-color: rgba(250, 248, 245, 0.32);
}
.btn.pending {
  border: 1px solid rgba(25, 23, 19, 0.18);
  background: rgba(25, 23, 19, 0.045);
  color: var(--ink-soft); border-radius: var(--r-pill); font-size: var(--fs-small);
  padding: 0.9em 1.9em; cursor: help;
  /* stated, not inherited: the pending control keeps the pill so it sits on the live
     CTA's baseline and width rhythm, and carries the annotation's tracked caps so the
     two are never mistaken for each other at a glance. */
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.btn.pending:hover {
  background: rgba(25, 23, 19, 0.075); color: var(--ink);
  border-color: rgba(25, 23, 19, 0.3);
}

/* ---------- hero (split, frameless: white-cyc photo blends into ivory) ---------- */
.hero { padding-block: clamp(1.5rem, 4vw, 4rem) 0; }
.hero-grid {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center;
}
.hero-grid > * { min-width: 0; }  /* grid tracks must not be floored by a long display word */
.hero-grid.flip { grid-template-columns: 5fr 7fr; }
.hero-grid.flip .hero-copy { order: 2; }
.hero-grid.flip .hero-photo { order: 1; }
.hero-copy .kicker { margin-bottom: var(--sp-3); }
.hero-copy h1 { margin-bottom: var(--sp-3); }
.hero-lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 34rem; margin-bottom: var(--sp-3); }
.hero-where { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: var(--sp-3); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; align-items: center; }
.hero-photo img.blend { mix-blend-mode: multiply; }
.hero-photo img { width: 100%; max-height: 84vh; object-fit: contain; object-position: center bottom; }

@media (max-width: 860px) {
  .hero-grid, .hero-grid.flip { grid-template-columns: 1fr; }
  .hero-grid.flip .hero-photo { order: 2; }
  .hero-grid.flip .hero-copy { order: 1; }
  .hero-photo img { max-height: 58vh; }
}

/* one orchestrated entrance — hero only */
.rise > * { animation: rise 0.7s cubic-bezier(0.22, 0.7, 0.3, 1) both; }
.rise > *:nth-child(2) { animation-delay: 0.08s; }
.rise > *:nth-child(3) { animation-delay: 0.16s; }
.rise > *:nth-child(4) { animation-delay: 0.24s; }
.rise > *:nth-child(5) { animation-delay: 0.32s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise > * { animation: none; } }

/* ---------- pathway doors (quiet index, not app tiles) ---------- */
.doors-section { padding-block: var(--sp-5) var(--sp-6); }
.doors { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2.5rem; }
.doors li { border-top: 1px solid var(--sand-line); }
.doors a { display: block; padding: 1.4rem 0 1.8rem; text-decoration: none; }
.door-n { font: italic 400 0.9375rem var(--font-display); color: var(--sand-mute); display: block; margin-bottom: 0.9rem; }
.door-label { font-family: var(--font-display); font-size: 1.4375rem; line-height: 1.2; display: block; margin-bottom: 0.45rem; }
.door-to { font-size: var(--fs-kick); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.door-to::after { content: "\2009\2192"; /* thin space, not a word space (R1 P3-13) */ color: var(--bronze); display: inline-block; transition: transform 0.18s ease; }
.doors a:hover .door-label { color: var(--bronze); }
.doors a:hover .door-to::after { transform: translateX(4px); }
.doors .door-now .door-label { font-weight: 600; }
/* one shared baseline for the "to" links so a wrapping label (door 03) can't leave
   ragged link heights at 1440 (R1 P2-10) */
.doors li { display: flex; }
.doors a { display: flex; flex-direction: column; width: 100%; }
.doors .door-to { margin-top: auto; padding-top: 0.2rem; }
@media (max-width: 960px) { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .doors { grid-template-columns: 1fr; }
  .doors a { padding: 1.1rem 0 1.3rem; }
  /* the doors→"Quién soy" gap ran to ~1.5 phone screens of raw ivory (R1 P2-6) */
  .doors-section { padding-block: var(--sp-4) var(--sp-4); }
  .section { padding-block: var(--sp-4); }
  .statement { padding-block: var(--sp-5); }
}

/* ---------- section scaffolding: offset editorial grid ---------- */
.section { padding-block: var(--sp-5); }
.section-tint { background: var(--ivory-deep); }
.offset { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(1.5rem, 4vw, 5rem); align-items: start; }
.offset > header .kicker { margin-bottom: var(--sp-2); }
/* a section lead belongs under its own h2, not floating in the opposite column (R1 P2-9) */
header.plumb h2 + .lead { margin-top: 0.8rem; }
.offset > header h2 { max-width: 16ch; }
@media (max-width: 860px) { .offset { grid-template-columns: 1fr; } }

.prose > p + p { margin-top: 1.2em; }
.prose strong { font-weight: 700; }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); }

/* custom list marker (never default bullets) */
.marked { list-style: none; }
.marked > li { position: relative; padding-left: 1.9rem; }
.marked > li + li { margin-top: 1.4em; }
.marked > li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 1.1rem; height: 1px; background: var(--bronze);
}

/* ---------- services index (home) ---------- */
.svc { border-top: 1px solid var(--sand-line); }
.svc-row {
  display: grid; grid-template-columns: 9rem 1fr 1.3fr auto;
  gap: clamp(1.25rem, 3vw, 3rem); align-items: center;
  padding-block: 2.2rem; border-bottom: 1px solid var(--sand-line);
}
.svc-row .svc-thumb { width: 9rem; }
.svc-row .svc-thumb img { mix-blend-mode: multiply; }
.svc-row h3 a { text-decoration: none; }
.svc-row h3 a:hover { color: var(--bronze); }
.svc-row p { font-size: var(--fs-small); color: var(--ink-soft); }
.svc-where { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--ink-soft); letter-spacing: 0.02em; }
.svc-go { font-size: 1.4rem; color: var(--bronze); text-decoration: none; }
.svc-go:hover { transform: translateX(3px); }
@media (max-width: 860px) {
  .svc-row { grid-template-columns: 5.5rem 1fr; grid-template-rows: auto auto; }
  .svc-row .svc-thumb { width: 5.5rem; grid-row: 1 / 3; }
  .svc-row p { grid-column: 2; }
  .svc-go { display: none; }
}
/* phone: 70-px stamps wasted the photography — bigger, cropped to the working body
   rather than the whole standing figure (R1 P2-8) */
@media (max-width: 560px) {
  .svc-row { grid-template-columns: 8.5rem 1fr; gap: 1.1rem; align-items: start; }
  .svc-row .svc-thumb { width: 8.5rem; }
  .svc-row .svc-thumb img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center 18%; }
}

/* urgent service band — the one permitted strong contrast */
.svc-urgent {
  background: var(--ink); color: var(--ivory);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  margin-top: var(--sp-4);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.svc-urgent h3 { color: var(--ivory); margin-bottom: 0.7rem; }
.svc-urgent p { color: #D9D2C4; font-size: var(--fs-small); }
.svc-urgent .rate { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ivory); line-height: 1.3; margin-bottom: 1.2rem; max-width: none; }
.svc-urgent .btn { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.svc-urgent .btn:hover { background: var(--sand); border-color: var(--sand); }
.svc-urgent a:not(.btn) { color: var(--ivory); }
@media (max-width: 860px) { .svc-urgent { grid-template-columns: 1fr; } }

/* ---------- pull-quote (oversized display treatment) ---------- */
.pullquote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.625rem, 2.6vw + 0.6rem, 2.5rem);
  line-height: 1.25; letter-spacing: -0.005em;
  max-width: 26ch; text-wrap: balance;
}
.pullquote + .attrib { margin-top: 1.1rem; font-size: var(--fs-kick); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- about teaser (photo overlaps tint band) ---------- */
.about-teaser { position: relative; }
.about-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.about-teaser .about-grid .photo { margin-bottom: calc(-1 * var(--sp-5)); }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  /* stacked, the portrait fills its column: a 22rem box left a void to its right for a
     whole band at 768 (R1 COMP balance FAIL, es-sobre-mi-768-s1) */
  .about-grid .photo { margin-bottom: 0 !important; max-width: none; }
}
/* phone: the teaser was reserving a screen of empty tint around the portrait (R1 P2-6) */
@media (max-width: 560px) {
  .about-teaser .about-grid { gap: var(--sp-3); }
}

/* ---------- portrait plate: the non-clinical photographs, brought into the system ----------
   Three images were not shot on the white cyc (brown backdrop + the B&W cover), so they
   cannot blend frameless into ivory the way the treatment set does — they read as
   contraband from another site (R1 P1-5). ONE treatment, applied identically wherever
   they appear (home about-teaser, /sobre-mi hero, /sobre-mi + /about portrait): a warm
   sand-toned monochrome grade that puts them at the page's own temperature.
   R2: the first grade (sepia .5 / saturate 1.45) tipped the white linen shirt into
   cream-yellow — it read as an applied filter, not a grade. Halved the sepia and pulled
   the saturation back so the tone is warm-NEUTRAL: linen stays white, skin stays skin,
   the warmth is the page's, not a wash over it. */
.plate img {
  filter: grayscale(1) sepia(0.26) saturate(1.12) brightness(1.08) contrast(0.96);
}
/* white-cyc photographs blend into whatever ground they sit on — including the tinted
   bands, where the backdrop otherwise showed its cool rectangle (R1 P2-11). The plated
   portraits are the exception: they are graded, never blended. */
.about-grid .photo img { mix-blend-mode: multiply; }
.about-grid .photo.plate img, .hero-photo.plate img { mix-blend-mode: normal; }

/* ---------- history block (attributed 19th-century doctrine) ---------- */
.history { background: var(--ivory-deep); padding: clamp(2rem, 4vw, 3.5rem); }
.history .era { font: italic 400 1rem var(--font-display); color: var(--bronze); display: block; margin-bottom: 0.6rem; }
.history h3 { margin-bottom: 1.4rem; }
.history ol { list-style: none; counter-reset: pr; }
.history ol li { counter-increment: pr; position: relative; padding-left: 2.6rem; }
.history ol li + li { margin-top: 1.5em; }
.history ol li::before {
  content: counter(pr, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1em;
  font: italic 400 1rem var(--font-display); color: var(--sand-mute);
}
.history blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; line-height: 1.5; }
.history .note { margin-top: 1.6rem; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- statement (closing motto) ---------- */
.statement { text-align: left; padding-block: var(--sp-6); }
.statement p {
  font-family: var(--font-display); font-size: clamp(1.875rem, 3.4vw + 0.6rem, 3.25rem);
  line-height: 1.15; max-width: 22ch; letter-spacing: -0.01em;
}
.statement em { font-style: italic; color: var(--bronze); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--sand-line); }
.faq details { border-bottom: 1px solid var(--sand-line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem;
  align-items: baseline; padding: 1.2rem 0;
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-weight: 400; font-size: 1.5rem; color: var(--bronze); flex: none; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 1.4rem; color: var(--ink-soft); }
.faq details > div p + p { margin-top: 0.8em; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- contact block ---------- */
.contact { background: var(--ivory-deep); }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 4vw, 5rem); }
.contact dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.8rem 1.4rem; align-items: baseline; }
.contact dt { font-size: var(--fs-kick); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.contact dd { font-size: var(--fs-small); }
.contact .langs-note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-soft); max-width: 34rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .contact dl { grid-template-columns: 1fr; gap: 0.2rem 0; } .contact dd { margin-bottom: 0.8rem; } }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--sand-line); padding-block: var(--sp-5) var(--sp-4); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); margin-bottom: var(--sp-4); }
.foot-tag { font: italic 400 1.375rem/1.4 var(--font-display); max-width: 20ch; margin-top: 0.9rem; }
.site-foot h4 { font-size: var(--fs-kick); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.9rem; font-weight: 600; }
.site-foot ul { list-style: none; }
.site-foot li { font-size: var(--fs-small); margin-bottom: 0.45rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; border-top: 1px solid var(--sand-line); padding-top: 1.4rem; font-size: 0.8125rem; color: var(--ink-soft); }
.foot-legal .langs { margin-left: auto; }
/* the single live legal link at launch (Cookies) — padded to a >=24px tap target (WCAG 2.5.8) */
.foot-legal > a { display: inline-block; padding-block: 0.35rem; }

/* ---------- legal pages (/cookies/) — reuse the offset editorial grid ---------- */
.legal-head { padding-bottom: 0; }
.legal-head .lead { margin-top: var(--sp-3); }
.legal-head .small-note { margin-top: 0.8rem; }
.legal-doc .offset + .offset { margin-top: var(--sp-5); }
.legal-doc .offset > header h2 { font-size: var(--fs-h3); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr; } .foot-legal .langs { margin-left: 0; } }

/* ---------- sticky emergency pill ---------- */
.sos-pill {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1500;
  background: var(--ink); color: var(--ivory);
  font: 600 0.875rem/1 var(--font-body); letter-spacing: 0.04em;
  padding: 0.95em 1.5em; border-radius: var(--r-pill);
  text-decoration: none; border: 1px solid var(--ink);
  box-shadow: 0 4px 18px rgba(25, 23, 19, 0.18);
}
.sos-pill:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); color: var(--ivory); }
body.page-urgent .sos-pill { display: none; }

/* The pill yields. It is docked (out of the way) whenever a real call-to-action —
   the hero CTA, the contact block, the footer — is on screen, and it never appears
   over the hero on load; JS adds .sos-managed and toggles .is-docked
   (R1 P1-2: it sat on top of the black booking CTA at 375/768). */
.sos-managed .sos-pill, .sos-managed .urgent-bar {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sos-managed .sos-pill.is-docked, .sos-managed .urgent-bar.is-docked {
  opacity: 0; transform: translateY(0.9rem); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sos-managed .sos-pill, .sos-managed .urgent-bar { transition: none; }
  .sos-managed .sos-pill.is-docked, .sos-managed .urgent-bar.is-docked { transform: none; }
}
@media (max-width: 640px) {
  /* On the phone a floating pill has nowhere to float: it lands on the pullquote, the
     lead, the CTA. So it docks as a slim full-width bar and the page reserves its
     height — it covers nothing, ever (R1 P1-2).
     The reservation lives on the FOOTER, not on the body: body padding left a dead
     ivory strip below the footer at page end (where the bar is docked anyway), while
     footer padding reads as the footer's own breathing room and does the same job of
     keeping the bar off the last line (R2). */
  .site-foot { padding-bottom: 3.6rem; }
  /* and when the bar is actually docked — which it always is once the footer is on
     screen — the footer drops back to its designed bottom padding, so the page ends
     on the langs row instead of on reserved emptiness. */
  html.sos-managed:has(.sos-pill.is-docked) .site-foot { padding-bottom: var(--sp-4); }
  .sos-pill {
    right: 0; left: 0; bottom: 0; border-radius: 0; border-width: 1px 0 0;
    text-align: center; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.95em 1rem calc(0.95em + env(safe-area-inset-bottom));
    box-shadow: none;
  }
}

/* ---------- /urgencias — highest contrast, simplest ---------- */
.urgent-hero { padding-block: clamp(2rem, 5vw, 4.5rem) var(--sp-4); }
/* the page was a single left-hung column: every desktop slice had an empty right half
   (R1 P2-7 / COMP balance FAIL). Rate card + 112 line move into a second column. */
.urgent-grid {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start;
}
.urgent-grid > * { min-width: 0; }
.urgent-grid .rate-card { margin-block: 0 var(--sp-3); max-width: none; }
.urgent-grid .disclaimer-112 { max-width: none; }
@media (max-width: 860px) {
  .urgent-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}
.urgent-hero .kicker { margin-bottom: var(--sp-3); }
.urgent-hero h1 { max-width: 14ch; margin-bottom: var(--sp-3); }
.urgent-hero .lead { max-width: 36rem; }
.urgent-cta { display: grid; gap: 0.9rem; max-width: 26rem; margin-block: var(--sp-3); }
.urgent-cta .btn { font-size: 1.0625rem; padding: 1.05em 1.6em; }
.rate-card {
  background: var(--ink); color: var(--ivory);
  padding: clamp(1.75rem, 4vw, 2.75rem); max-width: 36rem; margin-block: var(--sp-4);
}
.rate-card .rate-line { font-family: var(--font-display); font-size: clamp(1.375rem, 2vw + 0.5rem, 1.875rem); line-height: 1.35; max-width: none; }
.rate-card .rate-sub { margin-top: 1rem; font-size: var(--fs-small); color: #D9D2C4; }
.disclaimer-112 { font-size: var(--fs-small); color: var(--ink-soft); border-top: 1px solid var(--sand-line); border-bottom: 1px solid var(--sand-line); padding-block: 0.9rem; max-width: 36rem; }
@media (max-width: 640px) {
  /* same reservation, same reason: the footer absorbs the docked bar's height */
  body.page-urgent .site-foot { padding-bottom: 5.4rem; }
  html.sos-managed:has(.urgent-bar.is-docked) body.page-urgent .site-foot { padding-bottom: var(--sp-4); }
  .urgent-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--ivory); border-top: 1px solid var(--sand-line);
  }
}
@media (min-width: 641px) { .urgent-bar { display: none; } }

/* ---------- /mayores readability ---------- */
body.page-mayores { font-size: 1.125rem; }

/* ---------- utilities ---------- */
.center-measure { max-width: var(--measure); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-3 { margin-bottom: var(--sp-3); }
.photo-block img { width: 100%; }
.small-note { font-size: 0.8125rem; color: var(--ink-soft); }