/* =============================================================================
   FOCERCOL — styles.css · v20261021
   Design system + component library for every page of focercol.com.
   One file, no build step, no preprocessor. Mobile-first.

   Sections (hosting playbook §6):
     1. Tokens            — palette, semantic colors, type, layout, motion
     2. Reset & base
     3. Utilities         — container, section themes, sr-only, layout helpers
     4. Typography        — titles, lead, eyebrow, mono labels, links, prose
     5. Components        — buttons, chips, tags, cards, forms, FAQ, tables,
                            holographic certificate, stepper, bento, marquee…
     6. Sections          — header, mobile menu, heroes, page sections, footer,
                            floating WhatsApp, splash, catalog, legal, 404…
     7. Effects           — reveal system, aurora, orbit, keyframes
     8. Responsive        — 540 · 720 · 960 · 1280 · 1600 (only these)
     9. Reduced motion    — only intrusive effects are switched off
    10. Forced colors     — states restored with system colours (High Contrast)

   Naming: BEM-ish (.block, .block__element, .block--modifier).
   Themes: light by default; add .theme-dark to any section to flip tokens.
   Full HTML patterns: build-kit/COMPONENTS.md
   ========================================================================== */


/* =============================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Palette (exact names from the art direction) --- */
  --navy-950: #050E1F;
  --navy-900: #0A1F3C;
  --navy-800: #10294D;
  --navy-700: #173766;
  --blue-600: #1F5FD6;
  --blue-500: #2F7BFF;
  --blue-300: #8DB8FF;
  --sky-100:  #E8F1FF;
  --gold-400: #F2B53A;   /* RARE accent: seal + splash dot only (≤3 uses per page) */
  --ink:      #0A1F3C;
  --ink-2:    #3D4B60;
  --mute:     #6B7A90;
  --line:     rgba(10, 31, 60, .10);
  --paper:    #F5F7FA;
  --white:    #FFFFFF;

  /* --- Support tones (derived, never new hues) --- */
  --mute-strong: #56657B;            /* AA (≥5:1) for small text on white/paper */
  --line-strong: rgba(10, 31, 60, .18);
  --field-border: #7D8A9E;           /* form control outlines: 3.5:1 on white, 3.26:1 on paper (WCAG 1.4.11) */
  --blue-700: #1A51B8;               /* hover/pressed of blue-600 */
  --sky-50: #F4F8FF;

  /* --- Semantic tokens (light theme = default) --- */
  --bg: var(--white);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--mute-strong);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --surface: var(--white);
  --surface-2: var(--paper);
  --surface-sunk: #EEF2F7;
  --link: var(--blue-600);
  --link-hover: var(--blue-700);
  --accent: var(--blue-600);
  --accent-soft: var(--sky-100);
  --eyebrow: var(--blue-600);
  --focus: var(--blue-500);
  --selection: rgba(47, 123, 255, .22);

  /* --- Type --- */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wdth-hero: 112%;      /* Archivo width axis: expanded headlines (art direction 112–118) */
  --wdth-display: 114%;
  --wdth-title: 106%;
  --wdth-max: 125%;

  /* Fluid scale (390 → 1440) */
  --fs-hero: clamp(2.75rem, 1.1rem + 7.2vw, 6.25rem);     /* 1 column (<960) */
  --fs-xl: clamp(2.5rem, 1.35rem + 4.2vw, 5.25rem);
  --fs-l: clamp(2.125rem, 1.35rem + 3vw, 4.125rem);
  --fs-m: clamp(1.625rem, 1.2rem + 1.55vw, 2.5rem);
  --fs-s: clamp(1.1875rem, 1.08rem + .42vw, 1.4375rem);
  --fs-lead: clamp(1.0625rem, .98rem + .4vw, 1.3125rem);
  --fs-body: clamp(1.0625rem, 1.03rem + .12vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-xs: .8125rem;
  --fs-mono: .75rem;
  --fs-mono-s: .6875rem;

  /* --- Layout --- */
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 780px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(88px, 12vw, 168px);
  --section-y-s: clamp(64px, 8vw, 112px);
  --gap: clamp(16px, 2.2vw, 32px);
  --gap-l: clamp(32px, 5vw, 80px);
  --header-h: 64px;

  /* --- Shape --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-card: 20px;
  --r-tile: 28px;
  --r-pill: 999px;

  /* --- Depth --- */
  --shadow-1: 0 1px 2px rgba(10, 31, 60, .06), 0 1px 1px rgba(10, 31, 60, .04);
  --shadow-2: 0 2px 4px rgba(10, 31, 60, .04), 0 14px 32px -14px rgba(10, 31, 60, .20);
  --shadow-3: 0 6px 12px rgba(10, 31, 60, .04), 0 36px 72px -28px rgba(10, 31, 60, .34);
  --glow: 0 12px 32px -12px rgba(47, 123, 255, .75);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);
  --dur-1: .2s;
  --dur-2: .45s;
  --dur-3: .8s;
  --dur-4: 1.2s;

  /* --- Layers --- */
  --z-float: 80;
  --z-menu: 90;
  --z-header: 100;
  --z-splash: 1000;
  --z-skip: 1100;

  color-scheme: light;
}

/* Dark chapter tokens — add .theme-dark to a section/footer/hero */
.theme-dark {
  --bg: var(--navy-950);
  --fg: #FFFFFF;
  --fg-2: rgba(232, 241, 255, .76);
  --fg-3: rgba(232, 241, 255, .58);
  --rule: rgba(255, 255, 255, .11);
  --rule-strong: rgba(255, 255, 255, .22);
  --surface: rgba(255, 255, 255, .035);
  --surface-2: var(--navy-900);
  --surface-sunk: rgba(0, 0, 0, .25);
  --link: var(--blue-300);
  --link-hover: #FFFFFF;
  --accent: var(--blue-500);
  --accent-soft: rgba(47, 123, 255, .14);
  --eyebrow: var(--blue-300);
  --focus: var(--blue-300);
  --selection: rgba(141, 184, 255, .32);
  --field-border: rgba(255, 255, 255, .38);   /* 3.53:1 on navy-950 */
  color-scheme: dark;
  background-color: var(--bg);
  color: var(--fg);
}


/* =============================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  scroll-padding-bottom: 88px;         /* focus scrolling keeps targets clear of the floating button */
  interpolate-size: allow-keywords;   /* smooth <details> where supported */
  background: var(--navy-950);         /* overscroll color under the dark footer */
}

body {
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  overflow-x: clip;                          /* NOT hidden: keeps position:sticky alive */
}

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
svg { overflow: visible; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
[hidden] { display: none !important; }
::selection { background: var(--selection); color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }   /* skip-link target (main) */

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease-out); }


/* =============================================================================
   3. UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* Sections & themes */
.section { position: relative; padding-block: var(--section-y); background: var(--bg); color: var(--fg); }
.section--tight { padding-block: var(--section-y-s); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--paper { --bg: var(--paper); }
.section--sky   { --bg: var(--sky-50); }
.section--dark  { --bg: var(--navy-950); }           /* use together with .theme-dark */
.section--navy  { --bg: var(--navy-900); }           /* use together with .theme-dark */
.section--rule  { border-top: 1px solid var(--rule); }

/* Accessibility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: var(--z-skip);
  padding: .7rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy-900);
  font-weight: 600;
  font-size: var(--fs-small);
  box-shadow: var(--shadow-3);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }

/* Layout helpers */
.stack > * + * { margin-top: var(--stack, 1rem); }
.stack-s { --stack: .5rem; }
.stack-l { --stack: 1.5rem; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, .75rem); }
.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-s { max-width: 44ch; }
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: .75rem; }
.mt-m { margin-top: 1.5rem; }
.mt-l { margin-top: clamp(2rem, 4vw, 3rem); }
.mt-xl { margin-top: clamp(3rem, 7vw, 5.5rem); }
.mb-0 { margin-bottom: 0 !important; }
.hairline { height: 1px; border: 0; background: var(--rule); }
.nowrap { white-space: nowrap; }
.u-line { display: block; }          /* one sentence per line inside a display title: <span class="u-line">…</span> */
.is-hidden { display: none !important; }
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* Icon (inline SVG sprite: <svg class="icon"><use href="#i-arrow"/></svg>) */
.icon {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.2em;
}
.icon--s  { width: 1em; height: 1em; }
.icon--l  { width: 1.75em; height: 1.75em; }
.icon--xl { width: 2.5em; height: 2.5em; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* =============================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* Display families: Archivo expanded, tight tracking */
.title-hero, .title-xl, .title-l, .title-m, .title-s,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
}

h1, .title-xl {
  font-size: var(--fs-xl);
  font-weight: 800;
  font-stretch: var(--wdth-display);
  line-height: .98;
  letter-spacing: -.035em;
}
h2, .title-l {
  font-size: min(var(--fs-l), 8.6vw);   /* 31 px at 360: «Tres compromisos.» fits one line */
  font-weight: 800;
  font-stretch: var(--wdth-display);
  line-height: 1;
  letter-spacing: -.032em;
}
h3, .title-m {
  font-size: var(--fs-m);
  font-weight: 750;
  font-stretch: var(--wdth-title);
  line-height: 1.06;
  letter-spacing: -.025em;
}
h4, .title-s {
  font-size: var(--fs-s);
  font-weight: 700;
  font-stretch: var(--wdth-title);
  line-height: 1.18;
  letter-spacing: -.015em;
}
.title-hero {
  font-size: min(var(--fs-hero), 10svh);   /* the largest type on the page (90 px at 1440 × 900) */
  font-weight: 800;
  font-stretch: var(--wdth-hero);
  line-height: .95;
  letter-spacing: -.038em;
}
/* Gradient text accent for the second half of a headline (dark chapters) */
.title-accent {
  background: linear-gradient(100deg, #FFFFFF 0%, var(--blue-300) 55%, #B9D3FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

p { max-width: 68ch; }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
  letter-spacing: -.006em;
}
.text-s { font-size: var(--fs-small); line-height: 1.6; }
.text-xs { font-size: var(--fs-xs); line-height: 1.55; }
.text-2 { color: var(--fg-2); }
.text-3 { color: var(--fg-3); }
strong, b { font-weight: 600; }

/* Mono micro-labels: codes, norms, step numbers */
.mono, .label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.label { color: var(--fg-3); }
.mono-s { font-size: var(--fs-mono-s); }
.mono-m { font-size: .8125rem; }

/* Eyebrow: ● MONO UPPERCASE (write the text without the ●; CSS draws it) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eyebrow);
  max-width: none;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent);
}
.eyebrow--plain::before { display: none; }
[data-count-to] { display: inline-block; font-variant-numeric: tabular-nums; }

/* Links */
.link {
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color var(--dur-1), text-decoration-color var(--dur-1);
}
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--link-hover); text-decoration-color: currentColor; } }

/* Arrow link: "Ver más →"
   Inline text flow (not flex): when the label wraps, the arrow follows the last word instead of being
   pushed to the far edge of a full-width text box. The last word + icon sit in <span class="nowrap"> in
   the HTML, so the arrow never drops to a line of its own. Padding (not min-height) gives the 44 px
   touch target and keeps a one-line label vertically centred in it. */
.link-arrow {
  display: inline-block;
  align-items: center;              /* used where a page layer turns it into a flex row (404 link index) */
  min-height: 44px;
  padding-block: calc((44px - 1.3em) / 2);   /* touch target (text stays the same size) */
  color: var(--link);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: -.005em;
  line-height: 1.3;
  transition: color var(--dur-1);
}
.link-arrow .icon { display: inline-block; width: 1.1em; height: 1.1em; margin-left: .2em; vertical-align: -.2em; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover { color: var(--link-hover); } }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .icon { transform: translateX(4px); } }
.link-arrow--l { font-size: var(--fs-body); }

/* Citation in answers: (Res. 4272 de 2021) */
.cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .78em;
  letter-spacing: .02em;
  color: var(--fg-3);
  display: inline-block;   /* a short citation moves to the next line whole (never «(Res. 4272 de» / «2021)») … */
  max-width: 100%;         /* … and one longer than the column wraps inside it instead of being clipped */
}

/* Long-form text (privacy policy, notes) */
.prose { color: var(--fg-2); font-size: var(--fs-body); line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose > section > * + * { margin-top: 1em; }                    /* legal pages: same rhythm inside each <section> (h2 + * / h3 below win by order) */
.prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-stretch: var(--wdth-title);
  letter-spacing: -.022em;
  color: var(--fg);
  margin-top: 2.6em;
  padding-top: 1.1em;
  border-top: 1px solid var(--rule);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h2:first-child { margin-top: 0; }
.prose > section > h2 { margin-top: 0; }                         /* legal pages: one <section> per heading */
.prose > section + section { margin-top: 2.6em; }
.prose > section:first-child > h2 { border-top: 0; padding-top: 0; }
.prose h3 { font-size: var(--fs-s); color: var(--fg); margin-top: 2em; }
.prose h2 + *, .prose h3 + * { margin-top: .9em; }
.prose strong { color: var(--fg); }
.prose a:not([class]) { color: var(--link); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--accent); font-weight: 600; }
.prose dl:not([class]) { display: grid; gap: .6em 1.5em; }
.prose dl:not([class]) dt { font-weight: 600; color: var(--fg); }
.prose dl:not([class]) dd { margin-bottom: .4em; }


/* =============================================================================
   5. COMPONENTS
   ========================================================================== */

/* ---------- 5.1 Buttons -------------------------------------------------- */
.btn {
  --btn-bg: var(--blue-600);
  --btn-fg: #FFFFFF;
  --btn-bd: transparent;
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(10, 31, 60, .2);
  --btn-glow: 0 16px 30px -14px rgba(31, 95, 214, .8);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .75em 1.45em;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.15;
  letter-spacing: -.006em;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-1) ease,
    border-color var(--dur-1) ease,
    color var(--dur-1) ease;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { --btn-bg: var(--blue-700); transform: translateY(-2px); box-shadow: var(--btn-shadow), var(--btn-glow); } }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .icon { transform: translateX(3px); } }
.btn[disabled], .btn.is-busy { opacity: .55; pointer-events: none; }

.btn--primary { /* default look; explicit class for clarity */ }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--rule-strong);
  --btn-shadow: none;
  --btn-glow: none;
}
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--fg) 5%, transparent); --btn-bd: var(--fg); } }
.btn--light {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--navy-900);
  --btn-shadow: 0 1px 2px rgba(5, 14, 31, .3);
  --btn-glow: 0 16px 30px -14px rgba(141, 184, 255, .7);
}
@media (hover: hover) and (pointer: fine) { .btn--light:hover { --btn-bg: var(--sky-100); } }
.btn--sm { min-height: 40px; padding: .55em 1.1em; font-size: .875rem; }
@media (pointer: coarse) { .btn--sm { min-height: 44px; } }   /* touch tablets: header CTA ≥ 44 px */
.btn--lg { min-height: 56px; padding: .9em 1.7em; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* ---------- 5.2 Tags, chips, badges, pending ----------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 26px;
  padding: .2em .75em;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-s);
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; flex: none; }
.tag--plain::before { display: none; }
.tag--formacion { background: var(--sky-100); border-color: rgba(31, 95, 214, .18); color: var(--blue-700); }
.tag--formacion::before { background: var(--blue-500); opacity: 1; }
.tag--certificacion { background: var(--navy-900); border-color: var(--navy-900); color: #FFFFFF; }
.tag--certificacion::before { background: var(--blue-300); opacity: 1; }
.tag--mixta { background: var(--white); border-color: rgba(31, 95, 214, .45); color: var(--navy-900); }
.tag--mixta::before { width: 8px; height: 8px; opacity: 1; background: linear-gradient(90deg, var(--blue-300) 50%, var(--navy-900) 50%); }
.theme-dark .tag { background: rgba(255, 255, 255, .06); color: var(--fg-2); }

.chips {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x: auto;
  overflow-y: visible;
  padding-block: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;                 /* touch target: the catalog filter is the page's main control */
  padding: .45em .95em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--fg); } }
.chip:active { transform: scale(.97); }
.chip__count {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  padding: .12em .5em;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--fg-3);
}
.chip[aria-current="true"], .chip[aria-pressed="true"], .chip.is-active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #FFFFFF;
}
.chip[aria-current="true"] .chip__count, .chip[aria-pressed="true"] .chip__count, .chip.is-active .chip__count {
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .86);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .35em .8em;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Norm reference: "Alineado con  RES. 4272 / 2021" */
.norm-tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  max-width: 100%;
  font-size: .8125rem;
  color: var(--fg-3);
  line-height: 1.35;
}
.norm-tag__code {
  display: inline-block;
  padding: .3em .65em;
  border-left: 2px solid var(--blue-600);
  border-radius: 0 6px 6px 0;
  background: var(--sky-50);
  color: var(--navy-900);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.theme-dark .norm-tag__code { background: rgba(141, 184, 255, .1); color: #FFFFFF; border-left-color: var(--blue-500); }

/* Visible placeholder for data the client still has to provide: quiet, honest, not link-like.
   Default = inline in a sentence: it takes the font of the line it sits in (mono in .legal-meta, body
   size in a paragraph) and stays on the baseline. Where the placeholder IS the whole value (channel
   cards, footer and CTA channel rows, meta lists) it keeps the standalone 14 px sans look. */
.pending {
  display: inline;
  font: inherit;
  font-size: .92em;
  letter-spacing: inherit;
  color: var(--fg-3);
  white-space: nowrap;
}
.pending::before { content: ""; display: inline-block; vertical-align: .18em; width: 6px; height: 6px; margin-right: .45em; border-radius: 50%; background: rgba(141, 184, 255, .5); }
.channel-card .pending, .site-footer .pending, .meta-list .pending, .channels .pending {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
}
.channel-card .pending::before, .site-footer .pending::before, .meta-list .pending::before, .channels .pending::before { flex: none; margin-right: 0; vertical-align: 0; }

/* ---------- 5.3 Section head --------------------------------------------- */
.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(44px, 6.5vw, 88px);
}
.section-head__main { display: grid; gap: 1.25rem; justify-items: start; }
.section-head > .eyebrow, .section-head__main > .eyebrow { justify-self: start; }
.section-head h2, .section-head .title-l { max-width: 20ch; }
.section-head .lead { max-width: 44ch; }
.section-head--center { justify-items: center; text-align: center; }
.section-head--center > .eyebrow { justify-self: center; }
.section-head--center h2, .section-head--center .title-l, .section-head--center .lead { margin-inline: auto; }
.section-head--tight { margin-bottom: clamp(28px, 4vw, 48px); }

/* ---------- 5.4 Cards ---------------------------------------------------- */
.card-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); list-style: none; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  height: 100%;
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--fg);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color var(--dur-2);
}
@media (hover: hover) and (pointer: fine) { .card--hover:hover, a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: transparent; } }
@media (hover: hover) and (pointer: fine) { .theme-dark .card--hover:hover, .theme-dark a.card:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); border-color: var(--rule-strong); } }
.card--paper { background: var(--surface-2); border-color: transparent; }
.card--sky { background: var(--sky-100); border-color: transparent; }
.card--navy { background: var(--navy-900); border-color: transparent; }   /* + .theme-dark */
.card__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}
.theme-dark .card__icon { color: var(--blue-300); }
.card__icon .icon { width: 24px; height: 24px; }
.card__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--eyebrow); }
.card__title { font-family: var(--font-display); font-size: clamp(1.1875rem, 1.08rem + .4vw, 1.4375rem); font-weight: 700; font-stretch: var(--wdth-title); letter-spacing: -.018em; line-height: 1.18; color: var(--fg); }
.card__text { font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); }
.card__answer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--rule); font-weight: 600; font-size: var(--fs-small); color: var(--fg); }
.card__foot { margin-top: auto; padding-top: .5rem; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* stretched link */

/* ---------- 5.5 Media (graded photos) ------------------------------------ */
.media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-tile);
  background: var(--navy-800);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--16x10 { aspect-ratio: 16 / 10; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--1x1 { aspect-ratio: 1; }
/* Duotone-ish grade: pulls every photo (hi-vis orange included) toward the navy palette.
   Colour comes back on hover (.sector-card) as a deliberate interaction moment. */
.media--graded img { filter: saturate(.6) contrast(1.06) brightness(.94); transition: transform 1.2s var(--ease-out), filter .8s var(--ease-out); }
.media--graded::before,
.media--graded::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.media--graded::before { background: var(--navy-800); mix-blend-mode: color; opacity: .42; transition: opacity .8s var(--ease-out); }
.media--graded::after { background: linear-gradient(180deg, rgba(5, 14, 31, 0) 46%, rgba(5, 14, 31, .55) 100%); }
.theme-dark .media--graded::after {   /* dark chapters: sink the photo into the navy page */
  background:
    linear-gradient(90deg, rgba(5, 14, 31, .35), rgba(5, 14, 31, 0) 45%),
    linear-gradient(180deg, rgba(5, 14, 31, 0) 50%, rgba(5, 14, 31, .6));
}
.media--scrim-strong::after { background: linear-gradient(180deg, rgba(5, 14, 31, .1) 0%, rgba(5, 14, 31, .75) 100%); }
.media--no-scrim::after { display: none; }
.media__caption {
  position: absolute; z-index: 2;
  left: 18px; bottom: 16px; right: 18px;
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.media__caption a { position: relative; }
.media__caption a::after { content: ""; position: absolute; inset: -15px -6px; }   /* 44 px target; padding can't grow it (the figure clips) */
/* Art-directed crop: zoom into a point of the photo (the subject), so one file can be framed differently on
   two pages. style="--zoom:1.6; --zoom-at:61% 100%" (+ optional --zoom-pos = object-position; custom properties only). Scaling around a point inside
   the frame never uncovers an edge. Give the <img> a matching `sizes` (displayed width × zoom). */
.media--zoom img { object-position: var(--zoom-pos, 50% 50%); transform: scale(var(--zoom, 1.3)); transform-origin: var(--zoom-at, 50% 50%); }

/* ---------- 5.6 Breadcrumbs ---------------------------------------------- */
/* Quiet UI text, not a second label: the hero's mono eyebrow stays its only label (round-2 QA) */
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4em .65em;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  color: var(--fg-3);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: .65em; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--rule-strong); }   /* the separator stays at the end of its line when the trail wraps */
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; color: var(--fg-3); transition: color var(--dur-1); }   /* 44 px target, same visual rhythm */
@media (hover: hover) and (pointer: fine) { .breadcrumbs a:hover { color: var(--link); } }
.breadcrumbs [aria-current] { color: var(--fg-2); }

/* ---------- 5.7 Notices (form status, info boxes) ------------------------ */
.notice {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  max-width: 64ch;
}
.notice > .icon { color: var(--accent); margin-top: .15em; }
.notice__title { display: block; font-weight: 600; color: var(--fg); }
.notice--info { background: var(--sky-50); border-color: rgba(31, 95, 214, .2); }
.notice--success { background: var(--sky-100); border-color: rgba(31, 95, 214, .3); color: var(--navy-900); }
.notice--success > .icon { color: var(--blue-600); }
.notice--error { background: #FFF5F4; border-color: rgba(179, 38, 30, .28); color: #7A1A14; }
.notice--error > .icon { color: #B3261E; }
.theme-dark .notice { background: rgba(255, 255, 255, .05); }
.theme-dark .notice--success, .theme-dark .notice--info { background: rgba(47, 123, 255, .12); border-color: rgba(141, 184, 255, .3); color: var(--fg); }
@keyframes noticeIn { from { opacity: 0; transform: translateY(6px); } }
.notice.is-new { animation: noticeIn .5s var(--ease-out); }

/* ---------- 5.8 Forms ---------------------------------------------------- */
.form { display: grid; gap: 1.75rem; }
.form__grid { display: grid; gap: 1.15rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
.form-panel {
  padding: 20px 16px;                /* phones: fields get the width (≈288 px at 360) */
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.field { display: grid; align-content: start; gap: .45rem; min-width: 0; border: 0; }
.field--full { grid-column: 1 / -1; }
.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
}
.field__optional {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.field__hint { font-size: .8125rem; line-height: 1.5; color: var(--fg-3); }
/* Under a checkbox row: aligned with the label text, clear of the row's 44 px padding (a tap on the label
   text never lands on the link) */
.check__hint { padding-left: calc(22px + .8rem); margin-top: .35rem; }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  border: 1px solid var(--field-border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
  font-size: 1rem;              /* ≥16px avoids iOS zoom */
  line-height: 1.4;
  text-overflow: ellipsis;      /* a long placeholder / selected option ends in «…», never a hard cut */
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-1);
}
.field__input::placeholder { color: var(--fg-3); opacity: 1; }   /* 5.9:1 on white (WCAG 1.4.3) */
@media (hover: hover) and (pointer: fine) { .field__input:hover { border-color: color-mix(in srgb, var(--fg) 35%, transparent); } }
.field__input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(47, 123, 255, .18); }
textarea.field__input { min-height: 140px; resize: vertical; }
.field__select { position: relative; }
.field__select::after {
  content: "";
  position: absolute;
  right: 1.1rem; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.75px solid var(--fg-2);
  border-bottom: 1.75px solid var(--fg-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field__select select.field__input { padding-right: 2.75rem; cursor: pointer; }
.field__input[aria-invalid="true"], .field.is-invalid .field__input {
  border-color: #B3261E;
  box-shadow: 0 0 0 4px rgba(179, 38, 30, .1);
}
/* A focused invalid field must still show focus (WCAG 2.4.7): stronger red ring + the focus outline */
.field__input[aria-invalid="true"]:focus, .field.is-invalid .field__input:focus {
  border-color: #B3261E;
  box-shadow: 0 0 0 4px rgba(179, 38, 30, .22);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: #B3261E;
}
.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 16px; height: 16px;
  margin-top: .05em;
  border-radius: 50%;
  background: #B3261E;
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
}
.field__error:empty { display: none; }
.theme-dark .field__input { background: rgba(255, 255, 255, .04); }
.theme-dark .field__error { color: #FFB4AB; }
.theme-dark .field__error::before { background: #FFB4AB; color: var(--navy-950); }

/* Radio pills */
.choice-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice__ui {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .5rem 1.05rem .5rem .85rem;
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: .9375rem;
  font-weight: 500;
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.choice__ui::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--field-border);
  background: var(--surface);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.choice input:checked + .choice__ui { border-color: var(--blue-600); background: var(--sky-50); }
.choice input:checked + .choice__ui::before { border-color: var(--blue-600); box-shadow: inset 0 0 0 3.5px var(--surface), inset 0 0 0 8px var(--blue-600); }
.choice input:focus-visible + .choice__ui { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .choice:hover .choice__ui { border-color: var(--fg-3); } }

/* Checkbox */
.check {
  --check-pad: 11px;                 /* a one-line row is 23 px: the padding makes the label a 44 px target … */
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  min-height: 44px;
  padding-block: var(--check-pad);
  margin-block: calc(var(--check-pad) * -1);   /* … and the negative margin keeps the layout unchanged */
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--fg-2);
  cursor: pointer;
}
.check input { position: absolute; left: 0; top: var(--check-pad); width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.check__box {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: .05em;
  border: 1.5px solid var(--field-border);
  border-radius: 7px;
  background: var(--surface);
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
.check__box::after {
  content: "";
  width: 10px; height: 5.5px;
  margin-top: -2px;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(-45deg) scale(0);
  transition: transform .3s var(--ease-out);
}
.check input:checked + .check__box { background: var(--blue-600); border-color: var(--blue-600); }
.check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.check input[aria-invalid="true"] + .check__box { border-color: #B3261E; }
.check a { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.form__note { font-size: .8125rem; line-height: 1.5; color: var(--fg-3); }
.form__status:empty { display: none; }

/* ---------- 5.9 FAQ accordion (details/summary) -------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 650;
  font-stretch: 104%;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--fg);
  transition: color var(--dur-1);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
@media (hover: hover) and (pointer: fine) { .faq__q:hover { color: var(--link); } }
@media (hover: hover) and (pointer: fine) { .faq__q:hover .faq__icon { background: var(--blue-600); border-color: transparent; color: #FFFFFF; } }
.faq__q:focus-visible { outline-offset: 6px; }
.faq__icon {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  margin-top: -.2rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--fg);
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 1.75px;
  margin: -.875px 0 0 -6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--navy-900); border-color: var(--navy-900); color: #FFFFFF; }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.theme-dark .faq__item[open] .faq__icon { background: #FFFFFF; border-color: #FFFFFF; color: var(--navy-900); }
.faq__a { padding: 0 0 1.75rem 0; color: var(--fg-2); }   /* right inset from 720 px */
.faq__a p { max-width: 66ch; }
.faq__a p + p { margin-top: .75em; }
.faq__a .link-arrow { margin-top: .75rem; }
.faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }

/* ---------- 5.10 Data table (stacks on mobile) --------------------------- */
.table-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow-x: auto;                 /* never clip content (WCAG 1.4.10); rounded corners still clip */
  overscroll-behavior-x: contain;
}
.table-wrap:focus-visible { outline-offset: 2px; }
.data-table { width: 100%; font-size: var(--fs-small); line-height: 1.55; text-align: left; }
.data-table caption { padding: 1rem 1.25rem; text-align: left; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
/* mobile-first: each row is a card */
.data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.data-table tr { display: block; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); }
.data-table tr:last-child { border-bottom: 0; }
.data-table td, .data-table th[scope="row"] { display: block; padding: .2rem 0; color: var(--fg-2); }
.data-table td::before {
  content: attr(data-label);
  display: block;
  margin-bottom: .15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.data-table td:first-child, .data-table th[scope="row"] { color: var(--fg); font-weight: 600; font-size: 1rem; }
.data-table td:first-child::before { display: none; }
.data-table .mono, .data-table code { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; }

/* ---------- 5.11 Lists --------------------------------------------------- */
.checklist, .alert-list { list-style: none; display: grid; gap: .95rem; }
.checklist li, .alert-list li { position: relative; padding-left: 2.15rem; color: var(--fg-2); line-height: 1.55; }
.checklist li::before, .alert-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .1em;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5FD6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.alert-list li::before {
  border-radius: 8px;
  background: var(--navy-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.01'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.theme-dark .checklist li::before { background-color: rgba(47, 123, 255, .16); }
/* An item whose content is still «Por confirmar»: an empty dashed ring, never a tick */
.checklist .checklist__item--pending::before { background: none; border: 1px dashed var(--rule-strong); }
.checklist strong, .alert-list strong { color: var(--fg); }

/* Definition rows: label (mono) + value */
.meta-list { display: grid; border-top: 1px solid var(--rule); }
.meta-list > div { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.meta-list dt { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding-top: .2em; }
.meta-list dd { color: var(--fg); font-size: var(--fs-small); }

/* Contact channels list (mono label + value) */
.channels { display: grid; border-top: 1px solid var(--rule); }
.channels__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.channels__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.channels__value { font-size: 1.0625rem; color: var(--fg); }
.channels__value a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; transition: color var(--dur-1); }
@media (hover: hover) and (pointer: fine) { .channels__value a:hover { color: var(--link); } }

/* Channel cards (contacto.html) */
.channel-grid { list-style: none; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  height: 100%;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
}
.channel-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.channel-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.channel-card__icon .icon { width: 22px; height: 22px; }
.channel-card__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.channel-card__value { font-family: var(--font-display); font-weight: 700; font-stretch: 106%; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); letter-spacing: -.015em; line-height: 1.2; color: var(--fg); overflow-wrap: anywhere; }
.channel-card__text { font-size: var(--fs-small); color: var(--fg-2); }
.channel-card__action { margin-top: auto; padding-top: calc((44px - 1.3em) / 2 + .5rem); }   /* .link-arrow centring + .5rem air */

/* ---------- 5.12 Holographic certificate (signature) --------------------
   One component, three uses: home hero (full), home teaser + verificar (mini),
   verificar anatomy (full + markers). Sizes inside use cqi so the card scales
   as one object. JS writes --rx --ry (deg), --mx --my (0–100), --hue.      */
.cert-stage {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
}
.cert-stage__glow {
  position: absolute;
  inset: 8% -18% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(47, 123, 255, .5), rgba(47, 123, 255, .12) 55%, rgba(47, 123, 255, 0));
  pointer-events: none;
}
.cert-stage__floor {
  position: absolute;
  left: 14%; right: 14%; bottom: -7%;
  height: 9%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  filter: blur(4px);
  pointer-events: none;
}
.cert-stage__orbit {
  position: absolute;
  left: -30%; top: -14%;
  width: 160%; height: 128%;
  pointer-events: none;
  overflow: visible;
  fill: none;
}
.cert-stage__orbit--back { z-index: -1; }
.cert-stage__orbit--front { z-index: 2; }
.cert-stage__orbit ellipse, .cert-stage__orbit path { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cert-stage__orbit .orbit-a { stroke: rgba(141, 184, 255, .42); }
.cert-stage__orbit .orbit-b { stroke: rgba(141, 184, 255, .16); }
.cert-stage__orbit .orbit-dot { fill: var(--blue-300); }
.cert-stage__float { animation: certFloat 9s ease-in-out infinite; animation-delay: var(--float-delay, 0s); }   /* offset two floats on one page: style="--float-delay:-4s" */
.cert-stage__enter { animation: certEnter 1.5s var(--ease-out) both; animation-delay: var(--enter-delay, .25s); }

.cert {
  --rx: 0;
  --ry: 0;
  --rx0: 7;
  --ry0: -15;
  --rz0: 1.5;
  --mx: 30;
  --my: 22;
  --hue: 0;
  --foil: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5.2;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  background: #FBFCFE;
  color: var(--navy-900);
  font-family: var(--font-sans);
  text-align: left;
  transform:
    perspective(1500px)
    rotateX(calc((var(--rx0) + var(--rx)) * 1deg))
    rotateY(calc((var(--ry0) + var(--ry)) * 1deg))
    rotateZ(calc(var(--rz0) * 1deg));
  transform-origin: 50% 50%;
  box-shadow:                       /* the two long shadows slide against the tilt (light from the pointer side) */
    0 0 0 1px rgba(10, 31, 60, .08),
    0 2px 4px rgba(5, 14, 31, .22),
    calc(var(--ry) * -1.5px) 30px 60px -22px rgba(5, 14, 31, .6),
    calc(var(--ry) * -1.5px) 70px 120px -50px rgba(5, 14, 31, .55);
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.cert::after {           /* edge highlight: hue-tinted rim light that shifts with the foil */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px hsl(calc(210deg + var(--hue) * 1deg) 100% 85% / .9), inset 0 1.5px 0 #FFFFFF;
  pointer-events: none;
}
.cert--flat { --rx0: 0; --ry0: 0; --rz0: 0; }

.cert__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 8cqi 7.5cqi 7cqi 12cqi;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(232, 241, 255, .95), rgba(232, 241, 255, 0) 58%),
    repeating-linear-gradient(118deg, rgba(10, 31, 60, .022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
}
.cert__body::before {     /* guilloche rosette (security paper) */
  content: "";
  position: absolute;
  right: -34cqi; bottom: -28cqi;
  width: 108cqi; height: 108cqi;
  background: url("assets/img/guilloche.svg?v=20261021b") center / contain no-repeat;
  opacity: .38;
  pointer-events: none;
}
.cert__body::after {      /* double frame */
  content: "";
  position: absolute;
  inset: 3cqi 3cqi 3cqi 9.4cqi;
  border: 1px solid rgba(10, 31, 60, .14);
  border-radius: 1.4cqi;
  box-shadow: inset 0 0 0 .8cqi rgba(255, 255, 255, .55), inset 0 0 0 calc(.8cqi + 1px) rgba(10, 31, 60, .07);
  pointer-events: none;
}
.cert__body > * { position: relative; z-index: 1; }

.cert__head { padding-bottom: 3.6cqi; border-bottom: 1px solid rgba(10, 31, 60, .14); }
.cert__logo { display: block; height: 5.2cqi; width: auto; }
.cert__org {
  margin-top: 2.2cqi;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: max(1.72cqi, 9px);      /* floors keep micro-type legible on 1× screens */
  letter-spacing: .16em;
  line-height: 1.3;
  color: var(--ink-2);
  max-width: none;
}
.cert__type {
  margin-top: 4.6cqi;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 5.5cqi;
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--navy-900);
  text-wrap: balance;
}
.cert__fields {
  margin-top: 4.4cqi;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.1cqi 3.6cqi;
}
.cert__field { min-width: 0; }
.cert__field--wide { grid-column: 1 / -1; }
.cert__field--2 { grid-column: span 2; }
.cert__label, .cert__field dt {
  margin-bottom: .9cqi;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: max(1.68cqi, 8.5px);
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-2);              /* micro-type over the foil and guilloche: ink-2 keeps it ≥ 4.5:1 */
}
.cert__field dd { font-size: 2.7cqi; font-weight: 600; line-height: 1.3; color: var(--navy-900); }
.cert__name { font-family: var(--font-display); font-stretch: 108%; font-size: 4.1cqi !important; font-weight: 700 !important; letter-spacing: -.012em; }
.cert__mono { font-family: var(--font-mono); font-weight: 500 !important; font-size: 2.3cqi !important; letter-spacing: .05em; }
.cert__result {
  display: inline-block;
  padding: .7cqi 1.8cqi;
  border-radius: 99px;
  background: var(--navy-900);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.9cqi;
  letter-spacing: .14em;
}
.cert__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  gap: 6cqi;
  padding-top: 3.6cqi;
  padding-right: 24cqi;
  border-top: 1px solid rgba(10, 31, 60, .14);
}
.cert__qr { display: grid; justify-items: start; gap: 1.6cqi; }
.cert__qr-text span { display: block; white-space: nowrap; }
.cert__qr-code {
  flex: none;
  width: 15.5cqi; height: 15.5cqi;
  padding: 1.1cqi;
  border-radius: 1cqi;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(10, 31, 60, .14);
  fill: var(--navy-900);
  shape-rendering: crispEdges;
}
.cert__qr-text, .cert__sign-text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: max(1.55cqi, 8px);
  letter-spacing: .12em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ink-2);
  max-width: none;
}
.cert__sign { display: grid; gap: 1.3cqi; padding-bottom: .3cqi; }
.cert__sign-line { display: block; width: 24cqi; height: 1px; background: rgba(10, 31, 60, .5); }
.cert__sign-text { text-transform: none; letter-spacing: .04em; font-size: max(1.7cqi, 8px); }
.cert__seal {
  position: absolute !important;
  z-index: 2 !important;
  right: 4.5cqi; bottom: 5cqi;
  width: 23cqi; height: 23cqi;
  transform: rotate(-12deg);
  filter: drop-shadow(0 .6cqi 1.1cqi rgba(10, 31, 60, .28));
}
/* ESPÉCIMEN diagonal band: a translucent ink overprint (multiply), so every
   field of the document stays readable underneath — like a real specimen stamp. */
.cert__band {
  position: absolute;
  z-index: 4;
  left: -25%; right: -25%;
  top: 50%;
  height: 12.5cqi;
  margin-top: -6.25cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8cqi;
  transform: rotate(-26deg);
  background: linear-gradient(90deg, rgba(31, 95, 214, .08), rgba(31, 95, 214, .16) 50%, rgba(31, 95, 214, .08));
  border-block: 1px solid rgba(31, 95, 214, .32);
  box-shadow: none;
  mix-blend-mode: multiply;
  color: rgba(23, 55, 102, .78);
  pointer-events: none;
  text-align: center;
}
.cert__band-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 5.2cqi;
  letter-spacing: .34em;
  padding-left: .34em;
  line-height: 1;
}
.cert__band-note {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: max(1.75cqi, 8.5px);
  letter-spacing: .3em;
  padding-left: .3em;
  color: rgba(23, 55, 102, .92);
}
/* Full portrait card: the no-validity note rides ABOVE the word, through the empty gap between «Nombre del
   titular» and the DOCUMENTO row — under the word it crossed the FUNCIÓN line and read as noise */
.cert:not(.cert--mini):not(.cert--flat) .cert__band { flex-direction: column-reverse; }
/* Holographic security strip (left margin) */
.cert__holo {
  position: absolute;
  z-index: 3;
  top: 0; bottom: 0;
  left: 3.6cqi;
  width: 3.4cqi;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(calc(165deg + var(--hue) * 1deg), #9EC1FF 0%, #CDB6FF 16%, #FFC1E3 32%, #FFEDB0 48%, #B6FBE4 64%, #A4D7FF 80%, #9EC1FF 100%);
  background-size: 100% 100%, 100% 280%;
  background-position: 0 0, 0 calc(var(--my) * 1%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .9), inset -1px 0 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(10, 31, 60, .1);
  opacity: .92;
  pointer-events: none;
}
.cert__holo::after {      /* microprint */
  content: "FOCERCOL · FOCERCOL · FOCERCOL · FOCERCOL · FOCERCOL · FOCERCOL · FOCERCOL · FOCERCOL · FOCERCOL · FOCERCOL";
  position: absolute;
  inset: 0;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 1.45cqi;
  letter-spacing: .3em;
  white-space: nowrap;
  color: rgba(10, 31, 60, .32);
}
/* Kinegram patch: the real "foil moment". Five concentric orbit rings (brand
   motif) cut out of a diffraction conic that sweeps with --mx/--my/--hue.   */
.cert__kinegram {
  position: absolute;
  z-index: 3;
  right: 8cqi;
  top: 21cqi;
  width: 22cqi;
  height: 22cqi;
  pointer-events: none;
  background:
    linear-gradient(calc(118deg + var(--hue) * .3deg),
      rgba(255, 255, 255, 0) calc(var(--mx) * 1% - 22%),
      rgba(255, 255, 255, .85) calc(var(--mx) * 1%),
      rgba(255, 255, 255, 0) calc(var(--mx) * 1% + 22%)),
    repeating-conic-gradient(from calc(var(--hue) * 2deg) at calc(var(--mx) * 1%) calc(var(--my) * 1%),
      #5E9BFF 0 8deg, #A57CFF 8deg 16deg, #FF7CC8 16deg 24deg, #FFC94D 24deg 32deg, #45E3B4 32deg 40deg);
  filter: saturate(1.3);
  opacity: .92;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' transform='rotate(-18 50 50)'%3E%3Cellipse cx='50' cy='50' rx='47' ry='19' stroke-width='3.2'/%3E%3Cellipse cx='50' cy='50' rx='38' ry='15' stroke-width='3'/%3E%3Cellipse cx='50' cy='50' rx='29' ry='11.5' stroke-width='2.8'/%3E%3Cellipse cx='50' cy='50' rx='20' ry='8' stroke-width='2.6'/%3E%3Cellipse cx='50' cy='50' rx='11' ry='4.5' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' transform='rotate(-18 50 50)'%3E%3Cellipse cx='50' cy='50' rx='47' ry='19' stroke-width='3.2'/%3E%3Cellipse cx='50' cy='50' rx='38' ry='15' stroke-width='3'/%3E%3Cellipse cx='50' cy='50' rx='29' ry='11.5' stroke-width='2.8'/%3E%3Cellipse cx='50' cy='50' rx='20' ry='8' stroke-width='2.6'/%3E%3Cellipse cx='50' cy='50' rx='11' ry='4.5' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
/* Iridescent foil across the paper (follows the light) */
.cert__foil {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(calc(112deg + var(--hue) * .4deg),
      rgba(255, 255, 255, 0) calc(var(--mx) * 1% - 48%),
      rgba(120, 214, 255, .55) calc(var(--mx) * 1% - 24%),
      rgba(255, 150, 226, .48) calc(var(--mx) * 1% - 8%),
      rgba(255, 233, 140, .5) calc(var(--mx) * 1% + 7%),
      rgba(150, 162, 255, .5) calc(var(--mx) * 1% + 22%),
      rgba(255, 255, 255, 0) calc(var(--mx) * 1% + 46%)),
    conic-gradient(from calc(var(--hue) * 1deg) at 70% 80%, rgba(255, 200, 240, .25), rgba(200, 240, 255, .25), rgba(255, 245, 200, .25), rgba(210, 200, 255, .25), rgba(255, 200, 240, .25));
  mix-blend-mode: multiply;
  opacity: calc(var(--foil) * .22);
  -webkit-mask-image: linear-gradient(180deg, transparent 0 17%, #000 24%);   /* keep the header (logo) clean */
  mask-image: linear-gradient(180deg, transparent 0 17%, #000 24%);
}
.cert__foil::after {      /* shine on dark ink (result pill, QR); masked off the header with the foil */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(calc(112deg + var(--hue) * .4deg),
    rgba(0, 0, 0, 0) calc(var(--mx) * 1% - 30%),
    rgba(80, 200, 255, .5) calc(var(--mx) * 1% - 10%),
    rgba(255, 120, 220, .45) calc(var(--mx) * 1% + 4%),
    rgba(0, 0, 0, 0) calc(var(--mx) * 1% + 26%));
  mix-blend-mode: color-dodge;
  opacity: .55;
}
/* Specular glare */
.cert__glare {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(farthest-corner circle at calc(var(--mx) * 1%) calc(var(--my) * 1%),
    rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .12) 26%, rgba(255, 255, 255, 0) 50%, rgba(5, 14, 31, .12) 100%);
  mix-blend-mode: overlay;
}
.cert__glare::after {     /* thin moving specular line */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(calc(118deg + var(--hue) * .2deg),
    rgba(255, 255, 255, 0) calc(var(--mx) * 1% - 6%),
    rgba(255, 255, 255, .5) calc(var(--mx) * 1%),
    rgba(255, 255, 255, 0) calc(var(--mx) * 1% + 6%));
  mix-blend-mode: overlay;
  opacity: .7;
}

/* Mini certificate (teaser + verificar hero): landscape */
.cert--mini { aspect-ratio: 1.58; --rx0: 6; --ry0: 12; --rz0: -2.5; border-radius: 16px; }
.cert--mini .cert__body { padding: 7cqi 6.5cqi 6cqi 10cqi; }
.cert--mini .cert__body::after { inset: 2.6cqi 2.6cqi 2.6cqi 8cqi; }
.cert--mini .cert__body::before { width: 78cqi; height: 78cqi; right: -18cqi; bottom: -30cqi; }
.cert--mini .cert__holo { left: 3cqi; width: 2.8cqi; }
.cert--mini .cert__head { padding-bottom: 3cqi; padding-right: 22cqi; }
.cert--mini .cert__logo { height: 4.4cqi; }
.cert--mini .cert__org { margin-top: 1.6cqi; font-size: max(1.32cqi, 8.5px); }
.cert__mini-grid { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4cqi; }
.cert__code-xl { font-family: var(--font-mono); font-weight: 500; font-size: 3.7cqi; letter-spacing: .04em; color: var(--navy-900); line-height: 1.2; }
.cert--mini .cert__label { font-size: max(1.35cqi, 8.5px); }
.cert--mini .cert__foil { -webkit-mask-image: linear-gradient(180deg, transparent 0 26%, #000 34%); mask-image: linear-gradient(180deg, transparent 0 26%, #000 34%); }
.cert--mini .cert__qr-code { width: 15cqi; height: 15cqi; }
.cert--mini .cert__seal { width: 17cqi; height: 17cqi; right: 5cqi; top: 4.5cqi; bottom: auto; transform: rotate(-10deg); }
.cert--mini .cert__band { height: 9cqi; margin-top: -4.5cqi; top: 52%; transform: rotate(-11deg); }
.cert--mini .cert__band-word { font-size: 3.8cqi; }
.cert--mini .cert__band-note { font-size: max(1.3cqi, 7.5px); }

/* Flat / annotated card (verificar §3): the band becomes a corner ribbon over
   empty paper so every annotated field (markers 01–07) stays clear. */
.cert--flat .cert__band { left: 35%; right: -25%; top: 7.3cqi; height: 8cqi; margin-top: 0; gap: .5cqi; transform: rotate(30deg); }   /* crosses the top-right corner, centred on its visible span */
.cert--flat .cert__band-word { font-size: 3.2cqi; letter-spacing: .3em; padding-left: .3em; }
.cert--flat .cert__band-note { font-size: max(1.15cqi, 7px); letter-spacing: .24em; padding-left: .24em; }
.cert--flat .cert__kinegram { top: 26cqi; }

/* Annotation markers placed on a certificate (verificar §3) */
.cert__marker {
  position: absolute;
  z-index: 9;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  display: grid;
  place-items: center;
  width: 5.6cqi; height: 5.6cqi;     /* 28 px on the 500 px card, ≈25 px at 1024, 20 px floor on phones */
  min-width: 20px; min-height: 20px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--blue-600);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: max(2.1cqi, 9.5px);
  letter-spacing: .02em;
  box-shadow: 0 0 0 .7cqi rgba(47, 123, 255, .26), 0 .6cqi 1.4cqi rgba(10, 31, 60, .3);
}
/* Marker coordinates (HTML --x/--y, % of the card): field markers sit in the left gutter over the security
   strip (x 5.4, clear of the text column that starts at 12 %); the dates marker sits in the right gutter of
   the code / dates row, so no marker ever covers a label or a value. */
.specimen { display: grid; gap: var(--gap-l); align-items: start; }
.specimen__figure { position: relative; width: min(100%, 500px); margin-inline: auto; }
.specimen .cert-stage__glow { inset: 8% -4% -14%; }   /* < 960 the full-width card's glow stays inside the viewport (no reliance on overflow-x: clip) */
.specimen__caption {
  margin-top: clamp(40px, 5vw, 48px);   /* clear of the floor shadow (≈ 7 % of the card below it) */
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);               /* sits inside the card's drop shadow: --fg-3 fell to ≈3.4:1 there */
  max-width: none;
}
.specimen__notes { list-style: none; border-top: 1px solid var(--rule); }
.specimen__note { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .9rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.specimen__num {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--blue-600);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
}
.specimen__title { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--fg); }
.specimen__text { margin-top: .3rem; font-size: var(--fs-small); color: var(--fg-2); }

/* Narrow full certificates (phones, the 720–959 hero): the 8–9 px legibility floors made the
   micro-type outgrow the card, so the foot («Verifica en…», «Firma autorizada») was clipped.
   Lower floors (crisp on 2× screens) + a slightly tighter rhythm keep every line inside the frame.
   .cert--mini keeps its own (more specific) sizes. */
@container (max-width: 440px) {
  .cert__org { font-size: max(1.72cqi, 6.75px); letter-spacing: .1em; }
  .cert__label, .cert__field dt { font-size: max(1.68cqi, 7px); letter-spacing: .12em; }
  .cert__qr-text { font-size: max(1.55cqi, 6.5px); letter-spacing: .1em; }
  .cert__sign-text { font-size: max(1.7cqi, 7px); }   /* may wrap to 2 lines: never runs under the seal */
  .cert__type { margin-top: 3.8cqi; }
  .cert__fields { margin-top: 3.6cqi; row-gap: 2.6cqi; }
}
@container (max-width: 280px) {
  .cert__org { font-size: 6.25px; letter-spacing: .08em; }
  .cert__label, .cert__field dt { font-size: 6.5px; }
  .cert__qr-text { font-size: 6px; }
  .cert__sign-text { font-size: 6.5px; }
}

/* ---------- 5.13 Orbit progress ring ------------------------------------- */
.orbit-progress { --progress: 1; position: relative; width: 136px; height: 136px; }
.orbit-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.orbit-progress__track { stroke: var(--rule-strong); stroke-width: 1.25; }
.orbit-progress__bar {
  stroke: var(--blue-600);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--progress));
  transition: stroke-dashoffset .25s linear;
}
.orbit-progress__count {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  color: var(--fg-3);
}
.orbit-progress__count b {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ---------- 5.14 Stepper (vertical, scroll progress) --------------------- */
.stepper {
  --progress: 1;                 /* JS drives 0 → 1; no JS = complete */
  --node: 44px;
  position: relative;
  list-style: none;
  display: grid;
}
.stepper::before, .stepper::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 + clamp(20px, 3vw, 36px));
  bottom: var(--line-bottom, calc(var(--node) / 2 + clamp(20px, 3vw, 36px)));
  left: calc(var(--node) / 2);
  z-index: 0;
  pointer-events: none;
}
.stepper__step:last-child::after {        /* hides the line below the last node (no-JS) */
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  width: var(--node);
  top: calc(clamp(20px, 3vw, 36px) + var(--node) / 2);
  bottom: 0;
  background: var(--bg);
}
.stepper::before { width: 1px; margin-left: -.5px; background: var(--rule-strong); }
.stepper::after {
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  transform-origin: top;
  transform: scaleY(var(--progress));
  box-shadow: 0 0 14px rgba(47, 123, 255, .45);
}
.stepper__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 36px);
  padding-block: clamp(20px, 3vw, 36px);
}
.stepper__num {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--node); height: var(--node);
  border: 1px solid var(--blue-600);
  border-radius: 50%;
  background: var(--blue-600);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .06em;
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(47, 123, 255, .16);
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
}
.stepper__title {
  padding-top: .35rem;
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 110%;
  font-size: clamp(1.375rem, 1.1rem + 1.05vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.026em;
  color: var(--fg);
  transition: color var(--dur-2);
}
.stepper__text { margin-top: .55rem; color: var(--fg-2); max-width: 46ch; }
.stepper__roles { margin-top: 1.1rem; display: grid; gap: .5rem; }
.stepper__role {                 /* phones: mono label above the text; label column from 540 (§8) */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.stepper__role dt { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .12em; text-transform: uppercase; color: var(--eyebrow); padding-top: .2em; }
.stepper__role dd { color: var(--fg); }
/* JS states */
.stepper__step.is-pending .stepper__num { background: var(--bg); border-color: var(--rule-strong); color: var(--fg-3); box-shadow: 0 0 0 6px var(--bg); }
.stepper__step.is-pending .stepper__title { color: var(--fg-3); }
.stepper__step.is-current .stepper__num { box-shadow: 0 0 0 6px var(--bg), 0 0 0 10px rgba(47, 123, 255, .2), var(--glow); }

/* Horizontal method steps (empresas: 4 pasos) */
.steps-row { list-style: none; display: grid; gap: 2rem var(--gap); grid-template-columns: minmax(0, 1fr); }
.steps-row__item { position: relative; display: grid; gap: .6rem; align-content: start; padding-top: 1.6rem; border-top: 1px solid var(--rule-strong); }
.steps-row__item::before {
  content: "";
  position: absolute;
  left: 0; top: -5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue-600);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue-500) 18%, transparent);
}
.steps-row__num { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); line-height: 1; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: .35rem; }
.steps-row__title { font-family: var(--font-display); font-weight: 750; font-stretch: 108%; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); letter-spacing: -.022em; line-height: 1.12; color: var(--fg); }
.steps-row__text { font-size: var(--fs-small); color: var(--fg-2); }

/* ---------- 5.15 Bento grid ---------------------------------------------- */
.bento { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.bento__tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: 0;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
  background: var(--surface);
  color: var(--fg);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .bento__tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } }
@media (hover: hover) and (pointer: fine) { .bento__tile--feature:hover .ficha-mock { transform: translateY(-6px); } }
.bento__copy { display: grid; gap: .8rem; align-content: start; }
.bento__tile--navy { background: var(--navy-900); border-color: transparent; }  /* + .theme-dark */
.bento__tile--blue { background: var(--blue-600); border-color: transparent; --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, .86); --link: #FFFFFF; --link-hover: #FFFFFF; color: #FFFFFF; }
.bento__tile--sky { background: var(--sky-100); border-color: transparent; }
.bento__tile--paper { background: var(--paper); border-color: transparent; }
.bento__title {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 108%;
  font-size: clamp(1.375rem, 1.15rem + .85vw, 1.875rem);
  line-height: 1.08;
  letter-spacing: -.026em;
  color: var(--fg);
  max-width: 16ch;
}
.bento__text { font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); max-width: 42ch; }
.bento__foot { margin-top: auto; padding-top: .75rem; }
/* Feature tile: the ficha mock bleeds off the tile's bottom edge (from 540 px, where it shows) */
.bento__foot--mock { position: relative; }
.bento__foot--mock .ficha-mock { transition: transform .7s var(--ease-out); }
.bento__icon {                     /* optional: the home bento carries no icons (type + art only) */
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.bento__icon .icon { width: 22px; height: 22px; }
.bento__tile--feature .bento__icon { margin-bottom: 1.5rem; }
.theme-dark .bento__icon { background: rgba(47, 123, 255, .16); color: var(--blue-300); }
.bento__tile--blue .bento__icon { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.bento__text--l { font-size: var(--fs-lead); line-height: 1.5; max-width: 34ch; }
.bento__art { position: absolute; z-index: -1; pointer-events: none; }
.bento__art--orbits { display: none; right: -10%; bottom: -14%; width: 88%; fill: none; stroke: var(--blue-500); stroke-width: 1; opacity: .32; }
.bento__art--orbits ellipse { vector-effect: non-scaling-stroke; }
.bento__art--venn { display: none; right: 20px; bottom: 18px; width: 76px; fill: none; stroke: var(--blue-600); stroke-width: 1.2; opacity: .28; }   /* from 720 (tall tiles); a faint watermark */
.bento__tile--stats {
  justify-content: space-between;
  gap: 2rem;
  min-height: 0;
  background:
    radial-gradient(70% 150% at 100% 0%, rgba(47, 123, 255, .34), rgba(47, 123, 255, 0) 62%),
    var(--navy-900);
}
.ficha-mock {
  position: relative;
  display: none;
  gap: .85rem;
  width: min(100%, 480px);
  padding: 20px 20px 0;
  border: 1px solid var(--rule);
  border-radius: 18px 18px 0 0;
  border-bottom: 0;
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.ficha-mock__text { font-size: .8125rem; line-height: 1.5; color: var(--fg-2); }
.ficha-mock__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ficha-mock__code { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; color: var(--fg-3); }
.ficha-mock__title { font-family: var(--font-display); font-weight: 700; font-stretch: 104%; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -.012em; color: var(--fg); }
.ficha-mock__meta { border-top: 1px solid var(--rule); }
.ficha-mock__meta > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); font-size: .8125rem; }
.ficha-mock__meta dt { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding-top: .15em; }
.ficha-mock__meta dd { color: var(--fg); }
.spec-line {                       /* phones: stacked rows; from 540 px one row that never wraps */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(.6875rem, .64rem + .2vw, .8125rem);
  letter-spacing: .08em;
  color: var(--navy-900);
  box-shadow: var(--shadow-2);
}
.spec-line__part { flex: 1 1 auto; padding: .8em .85em; white-space: nowrap; }
.spec-line__part + .spec-line__part { border-top: 1px solid var(--rule); }
.spec-line__part:first-child { box-shadow: inset 3px 0 0 var(--blue-600); }
.spec-line__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.stat-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem clamp(2rem, 5vw, 4.5rem); }
.stat { display: grid; gap: .5rem; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(clamp(4rem, 2rem + 4vw, 5.5rem), 9.6svh);   /* never larger than the hero H1 (10svh cap) */
  line-height: .82;
  letter-spacing: -.055em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); }

/* ---------- 5.16 Marquee (CSS-driven; JS only clones the group) --------- */
.marquee-stack { display: grid; gap: clamp(4px, .8vw, 10px); padding-block: clamp(12px, 1.8vw, 20px); border-block: 1px solid var(--rule); }
.marquee-stack .marquee { border-block: 0; padding-block: clamp(10px, 1.3vw, 14px); }
.marquee {
  --marquee-dur: 80s;
  position: relative;
  overflow: hidden;
  padding-block: clamp(22px, 2.8vw, 34px);
  border-block: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee__track { display: flex; width: 100%; }
.marquee__group {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: .9rem;
  padding-inline: var(--gutter);
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(.875rem, .8rem + .4vw, 1.125rem);
  letter-spacing: .08em;
  text-transform: uppercase;          /* write descriptors in sentence case; codes stay as typed */
  color: var(--fg-3);
}
.marquee__item::after { content: "—"; content: "—" / ""; margin-inline: 1.5em; color: var(--rule-strong); }
.marquee__code { color: var(--fg); }
.marquee.is-ready .marquee__track { width: max-content; animation: marquee var(--marquee-dur) linear infinite; }
.marquee--reverse.is-ready .marquee__track { animation-direction: reverse; }
.marquee.is-ready .marquee__group { flex-wrap: nowrap; justify-content: flex-start; padding-inline: 0; flex: none; }
.marquee.is-ready:focus-within .marquee__track,
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .marquee.is-ready:hover .marquee__track { animation-play-state: paused; } }
/* Without JS: a plain, centred, fully visible list (no mask, no separators, wrapping allowed) */
.marquee:not(.is-ready) { -webkit-mask-image: none; mask-image: none; }
.marquee:not(.is-ready) .marquee__group { column-gap: 1.75rem; }
.marquee:not(.is-ready) .marquee__item { white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; }
.marquee:not(.is-ready) .marquee__item::after { display: none; }
.marquee__toggle { min-height: 44px; }
.marquee__toggle .icon { width: 1em; height: 1em; }

/* ---------- 5.17 Sector cards -------------------------------------------- */
.sector-grid {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(76vw, 330px);   /* ~60 px peek of the next card at 390 */
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 6px var(--gutter) 28px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.sector-grid::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {           /* mouse users in narrow windows can still scroll the rail */
  .sector-grid { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
}
/* Phone rail: cards are never hidden by the reveal (they scroll in sideways); the grid (≥720) reveals them */
.fx .sector-grid > .reveal { opacity: 1; transform: none; transition: none; }
/* Rail position: 2 px track + mono counter (JS adds .is-ready; hidden from 720 px) */
.rail-meter { display: none; }
.rail-meter.is-ready { display: flex; align-items: center; gap: 1rem; margin-top: 2px; }
.rail-meter__track { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--rule-strong); overflow: hidden; }
.rail-meter__bar { position: absolute; inset: 0; border-radius: 2px; background: var(--blue-600); transform-origin: left center; transform: scaleX(var(--rail, .14)); transition: transform .25s linear; }
.rail-meter__count { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.rail-meter__count b { font-weight: 500; color: var(--fg); }
.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  scroll-snap-align: start;
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out), border-color var(--dur-2);
}
@media (hover: hover) and (pointer: fine) { .sector-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); border-color: transparent; } }
.sector-card:has(.sector-card__cta:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.sector-card__media { aspect-ratio: 3 / 2; border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .sector-card:hover .sector-card__media img { transform: scale(1.06); } }
@media (hover: hover) and (pointer: fine) { .sector-card:hover .media--graded::before { opacity: .1; } }
.sector-card__icon {
  position: absolute;
  z-index: 2;
  left: 16px; bottom: 16px;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  background: rgba(5, 14, 31, .62);
  color: #FFFFFF;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sector-card__icon { background: rgba(5, 14, 31, .32); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
}
.sector-card__icon .icon { width: 26px; height: 26px; }
.sector-card__index {
  position: absolute;
  z-index: 2;
  right: 16px; top: 14px;
  padding: .3em .6em;
  border-radius: 99px;
  background: rgba(5, 14, 31, .45);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: .12em;
  color: #FFFFFF;
}
.sector-card__body { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 22px 22px 24px; }
.sector-card__title { font-family: var(--font-display); font-weight: 750; font-stretch: 106%; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.02em; color: var(--fg); }
.sector-card__text { font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }
.sector-card__programs { list-style: none; margin-top: .3rem; border-top: 1px solid var(--rule); }
.sector-card__programs li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--fg);
}
.sector-card__programs li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-500); transform: translateY(-2px); }
.sector-card__cta { margin-top: auto; padding-top: calc((44px - 1.3em) / 2 + .6rem); }
.sector-card__cta .icon { transition: transform var(--dur-2) var(--ease-out), translate .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sector-card:hover .sector-card__cta .icon { translate: 4px 0; } }
.sector-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }

/* ---------- 5.18 Service cards (dark chapter or light) ------------------- */
.service-grid { list-style: none; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  height: 100%;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: transform .7s var(--ease-out), border-color var(--dur-2), background-color var(--dur-2);
}
@media (hover: hover) and (pointer: fine) { .service-card:hover { transform: translateY(-4px); border-color: var(--rule-strong); } }
.theme-dark .service-card { background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); }
@media (hover: hover) and (pointer: fine) { .theme-dark .service-card:hover { border-color: rgba(141, 184, 255, .38); } }
.service-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.service-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.theme-dark .service-card__icon { color: var(--blue-300); background: rgba(47, 123, 255, .14); box-shadow: inset 0 0 0 1px rgba(141, 184, 255, .2); }
.service-card__icon .icon { width: 22px; height: 22px; }
.service-card__index { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; color: var(--fg-3); }
.service-card__title { font-family: var(--font-display); font-weight: 700; font-stretch: 106%; font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem); line-height: 1.18; letter-spacing: -.018em; color: var(--fg); }
.service-card__text { font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); }
.service-card__deliverable { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--rule); display: grid; gap: .3rem; font-size: .875rem; line-height: 1.5; color: var(--fg); }
.service-card__deliverable dt { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .12em; text-transform: uppercase; color: var(--eyebrow); }

/* ---------- 5.19 Catalog: filter bar, program groups, program cards ------ */
.filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  border-block: 1px solid var(--rule);
  background: var(--bg);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .filter-bar { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); }
}
.filter-bar__inner { display: grid; gap: .4rem; padding-block: .7rem; }
.filter-bar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* visible from 960 */
.filter-bar__label, .filter-bar__status { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
/* < 1280 the count is already on the active chip («Logística 6»): the status line stays as the live region
   for screen readers but takes no room (the bar is one chip row: ≈76 px instead of ≈96). Visible from 1280. */
.filter-bar__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.filter-bar .chips {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
/* the fade says «more chips this way»: off once the row is scrolled to its end or everything fits (main.js) */
.filter-bar .chips.is-end { -webkit-mask-image: none; mask-image: none; }
.catalog-shell { position: relative; }   /* wraps filter bar + catalog so the sticky bar stops at the catalog end */
.catalog__note { font-size: var(--fs-small); color: var(--fg-2); max-width: 64ch; }
.catalog__empty {
  padding: clamp(32px, 5vw, 56px);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-card);
  text-align: center;
  color: var(--fg-2);
}
.type-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; }
.type-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .875rem; color: var(--fg-2); }

/* The sticky filter bar (≈76 px below 1280, ≈101 px in two rows from 1280) sits under the fixed header.
   ONE offset only: the html scroll-padding (header + bar + air). Targets carry no scroll-margin — the two
   add up and every anchor landed ≈180 px too low. scroll-padding also applies to focus scrolling, so
   focused cards stay clear of the bar (WCAG 2.4.11). */
html:has([data-filter-bar]) { scroll-padding-top: calc(var(--header-h) + 96px); }
.catalog-head { padding-top: var(--section-y-s); }
.program-group { padding-top: clamp(56px, 7vw, 96px); }
.program-group__head { display: grid; gap: 1.25rem; align-items: end; margin-bottom: clamp(20px, 3vw, 32px); }
.program-group__media { aspect-ratio: 16 / 9; border-radius: var(--r-card); }
.program-group__count { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--eyebrow); }
.program-group__title { margin-top: .4rem; font-size: var(--fs-m); }
.program-group__text { margin-top: .6rem; color: var(--fg-2); max-width: 52ch; }

.program-grid { list-style: none; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100%;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color var(--dur-2);
}
@media (hover: hover) and (pointer: fine) { .program-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--rule-strong); } }
.program-card:target { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(47, 123, 255, .16); }
.program-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.program-card__code { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; color: var(--fg-3); }
.program-card__title { font-family: var(--font-display); font-weight: 700; font-stretch: 104%; font-size: 1.1875rem; line-height: 1.22; letter-spacing: -.016em; color: var(--fg); }
.program-card__text { font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }
.program-card__meta { border-top: 1px solid var(--rule); }
.program-card__meta > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-size: .875rem; line-height: 1.45; }
.program-card__meta dt { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding-top: .2em; }
.program-card__meta dd { color: var(--fg); }
.program-card__note { padding: .75rem .9rem; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--blue-300); font-size: .8125rem; line-height: 1.55; color: var(--fg-2); }
.program-card__doc { display: grid; gap: .3rem; font-size: .8125rem; line-height: 1.5; color: var(--fg); }
.program-card__doc-label { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .12em; text-transform: uppercase; color: var(--eyebrow); }
.program-card__req { font-size: .8125rem; line-height: 1.5; color: var(--fg-3); }
.program-card__cta { margin-top: .35rem; padding-top: calc((44px - 1.3em) / 2 + .4rem); }   /* follows the card's own content: in a row of cards of unequal length the air sits under the link, not above it */

/* ---------- 5.20 Modalities ---------------------------------------------- */
.modality-grid { list-style: none; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.modality-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  height: 100%;
  padding: clamp(24px, 2.8vw, 34px);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
}
.modality-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: .4rem; }   /* the shared card icon chip */
.modality-card__icon .icon { width: 22px; height: 22px; }
.modality-card__title { font-family: var(--font-display); font-weight: 750; font-stretch: 108%; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.12; color: var(--fg); }
.modality-card__text { font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); }

/* ---------- 5.21 Editorial blocks: values, duo, result pair, sector list - */
.values { list-style: none; border-top: 1px solid var(--rule); }
.values__item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem 1rem; align-items: baseline; padding-block: clamp(22px, 2.8vw, 34px); border-bottom: 1px solid var(--rule); }
.values__num { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; color: var(--eyebrow); }
.values__title { font-family: var(--font-display); font-weight: 800; font-stretch: 114%; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1; letter-spacing: -.035em; color: var(--fg); }
.values__text { grid-column: 2; color: var(--fg-2); max-width: 46ch; }

.duo { display: grid; gap: var(--gap-l); grid-template-columns: minmax(0, 1fr); }
.duo__item { display: grid; gap: .9rem; align-content: start; padding-top: 1.4rem; border-top: 2px solid var(--fg); }
.duo__label { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; font-stretch: 100%; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; color: var(--eyebrow); }   /* also on an <h3> when the section H2 already says the same words (nosotros §5) */
.duo__title { font-size: var(--fs-m); }
.duo__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg-2); max-width: 44ch; }

.result-pair { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.result { display: grid; gap: .6rem; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--surface); }
.result--yes { background: var(--navy-900); border-color: transparent; }   /* + .theme-dark */
.result__title { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -.03em; line-height: 1.05; color: var(--fg); }
.result__mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.result--yes .result__mark { background: var(--blue-600); color: #FFFFFF; }
.result__text { color: var(--fg-2); }

.sector-list { list-style: none; border-top: 1px solid var(--rule); }
.sector-list__item { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .35rem 1rem; align-items: center; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
.sector-list__icon { grid-row: span 3; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.sector-list__icon .icon { width: 22px; height: 22px; }
.sector-list__name { font-family: var(--font-display); font-weight: 700; font-stretch: 106%; font-size: 1.1875rem; letter-spacing: -.016em; line-height: 1.2; color: var(--fg); }
.sector-list__norms { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .08em; line-height: 1.6; text-transform: uppercase; color: var(--fg-3); }

/* ---------- 5.22 FO·CER·COL pillars -------------------------------------- */
.pillars { list-style: none; display: grid; gap: clamp(48px, 7vw, 72px) var(--gap); grid-template-columns: minmax(0, 1fr); }
.pillar { display: grid; align-content: start; gap: .85rem; }
.pillar__syllable {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(5.25rem, 3rem + 8.6vw, 10.5rem);
  line-height: .78;
  letter-spacing: -.055em;
  color: var(--fg);
  margin-bottom: clamp(.5rem, 1.5vw, 1.25rem);
  max-width: none;
  text-transform: uppercase;          /* written «Fo · Cer · Col» so screen readers say syllables, not letters */
}
.pillar--accent .pillar__syllable { color: var(--blue-600); }
.theme-dark .pillar--accent .pillar__syllable { color: var(--blue-500); }
.pillar__label {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.pillar__label span { color: var(--fg-3); }
.pillar__title { font-family: var(--font-display); font-weight: 750; font-stretch: 108%; font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); letter-spacing: -.025em; line-height: 1.1; color: var(--fg); }
.pillar__text { color: var(--fg-2); max-width: 36ch; }
.manifesto {
  position: relative;
  margin: clamp(80px, 11vw, 160px) auto 0;
  max-width: none;                    /* line breaks come from the .u-line sentences */
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 114%;
  font-size: var(--fs-l);
  line-height: 1.02;
  letter-spacing: -.036em;
  color: var(--fg);
  text-wrap: balance;
}
.manifesto__orbit { display: block; width: clamp(220px, 40%, 520px); height: auto; margin: clamp(20px, 3vw, 32px) auto 0; fill: none; overflow: visible; }
.manifesto__orbit-shape { fill: var(--blue-500); }   /* tapered like the logo orbit; drawn on by the masked .orbit-draw */

/* ---------- 5.23 Credits ------------------------------------------------- */
.credit-thumb { width: 72px; aspect-ratio: 3 / 2; border-radius: 8px; object-fit: cover; }
.credits-table td { vertical-align: top; }
.credits-table a { color: var(--link); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.credits-table td a { padding-block: .8rem; }   /* inline padding: a 44 px tall target with no change to the layout */

/* ---------- 5.24 Notes & small print ------------------------------------- */
.note, .small-print { font-size: .8125rem; line-height: 1.65; color: var(--fg-3); max-width: 84ch; }
.note--rule { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.note--box { padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--rule); }
.legal-meta { margin-top: 1rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }


/* =============================================================================
   6. SECTIONS
   ========================================================================== */

/* ---------- 6.1 Header ---------------------------------------------------
   <body data-header="dark">  → starts transparent with white logo (dark hero)
   <body data-header="light"> → starts transparent with navy logo (light hero)
   JS adds .is-scrolled after 8px → frosted white bar + hairline (both modes). */
.site-header {
  --hdr-fg: var(--ink);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--hdr-fg);
  transition: color var(--dur-2) var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), background-color .18s var(--ease-out);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.site-header.is-scrolled::before { opacity: 1; }
.no-js .site-header { position: absolute; }      /* without JS the bar scrolls away with the hero */
.no-js .filter-bar { top: 0; }                    /* … so the catalog bar sticks to the very top (no empty header band above it) */

/* White-on-navy header: dark hero (until scroll), over a dark chapter, and while the mobile menu is open —
   with JS (html.menu-open) and without it (#menu-movil:target) */
body[data-header="dark"] .site-header:not(.is-scrolled),
.site-header.is-on-dark,
.menu-open .site-header,
html:has(#menu-movil:target) .site-header { --hdr-fg: #FFFFFF; }
.site-header.is-on-dark::before { background: rgba(5, 14, 31, .94); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-on-dark::before { background: rgba(5, 14, 31, .9); }   /* .9: over the white side of a light→dark seam it still reads navy, never a muddy grey */
}
/* Open menu: a solid navy band behind the logo and «Cerrar», so menu links scrolled under the header
   (short phones, landscape) never print over them */
.menu-open .site-header::before,
html:has(#menu-movil:target) .site-header::before { opacity: 1; background: var(--navy-950); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: none; backdrop-filter: none; }

.site-header__inner { display: flex; align-items: center; gap: .75rem; height: 100%; }

.brand { position: relative; display: block; flex: none; height: clamp(19px, 6.15vw, 24px); aspect-ratio: 1231.89 / 152; line-height: 0; }
.brand::after { content: ""; position: absolute; inset: -10px -6px; }   /* ≥44 px hit area, no layout change */
.brand__logo { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur-2) var(--ease-out); }
.brand__logo--on-dark { opacity: 0; }
body[data-header="dark"] .site-header:not(.is-scrolled) .brand__logo--on-dark,
.site-header.is-on-dark .brand__logo--on-dark,
.menu-open .site-header .brand__logo--on-dark,
html:has(#menu-movil:target) .site-header .brand__logo--on-dark { opacity: 1; }
body[data-header="dark"] .site-header:not(.is-scrolled) .brand__logo--on-light,
.site-header.is-on-dark .brand__logo--on-light,
.menu-open .site-header .brand__logo--on-light,
html:has(#menu-movil:target) .site-header .brand__logo--on-light { opacity: 0; }

.site-nav { display: none; margin-left: auto; }
.site-nav__list { list-style: none; display: flex; align-items: center; gap: clamp(1.1rem, 1.9vw, 2.1rem); }
.site-nav__link {
  position: relative;
  display: inline-block;
  padding-block: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--hdr-fg);
  opacity: .82;
  transition: opacity var(--dur-1);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .15rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .site-nav__link:hover { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .site-nav__link:hover::after { transform: scaleX(1); transform-origin: left; } }
.site-nav__link[aria-current="page"] { opacity: 1; }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--blue-500); }

.site-header__actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.site-header__cta { display: none; }
/* Over the dark hero the header CTA is a quiet ghost (the hero owns the primary action); it fills on scroll */
body[data-header="dark"] .site-header:not(.is-scrolled) .site-header__cta {
  --btn-bg: rgba(255, 255, 255, .08);
  --btn-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  --btn-glow: none;
}
@media (hover: hover) and (pointer: fine) { body[data-header="dark"] .site-header:not(.is-scrolled) .site-header__cta:hover { --btn-bg: rgba(255, 255, 255, .16); } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  height: 44px;
  min-width: 6.75rem;               /* «Menú» ↔ «Cerrar» without the pill jumping */
  padding: 0 .85rem 0 .95rem;
  border: 1px solid color-mix(in srgb, var(--hdr-fg) 24%, transparent);
  border-radius: var(--r-pill);
  color: var(--hdr-fg);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
@media (hover: hover) and (pointer: fine) { .nav-toggle:hover { border-color: var(--hdr-fg); } }
.nav-toggle__bars { position: relative; width: 18px; height: 10px; }
.nav-toggle__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 1.75px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out);
}
.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child { top: calc(100% - 1.75px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { top: calc(50% - .875px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: rotate(-45deg); }

/* ---------- 6.2 Mobile full-screen menu ---------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--navy-950);
  color: #FFFFFF;
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-out), opacity .4s var(--ease-out), visibility 0s linear .7s;
}
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 40% at 90% 0%, rgba(47, 123, 255, .35), rgba(47, 123, 255, 0)),
    radial-gradient(50% 35% at 0% 100%, rgba(31, 95, 214, .25), rgba(31, 95, 214, 0));
  pointer-events: none;
}
.mobile-menu.is-open, .mobile-menu:target {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0);
  transition: clip-path .7s var(--ease-out), opacity .3s var(--ease-out), visibility 0s;
}
.mobile-menu__inner { flex: 1; display: flex; flex-direction: column; gap: 2.5rem; padding-block: 1.5rem 2.5rem; }
.mobile-menu__list { list-style: none; border-top: 1px solid rgba(255, 255, 255, .1); }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: .95rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 114%;
  font-size: clamp(2rem, 1.3rem + 3.6vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  opacity: 0;
  transform: translateY(16px);
  transition: transform .8s var(--ease-out), opacity .6s var(--ease-out), color var(--dur-1);
  transition-delay: calc(.1s + var(--i, 0) * 55ms);
}
.mobile-menu.is-open .mobile-menu__link, .mobile-menu:target .mobile-menu__link { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .mobile-menu__link:hover { color: var(--blue-300); } }
.mobile-menu__link[aria-current="page"] { color: var(--blue-300); }
.mobile-menu__index { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono); letter-spacing: .12em; color: var(--blue-300); transform: translateY(-.6em); }
.mobile-menu__foot { display: grid; gap: 1.1rem; margin-top: auto; }
.mobile-menu__secondary { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; font-size: 1.125rem; }
.mobile-menu__tagline { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .14em; text-transform: uppercase; color: rgba(232, 241, 255, .58); }
.mobile-menu__close { display: inline-flex; align-items: center; align-self: flex-end; min-height: 44px; margin-bottom: -1.5rem; font-weight: 600; color: var(--blue-300); }   /* no-JS only: first thing in the menu */
/* With JS the menu is a modal dialog: this link stays as its in-dialog close control for screen
   readers, visually hidden until it receives keyboard focus (the header toggle is the visible one). */
/* Scoped to .is-ready (added by main.js at the end of boot), not .js (set by the inline head script): if
   main.js fails to load, the :target menu still opens and this visible link is the way out. */
.is-ready .mobile-menu__close:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu-open { overflow: hidden; }

/* ---------- 6.3 Home hero (dark chapter + aurora + certificate) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(24px, 4vh, 60px));
  overflow: clip;
  background: var(--navy-950);
  color: #FFFFFF;
}
.hero__backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(141, 184, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 184, 255, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 72% 42%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 72% 42%, #000 0%, transparent 72%);
}
.hero__orbits { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.hero__orbits ellipse { stroke: rgba(141, 184, 255, .13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero__orbits .is-bright { stroke: rgba(141, 184, 255, .26); }
.hero__horizon {
  position: absolute;
  left: -10%; right: -10%; bottom: -1px;
  height: 46%;
  background: radial-gradient(60% 70% at 50% 100%, rgba(31, 95, 214, .32), rgba(31, 95, 214, 0) 70%);
}
.hero__inner {
  flex: 1;
  display: grid;
  align-content: center;
  gap: clamp(56px, 9vw, 80px);
  padding-bottom: clamp(28px, 4vh, 64px);
}
.hero__copy { display: grid; justify-items: start; max-width: 760px; }
.hero__eyebrow { margin-bottom: clamp(22px, 3.4vh, 34px); letter-spacing: .06em; }   /* one line at 360; .12em from 540 */
.hero__title { color: #FFFFFF; }
.hero__line { display: block; }
/* One light sweep across BOTH accent lines: each line paints its half of a
   two-line-tall ramp (line 3 = top half, line 4 = bottom half). */
.hero__line--accent {
  background-image: linear-gradient(172deg, #FFFFFF 0%, #DCE8FF 34%, var(--blue-300) 74%, #7FAEFF 100%);
  background-size: 100% 200%;
  background-repeat: no-repeat;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: .04em;
}
.hero__line--accent + .hero__line--accent { background-position: 0 100%; }
.hero__lead { margin-top: clamp(20px, 3vh, 32px); max-width: 40ch; font-size: var(--fs-lead); line-height: 1.55; color: rgba(232, 241, 255, .78); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: clamp(28px, 4.6vh, 44px); }
.hero__actions .btn--lg { padding-inline: 1.25em; font-size: .9375rem; }
.hero__visual { position: relative; display: grid; place-items: center; }
.hero .cert-stage { width: min(84vw, 340px); }
.hero__strip { display: none; position: relative; border-top: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(5, 14, 31, 0), rgba(5, 14, 31, .5)); }   /* from 720: on phones §2 (FO · CER · COL eyebrow + pillars) follows at once, so the strip would repeat the device back to back */

/* FO · CER · COL strip */
.fcc-strip { list-style: none; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .9fr); }   /* phones: CERTIFICACIÓN gets the room it needs */
.fcc-strip__item {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.05rem 0 1.2rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-s);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(232, 241, 255, .62);
}
.fcc-strip__item + .fcc-strip__item { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .1); }
.fcc-strip__syl { color: #FFFFFF; font-size: .8125rem; letter-spacing: .1em; }
.fcc-strip__item:nth-child(2) .fcc-strip__syl { color: var(--blue-300); }
.fcc-strip__dot { display: none; color: rgba(255, 255, 255, .35); }

/* ---------- 6.4 Generic page hero (inner pages) --------------------------
   Variants: .page-hero--light (default) · .page-hero--paper · .page-hero--dark
   (with .theme-dark + body[data-header="dark"]) · .page-hero--media (image). */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(36px, 7vw, 96px));
  padding-bottom: clamp(56px, 8vw, 112px);
  background: var(--bg);
  color: var(--fg);
}
.page-hero--paper { --bg: var(--paper); }
.page-hero--dark { --bg: var(--navy-950); }
.page-hero__backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.page-hero__backdrop::before {
  content: "";
  position: absolute;
  right: -20%; top: -40%;
  width: 90%; height: 120%;
  background: radial-gradient(closest-side, rgba(141, 184, 255, .32), rgba(232, 241, 255, 0));
}
.page-hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 85% 10%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 70% at 85% 10%, #000 0%, transparent 70%);
  opacity: .8;
}
.page-hero--dark .page-hero__backdrop::before { background: radial-gradient(closest-side, rgba(47, 123, 255, .45), rgba(47, 123, 255, 0)); }
.page-hero .breadcrumbs { margin-bottom: clamp(28px, 4.5vw, 48px); }
.page-hero__grid { display: grid; gap: var(--gap-l); align-items: end; }
.page-hero__copy { display: grid; justify-items: start; gap: 1.35rem; max-width: 780px; }
.page-hero__title { font-size: var(--fs-xl); max-width: 15ch; }
.page-hero__lead { max-width: 44ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.page-hero__media { aspect-ratio: 4 / 3; }   /* 16:9 at 720–959; from 960 it runs the height of the copy (§8) */
/* Photo-hero H1 flows as one balanced paragraph: two .u-line sentences each wider than the column broke
   into 4 ragged lines («Ahora,» alone) */
.page-hero--media .page-hero__title .u-line { display: inline; }
/* Dark heroes: sink the photo into the navy chapter (a bright sky read as a pasted light rectangle) */
.page-hero--dark .page-hero__media::after { background: linear-gradient(180deg, rgba(5, 14, 31, .42), rgba(5, 14, 31, .18) 45%, rgba(5, 14, 31, .58)); }
.page-hero__visual { position: relative; display: grid; place-items: center; }
/* The first section after a page hero starts closer: heroes shorter than the screen no longer leave an
   empty band at the fold (the section's own --section-y stays below it) */
.page-hero + .section:not(.section--tight) { padding-top: clamp(64px, 8vw, 120px); }

/* ---------- 6.5 Section layouts ----------------------------------------- */
/* Dark chapter with soft aurora (home §5, any dark band) */
.chapter { overflow: clip; isolation: isolate; }
.chapter__backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.chapter-intro { display: grid; gap: var(--gap-l); align-items: center; margin-bottom: clamp(48px, 7vw, 96px); }
.chapter-intro__copy { display: grid; justify-items: start; gap: 1.25rem; }
.chapter-intro__copy .title-l { max-width: none; }
.chapter-intro__media { aspect-ratio: 4 / 3; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
/* Fade the backdrop light out before the section edge (no cut-off glows, playbook B.6). Grain stays full. */
.chapter__backdrop .aurora,
.cta-band__backdrop .aurora,
.cta-band__backdrop .hero__orbits {
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
/* Phones: the two CTAs share one width */
.chapter-intro .btn-group, .cta-band .btn-group { width: 100%; }
.chapter-intro .btn-group .btn, .cta-band .btn-group .btn { flex: 1 1 100%; white-space: normal; text-wrap: balance; }   /* a label wider than a 320 px phone wraps instead of widening the column */

/* Sectors */
.sectors__head { margin-bottom: clamp(36px, 5vw, 64px); }

/* Steps: sticky aside + stepper */
.steps-layout { display: grid; gap: clamp(40px, 6vw, 64px); }
.steps-layout__sticky { display: grid; justify-items: start; gap: 1.25rem; }
.steps-layout__sticky .title-l { max-width: 14ch; }
.steps-layout__progress { display: none; margin-block: 1rem .5rem; }
.steps-layout__aside-cta { display: none; }          /* phones/tablets: the link follows the steps */
.steps-layout__cta { margin-top: -.5rem; }

/* Verify teaser */
.verify-teaser { overflow: clip; isolation: isolate; }
.verify-teaser__layout { display: grid; gap: clamp(56px, 8vw, 96px); align-items: center; }
.verify-teaser__copy { display: grid; justify-items: start; gap: 1.25rem; }
.verify-teaser__copy .title-l { max-width: 15ch; }
.verify-teaser__visual { position: relative; padding-block: 2rem; }
.verify-teaser__visual .cert-stage { width: min(100%, 520px); }
.verify-teaser__visual .cert-stage__glow { background: radial-gradient(closest-side, rgba(47, 123, 255, .22), rgba(47, 123, 255, 0)); }
.verify-teaser__visual .cert-stage__floor { background: radial-gradient(closest-side, rgba(10, 31, 60, .3), rgba(10, 31, 60, 0)); }
.verify-teaser__visual .cert-stage__orbit { left: -18%; width: 136%; }   /* stays inside the column gap: never runs under the lead */
.verify-teaser__visual .cert-stage__orbit .orbit-a { stroke: rgba(31, 95, 214, .35); }
.verify-teaser__visual .cert-stage__orbit .orbit-b { stroke: rgba(31, 95, 214, .14); }
.verify-teaser__visual .cert-stage__orbit .orbit-dot { fill: var(--blue-600); }

/* FAQ */
.faq-layout { display: grid; gap: clamp(32px, 5vw, 56px); }
.faq-layout__head .title-l { max-width: 16ch; }

/* Normas */
.normas { padding-block: var(--section-y-s); }
.normas .lead, .normas__note { text-wrap: balance; max-width: 52ch; }
.normas__foot { display: grid; justify-items: center; gap: 1rem; margin-top: clamp(24px, 3vw, 36px); }
.normas__note { text-align: center; margin-inline: auto; }

/* CTA band (final call to action; light or dark) */
.cta-band { position: relative; overflow: clip; isolation: isolate; }
.cta-band__backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cta-band__layout { display: grid; gap: clamp(48px, 7vw, 88px); align-items: end; }
.cta-band__copy { display: grid; justify-items: start; gap: 1.35rem; }
.cta-band__copy .lead:has(> .u-line) { max-width: 60ch; }   /* home #contacto: one sentence per line on desktop (.u-line spans) */
.lead .u-line { text-wrap: balance; }      /* a sentence that must wrap breaks evenly */
.cta-band__title { font-size: min(var(--fs-l), 11vw); max-width: 16ch; }   /* section-H2 tier: always below the page's H1, 2 balanced lines on desktop; 11vw: «conversación.» fits a 320 px phone */
.cta-band__title--giant { font-size: min(clamp(3.25rem, 1.2rem + 5vw, 5.25rem), 14.5vw, 9.6svh); font-stretch: 120%; line-height: .9; letter-spacing: -.035em; max-width: none; }
.cta-band__aside { width: 100%; }
.cta-band__panel {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
  background: var(--surface);
}
/* Leads over the aurora (dark CTA bands, dark page heroes): the light blobs drift behind the text, so the
   secondary text is a little brighter there (≥ 4.5:1 at the hot spot). */
.cta-band.theme-dark, .page-hero--dark { --fg-2: rgba(232, 241, 255, .9); }
.cta-band__backdrop .aurora { opacity: .72; }   /* phones: the vmax-sized blobs sit right behind the stacked copy; full strength from 720 (§8) */
/* Dark glass, not light glass: the aurora lights the band up to ≈rgb(63,101,153) behind the panel, where
   even white text fell under 4.5:1. A navy fill keeps every label and value AA (WCAG 1.4.3). */
.theme-dark .cta-band__panel {
  background: linear-gradient(180deg, rgba(5, 14, 31, .58), rgba(5, 14, 31, .66));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-dark .cta-band__panel { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
}
.cta-band__panel .channels { border-top: 0; }
.cta-band__panel .channels__row:last-child { border-bottom: 0; }
.cta-band__panel-title { margin-bottom: .5rem; }

/* Legal / prose page with sticky table of contents */
.legal { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
.toc { padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface-2); }
.toc__title { margin-bottom: .75rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.toc ol { list-style: none; display: grid; gap: .1rem; }
.toc a { display: block; padding: .38rem .6rem; border-radius: 8px; font-size: .875rem; line-height: 1.35; color: var(--fg-2); transition: color var(--dur-1), background-color var(--dur-1); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--fg); background: var(--surface); } }
.toc a[aria-current], .toc a.is-active { color: var(--link); background: var(--sky-100); }
.legal__body { min-width: 0; max-width: 760px; }

/* 404 */
.notfound { position: relative; isolation: isolate; overflow: clip; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-top: calc(var(--header-h) + 48px); padding-bottom: 72px; }
.notfound__layout { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
.notfound__copy { display: grid; justify-items: start; gap: 1.25rem; }
.notfound__code {
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  justify-self: center;
  font-size: clamp(6rem, 2.5rem + 12vw, 14rem);
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--fg);
}
.notfound__code svg { position: absolute; inset: -18% -12%; width: 124%; max-width: none; height: 136%; fill: none; stroke: var(--blue-500); stroke-width: 1.5; overflow: visible; }   /* max-width: the reset's 100 % clamp shifted the ring 12 % left */
.notfound__links { list-style: none; display: grid; gap: .75rem; margin-top: .5rem; }

/* ---------- 6.6 Footer -------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: var(--z-float);        /* stacking level of the floating button, which lives inside the footer */
  isolation: isolate;
  overflow: clip;
  padding-top: clamp(64px, 8vw, 112px);
  background: var(--navy-950);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);   /* explicit, hairline division from the CTA band */
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -30%;
  width: 120%; height: 70%;
  translate: -50% 0;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(31, 95, 214, .28), rgba(31, 95, 214, 0));
  pointer-events: none;
}
/* Same grain as the CTA band above (there it sits in a backdrop layer, so it renders as plain
   noise rather than an overlay on navy): one continuous surface across the seam. */
.site-footer > .grain { z-index: -1; mix-blend-mode: normal; }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding-bottom: clamp(40px, 6vw, 72px); }
.footer-col { min-width: 0; }
.footer-col__title { margin-bottom: .55rem; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono-s); letter-spacing: .14em; text-transform: uppercase; color: rgba(232, 241, 255, .58); }
.footer-col ul { list-style: none; display: grid; gap: 0; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                /* touch target; multi-line links read as one block */
  padding-block: .3rem;
  font-size: .9375rem;
  line-height: 1.35;
  color: rgba(232, 241, 255, .8);
  transition: color var(--dur-1);
}
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: #FFFFFF; } }
.footer-col--contact { grid-column: 1 / -1; }
.footer-contact { display: grid; gap: .1rem; }
.footer-contact > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: center; min-height: 36px; }
.footer-contact dt { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .12em; text-transform: uppercase; color: rgba(232, 241, 255, .58); }
.footer-contact dd { font-size: .9375rem; color: rgba(232, 241, 255, .82); min-width: 0; }
.footer-contact a { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--dur-1); }
@media (hover: hover) and (pointer: fine) { .footer-contact a:hover { color: #FFFFFF; } }
/* Real contact values (21/10/2026), footer «Contacto» column + home closing panel (index.html #contacto).
   - Phone and WhatsApp numbers never split. The e-mail breaks only at the <wbr> after «@» (overflow-wrap is a last
     resort). The address keeps «Cra. 85 # 08-32», «piso 2» and «Bogotá D.C.» together with &nbsp; (also in
     lib/manifest.js, since main.js rewrites it).
   - Footer «Dirección» row (several lines): label level with the first line, padded like the link rows above
     (text centred in a 44 px touch / 34 px fine-pointer target).
   - Footer, only where the values did not fit the narrow column: 720–959 the contact column also takes the empty
     third cell of its row; 960–1279 labels sit above their values (side by side, the address ran to 5–7 lines).
   - Home panel: a narrower label column only at ≤389 and 960–1099. These two ranges are content-driven, outside
     the 540 · 720 · 960 · 1280 grid of §8: exactly the widths where «+57 322 778 7590» did not fit.
   Everywhere else nothing changes. */
.footer-contact a, .channels__value a { overflow-wrap: anywhere; }
.footer-contact a[href^="tel:"], .footer-contact a[data-contact="whatsapp"],
.channels__value a[href^="tel:"], .channels__value a[data-contact="whatsapp"] { white-space: nowrap; }
.footer-contact > div:has([data-contact="address"]) { align-items: baseline; }
.footer-contact dd:has(> [data-contact="address"]) { padding-block: 10px; }
@media (min-width: 960px) and (hover: hover) and (pointer: fine) { .footer-contact dd:has(> [data-contact="address"]) { padding-block: 5px; } }
@media (min-width: 720px) and (max-width: 959.98px) { .site-footer__cols > .footer-col--contact { grid-column: span 2; } }
@media (min-width: 960px) and (max-width: 1279.98px) {
  .footer-contact { gap: .5rem; }
  .footer-contact > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 389.98px), (min-width: 960px) and (max-width: 1099.98px) {
  .cta-band__panel .channels__row { grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; }
}
@media (max-width: 359.98px) { .cta-band__panel .channels__row { grid-template-columns: 4.5rem minmax(0, 1fr); } }
.site-footer__legal { padding-block: 1.6rem; border-top: 1px solid var(--rule); font-size: .8125rem; line-height: 1.65; color: rgba(232, 241, 255, .62); }
.site-footer__legal p { max-width: 104ch; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.75rem;
  padding-block: .9rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  color: rgba(232, 241, 255, .62);
}
.site-footer__bottom p { max-width: none; }
.site-footer__bottom .pending { font-size: inherit; }   /* inline in the © line: same size as «NIT» */
.site-footer__made { display: inline-flex; align-items: center; gap: .55rem; }
.site-footer__made::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 4px rgba(47, 123, 255, .18); }
.back-to-top { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; color: rgba(232, 241, 255, .82); transition: color var(--dur-1); }
@media (hover: hover) and (pointer: fine) { .back-to-top:hover { color: #FFFFFF; } }
.back-to-top .icon { transform: rotate(-90deg); transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .back-to-top:hover .icon { transform: rotate(-90deg) translateX(3px); } }
/* Big lockup + brand line (content §1.3). Clear space below ≥ its FOCERCOL cap height (logo rule), and
   room so the floating button never sits on the last letter (also without JS). Phones show the compact
   lockup, so the line is real text under it; from 720 the wide lockup draws the line itself and the text
   stays for screen readers only (the lockup image is alt=""). */
.site-footer__brand { padding-top: calc(clamp(28px, 5vw, 56px) - 6px); padding-bottom: calc(max(96px, 7.5vw) + env(safe-area-inset-bottom, 0px)); }
.site-footer__wordmark { display: block; padding-block: 3px; }   /* ≥ 44 px link («FOCERCOL, ir al inicio») on phones; the 6 px come out of the brand block's top padding */
.site-footer__wordmark img { width: 100%; height: auto; }
.site-footer__wordmark .wordmark--wide { display: none; }
.site-footer__tagline { margin-top: max(20px, 7.5vw); font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; color: rgba(232, 241, 255, .62); }

/* ---------- 6.7 Floating WhatsApp --------------------------------------- */
.wa-float {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 30px -8px rgba(5, 14, 31, .5), 0 0 0 6px rgba(47, 123, 255, .12);
  visibility: visible;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), opacity .35s var(--ease-out), background-color var(--dur-1), visibility 0s;
  -webkit-tap-highlight-color: transparent;
}
.wa-float .icon { width: 25px; height: 25px; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { transform: translateY(-3px); background: var(--blue-700); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 36px -10px rgba(5, 14, 31, .55), 0 0 0 8px rgba(47, 123, 255, .16); } }
/* JS: tucked away while a hero, a form, #contacto or the footer is on screen, and while scrolling down on
   phones. visibility (delayed until the slide-out ends) also removes it from screen-reader browse mode. */
.wa-float.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 24px));
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), opacity .35s var(--ease-out), background-color var(--dur-1), visibility 0s linear .35s;
}
.wa-float__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: .55rem .9rem;
  border-radius: var(--r-pill);
  background: var(--navy-900);
  color: #FFFFFF;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(5, 14, 31, .6);
  opacity: 0;
  transform: translate(8px, -50%);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .wa-float:hover .wa-float__label { opacity: 1; transform: translate(0, -50%); } }
.wa-float:focus-visible .wa-float__label, .wa-float.is-hinting .wa-float__label { opacity: 1; transform: translate(0, -50%); }
.menu-open .wa-float { opacity: 0; pointer-events: none; }

/* ---------- 6.8 Splash (home only; once per session) -------------------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-splash);
  display: grid;
  place-items: center;
  background: var(--navy-950);
  /* SAFETY NET: hides itself at 4.5 s even if JS never runs */
  animation: splashSafety .01s linear 4.5s forwards;
  transition: opacity .4s var(--ease-out), clip-path .6s var(--ease-out), visibility 0s linear .6s;
}
.splash.is-out { opacity: 0; clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none; }
.no-js .splash, .splash-seen .splash { display: none; }
.splash__mark { width: clamp(88px, 11vw, 124px); height: auto; overflow: visible; }
.splash__mark .fc-f { fill: #FFFFFF; }
.splash__mark .fc-orbit { fill: var(--blue-500); }
.fc-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fcDraw .8s var(--ease-out) .05s forwards; }
.fc-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; animation: fcDot .26s var(--ease-out) .62s forwards; }

/* ---------- 6.9–6.14 Page layers ----------------------------------------
   Rules that belong to ONE page, scoped by its <body class="page-…">. Mobile-first, kit tokens and
   breakpoints only. Each block is progressive: without it the page still reads with the kit defaults.
   Kit fixes found while building the pages live in their components instead (no page scope):
     · .prose > section > * + *     rhythm inside legal <section>s        (§4, from privacidad)
     · .field__input text-overflow  long placeholders end in «…»          (§5.8, from contacto; also verificar)
     · .stepper__role               label above text on phones, column ≥540 (§5.14 + §8, from certificación)
     · .notfound__code svg          max-width: none (ring centred on «404») (§6.5, from 404)
   certificación, nosotros, verificar and index need no page layer. */

/* ---------- 6.9 Page: formación ------------------------------------------ */
/* Type legend: each tag keeps its explanation beside it; the text wraps next to the tag on phones */
.page-formacion .type-legend li { flex-wrap: nowrap; align-items: flex-start; }
.page-formacion .type-legend .tag { flex: none; }

/* Phones, «Todos» active: each sector's programs become a swipe rail (the home sector-rail pattern),
   so the 8 sectors read as 8 screens instead of ~35. When a sector chip is active (main.js sets [hidden]
   on the other groups) that sector returns to the vertical list. No :has() support → vertical list. */
.page-formacion .catalog-shell:not(:has(.program-group[hidden])) .program-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 340px);   /* ≈40 px peek of the next card at 390 */
  align-items: start;                    /* each card keeps its own height: no empty block above a short card's CTA */
  gap: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.page-formacion .catalog-shell:not(:has(.program-group[hidden])) .program-grid::-webkit-scrollbar { display: none; }
.page-formacion .catalog-shell:not(:has(.program-group[hidden])) .program-grid > li { scroll-snap-align: start; }
.page-formacion .catalog-shell:not(:has(.program-group[hidden])) .program-grid .program-card { height: auto; }
/* Rail position (the home «01 / 08» meter) under the sector intro, above its rail: a short first card no
   longer leaves the counter floating far below it; only while the rails exist */
.page-formacion .program-group .rail-meter.is-ready { margin: 0 0 10px; }
.page-formacion .catalog-shell:has(.program-group[hidden]) .rail-meter { display: none; }
@media (hover: hover) and (pointer: fine) {           /* mouse users in narrow windows can still scroll the rail */
  .page-formacion .catalog-shell:not(:has(.program-group[hidden])) .program-grid { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
}
/* Landscape phones: header + a sticky chip bar took 41 % of a 360 px tall screen. The bar scrolls with the
   page there, and the anchor offset drops to the header alone (main.js measures the bar only while sticky). */
@media (max-height: 500px) and (max-width: 959.98px) {
  .page-formacion .filter-bar { position: relative; top: auto; }
  html:has(body.page-formacion) { scroll-padding-top: calc(var(--header-h) + 20px); }
}
/* Without JS the header scrolls away (.no-js .site-header), so the sticky bar sits at the very top and the
   offset is the bar alone */
html.no-js:has([data-filter-bar]) { scroll-padding-top: 96px; }
@media (min-width: 720px) {                           /* rail → the kit grid (2 columns) */
  .page-formacion .catalog-shell:not(:has(.program-group[hidden])) .program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 16px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    align-items: stretch;
  }
  .page-formacion .catalog-shell:not(:has(.program-group[hidden])) .program-grid .program-card { height: 100%; }
}
/* Tablets (720–959): each sector intro sets photo beside text (≈270 × 165 px) instead of a full-width photo
   above the grid — the 8 intros pushed every sector's first cards below the fold */
@media (min-width: 720px) and (max-width: 959.98px) {
  .page-formacion .program-group__head { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap); align-items: center; }
  .page-formacion .program-group__media { aspect-ratio: 16 / 10; }
}
/* 960–1279: the 9 chips wrap to a second row beside the label (a swipe row with a hidden scrollbar hid
   Logística, Alimentos and Servicios from mouse users); the single anchor offset grows with the bar */
@media (min-width: 960px) and (max-width: 1279.98px) {
  .page-formacion .filter-bar .chips { flex-wrap: wrap; overflow: visible; row-gap: .4rem; -webkit-mask-image: none; mask-image: none; }
  .page-formacion .filter-bar .chip { padding-inline: .8em; }
  html:has(body.page-formacion) { scroll-padding-top: calc(var(--header-h) + 148px); }
  html.no-js:has(body.page-formacion) { scroll-padding-top: 148px; }
}
/* Desktop: the 9 chips (≈1220 px) never fit beside the label and the live count, so from 1280 the bar
   uses two rows (label + count, then every chip visible). 960–1279 keeps the kit's swipeable row (the
   count is visually hidden there, so the chips fade out at the container edge). */
@media (min-width: 1280px) {
  .page-formacion .catalog-shell:not(:has(.program-group[hidden])) .program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-formacion .filter-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label status" "chips chips";
    gap: .45rem 1.25rem;
    padding-block: .75rem .8rem;
  }
  .page-formacion .filter-bar__label { grid-area: label; }
  .page-formacion .filter-bar__status { grid-area: status; }
  .page-formacion .filter-bar .chips {
    grid-area: chips;
    flex-wrap: wrap;            /* safety net only: with the spacing below all 9 chips fit one row from 1280 */
    gap: .375rem;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-formacion .filter-bar .chip { padding-inline: .8em; }   /* 9 chips ≈ 1165 px ≤ 1184 px of content at 1280 */
  /* the two-row bar is ≈25 px taller: the single offset grows with it (WCAG 2.4.11) */
  html:has(body.page-formacion) { scroll-padding-top: calc(var(--header-h) + 120px); }
  html.no-js:has(body.page-formacion) { scroll-padding-top: 120px; }
}

/* ---------- 6.10 Page: empresas ------------------------------------------ */
/* §2 Retos (.card-grid--2 … .card__answer) and §3 Servicios (.service-grid--3 … «Qué recibe») end in a
   ruled footer of variable length. From 720 (2–3 columns) a subgrid shares each card's four rows across
   the row so titles, texts and hairlines line up (the .sector-grid pattern). Phones and browsers without
   subgrid keep the default flex column. */
@media (min-width: 720px) {
  @supports (grid-template-rows: subgrid) {
    .page-empresas .card-grid--2 > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .page-empresas .card-grid--2 .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: .8rem; }
    .page-empresas .card-grid--2 .card__answer { margin-top: 0; }

    .page-empresas .service-grid--3 > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .page-empresas .service-grid--3 .service-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: .85rem; }
    .page-empresas .service-grid--3 .service-card__deliverable { margin-top: 0; align-content: start; }
  }
}

/* §4 Cómo trabajamos: from 960 the four steps share one hairline (an orbit path) with a node per step,
   instead of four separate rules broken by the column gaps */
@media (min-width: 960px) {
  .page-empresas .steps-row { position: relative; padding-top: 0; }
  .page-empresas .steps-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--blue-500), var(--rule-strong) 70%, transparent); }
  .page-empresas .steps-row__item { border-top: 0; }
}

/* ---------- 6.11 Page: contacto ------------------------------------------ */
/* Phones: «Enviar por WhatsApp» / «Enviar por correo» share one width, stacked (the .cta-band button
   pattern); side by side from 540. */
.page-contacto .form__actions .btn { flex: 1 1 100%; }
@media (min-width: 540px) {
  .page-contacto .form__actions .btn { flex: 0 0 auto; }
}
/* Hero visual (from 960, beside the copy): the conversation (chat hub) with the other channels as
   satellites on the brand orbit — a decorative diagram (aria-hidden), no data, so nothing to confirm.
   Phones and tablets go straight from the CTAs to the channel cards. */
.page-contacto .page-hero__visual { display: none; }
.contact-orbit { width: min(100%, 540px); justify-self: end; }
.contact-orbit svg { display: block; width: 100%; height: auto; overflow: visible; }
.contact-orbit__ring { fill: none; stroke: rgba(31, 95, 214, .2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.contact-orbit__ring--bright { stroke: rgba(31, 95, 214, .5); }
.contact-orbit__halo { fill: rgba(47, 123, 255, .1); }
.contact-orbit__hub { fill: var(--navy-900); }
.contact-orbit__node { fill: #FFFFFF; stroke: rgba(31, 95, 214, .2); stroke-width: 1; filter: drop-shadow(0 10px 18px rgba(10, 31, 60, .14)); }
.contact-orbit__glyph { fill: none; stroke: var(--blue-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-orbit__glyph--hub { stroke: #FFFFFF; stroke-width: 1.5; }
.contact-orbit__dot { fill: var(--blue-500); }
@media (min-width: 960px) {
  .page-contacto .page-hero__visual { display: grid; }
}
/* Channel cards (21/10/2026: Horario and Redes removed by the client): four cards in a 2 × 2 grid —
   WhatsApp · Correo, then Teléfono · Dirección. From 960 the grid has four tracks and every card with a
   description or an action spans two of them. A card with only a label and a value (none today) would stay
   compact and take one track. */
.page-contacto .channel-card:not(:has(.channel-card__text, .channel-card__action)) { padding-block: 20px; gap: .5rem; }
@media (min-width: 960px) {
  .page-contacto .channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-contacto .channel-grid > li:has(.channel-card__text),
  .page-contacto .channel-grid > li:has(.channel-card__action) { grid-column: span 2; }
}

/* ---------- 6.12 Page: privacidad ---------------------------------------- */
/* A quieter legal title (2 lines from 960) so the hero doesn't outweigh the document */
.page-privacidad .page-hero__title,
.page-creditos .page-hero__title { font-size: min(var(--fs-l), 3.5rem, 8.6vw); max-width: 24ch; }   /* utility pages, one quieter tier (créditos shares it, §6.14) — 56 px: «Política de tratamiento de / datos personales» from 960 */
/* Readable measure: ≈75 characters per line at the 18 px body size (the kit's 760 px gives ≈84) */
.page-privacidad .legal__body { max-width: 42.5rem; }
/* Index inside <details open>: main.js closes it below 960 (phones reach the policy text sooner; «Índice»
   opens it) and keeps it open from 960, where it is the sticky side index. Without JS it stays open. */
.toc__details > summary { list-style: none; cursor: pointer; }
.toc__details > summary::-webkit-details-marker { display: none; }
.toc__details > summary::marker { content: ""; }
.page-privacidad .toc__details > .toc__title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; margin: -.5rem 0 0; }
.page-privacidad .toc__details[open] > .toc__title { margin-bottom: .5rem; }
.page-privacidad .toc__details > .toc__title::after { content: "+"; font-size: 1.125rem; line-height: 1; letter-spacing: 0; color: var(--fg-2); }
.page-privacidad .toc__details[open] > .toc__title::after { content: "−"; }
.page-privacidad .toc__details:not([open]) { margin-bottom: -.5rem; }
/* Data rows (§1 Responsable, §13 Canales): label above value on phones; from 540 a label column wide
   enough for two lines at most */
.page-privacidad .legal__body .meta-list > div { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
.page-privacidad .legal__body > section > .meta-list:last-child > div:last-child { border-bottom: 0; }   /* the next h2 rule closes it */
@media (min-width: 540px) {
  .page-privacidad .legal__body .meta-list > div { grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); gap: 1.5rem; }
}
/* Index: 44 px touch targets while it sits above the text (< 960); two columns at 720–959 (column-first,
   reads in order); from 960 the sticky index keeps the kit's compact rows so all 17 entries fit */
.page-privacidad .toc a { display: flex; align-items: center; min-height: 44px; }
@media (min-width: 720px) {
  .page-privacidad .toc ol { display: block; columns: 2; column-gap: var(--gap); }
  .page-privacidad .toc li { break-inside: avoid; }
}
@media (min-width: 960px) {
  /* the reading page is centred under the full-width hero (it leaned left with ≈200 px empty at 1440), and
     the 16rem index keeps «7. Datos sensibles y datos de niñas…» on one line */
  .page-privacidad .legal { grid-template-columns: 16rem minmax(0, 1fr); max-width: calc(16rem + var(--gap-l) + 42.5rem + var(--gutter) * 2); margin-inline: auto; }
  .page-privacidad .toc a { display: block; min-height: 0; }
  .page-privacidad .toc ol { display: grid; columns: auto; }
  .page-privacidad .toc__details > .toc__title { min-height: 0; margin: 0 0 .75rem; cursor: default; }
  .page-privacidad .toc__details > .toc__title::after { display: none; }
}

/* ---------- 6.13 Page: 404 ----------------------------------------------- */
/* Orbit in depth around «404»: two copies of one ellipse — the back one behind the numerals (dimmer), the
   front one clipped (in the SVG) to the lower half of the ring — so it wraps the numerals like the logo
   orbit. Both draw on with .orbit-draw--auto; the satellite dot appears once the front arc has passed it. */
.page-404 .notfound__code { isolation: isolate; }
.page-404 .notfound__orbit--back { z-index: -1; opacity: .42; }
.page-404 .notfound__orbit--front { z-index: 1; }
.page-404 .notfound__dot-halo { fill: var(--blue-500); fill-opacity: .24; stroke: none; }
.page-404 .notfound__dot { fill: var(--blue-300); stroke: none; }
.page-404 .notfound__dot,
.page-404 .notfound__dot-halo { animation: nfDot .6s var(--ease-out) .7s both; transform-box: fill-box; transform-origin: center; }
@keyframes nfDot { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* Backdrop orbits (.hero__orbits) only where copy and numerals sit side by side; on stacked layouts the
   wide arcs would cut through the link rows (the ring around «404» keeps the motif) */
.page-404 .hero__orbits { display: none; }
@media (min-width: 960px) {
  .page-404 .hero__orbits {          /* rise out of the dark on the numerals' side; kit bottom fade kept */
    display: block;
    -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 62%), linear-gradient(180deg, #000 70%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 44%, #000 62%), linear-gradient(180deg, #000 70%, transparent);
    mask-composite: intersect;
  }
}
.page-404 .notfound__copy > .btn { margin-top: .5rem; }   /* a touch more air above the primary CTA */
/* Secondary routes: a hairline index (the mobile-menu / footer language), arrow on the right, rows ≥ 52 px */
.page-404 .notfound__links { gap: 0; width: 100%; max-width: 26rem; margin-top: 1rem; border-top: 1px solid var(--rule); }
.page-404 .notfound__links li { border-bottom: 1px solid var(--rule); }
.page-404 .notfound__links .link-arrow { display: flex; justify-content: space-between; min-height: 52px; font-size: var(--fs-body); font-weight: 500; color: var(--fg); }
.page-404 .notfound__links .link-arrow .icon { color: var(--link); }
@media (hover: hover) and (pointer: fine) {
  .page-404 .notfound__links .link-arrow:hover { color: var(--link); }
}

/* ---------- 6.14 Page: créditos ------------------------------------------ */
/* Row header as a media object: thumbnail beside title + file name (the kit stacks them, ≈60 px more per
   row). The text column is offset by the thumbnail width so long titles never wrap under the photo. */
.page-creditos .credits-table th[scope="row"] { display: flow-root; padding-bottom: .6rem; }
.page-creditos .credits-table .credit-thumb { float: left; margin-top: .2rem; }
.page-creditos .credits-table th[scope="row"] > p { margin: 0 0 0 calc(72px + 1rem); }
/* 540–1279: five columns do not fit as a table (at 768 «Cambios» gets ≈120 px and file names break at
   the hyphen). Each credit stays a card; its four fields sit in two columns, then one row of four from 960. */
@media (min-width: 540px) {
  .page-creditos .credits-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
  .page-creditos .credits-table th[scope="row"] { grid-column: 1 / -1; padding-bottom: .25rem; }
}
@media (min-width: 720px) {          /* undo the kit's «tables become tables» for this table only */
  .page-creditos .credits-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .page-creditos .credits-table tr { padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--rule); }
  .page-creditos .credits-table tbody tr:last-child { border-bottom: 0; }
  .page-creditos .credits-table th[scope="row"],
  .page-creditos .credits-table td { padding: 0 0 .1rem; border-bottom: 0; }
  .page-creditos .credits-table td { display: block; }
  .page-creditos .credits-table td::before { display: block; }
}
@media (min-width: 960px) {
  .page-creditos .credits-table tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 1.75rem; }
}
@media (min-width: 1280px) {         /* back to the kit table (same values as §8 «tables become tables») */
  .page-creditos .credits-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .page-creditos .credits-table tr { display: table-row; padding: 0; border-bottom: 0; }
  .page-creditos .credits-table th[scope="row"],
  .page-creditos .credits-table td { display: table-cell; padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--rule); }
  .page-creditos .credits-table tbody tr:last-child > * { border-bottom: 0; }
  .page-creditos .credits-table td::before { display: none; }
  .page-creditos .credits-table th[scope="row"] code { white-space: nowrap; }   /* file names never break at the hyphen */
}


/* ---------- 6.15 Page: bienestar (+ its §5b teasers on index and empresas) - */
/* Hero eyebrow: phones show «Bienestar laboral» only (one line, like the other pages); the breadcrumb and
   the H1 carry the rest. The full «· Actividades para empresas» returns from 540 (rule below). */
.page-bienestar .page-hero .eyebrow__more { display: none; }
/* Hero photo (wide group shot): where the frame is wider than the photo (16:9 at 720–959) it keeps the
   circle of people instead of the bright treetops */
.page-bienestar .page-hero__media img { object-position: 50% 70%; }
/* §6 citation inside the 13 px .note: the kit's .78em gave 10 px mono; the mono token keeps it at 12 px */
.page-bienestar .note .cite { font-size: var(--fs-mono); }
/* Phones: the nine activities become a swipe rail (the formación catalog recipe, §6.9), so §3 reads as
   one screen instead of nine stacked cards (≈5,700 px at 390). «01 / 09» meter above the rail. From 720
   the kit grid (2 columns, 3 from 1280) is untouched. */
@media (max-width: 719.98px) {
  .page-bienestar #actividades .program-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 340px);   /* ≈40 px peek of the next card at 390 */
    align-items: start;                    /* each card keeps its own height */
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter);
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .page-bienestar #actividades .program-grid::-webkit-scrollbar { display: none; }
  .page-bienestar #actividades .program-grid > li { scroll-snap-align: start; }
  .page-bienestar #actividades .program-grid .program-card { height: auto; }
  .page-bienestar #actividades .program-grid:focus-visible { outline-offset: -2px; }   /* the rail runs edge to edge: keep the ring on screen */
  .page-bienestar #actividades .rail-meter.is-ready { margin: clamp(2rem, 4vw, 3rem) 0 10px; }
  .page-bienestar #actividades .rail-meter.is-ready + .program-grid { margin-top: 0; }
}
@media (max-width: 719.98px) and (hover: hover) and (pointer: fine) {   /* mouse users in narrow windows can still scroll the rail */
  .page-bienestar #actividades .program-grid { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
}
@media (min-width: 540px) {
  .page-bienestar .page-hero .eyebrow__more { display: inline; }
}
/* 720–1279 (2 columns): BIE-09 sat alone in the last row beside an empty cell; it spans the row instead */
@media (min-width: 720px) and (max-width: 1279.98px) {
  .page-bienestar #actividades .program-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* «Bienestar laboral» teasers (§5b on index and empresas, the nosotros «Compromiso» layout): quiet bands, so
   from 1280 the head takes half the row and the H2 drops to the title-m size (2 lines, not 4 ragged ones).
   On empresas the lead sits in the second column: no section-head margin on top of the grid gap (phones). */
.page-empresas #bienestar .faq-layout__head { margin-bottom: 0; }
@media (min-width: 1280px) {
  .page-home #bienestar .faq-layout,
  .page-empresas #bienestar .faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-home #bienestar .faq-layout__head .title-l,
  .page-empresas #bienestar .faq-layout__head .title-l { font-size: var(--fs-m); max-width: none; }
}

/* =============================================================================
   7. EFFECTS
   ========================================================================== */

/* ---------- 7.1 Reveal on scroll ----------------------------------------
   main.js adds .fx to <html> when it boots; without JS everything is visible.
   Add .reveal to any block. Stagger: --i on children (JS sets it inside
   .reveal-stagger) or style="--reveal-delay:120ms".                       */
.fx .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * 80ms);
}
.fx .reveal.is-visible { opacity: 1; transform: none; }
.fx .reveal:focus-within { opacity: 1; transform: none; transition-delay: 0s; }   /* never focus something invisible */
.fx .reveal--fade { transform: none; }
.fx .reveal--scale { transform: scale(.965); }
/* DEFENSIVE (playbook A.4.5): split-text elements are never hidden by .reveal */
.reveal[data-split] { opacity: 1; transform: none; }

/* ---------- 7.2 Aurora (dark chapters) ---------------------------------- */
.aurora { --ax: .62; --ay: .38; position: absolute; inset: 0; overflow: hidden; }
.aurora__blob { position: absolute; border-radius: 50%; will-change: transform; mix-blend-mode: screen; }   /* blues add up as light */
.aurora__blob--1 {
  width: 78vmax; height: 78vmax;
  left: -26vmax; top: -44vmax;
  background: radial-gradient(closest-side, rgba(31, 95, 214, .6), rgba(31, 95, 214, .18) 55%, rgba(31, 95, 214, 0));
  animation: aurora1 26s ease-in-out infinite alternate;
}
.aurora__blob--2 {
  width: 64vmax; height: 64vmax;
  right: -24vmax; top: -18vmax;
  background: radial-gradient(closest-side, rgba(47, 123, 255, .55), rgba(47, 123, 255, 0));
  animation: aurora2 32s ease-in-out infinite alternate;
}
.aurora__blob--3 {
  width: 70vmax; height: 46vmax;
  left: 10vmax; bottom: -30vmax;
  background: radial-gradient(closest-side, rgba(23, 55, 102, .95), rgba(23, 55, 102, 0));
  animation: aurora3 38s ease-in-out infinite alternate;
}
.aurora__blob--4 {
  width: 34vmax; height: 34vmax;
  left: 52%; top: 4%;
  background: radial-gradient(closest-side, rgba(141, 184, 255, .26), rgba(141, 184, 255, 0));
  animation: aurora4 22s ease-in-out infinite alternate;
}
.aurora__follow {
  width: 40vmax; height: 40vmax;
  left: 0; top: 0;
  background: radial-gradient(closest-side, rgba(47, 123, 255, .4), rgba(47, 123, 255, 0));
  translate: calc(var(--ax) * 100vw - 20vmax) calc(var(--ay) * 100vh - 20vmax);
}
.aurora--soft .aurora__blob--1 { opacity: .6; }
.aurora--soft .aurora__blob--2 { opacity: .55; }
.grain {
  position: absolute;
  inset: 0;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---------- 7.3 Orbit draw ----------------------------------------------- */
.orbit-draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.fx .orbit-draw { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-out) .2s; }
.fx .is-visible .orbit-draw, .fx .orbit-draw.is-visible { stroke-dashoffset: 0; }
.orbit-draw--auto { animation: orbitDraw 2.6s var(--ease-out) both; animation-delay: var(--orbit-delay, .4s); }

/* ---------- 7.4 Hero entrance (CSS only; waits for the splash) ----------- */
.hero-in { animation: heroIn 1.1s var(--ease-out) both; animation-delay: calc(var(--hero-delay, .1s) + var(--i, 0) * 90ms); }
.js:not(.splash-seen) .has-splash { --hero-delay: 1s; --enter-delay: 1.1s; --orbit-delay: 1.3s; }

/* ---------- 7.5 Keyframes ------------------------------------------------ */
@keyframes splashSafety { to { opacity: 0; visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); } }
@keyframes fcDraw { to { stroke-dashoffset: 0; } }
@keyframes fcDot { to { transform: scale(1); opacity: 1; } }
@keyframes heroIn { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }
@keyframes certEnter {
  from { opacity: 0; transform: translate3d(0, 60px, 0) rotateX(18deg) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes certFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
@keyframes orbitDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes aurora1 { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.12); } }
@keyframes aurora2 { to { transform: translate3d(-12vmax, 14vmax, 0) scale(.92); } }
@keyframes aurora3 { to { transform: translate3d(16vmax, -8vmax, 0) scale(1.1); } }
@keyframes aurora4 { to { transform: translate3d(-18vmax, 12vmax, 0) scale(1.25); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(47, 123, 255, .45); } 100% { box-shadow: 0 0 0 18px rgba(47, 123, 255, 0); } }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: pulseRing 2.6s var(--ease-out) 2.5s 3; pointer-events: none; }


/* =============================================================================
   8. RESPONSIVE — mobile-first. Only these breakpoints: 540 · 720 · 960 · 1280 · 1600
   ========================================================================== */

@media (min-width: 540px) {
  .brand { height: 26px; }
  .site-header__inner { gap: 1.5rem; }
  .hero__eyebrow { letter-spacing: .12em; }
  .ficha-mock { display: grid; }
  .bento__art--orbits { display: block; }   /* phones: no ficha to orbit, so no stray arcs behind the spec line */
  .spec-line { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: auto; }
  .spec-line__part + .spec-line__part { border-top: 0; border-left: 1px solid var(--rule); }
  .ficha-mock + .spec-line { display: flex; width: min(100%, 480px); border-radius: 0; margin-top: 0; box-shadow: var(--shadow-3); }
  /* the mock + spec line bleed off the bottom edge of the feature tile (Stripe-style) */
  .bento__foot--mock { margin-bottom: calc(-1 * clamp(24px, 3vw, 40px) - 1px); }
  .bento__foot--mock .spec-line { border-bottom: 0; }
  .hero__actions .btn--lg { padding-inline: 1.7em; font-size: 1rem; }
  .hero .cert-stage { width: min(72vw, 380px); }
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-panel { padding: clamp(24px, 4vw, 48px); }
  .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper__role { grid-template-columns: 6.25rem minmax(0, 1fr); gap: .75rem; }
  .stat-row { flex-wrap: nowrap; }
  .chapter-intro .btn-group .btn, .cta-band .btn-group .btn { flex: 0 0 auto; white-space: nowrap; }
}

@media (min-width: 720px) {
  :root { --header-h: 72px; }

  /* header: the CTA fits next to the menu button on tablets */
  .brand { height: 28px; }
  .site-header__cta { display: inline-flex; }

  /* hero (tablet): copy + certificate side by side, all of it in the first viewport */
  :root { --fs-hero: clamp(2.75rem, .6rem + 5.8vw, 4.5rem); }
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; column-gap: 8px; }
  .hero .cert-stage { width: 100%; }
  .hero__strip { display: block; }
  .cta-band__backdrop .aurora { opacity: 1; }
  .fcc-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* inner-page photo heroes (720–959, stacked): a wide frame so photo + copy fit about one screen */
  .page-hero--media .page-hero__media { aspect-ratio: 16 / 9; }
  .fcc-strip__item { flex-direction: row; align-items: baseline; gap: .6em; padding-block: 1.2rem 1.3rem; font-size: var(--fs-mono); letter-spacing: .12em; }
  .fcc-strip__item + .fcc-strip__item { padding-left: clamp(1rem, 3vw, 2.5rem); }
  .fcc-strip__dot { display: inline; }

  /* bento: tiles share a height; type starts at the top, feet sit at the bottom */
  .bento__tile { min-height: 240px; }
  .bento__art--venn { display: block; right: -26px; bottom: -50px; width: 136px; opacity: .22; stroke-width: 1; }   /* cropped by the tile corner: reads as a watermark, never touches the text */
  .bento__art--venn circle { vector-effect: non-scaling-stroke; }
  .bento__tile--stats { min-height: 0; }

  /* faq answers keep clear of the +/− column */
  .faq__a { padding-right: 3.25rem; }

  /* grids */
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid, .program-grid, .modality-grid, .result-pair, .steps-row, .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__tile--feature, .bento__tile--wide { grid-column: 1 / -1; }

  /* sectors: rail → grid (cards reveal again, staggered) */
  .sector-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding: 0 var(--gutter);
    overflow: visible;
    scroll-snap-type: none;
  }
  .fx .sector-grid > .reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .fx .sector-grid > .reveal.is-visible, .fx .sector-grid > .reveal:focus-within { opacity: 1; transform: none; }
  .rail-meter, .rail-meter.is-ready { display: none; }
  .sector-card__media { aspect-ratio: 16 / 10; }
  @supports (grid-template-rows: subgrid) {      /* internal rows aligned across each row of cards */
    .sector-grid > li { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .sector-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .sector-card__media { grid-column: 1; grid-row: 1; }
    .sector-card__body { grid-column: 1; grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: .7rem; }
    .sector-card__cta { align-self: end; }
  }

  /* pillars: FO · CER · COL read across */
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillar__syllable { font-size: clamp(4rem, 9vw, 9.25rem); }

  /* tables become tables */
  .data-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
  .data-table tr { display: table-row; padding: 0; border-bottom: 0; }
  .data-table th, .data-table td, .data-table th[scope="row"] { display: table-cell; padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .data-table thead th { padding-block: .9rem; background: var(--surface-2); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono-s); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
  .data-table tbody tr:last-child > * { border-bottom: 0; }
  .data-table td::before { display: none; }
  .data-table td:first-child, .data-table th[scope="row"] { font-size: var(--fs-small); }

  /* editorial */
  .values__item { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem; }
  .values__text { grid-column: auto; }
  .sector-list__item { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .sector-list__icon { grid-row: span 2; }
  .sector-list__link { grid-column: 3; grid-row: 1 / span 2; }

  /* footer */
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-col--contact { grid-column: auto; }
  .site-footer__wordmark .wordmark--compact { display: none; }
  .site-footer__wordmark .wordmark--wide { display: block; }
  .site-footer__tagline { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the wide lockup draws it */
}

@media (min-width: 960px) {
  /* header: desktop nav */
  .site-nav { display: block; }
  .site-nav__link { font-size: .875rem; }
  .site-header__actions { margin-left: 1.5rem; }
  .nav-toggle, .mobile-menu { display: none; }
  .brand { height: 26px; }

  /* home hero: copy + certificate */
  :root { --fs-hero: clamp(2.75rem, .95rem + 5.6vw, 6.25rem); }   /* 2 columns */
  .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: center; }
  .hero__copy { align-self: center; }
  .hero .cert-stage { width: min(100%, 420px, 52svh); }

  /* section heads: title 7 / lead 5 (8 / 4 squeezed a long lead into 7 lines that rose above the eyebrow);
     the title keeps its 20ch cap */
  .section-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--gap-l); }
  .section-head--split > .lead { padding-bottom: .35rem; }
  /* a lead longer than the title block: top-aligned, its first line on the title's first line (bottom
     alignment pushed it above the eyebrow) — certificación «Qué es» */
  .section-head--lead-top { align-items: start; }
  .section-head--lead-top > .lead { padding-top: 2.3rem; padding-bottom: 0; }

  /* page hero */
  .page-hero--visual .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page-hero--visual .page-hero__grid { align-items: center; }
  /* photo heroes: the photo runs the full height of the copy (eyebrow → CTAs) instead of a 4:3 floating
     low under the type; the title is capped so it sets in ≤ 3 lines and the hero stays within 100svh */
  .page-hero--media .page-hero__grid { align-items: stretch; }
  .page-hero--media .page-hero__copy { align-content: space-between; }   /* eyebrow at the photo's top edge, CTAs at its bottom; rows never stretch (buttons keep 56 px) */
  /* Editorial photo heroes: copy 8/12 (room for an inner-tier H1 in ≤ 3 lines), the photo bleeds off the
     right edge of the screen (≈ 340 px wide at 1024, 490 at 1440, 570 at 1600) and runs the copy's height */
  .page-hero--media .page-hero__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .page-hero--media .page-hero__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 480px;
    margin-right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--container) - var(--gutter) * 2) / 2));
    border-radius: var(--r-tile) 0 0 var(--r-tile);
  }
  /* the inner-H1 tier (72 px at 1440, 69 at 1280, 55 at 1024): always above the next section's title-l,
     ≤ 3 balanced lines; the trimmed top padding pays for the bigger type (hero ≤ 100svh at 1440 × 900) */
  .page-hero--media { padding-top: calc(var(--header-h) + 64px); }
  .page-hero--media .page-hero__title { font-size: min(var(--fs-xl), 5.4vw, 4.5rem); max-width: none; }

  /* layouts */
  /* empresas chapter: photo left (7/12), copy right (5/12), centred on each other. The page's other
     two-column blocks put copy on the left, so the dark chapter answers with a mirror (zig-zag rhythm).
     DOM order stays copy → photo, so phones still read the headline first. */
  .chapter-intro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "media copy";
    column-gap: var(--gap-l);
    align-items: center;
  }
  .chapter-intro__copy { grid-area: copy; }
  .chapter-intro__copy .title-l { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.5rem); max-width: 14ch; }
  .chapter-intro__copy > .btn-group { margin-top: .75rem; }
  .chapter-intro .btn-group .btn { flex: 1 1 100%; }               /* 960–1279: equal stacked buttons */
  .chapter-intro__media { grid-area: media; aspect-ratio: 4 / 3; }
  .steps-layout { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-l); }
  .steps-layout__sticky { position: sticky; top: calc(var(--header-h) + 56px); }
  .steps-layout__sticky .title-l { font-size: clamp(2.25rem, 1.2rem + 2.2vw, 3rem); max-width: 20ch; }   /* 3 lines */
  .steps-layout__progress { display: block; }
  .steps-layout__aside-cta { display: inline-block; }
  .steps-layout__cta { display: none; }
  .verify-teaser__layout { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .verify-teaser__copy .title-l { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.5rem); max-width: 17ch; }
  .faq-layout__head .title-l { max-width: 20ch; }
  .cta-band__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* closing bands: the actions take the right column, bottom-aligned with the lead, equal widths when stacked */
  .cta-band__layout > .btn-group { display: grid; width: max-content; max-width: 100%; }
  .legal { grid-template-columns: 280px minmax(0, 1fr); }
  .legal__toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; }
  .specimen { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); }
  .specimen__figure { position: sticky; top: calc(var(--header-h) + 56px); }
  .specimen .cert-stage__glow { inset: 8% -18% -14%; }   /* room in the column gap again */
  .notfound__layout { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }

  /* bento 960–1279: two columns, the feature tile reads across (text left, ficha right) */
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento__tile { grid-column: span 6; }
  .bento__tile--feature { grid-column: 1 / -1; grid-row: auto; flex-direction: row; align-items: stretch; gap: 40px; }
  .bento__tile--feature .bento__copy { flex: 1 1 0; align-self: start; }
  .bento__tile--feature .bento__foot--mock { flex: 0 0 min(480px, 52%); padding-top: 0; }
  .bento__tile--wide { grid-column: 1 / -1; }
  .bento__tile--stats { flex-direction: row; align-items: flex-end; }
  .bento__tile:not(.bento__tile--feature):not(.bento__tile--stats) .bento__title { font-size: clamp(1.25rem, 1rem + .55vw, 1.5rem); }

  /* sectors 960–1279: horizontal cards (photo left) — half the scroll of stacked cards */
  .sector-card { display: grid; grid-template-columns: 40% minmax(0, 1fr); }
  .sector-card__media { aspect-ratio: auto; height: 100%; min-height: 100%; }
  @supports (grid-template-rows: subgrid) {      /* title / text / list / link rows line up across each pair */
    .sector-grid > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .sector-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .sector-card__media { grid-column: 1; grid-row: 1 / -1; }
    .sector-card__body { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: .7rem; }
    .sector-card__cta { align-self: end; }
  }

  /* catalog (one chip row; the single offset is set at the base: header + bar + air) */
  .filter-bar__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; }
  .filter-bar__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .filter-bar .chips { margin-inline: 0; padding-inline: 0; }
  .program-group__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-l); }

  /* grids */
  .card-grid--3, .service-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* footer */
  .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); }
}

/* Fine pointers on wide screens: footer rows can be denser than touch targets */
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .footer-col a, .footer-contact a { min-height: 34px; }
  .footer-contact > div { min-height: 34px; }
}

/* Header, 960–1279 (added with «Bienestar», the sixth nav link): at 960 the six links + logo + CTA
   overflowed by 65 px. Each value eases from a compact size at 960 to its approved value at 1080 and is
   capped there by min(), so from 1080 up the header renders exactly as before (logo→nav air ≥ 33 px). */
@media (min-width: 960px) and (max-width: 1279.98px) {
  .site-nav__link { font-size: min(.875rem, calc(.8125rem + (100vw - 960px) / 120)); }
  .site-nav__list { gap: min(1.9vw, calc(.875rem + (100vw - 960px) * .0544)); }
  .site-header__actions { margin-left: min(1.5rem, calc(1rem + (100vw - 960px) / 15)); }
  .brand { height: min(26px, calc(24px + (100vw - 960px) / 60)); }
}

@media (min-width: 1280px) {
  .brand { height: 30px; }
  .site-nav__link { font-size: .9375rem; }
  .hero .cert-stage { width: min(100%, 500px, 54svh); }   /* 500 px at 1440 × 900; the FO·CER·COL strip stays in view at 800 px tall */

  .chapter-intro .btn-group .btn { flex: 0 0 auto; }

  /* faq: head left (sticky), answers right */
  .faq-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); }
  .faq-layout__head { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
  .faq-layout__head .title-l { font-size: clamp(2.25rem, 1.2rem + 2.2vw, 3.25rem); max-width: 14ch; }   /* 3 balanced lines, not 4 */

  /* bento 12-col: feature 2×2, four small tiles, wide stats */
  .bento__tile { grid-column: span 3; }
  .bento__tile--feature { grid-column: span 6; grid-row: span 2; flex-direction: column; gap: .8rem; }
  .bento__tile--feature .bento__foot--mock { flex: none; padding-top: .75rem; }
  .bento__tile--wide { grid-column: 1 / -1; }
  .bento__tile:not(.bento__tile--feature):not(.bento__tile--wide) { min-height: 264px; }
  /* the orbit rings centre on the ficha, so one clean arc frames it (echo of the hero certificate) */
  .bento__tile--feature .bento__art--orbits { right: auto; left: -49%; bottom: 18%; width: 124%; opacity: .5; }

  /* sectors: 4 vertical cards per row; internal rows aligned across each row (subgrid) */
  .sector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sector-card { display: flex; }
  .sector-card__media { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  .sector-card__title { font-size: 1.1875rem; min-height: 2.3em; }   /* fallback alignment */
  .sector-card__text { min-height: 4.65em; }
  @supports (grid-template-rows: subgrid) {
    .sector-grid > li { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .sector-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .sector-card__media { grid-column: 1; grid-row: 1; }
    .sector-card__body { grid-column: 1; grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: .7rem; }
    .sector-card__title, .sector-card__text { min-height: 0; }
    .sector-card__cta { align-self: end; }
  }

  .service-grid:not(.service-grid--3) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modality-grid, .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid--4 .card { padding: clamp(24px, 2vw, 30px); }   /* 4-up: a little more measure, titles break in 2 lines */

  /* catalog: the live count is visible again, at the end of the label row (see the two-row bar, §6.9) */
  .filter-bar__status { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

  /* floating button: full size where there is room */
  .wa-float { width: 58px; height: 58px; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); }
  .wa-float .icon { width: 26px; height: 26px; }
}

@media (min-width: 1600px) {
  .brand { height: 32px; }
  .hero .cert-stage { width: min(100%, 520px, 54svh); }
}

@media print {
  .site-header, .mobile-menu, .wa-float, .splash, .hero__backdrop, .aurora, .grain { display: none !important; }
  .fx .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #FFFFFF; }
}


/* =============================================================================
   9. REDUCED MOTION — only intrusive effects. Tilt, hovers, fades, count-ups,
      marquee and the slow aurora stay ON (playbook A.2 / 07-windows).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .splash { display: none; }                         /* content first: no intro wait */
  .js:not(.splash-seen) .has-splash { --hero-delay: .05s; --enter-delay: .1s; --orbit-delay: .15s; }
  .fc-draw { animation: none; stroke-dashoffset: 0; }
  .fc-dot { animation: none; transform: none; opacity: 1; }
  .cert-stage__float { animation: none; }            /* continuous bobbing */
  .wa-float::before { animation: none; }             /* pulsing ring */
  .aurora__blob { animation-duration: 90s; }         /* slower, not frozen */
  .fx .reveal, .fx .sector-grid > .reveal { transform: none; transition-duration: .6s; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* =============================================================================
   10. FORCED COLORS (Windows High Contrast) — the UA repaints backgrounds and
       box-shadows with system colours, so states drawn with them vanish.
       Restore every state with system colours (Highlight, CanvasText…).
   ========================================================================== */
@media (forced-colors: active) {
  /* radio pills (verificar «Responder por»): the checked dot was an inset box-shadow */
  .choice input:checked + .choice__ui { border: 2px solid Highlight; }
  .choice input:checked + .choice__ui::before { forced-color-adjust: none; background: Highlight; border-color: Highlight; box-shadow: none; outline: 3px solid Canvas; outline-offset: -5px; }
  /* catalog chips: the active filter (below 1280 the «Mostrando N» line is visually hidden) */
  .chip[aria-pressed="true"], .chip[aria-current="true"], .chip.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .chip[aria-pressed="true"] .chip__count, .chip[aria-current="true"] .chip__count, .chip.is-active .chip__count { forced-color-adjust: none; background: transparent; color: HighlightText; }
  /* current page in the main nav (underline drawn with a background) and in the privacy index */
  .site-nav__link[aria-current="page"]::after { forced-color-adjust: none; background: CanvasText; }
  .toc a[aria-current], .toc a.is-active { outline: 2px solid CanvasText; outline-offset: 2px; }
  /* menu toggle bars and the floating button's disc (both drawn with backgrounds) */
  .nav-toggle__bars span { forced-color-adjust: none; background: CanvasText; }
  .wa-float { border: 2px solid; }
}
/* Dark high-contrast themes: the navy logo of light-header pages sat on black (it is also the home link) */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .brand__logo--on-light { opacity: 0 !important; }
  .brand__logo--on-dark { opacity: 1 !important; }
}