/* 00-tokens.css */
/*
  Actuaria design tokens. Source: the product's design system
  (dev/brief/background/survey-design-system.md) and contracts.md section 10.

  Naming
    --c-*      raw colours            --tone-NAME-{fg,bg,bd,solid}  status tones
    --g-*      gradients              --font-*, --fs-*, --fw-*, --lh-*, --ls-*  type
    --sp-N     spacing, N in px       --r-*   radii
    --e1…--e5  shadows, --glow-*      --dur-*, --ease-*  motion
    --z-*      stacking               --header-h, --container, --gutter, --section-y

  Contextual tokens (--text, --text-2, --text-3, --heading, --hairline,
  --hairline-strong, --link, --accent, --focus-ring, --fill-soft and the --btn-* and
  --bubble-* sets) follow the surface they sit on. Light values are the default;
  .s--navy, .s--aurora, .u-on-dark, the footer and the header over the hero switch
  to the dark set; .c-hoja, .c-dialog, .c-menu and .u-on-light switch back.
  Components and sections should read the contextual tokens, not the raw text
  colours, so the same markup works on every surface.
*/

@layer reset, tokens, base, layout, components, sections, explainer, legal, utilities;

@layer tokens {
  :root {
    /* Brand */
    --c-cyan: #00E3E5;
    --c-teal: #01C3D2;
    --c-ocean: #0382B7;
    --c-ocean-deep: #04568B;
    --c-navy: #062349;
    --c-navy-deep: #041832;
    --c-violet: #6E56CF;
    --c-white: #FFFFFF;

    /* Primary action */
    --c-primary: #0673AE;
    --c-primary-hover: #045C8F;
    --c-primary-pressed: #054E7A;
    --c-primary-tint: #E0F1FB;
    --c-primary-tint-text: #033F63;
    --c-secondary: #0E7490;
    --c-secondary-tint: #D5F6F8;

    /* Surfaces and borders */
    --c-canvas: #F5F7FA;
    --c-surface: #FFFFFF;
    --c-surface-low: #F8FAFC;
    --c-surface-mid: #F2F5F9;
    --c-desk: #EBEFF5;
    --c-border: #E4E9F0;
    --c-border-strong: #D3DAE4;
    --c-outline: #8190A5;
    --c-row-hover: #F5F9FC;
    --c-row-selected: #EBF4F9;

    /* Text on light */
    --c-ink: #062349;
    --c-text: #0B1B33;
    --c-text-2: #4A5A71;
    --c-text-3: #5C6C83;
    --c-text-disabled: #98A4B5;
    --c-link: #0673AE;
    --c-link-hover: #045C8F;

    /* Text and fills on dark */
    --c-on-dark: #FFFFFF;
    --c-on-dark-2: rgba(255, 255, 255, 0.78);
    --c-on-dark-3: rgba(255, 255, 255, 0.70);
    --c-on-dark-hairline: rgba(255, 255, 255, 0.14);
    --c-on-dark-hairline-strong: rgba(255, 255, 255, 0.26);
    --c-on-dark-fill-soft: rgba(255, 255, 255, 0.08);
    --c-on-dark-fill: rgba(255, 255, 255, 0.10);
    --c-on-dark-fill-strong: rgba(255, 255, 255, 0.13);
    --c-on-dark-fill-hover: rgba(255, 255, 255, 0.22);
    --c-link-on-dark: #5CC8F5;
    --c-link-on-dark-hover: #86D7F8;

    /* Semantic solids (dots, bars, icons) */
    --c-live: #06C8D8;
    --c-ai: #7A5AF8;
    --c-success: #17B26A;
    --c-warning: #F79009;
    --c-danger: #F04438;
    --c-slate: #8C9AAE;

    /* Focus, scrim */
    --c-focus: #0673AE;
    --c-focus-on-dark: #FFFFFF;
    --c-scrim: rgba(6, 35, 73, 0.45);
    --c-scrim-strong: rgba(4, 24, 50, 0.62);

    /* Status tones: fg (text and icon), bg (fill), bd (border), solid (dot) */
    --tone-neutral-fg: #344358; --tone-neutral-bg: #F2F5F9; --tone-neutral-bd: #D3DAE4; --tone-neutral-solid: #8C9AAE;
    --tone-info-fg: #026AA2;    --tone-info-bg: #F0F9FF;    --tone-info-bd: #B9E6FE;    --tone-info-solid: #0BA5EC;
    --tone-indigo-fg: #3538CD;  --tone-indigo-bg: #EEF4FF;  --tone-indigo-bd: #C7D7FE;  --tone-indigo-solid: #6172F3;
    --tone-live-fg: #0E7490;    --tone-live-bg: #ECFDFF;    --tone-live-bd: #A5F0FC;    --tone-live-solid: #06C8D8;
    --tone-ai-fg: #5925DC;      --tone-ai-bg: #F4F3FF;      --tone-ai-bd: #D9D6FE;      --tone-ai-solid: #7A5AF8;
    --tone-success-fg: #067647; --tone-success-bg: #ECFDF3; --tone-success-bd: #ABEFC6; --tone-success-solid: #17B26A;
    --tone-teal-fg: #107569;    --tone-teal-bg: #F0FDF9;    --tone-teal-bd: #99F6E0;    --tone-teal-solid: #15B79E;
    --tone-warning-fg: #B54708; --tone-warning-bg: #FFFAEB; --tone-warning-bd: #FEDF89; --tone-warning-solid: #F79009;
    --tone-orange-fg: #B93815;  --tone-orange-bg: #FEF6EE;  --tone-orange-bd: #F9DBAF;  --tone-orange-solid: #EF6820;
    --tone-danger-fg: #B42318;  --tone-danger-bg: #FEF3F2;  --tone-danger-bd: #FECDCA;  --tone-danger-solid: #F04438;
    --tone-rose-fg: #C01048;    --tone-rose-bg: #FFF1F3;    --tone-rose-bd: #FECDD6;    --tone-rose-solid: #F63D68;

    /* Gradients */
    --g-cta: linear-gradient(135deg, #0673AE 0%, #0E7490 100%);
    --g-cta-hover: linear-gradient(135deg, #045C8F 0%, #0B5F75 100%);
    --g-brand: linear-gradient(225deg, #00E3E5 0%, #0382B7 45%, #062349 100%);
    --g-brand-text: linear-gradient(90deg, #062349, #0382B7, #00B8CC);
    --g-band: linear-gradient(90deg, #0382B7 0%, #00E3E5 100%);
    --g-wave: linear-gradient(90deg, #00E3E5 0%, rgba(255, 255, 255, 0.4) 100%);
    --g-wave-bar: linear-gradient(180deg, #00E3E5 0%, #0382B7 100%);
    --g-ai: linear-gradient(135deg, #7A5AF8 0%, #0673AE 100%);

    /* Aurora (base colour plus three radial glows and a dot grid; see 02-layout.css) */
    --aurora-base: #041832;
    --aurora-glow-1: rgba(0, 227, 229, 0.35);
    --aurora-glow-2: rgba(3, 130, 183, 0.55);
    --aurora-glow-3: rgba(110, 86, 207, 0.30);
    --aurora-dot: rgba(255, 255, 255, 0.05);
    --aurora-grid: 28px;
    /* Static aurora for small boxes: use as `background: var(--g-aurora), var(--aurora-base)` */
    --g-aurora:
      radial-gradient(80% 80% at 95% 5%, rgba(0, 227, 229, 0.35), rgba(0, 227, 229, 0) 100%),
      radial-gradient(100% 100% at 10% 40%, rgba(3, 130, 183, 0.55), rgba(3, 130, 183, 0) 100%),
      radial-gradient(90% 90% at 70% 105%, rgba(110, 86, 207, 0.30), rgba(110, 86, 207, 0) 100%);

    /* Type families (the @font-face rules and the metric-matched fallback faces
       live in 00a-fonts.css) */
    --font-display: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Fluid type scale */
    --fs-h1: clamp(2rem, 1.2rem + 4vw, 4.25rem);            /* 32 → 68 */
    --fs-h2: clamp(1.625rem, 1.1rem + 2.4vw, 2.75rem);      /* 26 → 44 */
    --fs-h3: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);       /* 20 → 24 */
    --fs-h4: 1.125rem;                                      /* 18 */
    --fs-lead: clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem); /* 17 → 20 */
    --fs-body: 1rem;                                        /* 16 on phones, 17 from 640px */
    --fs-small: 0.9375rem;                                  /* 15 */
    --fs-caption: 0.875rem;                                 /* 14 */
    --fs-micro: 0.8125rem;                                  /* 13 */
    --fs-voz: clamp(1.125rem, 1.02rem + 0.55vw, 1.375rem);  /* 18 → 22, spoken words */
    --fs-btn: 1rem;
    --fs-btn-sm: 0.9375rem;

    /* Line heights */
    --lh-h1: 1.06;
    --lh-h2: 1.12;
    --lh-h3: 1.25;
    --lh-h4: 1.35;
    --lh-lead: 1.5;
    --lh-body: 1.6;
    --lh-small: 1.5;
    --lh-ui: 1.25;

    /* Tracking */
    --ls-h1: -0.026em;
    --ls-h2: -0.022em;
    --ls-h3: -0.015em;
    --ls-h4: -0.01em;
    --ls-body: -0.006em;
    --ls-ui: -0.004em;
    --ls-fig: -0.01em;
    /* Plus Jakarta Sans has a narrow space; tight tracking closes it further */
    --ws-display: 0.07em;

    /* Measure */
    --measure: 58ch;
    --measure-legal: 60ch;

    /* Spacing (4-based; the number is the pixel value) */
    --sp-2: 2px;
    --sp-4: 4px;
    --sp-6: 6px;
    --sp-8: 8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-20: 20px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-40: 40px;
    --sp-48: 48px;
    --sp-64: 64px;
    --sp-80: 80px;
    --sp-96: 96px;
    --sp-128: 128px;

    /* Radii: by value and by role */
    --r-4: 4px;
    --r-6: 6px;
    --r-10: 10px;
    --r-14: 14px;
    --r-20: 20px;
    --r-28: 28px;
    --r-full: 999px;
    --r-paper: var(--r-6);
    --r-control: var(--r-10);
    --r-ui: var(--r-14);
    --r-dialog: var(--r-20);
    --r-stage: var(--r-20);
    --r-hero: var(--r-28);
    --r-chip: var(--r-full);

    /* Shadows (navy-tinted) */
    --e1: 0 1px 2px rgba(6, 35, 73, 0.06), 0 1px 3px rgba(6, 35, 73, 0.08);
    --e2: 0 2px 4px -2px rgba(6, 35, 73, 0.06), 0 4px 8px -2px rgba(6, 35, 73, 0.10);
    --e3: 0 4px 6px -2px rgba(6, 35, 73, 0.05), 0 12px 16px -4px rgba(6, 35, 73, 0.10);
    --e4: 0 8px 8px -4px rgba(6, 35, 73, 0.04), 0 20px 24px -4px rgba(6, 35, 73, 0.12);
    --e5: 0 24px 48px -12px rgba(6, 35, 73, 0.22);
    --e-up: 0 -1px 0 rgba(6, 35, 73, 0.06), 0 -12px 24px -8px rgba(6, 35, 73, 0.14);
    --glow-primary: 0 8px 20px -6px rgba(6, 115, 174, 0.55);
    --glow-cyan: 0 8px 24px -6px rgba(0, 227, 229, 0.45);
    --glow-live: 0 0 12px rgba(6, 200, 216, 0.55);

    /* Motion */
    --dur-instant: 90ms;
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-medium: 300ms;
    --dur-slow: 450ms;
    --dur-ambient: 1600ms;
    --dur-ambient-slow: 2400ms;
    --dur-aurora: 18s;
    --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
    --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-loop: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    --ease-out: cubic-bezier(0, 0, 0.58, 1);
    --enter-shift: 8px;

    /* Stacking */
    --z-below: -1;
    --z-base: 0;
    --z-raised: 1;
    --z-sticky-cta: 80;
    --z-header: 100;
    --z-skip: 200;

    /* Layout */
    --container: 1200px;
    --gutter: clamp(20px, 5vw, 40px);
    --section-y: clamp(64px, 9vw, 128px);
    --col-gap: var(--sp-32);            /* gutter of every two-column split; 40 from 1024px, 48 from 1280px */
    --block-y: clamp(48px, 7vw, 96px);  /* above a sub-block that opens with an h3 */
    --close-y: clamp(40px, 5vw, 64px);  /* above a closing statement row */
    --header-h: 60px;
    --sticky-cta-h: 72px;
    --tap: 44px;
    --dialog-sm: 440px;
    --dialog-md: 640px;
    --dialog-lg: 880px;

  }

  /* Contextual tokens: light surface (the default, and re-established by paper
     objects that may sit on a dark surface) */
  :root,
  .u-on-light,
  .c-hoja,
  .c-dialog,
  .c-menu {
    --text: var(--c-text);
    --text-2: var(--c-text-2);
    --text-3: var(--c-text-3);
    --heading: var(--c-ink);
    --hairline: var(--c-border);
    --hairline-strong: var(--c-border-strong);
    --link: var(--c-link);
    --link-hover: var(--c-link-hover);
    --accent: var(--c-primary);
    --focus-ring: var(--c-focus);
    --fill-soft: var(--c-surface-mid);
    --fill-hover: var(--c-row-hover);
    /* Buttons */
    --btn-primary-bg: var(--g-cta);
    --btn-primary-bg-hover: var(--g-cta-hover);
    --btn-primary-fg: var(--c-white);
    --btn-primary-glow: var(--glow-primary);
    --btn-primary-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --btn-secondary-bg: var(--c-surface);
    --btn-secondary-bg-hover: var(--c-row-hover);
    --btn-secondary-fg: var(--c-text);
    --btn-secondary-bd: var(--c-border-strong);
    --btn-quiet-fg: var(--c-primary);
    --btn-quiet-bg-hover: rgba(6, 115, 174, 0.08);
    /* Chat bubbles */
    --bubble-ia-bg: var(--c-primary-tint);
    --bubble-ia-bd: transparent;
    --bubble-ia-fg: var(--c-text);
    --bubble-persona-bg: var(--c-surface);
    --bubble-persona-bd: var(--c-border-strong);
    --bubble-persona-fg: var(--c-text);
    --bubble-label: var(--c-text-3);
  }

  /* On the desk grey the link blue drops just under 4.5:1, so it goes one step darker */
  .s--desk {
    --link: var(--c-link-hover);
    --btn-quiet-fg: var(--c-primary-hover);
  }

  /* Contextual tokens: dark surface */
  .s--navy,
  .s--aurora,
  .u-on-dark,
  .c-footer,
  .c-header--hero:not(.is-solid) {
    --text: var(--c-on-dark);
    --text-2: var(--c-on-dark-2);
    --text-3: var(--c-on-dark-3);
    --heading: var(--c-on-dark);
    --hairline: var(--c-on-dark-hairline);
    --hairline-strong: var(--c-on-dark-hairline-strong);
    --link: var(--c-link-on-dark);
    --link-hover: var(--c-link-on-dark-hover);
    --accent: var(--c-cyan);
    --focus-ring: var(--c-focus-on-dark);
    --fill-soft: var(--c-on-dark-fill);
    --fill-hover: var(--c-on-dark-fill);
    /* Buttons: the primary action turns white on dark, as in the product */
    --btn-primary-bg: var(--c-white);
    --btn-primary-bg-hover: var(--c-primary-tint);
    --btn-primary-fg: var(--c-navy-deep);
    --btn-primary-glow: var(--glow-cyan);
    --btn-primary-edge: none;
    --btn-secondary-bg: var(--c-on-dark-fill-strong);
    --btn-secondary-bg-hover: var(--c-on-dark-fill-soft);
    --btn-secondary-fg: var(--c-white);
    --btn-secondary-bd: var(--c-on-dark-hairline-strong);
    --btn-quiet-fg: var(--c-white);
    --btn-quiet-bg-hover: var(--c-on-dark-fill);
    /* Chat bubbles */
    --bubble-ia-bg: rgba(0, 227, 229, 0.14);
    --bubble-ia-bd: rgba(0, 227, 229, 0.34);
    --bubble-ia-fg: var(--c-white);
    --bubble-persona-bg: var(--c-on-dark-fill);
    --bubble-persona-bd: var(--c-on-dark-hairline-strong);
    --bubble-persona-fg: var(--c-white);
    --bubble-label: rgba(255, 255, 255, 0.86);
  }

  /* The aurora is brighter at the centre of its glows: tertiary text and links
     are lifted there so they hold 4.5:1 anywhere on it (links go white and
     underlined, as on the product's brand panel) */
  .s--aurora {
    --text-3: rgba(255, 255, 255, 0.74);
    --link: var(--c-white);
    --link-hover: var(--c-link-on-dark-hover);
  }

  /* A light object inside a dark surface also resets the inherited text colour */
  .u-on-light,
  .c-hoja,
  .c-dialog,
  .c-menu,
  .s--navy,
  .s--aurora,
  .u-on-dark,
  .c-footer {
    color: var(--text);
  }

  @media (min-width: 640px) {
    :root {
      --fs-body: 1.0625rem;
    }
  }

  @media (min-width: 1024px) {
    :root {
      --header-h: 72px;
      --col-gap: var(--sp-40);
    }
  }

  @media (min-width: 1280px) {
    :root {
      --col-gap: var(--sp-48);
    }
  }
}

/* 00a-fonts.css */
/* Brand fonts (generated by dev/fonts.sh into public/assets/fonts/).
   @font-face rules are kept at top level, outside the cascade layers.
   TTF only: there is no WOFF2 encoder in the build environment. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
}

/* Metric-matched fallbacks shown while the brand fonts load (font-display: swap).
   Use them right after the brand family: "Inter", "Inter Fallback", … and
   "Plus Jakarta Sans", "Jakarta Fallback", …
   size-adjust = measured width of Spanish site copy in the brand face / in Arial;
   the overrides are the brand font's hhea ascent and descent divided by size-adjust.
   Where Arial (or a metric-compatible clone) is missing, the stack just moves on. */

@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 106.36%;
  ascent-override: 91.08%;
  descent-override: 22.68%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.46%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 100.65%;
  ascent-override: 96.25%;
  descent-override: 23.97%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Jakarta Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 99.2%;
  ascent-override: 104.64%;
  descent-override: 22.38%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Jakarta Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 100.24%;
  ascent-override: 103.55%;
  descent-override: 22.15%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Jakarta Fallback";
  font-style: normal;
  font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 101.22%;
  ascent-override: 102.55%;
  descent-override: 21.93%;
  line-gap-override: 0%;
}

/* 01-base.css */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, pre,
  dl, dd, ol, ul, fieldset, legend {
    margin: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  /* Lists that carry a class are components, not prose */
  ol[class],
  ul[class] {
    padding: 0;
    list-style: none;
  }

  img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
  }

  img, video {
    height: auto;
  }

  button, input, select, textarea {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: inherit;
  }

  button {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
  }

  button:disabled {
    cursor: default;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  th {
    font-weight: inherit;
    text-align: inherit;
  }

  fieldset {
    padding: 0;
    border: 0;
    min-width: 0;
  }

  summary {
    cursor: pointer;
  }

  dialog {
    padding: 0;
    border: 0;
    color: inherit;
  }

  iframe {
    border: 0;
  }

  /* The brand fonts have no italics */
  address, cite, dfn, em, i, var {
    font-style: normal;
  }
}

@layer base {
  html {
    /* Shows behind the page on overscroll: matches the hero and the footer */
    background: var(--c-navy-deep);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 100%;
    line-height: var(--lh-body);
    font-synthesis: none;
    font-kerning: normal;
    /* Keeps anchors and focused controls clear of the fixed header and the bottom CTA bar */
    scroll-padding-top: calc(var(--header-h) + var(--sp-24));
    scroll-padding-bottom: calc(var(--sticky-cta-h) + var(--sp-24));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  @media (min-width: 1024px) {
    html {
      scroll-padding-bottom: 0px;
    }
  }

  @media (max-height: 480px) and (orientation: landscape) {
    html {
      scroll-padding-bottom: 0px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    /* Navy, not white: iOS 26 paints the strip behind its floating toolbar with this colour */
    background: var(--c-navy-deep);
    color: var(--text);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-body);
  }

  main {
    display: block;
    flex: 1 0 auto;
    background-color: var(--c-surface);
  }

  /* ...and white while a light surface is at the bottom edge of the window
     (00-core.js, initEdge), so the strip never darkens white content */
  html.is-light-edge body {
    background-color: var(--c-surface);
  }

  /* Headings */
  h1, h2, h3, h4 {
    color: var(--heading);
    font-family: var(--font-display);
    word-spacing: var(--ws-display);
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
  }

  h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
  }

  h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
  }

  h5, h6 {
    color: var(--text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
  }

  /* Text */
  p, li, dd, dt, figcaption, blockquote {
    overflow-wrap: break-word;
  }

  p, li, dd, dt, td, th, figcaption {
    text-wrap: pretty;
  }

  /* Emphasis is weight 600: no italics exist */
  b, strong, em, cite, dfn {
    font-weight: var(--fw-semibold);
  }

  small {
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
  }

  sup, sub {
    font-size: 0.72em;
    line-height: 0;
  }

  abbr[title] {
    text-decoration: none;
  }

  hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--hairline);
  }

  /* Prose lists (no class) */
  ul:not([class]),
  ol:not([class]) {
    padding-left: 1.3em;
  }

  ul:not([class]) > li::marker {
    color: var(--text-3);
  }

  /* Data and figures */
  data, time, output {
    font-variant-numeric: tabular-nums;
  }

  /* Links in running text (no class). Classed links are components. */
  a {
    color: inherit;
    text-decoration: none;
  }

  a:not([class]) {
    color: var(--link);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  a:not([class]):hover {
    color: var(--link-hover);
    text-decoration-thickness: 2px;
  }

  /* Focus: one ring, coloured by the surface (--focus-ring) */
  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  a:focus-visible,
  summary:focus-visible {
    border-radius: var(--r-4);
  }

  ::selection {
    background: var(--c-primary);
    color: var(--c-white);
  }

  /* Anchored sections clear the fixed header */
  .s[id] {
    scroll-margin-top: calc(-1 * var(--sp-24));
  }

  :target:not(.s),
  [id]:is(h2, h3, h4, article, details, li, figure, dt) {
    scroll-margin-top: calc(var(--header-h) + var(--sp-24));
  }

  /* Skip link */
  .u-skip {
    position: fixed;
    top: var(--sp-8);
    left: var(--sp-8);
    z-index: var(--z-skip);
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: var(--sp-8) var(--sp-16);
    border-radius: var(--r-control);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-standard);
    --focus-ring: var(--c-focus);
  }

  .u-skip:focus {
    box-shadow: var(--e4);
    transform: none;
  }

  /* Targets of the skip link and of programmatic focus do not draw a ring */
  main:focus,
  section:focus {
    outline: none;
  }

  /* Holds the inline SVG sprite without taking space */
  .u-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  [hidden] {
    display: none !important;
  }

  /* Everything stops under reduced motion (important declarations in an early
     layer win over later layers) */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-delay: 0s !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-delay: 0s !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer utilities {
  .u-tabular {
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-fig);
  }

  /* Figures and data: Inter 600 with tabular numerals */
  .u-fig {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-fig);
  }

  .u-measure {
    max-width: var(--measure);
  }

  .u-nowrap {
    white-space: nowrap;
  }

  /* In headings the bound pair is only for browsers without text-wrap: balance.
     Where balance exists it places the breaks itself, and a bound pair skews it. */
  @supports (text-wrap: balance) {
    :is(h1, h2, h3) .u-nowrap {
      white-space: normal;
    }
  }

  /* A phrase that stays whole in every browser */
  .u-junto {
    white-space: nowrap;
  }
}

/* 02-layout.css */
@layer layout {
  /* Container: 1200px of content plus the gutters */
  .l-container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }

  .l-container--narrow {
    max-width: calc(880px + 2 * var(--gutter));
  }

  /* Section rhythm. Owned here: section files never set outer margins or padding. */
  .s {
    position: relative;
    padding-block: var(--section-y);
  }

  /* The first section of a page sits under the fixed header */
  main > section.s:first-of-type {
    padding-top: calc(var(--header-h) + clamp(32px, 6vw, 72px));
  }

  /* Light surfaces */
  .s--surface {
    background-color: var(--c-surface);
  }

  .s--canvas {
    background-color: var(--c-canvas);
  }

  .s--desk {
    background-color: var(--c-desk);
  }

  /* Two neighbours on the same surface share one gap instead of doubling it */
  .s--surface + .s--surface,
  .s--canvas + .s--canvas,
  .s--desk + .s--desk {
    padding-top: 0;
  }

  /* Dark surfaces. Their contextual tokens are set in 00-tokens.css. */
  .s--navy {
    background-color: var(--c-navy);
  }

  /*
    Brand aurora: navy base, a 28px dot grid and three radial glows.
    Each glow is its own pre-rendered layer (a pseudo-element) that drifts with
    transform only. Radius follows the product: 0.8, 1.0 and 0.9 of the shortest
    side, taken here as min(viewport, section). The third glow hangs from the
    section's first .l-container, which must stay position: static for that.
    The section clips its content (overflow: clip).
  */
  .s--aurora {
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    background-color: var(--aurora-base);
    background-image: radial-gradient(circle at center, var(--aurora-dot) 0.9px, transparent 1.5px);
    background-size: var(--aurora-grid) var(--aurora-grid);
  }

  .s--aurora::before,
  .s--aurora::after,
  .s--aurora > .l-container::before {
    content: "";
    position: absolute;
    z-index: var(--z-below);
    aspect-ratio: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform;
    animation: l-aurora-drift var(--dur-aurora) linear infinite;
  }

  /* Glow 1: cyan, top right */
  .s--aurora::before {
    --ax: 4.5%;
    --ay: 3.5%;
    top: 5%;
    left: 95%;
    width: min(160vmin, 160%);
    max-height: 160%;
    background: radial-gradient(closest-side, var(--aurora-glow-1), transparent);
  }

  /* Glow 2: ocean, left */
  .s--aurora::after {
    --ax: 3%;
    --ay: 4.5%;
    top: 40%;
    left: 10%;
    width: min(200vmin, 200%);
    max-height: 200%;
    background: radial-gradient(closest-side, var(--aurora-glow-2), transparent);
    animation-direction: reverse;
    animation-delay: -6s;
  }

  /* Glow 3: violet, below the bottom edge */
  .s--aurora > .l-container::before {
    --ax: 4.5%;
    --ay: 3%;
    top: 105%;
    left: 70%;
    width: min(180vmin, 180%);
    max-height: 180%;
    background: radial-gradient(closest-side, var(--aurora-glow-3), transparent);
    animation-delay: -12s;
  }

  .s--aurora > .l-container ~ .l-container::before {
    content: none;
  }

  .s--aurora.is-offscreen::before,
  .s--aurora.is-offscreen::after,
  .s--aurora.is-offscreen > .l-container::before {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .s--aurora::before,
    .s--aurora::after,
    .s--aurora > .l-container::before {
      animation: none;
      will-change: auto;
    }
  }

  @keyframes l-aurora-drift {
    0%, 100% { transform: translate(calc(-50% + var(--ax)), -50%); }
    12.5% { transform: translate(calc(-50% + var(--ax) * 0.707), calc(-50% + var(--ay) * 0.707)); }
    25% { transform: translate(-50%, calc(-50% + var(--ay))); }
    37.5% { transform: translate(calc(-50% - var(--ax) * 0.707), calc(-50% + var(--ay) * 0.707)); }
    50% { transform: translate(calc(-50% - var(--ax)), -50%); }
    62.5% { transform: translate(calc(-50% - var(--ax) * 0.707), calc(-50% - var(--ay) * 0.707)); }
    75% { transform: translate(-50%, calc(-50% - var(--ay))); }
    87.5% { transform: translate(calc(-50% + var(--ax) * 0.707), calc(-50% - var(--ay) * 0.707)); }
  }

  /* Section header: h2 plus an optional lead paragraph, left-aligned */
  .l-section-head {
    max-width: 48rem;
    margin-bottom: clamp(32px, 5vw, 56px);
  }

  .l-section-head > p,
  .l-lead {
    max-width: 40rem;
    color: var(--text-2);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  .l-section-head > * + p {
    margin-top: var(--sp-16);
  }

  /* Grid helpers. Override the gap per instance with --l-gap. */
  .l-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--l-gap, clamp(24px, 4vw, 48px));
  }

  @media (min-width: 640px) {
    .l-grid--2,
    .l-grid--3,
    .l-grid--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .l-grid--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .l-grid--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Text 5/12, visual 7/12 and its mirror */
    .l-grid--split {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .l-grid--split-rev {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    /* Narrow label column plus content */
    .l-grid--aside {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }
  }

  .l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--l-gap, var(--sp-16));
  }

  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--l-gap, var(--sp-12));
  }

  /* Header sentinel: while it is in view the header stays transparent */
  .l-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: var(--sp-24);
    pointer-events: none;
    visibility: hidden;
  }

  /* Legal pages: one reading column under the solid header */
  .l-legal {
    padding-top: calc(var(--header-h) + clamp(32px, 6vw, 72px));
    padding-bottom: var(--section-y);
    background-color: var(--c-surface);
  }

  .l-legal__col {
    max-width: var(--measure-legal);
    margin-inline: auto;
  }

  .l-legal__col > .c-aviso {
    margin-bottom: clamp(24px, 4vw, 40px);
  }
}

@layer utilities {
  .u-visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (max-width: 639.98px) {
    .u-desktop-only {
      display: none !important;
    }
  }

  @media (min-width: 640px) {
    .u-phone-only {
      display: none !important;
    }
  }
}

/* 03-components.css */
/*
  Shared components. Contents:
    icons · buttons · chips · notice · dialog · header · menu sheet · sticky CTA · footer
    voice-to-document primitives: c-voz, c-burbuja, c-fila, c-hoja, c-tabla, c-def,
    c-acordeon, c-onda
  Colours come from the contextual tokens, so every component works on light and
  on dark surfaces without extra modifiers.
*/

@layer components {
  /* ---------------------------------------------------------------- Icons */

  .c-icon {
    display: inline-block;
    flex: none;
    width: 24px;
    height: 24px;
    fill: currentColor;
    vertical-align: middle;
  }

  .c-icon--14 { width: 14px; height: 14px; }
  .c-icon--16 { width: 16px; height: 16px; }
  .c-icon--18 { width: 18px; height: 18px; }
  .c-icon--20 { width: 20px; height: 20px; }
  .c-icon--22 { width: 22px; height: 22px; }
  .c-icon--32 { width: 32px; height: 32px; }
  .c-icon--40 { width: 40px; height: 40px; }
  .c-icon--48 { width: 48px; height: 48px; }

  /* -------------------------------------------------------------- Buttons */

  /*
    The fill is three layers so hover never animates anything but opacity:
    the button's own background, ::before (hover fill) and ::after (hover glow).
  */
  .c-btn {
    --btn-h: 48px;
    --btn-px: var(--sp-24);
    --btn-fs: var(--fs-btn);
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-fg: var(--text);
    --btn-edge: none;
    --btn-glow: none;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    min-height: var(--btn-h);
    max-width: 100%;
    padding: var(--sp-8) var(--btn-px);
    border: 0 solid transparent;
    border-radius: var(--r-control);
    background: var(--btn-bg);
    background-clip: padding-box;
    box-shadow: var(--btn-edge);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: var(--btn-fs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-ui);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: transform var(--dur-fast) var(--ease-standard);
  }

  .c-btn::before,
  .c-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-control);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-standard);
  }

  .c-btn::before {
    z-index: -1;
    background: var(--btn-bg-hover);
  }

  .c-btn::after {
    z-index: -2;
    box-shadow: var(--btn-glow);
  }

  @media (hover: hover) {
    .c-btn:hover::before,
    .c-btn:hover::after {
      opacity: 1;
    }
  }

  .c-btn:active {
    transform: scale(0.98);
  }

  .c-btn:active::before {
    opacity: 1;
  }

  .c-btn:disabled,
  .c-btn[aria-disabled="true"] {
    --btn-bg: var(--c-desk);
    --btn-fg: var(--c-text-disabled);
    --btn-edge: none;
    cursor: default;
    pointer-events: none;
  }

  .c-btn > .c-icon {
    width: 20px;
    height: 20px;
    margin-inline: -2px;
  }

  /* Primary: CTA gradient on light, white on dark (set by the surface) */
  .c-btn--primary {
    --btn-bg: var(--btn-primary-bg);
    --btn-bg-hover: var(--btn-primary-bg-hover);
    --btn-fg: var(--btn-primary-fg);
    --btn-edge: var(--btn-primary-edge);
    --btn-glow: var(--btn-primary-glow);
  }

  /* Explicit white fill with navy text, for dark backgrounds */
  .c-btn--on-dark {
    --btn-bg: var(--c-white);
    --btn-bg-hover: var(--c-primary-tint);
    --btn-fg: var(--c-navy-deep);
    --btn-edge: none;
    --btn-glow: var(--glow-cyan);
    --focus-ring: var(--c-focus-on-dark);
  }

  /* Secondary: outlined on light, glass on dark (set by the surface) */
  .c-btn--secondary {
    --btn-bg: var(--btn-secondary-bg);
    --btn-bg-hover: var(--btn-secondary-bg-hover);
    --btn-fg: var(--btn-secondary-fg);
    --btn-edge: inset 0 0 0 1px var(--btn-secondary-bd);
  }

  /* Explicit glass, for dark backgrounds */
  .c-btn--ghost {
    --btn-bg: var(--c-on-dark-fill-strong);
    --btn-bg-hover: var(--c-on-dark-fill-soft);
    --btn-fg: var(--c-white);
    --btn-edge: inset 0 0 0 1px var(--c-on-dark-hairline-strong);
    --focus-ring: var(--c-focus-on-dark);
  }

  /* Quiet: a text button */
  .c-btn--quiet {
    --btn-px: var(--sp-12);
    --btn-bg-hover: var(--btn-quiet-bg-hover);
    --btn-fg: var(--btn-quiet-fg);
  }

  /* Small: 40px tall to the eye, 44px to the finger (transparent borders) */
  .c-btn--sm {
    --btn-h: 40px;
    --btn-px: var(--sp-16);
    --btn-fs: var(--fs-btn-sm);
    min-height: calc(var(--btn-h) + 4px);
    padding-block: var(--sp-6);
    border-width: 2px 0;
    border-radius: var(--r-control) / calc(var(--r-control) + 2px);
  }

  .c-btn--full {
    display: flex;
    width: 100%;
  }

  @media (max-width: 639.98px) {
    .c-btn--full-phone {
      display: flex;
      width: 100%;
    }
  }

  /* ---------------------------------------------------------------- Chips */

  .c-chip {
    --chip-fg: var(--tone-neutral-fg);
    --chip-bg: var(--tone-neutral-bg);
    --chip-bd: var(--tone-neutral-bd);
    --chip-solid: var(--tone-neutral-solid);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid var(--chip-bd);
    border-radius: var(--r-chip);
    background: var(--chip-bg);
    color: var(--chip-fg);
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
  }

  .c-chip--info    { --chip-fg: var(--tone-info-fg);    --chip-bg: var(--tone-info-bg);    --chip-bd: var(--tone-info-bd);    --chip-solid: var(--tone-info-solid); }
  .c-chip--indigo  { --chip-fg: var(--tone-indigo-fg);  --chip-bg: var(--tone-indigo-bg);  --chip-bd: var(--tone-indigo-bd);  --chip-solid: var(--tone-indigo-solid); }
  .c-chip--live    { --chip-fg: var(--tone-live-fg);    --chip-bg: var(--tone-live-bg);    --chip-bd: var(--tone-live-bd);    --chip-solid: var(--tone-live-solid); }
  .c-chip--ai      { --chip-fg: var(--tone-ai-fg);      --chip-bg: var(--tone-ai-bg);      --chip-bd: var(--tone-ai-bd);      --chip-solid: var(--tone-ai-solid); }
  .c-chip--success { --chip-fg: var(--tone-success-fg); --chip-bg: var(--tone-success-bg); --chip-bd: var(--tone-success-bd); --chip-solid: var(--tone-success-solid); }
  .c-chip--teal    { --chip-fg: var(--tone-teal-fg);    --chip-bg: var(--tone-teal-bg);    --chip-bd: var(--tone-teal-bd);    --chip-solid: var(--tone-teal-solid); }
  .c-chip--warning { --chip-fg: var(--tone-warning-fg); --chip-bg: var(--tone-warning-bg); --chip-bd: var(--tone-warning-bd); --chip-solid: var(--tone-warning-solid); }
  .c-chip--orange  { --chip-fg: var(--tone-orange-fg);  --chip-bg: var(--tone-orange-bg);  --chip-bd: var(--tone-orange-bd);  --chip-solid: var(--tone-orange-solid); }
  .c-chip--danger  { --chip-fg: var(--tone-danger-fg);  --chip-bg: var(--tone-danger-bg);  --chip-bd: var(--tone-danger-bd);  --chip-solid: var(--tone-danger-solid); }
  .c-chip--rose    { --chip-fg: var(--tone-rose-fg);    --chip-bg: var(--tone-rose-bg);    --chip-bd: var(--tone-rose-bd);    --chip-solid: var(--tone-rose-solid); }

  /* Glass variant for dark backgrounds: keeps the tone only in the dot */
  .c-chip--glass {
    --chip-fg: var(--c-white);
    --chip-bg: var(--c-on-dark-fill);
    --chip-bd: rgba(255, 255, 255, 0.18);
  }

  .c-chip > .c-icon {
    width: 16px;
    height: 16px;
    margin-left: -2px;
  }

  /* Leading dot: .c-chip--dot, and always on .c-chip--live (where it pulses) */
  .c-chip--dot::before,
  .c-chip--live::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-solid);
  }

  .c-chip--live::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--chip-solid);
    opacity: 0;
    pointer-events: none;
    animation: c-chip-pulse var(--dur-ambient) var(--ease-out) infinite;
  }

  @keyframes c-chip-pulse {
    from { opacity: 0.55; transform: scale(1); }
    to { opacity: 0; transform: scale(2.2); }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-chip--live::after {
      animation: none;
    }
  }

  /* --------------------------------------------------------------- Notice */

  .c-aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-12);
    padding: var(--sp-12) var(--sp-16);
    border: 1px solid var(--tone-warning-bd);
    border-radius: var(--r-control);
    background: var(--tone-warning-bg);
    color: var(--tone-warning-fg);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
  }

  .c-aviso > .c-icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }

  /* The legal draft banner is body copy, not a caption */
  .l-legal__col > .c-aviso {
    font-size: var(--fs-body);
  }

  .c-aviso--info {
    border-color: var(--tone-info-bd);
    background: var(--tone-info-bg);
    color: var(--tone-info-fg);
  }

  /* --------------------------------------------------------------- Dialog */

  /* Generic native <dialog>. Open it with Actuaria.dialog.open(el, trigger). */
  .c-dialog {
    position: fixed;
    inset: 0;
    width: min(var(--dialog-sm), calc(100vw - 2 * var(--sp-16)));
    max-width: none;
    height: fit-content;
    max-height: calc(100vh - 2 * var(--sp-16));
    max-height: calc(100dvh - 2 * var(--sp-16));
    margin: auto;
    padding: clamp(24px, 7vw, 32px);
    padding-top: calc(clamp(24px, 7vw, 32px) + 3px);
    overflow: hidden auto;
    overscroll-behavior: contain;
    border-radius: var(--r-dialog);
    /* The 3px ocean-to-cyan band follows the top corners */
    /* iOS 26 colours the strips behind its status bar and its toolbar with this element's
       background-color while the popup is open: navy for them, and the white card is the layer above it */
    background:
      var(--g-band) top / 100% 3px no-repeat,
      linear-gradient(var(--c-surface), var(--c-surface)),
      var(--c-navy-deep);
    box-shadow: var(--e5);
    font-size: var(--fs-body);
  }

  .c-dialog--md {
    width: min(var(--dialog-md), calc(100vw - 2 * var(--sp-16)));
  }

  .c-dialog--lg {
    width: min(var(--dialog-lg), calc(100vw - 2 * var(--sp-16)));
  }

  .c-dialog::backdrop {
    background: var(--c-scrim, rgba(6, 35, 73, 0.45));
  }

  .c-dialog[open] {
    animation:
      c-fade-in var(--dur-fast) linear both,
      c-pop-in var(--dur-base) var(--ease-enter) both;
  }

  .c-dialog[open]::backdrop {
    animation: c-fade-in var(--dur-fast) linear both;
  }

  .c-dialog.is-closing,
  .c-dialog.is-closing::backdrop {
    animation: c-fade-out var(--dur-fast) var(--ease-exit) both;
  }

  .c-dialog__close {
    position: absolute;
    top: var(--sp-12);
    right: var(--sp-12);
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--r-control);
    color: var(--text-2);
  }

  @media (hover: hover) {
    .c-dialog__close:hover {
      background: var(--fill-soft);
      color: var(--text);
    }
  }

  .c-dialog__title {
    padding-right: var(--sp-32);
    font-size: var(--fs-h3);
    font-weight: var(--fw-extrabold);
    line-height: 1.2;
    letter-spacing: var(--ls-h3);
  }

  .c-dialog__body {
    margin-top: var(--sp-12);
    color: var(--text-2);
  }

  .c-dialog__subtitle {
    margin-top: var(--sp-24);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
    letter-spacing: var(--ls-ui);
  }

  /* What the demo shows: ruled rows, like the questionnaire */
  .c-dialog__list {
    margin-top: var(--sp-8);
    border-top: 1px solid var(--hairline);
  }

  .c-dialog__list > li {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    padding: var(--sp-12) 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--text);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .c-dialog__list .c-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
  }

  .c-dialog__actions {
    --dialog-pad: clamp(24px, 7vw, 32px);
    position: sticky;
    bottom: calc(-1 * var(--dialog-pad));
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-12);
    margin: var(--sp-8) calc(-1 * var(--dialog-pad)) calc(-1 * var(--dialog-pad));
    padding: var(--sp-16) var(--dialog-pad) var(--dialog-pad);
    background: var(--c-surface);
  }

  /* Small phones: tighten so the action stays in view */
  @media (max-width: 380px) {
    .c-dialog__body {
      font-size: var(--fs-small);
      line-height: var(--lh-small);
    }

    .c-dialog__subtitle {
      margin-top: var(--sp-20);
    }

    .c-dialog__list > li {
      padding: 10px 0;
    }

    .c-dialog__actions {
      margin-top: var(--sp-4);
    }
  }

  /* A phone on its side: wider, so the title takes one line and the list shows above the button */
  @media (max-height: 480px) and (orientation: landscape) {
    .c-dialog {
      width: min(var(--dialog-md), calc(100vw - 2 * var(--sp-16)));
    }

    .c-dialog__subtitle {
      margin-top: var(--sp-16);
    }
  }

  @keyframes c-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes c-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes c-pop-in {
    from { transform: scale(0.96); }
    to { transform: none; }
  }

  /* Entrance for content revealed by an action: fade and rise 8px */
  @keyframes c-rise-in {
    from { opacity: 0; transform: translateY(var(--enter-shift)); }
    to { opacity: 1; transform: none; }
  }

  /* While a modal is open the page behind does not scroll (set by 00-core.js) */
  html.is-dialog-open {
    overflow: hidden;
  }

  html.is-dialog-open body {
    padding-right: var(--scrollbar-w, 0px);
  }

  /* --------------------------------------------------------------- Header */

  /*
    Without JavaScript the header sits at the top of the page and scrolls away.
    With it (html.js) the header is fixed: transparent over the aurora hero,
    solid white with a hairline once the sentinel at the top of <main> leaves.
  */
  .c-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    color: var(--text);
  }

  .js .c-header {
    position: fixed;
  }

  .c-header {
    container: cabecera / inline-size;
  }

  html.is-dialog-open .c-header {
    right: var(--scrollbar-w, 0px);
  }

  /* Solid layer */
  .c-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    transition: opacity var(--dur-fast) linear;
  }

  /* Over the hero: no fill, and a soft navy scrim so the text never depends on
     which part of the aurora is behind it */
  .c-header--hero:not(.is-solid)::before {
    opacity: 0;
  }

  .c-header--hero::after {
    content: "";
    position: absolute;
    inset: 0 0 -24px;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(4, 24, 50, 0.55), rgba(4, 24, 50, 0));
    opacity: 1;
    pointer-events: none;
    transition: opacity var(--dur-fast) linear;
  }

  .c-header--hero.is-solid::after {
    opacity: 0;
  }

  /* iOS 26 colours the strip behind its status bar with the header's own background-color:
     the solid state sets it too, under the layer that fades in */
  .c-header {
    transition: background-color var(--dur-fast) linear;
  }

  .c-header:not(.c-header--hero),
  .c-header--hero.is-solid {
    background-color: var(--c-surface);
  }

  /* ...and the hero navy at 1% while it is clear over the hero: iOS 26 keeps the last colour it read
     from a fixed edge until that edge names another one, so with "transparent" the strip stayed
     white over the hero after the visitor scrolled back to the top */
  .c-header--hero:not(.is-solid) {
    background-color: rgba(4, 24, 50, 0.01);
  }

  /* ...and not while a dialog covers the page: the strip then follows the dialog or the navy body */
  html.is-dialog-open .c-header {
    background-color: transparent;
    transition: none;
  }

  .c-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-16);
    height: 100%;
  }

  .c-header__logo {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    min-height: var(--tap);
    margin-right: auto;
    border-radius: var(--r-6);
  }

  .c-header__logo-img {
    width: auto;
    height: 26px;
    transition: opacity var(--dur-fast) linear;
  }

  .c-header__logo-img--white {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -13px;
    opacity: 0;
  }

  .c-header--hero:not(.is-solid) .c-header__logo-img--white {
    opacity: 1;
  }

  .c-header--hero:not(.is-solid) .c-header__logo-img--color {
    opacity: 0;
  }

  .c-header__nav,
  .c-header__cta {
    display: none;
  }

  .c-header__menu {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    margin-right: -10px;
    border-radius: var(--r-control);
    color: inherit;
  }

  @media (hover: hover) {
    .c-header__menu:hover {
      background: var(--fill-soft);
    }
  }

  @media (min-width: 1024px) {
    .c-header__inner {
      gap: var(--sp-8);
    }

    .c-header__logo-img {
      height: 30px;
    }

    .c-header__logo-img--white {
      margin-top: -15px;
    }

    .c-header__nav {
      display: block;
    }

    .c-header__list {
      display: flex;
      align-items: center;
      gap: clamp(0px, 0.6vw, 8px);
    }

    .c-header__link {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: var(--tap);
      padding: 0 var(--sp-12);
      border-radius: var(--r-6);
      color: var(--text);
      font-size: var(--fs-small);
      font-weight: var(--fw-medium);
      line-height: var(--lh-ui);
      letter-spacing: var(--ls-ui);
      white-space: nowrap;
    }

    /* The brand band, drawn under the link on hover and focus */
    .c-header__link::after {
      content: "";
      position: absolute;
      right: var(--sp-12);
      bottom: 9px;
      left: var(--sp-12);
      height: 2px;
      border-radius: 2px;
      background: var(--g-band);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--dur-base) var(--ease-standard);
    }

    .c-header__link:hover::after,
    .c-header__link:focus-visible::after {
      transform: scaleX(1);
    }

    .c-header__cta {
      display: inline-flex;
      margin-left: var(--sp-12);
    }

    .c-header__menu {
      display: none;
    }

    @container cabecera (max-width: 60rem) {
      .c-header__nav {
        display: none;
      }

      .c-header__menu {
        display: grid;
      }
    }
  }

  @media (max-height: 480px) and (orientation: landscape) and (min-width: 640px) {
    .c-header__cta {
      display: inline-flex;
    }
  }

  /* ----------------------------------------------------------- Menu sheet */

  /* Below 1024px: a native dialog that reads like an index page */
  .c-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(100vw, 420px);
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
    overflow: hidden auto;
    overscroll-behavior: contain;
    /* Focus that scrolls a link into view stops below the pinned bar */
    scroll-padding-top: calc(var(--header-h) + var(--sp-8));
    background: var(--c-surface);
    box-shadow: var(--e5);
  }

  .c-menu[open] {
    display: flex;
    flex-direction: column;
    animation: c-sheet-in var(--dur-medium) var(--ease-enter) both;
  }

  .c-menu::backdrop {
    background: var(--c-scrim-strong, rgba(4, 24, 50, 0.62));
  }

  .c-menu[open]::backdrop {
    animation: c-fade-in var(--dur-fast) linear both;
  }

  .c-menu.is-closing,
  .c-menu.is-closing::backdrop {
    animation: c-fade-out var(--dur-fast) var(--ease-exit) both;
  }

  @keyframes c-sheet-in {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
  }

  /* Pinned and filled: the close button stays in reach on a short screen, and iOS 26 colours
     the strip behind its status bar from this edge */
  .c-menu__bar {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    background: var(--c-surface);
  }

  .c-menu__logo {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    border-radius: var(--r-6);
  }

  .c-menu__logo > img {
    width: auto;
    height: 26px;
  }

  .c-menu__close {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    margin-right: -10px;
    border-radius: var(--r-control);
    color: var(--text);
  }

  @media (hover: hover) {
    .c-menu__close:hover {
      background: var(--fill-soft);
    }
  }

  .c-menu__list {
    margin-top: var(--sp-8);
    border-top: 1px solid var(--hairline);
  }

  .c-menu__link {
    display: flex;
    align-items: center;
    min-height: 60px;
    border-bottom: 1px solid var(--hairline);
    color: var(--heading);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: var(--fw-bold);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
  }

  @media (hover: hover) {
    .c-menu__link:hover {
      color: var(--c-primary);
    }
  }

  .c-menu__foot {
    margin-top: auto;
    padding: var(--sp-32) 0 max(var(--sp-24), env(safe-area-inset-bottom, 0px));
  }

  .c-menu__context {
    margin-top: var(--sp-16);
    color: var(--text-2);
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
  }

  /* ----------------------------------------------------------- Sticky CTA */

  /* Below 1024px. 00-core.js adds .is-visible; without it the bar stays away. */
  .c-sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky-cta);
    padding: var(--sp-12) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--sp-12) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--c-surface);
    box-shadow: var(--e-up);
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition:
      transform var(--dur-base) var(--ease-exit),
      visibility 0s linear var(--dur-base);
  }

  .c-sticky-cta.is-visible {
    transform: none;
    visibility: visible;
    transition:
      transform var(--dur-medium) var(--ease-enter),
      visibility 0s;
  }

  .c-sticky-cta__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-16);
  }

  .c-sticky-cta__text {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-2);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .c-sticky-cta .c-btn {
    flex: 1 1 auto;
  }

  @media (min-width: 640px) {
    .c-sticky-cta__text {
      display: block;
    }

    .c-sticky-cta .c-btn {
      flex: none;
    }
  }

  @media (min-width: 1024px) {
    .c-sticky-cta {
      display: none;
    }
  }

  @media (max-height: 480px) and (orientation: landscape) {
    .c-sticky-cta {
      display: none;
    }
  }

  @media print {
    .c-sticky-cta,
    .c-header__menu,
    .c-header__cta {
      display: none;
    }
  }

  /* --------------------------------------------------------------- Footer */

  .c-footer {
    padding-top: clamp(48px, 7vw, 80px);
    padding-bottom: max(var(--sp-32), env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c-on-dark-hairline);
    background: var(--c-navy-deep);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .c-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-32);
  }

  .c-footer__logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    border-radius: var(--r-6);
  }

  .c-footer__logo > img {
    width: auto;
    height: 30px;
  }

  .c-footer__desc {
    max-width: 23rem;
    margin-top: var(--sp-12);
    color: var(--text-2);
    font-size: var(--fs-body);
    line-height: var(--lh-small);
  }

  .c-footer__lists {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-16) var(--sp-32);
  }

  .c-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--text-2);
    font-weight: var(--fw-medium);
  }

  @media (hover: hover) {
    .c-footer__link:hover {
      color: var(--text);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.25em;
    }
  }

  .c-footer__legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-16) var(--sp-48);
    margin-top: var(--sp-32);
    padding-top: var(--sp-32);
    border-top: 1px solid var(--hairline);
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: 1.55;
  }

  .c-footer__legal p,
  .c-footer__legal li {
    max-width: 34rem;
  }

  .c-footer__notes > li + li {
    margin-top: var(--sp-6);
  }

  .c-footer__copy {
    margin-top: var(--sp-32);
    color: var(--text-3);
    font-size: var(--fs-caption);
  }

  @media (min-width: 480px) {
    .c-footer__lists {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .c-footer__top {
      grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
      gap: var(--sp-48);
    }

    .c-footer__lists {
      padding-top: var(--sp-4);
    }

    .c-footer__legal {
      grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
      margin-top: var(--sp-48);
    }
  }

  /* ------------------------------------------------- De la voz al documento */

  /*
    Spoken words: Plus Jakarta Sans 600 inside « ». Type the guillemets in the
    text, or use <q class="c-voz"> and the browser adds them.
    Optional speaker label: <span class="c-voz__quien">.
  */
  .c-voz {
    color: var(--heading);
    font-family: var(--font-display);
    font-size: var(--fs-voz);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    letter-spacing: var(--ls-h4);
    quotes: "\00AB" "\00BB" "\201C" "\201D";
    text-wrap: pretty;
  }

  .c-voz__quien {
    display: block;
    margin-bottom: var(--sp-4);
    color: var(--text-3);
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    letter-spacing: 0;
  }

  /* Chat bubble. --ia sits left, --persona sits right. */
  .c-burbuja {
    width: fit-content;
    max-width: min(34rem, 88%);
    padding: var(--sp-12) var(--sp-16);
    border: 1px solid var(--bubble-ia-bd);
    border-radius: var(--r-ui);
    background: var(--bubble-ia-bg);
    color: var(--bubble-ia-fg);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .c-burbuja--ia {
    margin-right: auto;
    border-bottom-left-radius: var(--r-4);
  }

  .c-burbuja--persona {
    margin-left: auto;
    border-color: var(--bubble-persona-bd);
    border-bottom-right-radius: var(--r-4);
    background: var(--bubble-persona-bg);
    color: var(--bubble-persona-fg);
  }

  .c-burbuja__quien {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--bubble-label);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    letter-spacing: 0;
  }

  .c-burbuja + .c-burbuja {
    margin-top: var(--sp-12);
  }

  /*
    Questionnaire row: label left, value right in Inter 600 tabular, hairline below.
    Works as <div class="c-fila"> with __etiqueta / __valor spans, or as a <div>
    inside a <dl> with <dt> / <dd>. --pendiente is the "Aún sin respuesta" state.
  */
  .c-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4) var(--sp-24);
    padding: var(--sp-12) 0;
    border-bottom: 1px solid var(--hairline);
  }

  .c-fila__etiqueta,
  .c-fila > dt {
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
  }

  .c-fila__valor,
  .c-fila > dd {
    color: var(--text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-small);
    letter-spacing: var(--ls-fig);
    text-align: right;
  }

  .c-fila--pendiente > .c-fila__valor,
  .c-fila--pendiente > dd {
    color: var(--text-3);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-body);
  }

  /* Paper sheet for typeset documents. Always a light surface. */
  .c-hoja {
    padding: clamp(20px, 4vw, 40px);
    border-radius: var(--r-paper);
    background: var(--c-surface);
    box-shadow: var(--e3);
  }

  .c-hoja--elevada {
    box-shadow: var(--e4);
  }

  /*
    Comparison table with hairline rows. Below 640px each row becomes a block of
    label/value pairs: give every <td> a data-label with its column heading.
    Mark the cells of the Actuaria column with .c-tabla__destacada.
  */
  .c-tabla {
    width: 100%;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .c-tabla caption {
    padding-bottom: var(--sp-12);
    color: var(--text-2);
    font-size: var(--fs-caption);
    text-align: left;
    caption-side: top;
  }

  .c-tabla th,
  .c-tabla td {
    padding: var(--sp-16) var(--sp-24) var(--sp-16) 0;
    border-bottom: 1px solid var(--hairline);
    text-align: left;
    vertical-align: top;
  }

  .c-tabla th:last-child,
  .c-tabla td:last-child {
    padding-right: 0;
  }

  .c-tabla thead th {
    padding-top: 0;
    padding-bottom: var(--sp-12);
    border-bottom-color: var(--hairline-strong);
    color: var(--text-2);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    vertical-align: bottom;
  }

  .c-tabla tbody th {
    color: var(--text);
    font-weight: var(--fw-semibold);
  }

  .c-tabla td {
    color: var(--text-2);
  }

  .c-tabla .c-tabla__destacada {
    color: var(--text);
    font-weight: var(--fw-semibold);
  }

  @media (max-width: 639.98px) {
    .c-tabla,
    .c-tabla caption,
    .c-tabla tbody,
    .c-tabla tr,
    .c-tabla th,
    .c-tabla td {
      display: block;
    }

    .c-tabla thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }

    .c-tabla tbody tr {
      padding: var(--sp-16) 0;
      border-bottom: 1px solid var(--hairline);
    }

    .c-tabla tbody tr:first-child {
      border-top: 1px solid var(--hairline-strong);
    }

    .c-tabla tbody th,
    .c-tabla tbody td {
      padding: 0;
      border: 0;
    }

    .c-tabla tbody th {
      margin-bottom: var(--sp-6);
      font-size: var(--fs-body);
    }

    .c-tabla tbody td {
      display: grid;
      grid-template-columns: 6.5rem minmax(0, 1fr);
      gap: var(--sp-12);
      padding: var(--sp-4) 0;
    }

    .c-tabla tbody td::before {
      content: attr(data-label);
      color: var(--text-3);
      font-size: var(--fs-caption);
      font-weight: var(--fw-medium);
    }

    .c-tabla tbody td:not([data-label]) {
      display: block;
    }

    .c-tabla tbody td:not([data-label])::before {
      content: none;
    }
  }

  /*
    Definition list: term left, description right, hairlines between.
    <dl class="c-def"><div><dt>…</dt><dd>…</dd></div>…</dl>. One column on phones.
  */
  .c-def {
    border-top: 1px solid var(--hairline);
  }

  .c-def > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4) var(--col-gap);
    padding: var(--sp-20) 0;
    border-bottom: 1px solid var(--hairline);
  }

  .c-def dt {
    color: var(--text);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
  }

  .c-def dd {
    color: var(--text-2);
  }

  @media (min-width: 640px) {
    .c-def > div {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }
  }

  /*
    Accordion: native <details class="c-acordeon"> with a <summary> and a
    .c-acordeon__cuerpo. The chevron is drawn here; if the summary carries its
    own .c-icon (#i-expand_more), that one rotates instead.
  */
  .c-acordeon {
    border-bottom: 1px solid var(--hairline);
  }

  .c-acordeon:first-child,
  :not(.c-acordeon) + .c-acordeon {
    border-top: 1px solid var(--hairline);
  }

  .c-acordeon > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    min-height: 60px;
    padding: var(--sp-16) 0;
    list-style: none;
    color: var(--text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
  }

  .c-acordeon > summary::-webkit-details-marker {
    display: none;
  }

  .c-acordeon > summary::marker {
    content: "";
  }

  .c-acordeon > summary > .c-icon,
  .c-acordeon > summary:not(:has(.c-icon))::after {
    flex: none;
    color: var(--text-3);
    transition: transform var(--dur-base) var(--ease-standard);
  }

  .c-acordeon > summary:not(:has(.c-icon))::after {
    content: "";
    width: 24px;
    height: 24px;
    background: currentColor;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.89 9.28l-3.89 3.89l-3.89-3.89c-.38-.37-1.03-.37-1.41 0c-.37 .42-.37 1.03 0 1.41l4.6 4.59c.37 .42 1.03 .42 1.4 0l4.6-4.59c.37-.38 .37-.99 0-1.41c-.38-.37-1.03-.37-1.41 0z'/%3E%3C/svg%3E");
    -webkit-mask: var(--chevron) center / contain no-repeat;
    mask: var(--chevron) center / contain no-repeat;
  }

  .c-acordeon > summary:hover > .c-icon,
  .c-acordeon > summary:hover::after {
    color: var(--text);
  }

  .c-acordeon[open] > summary > .c-icon,
  .c-acordeon[open] > summary::after {
    transform: rotate(180deg);
  }

  .c-acordeon__cuerpo {
    max-width: var(--measure);
    padding: 0 clamp(0px, 6vw, 40px) var(--sp-24) 0;
    color: var(--text-2);
  }

  /* Only after a press (00-core.js adds .is-toggled), never on page load */
  .c-acordeon.is-toggled[open] > .c-acordeon__cuerpo {
    animation: c-rise-in var(--dur-base) var(--ease-enter) both;
  }

  .c-acordeon__cuerpo > * + * {
    margin-top: var(--sp-12);
  }

  /*
    Static decorative waveform for dark backgrounds: 64 round-capped bars, cyan
    to white, from the product's VoiceWaveform maths. Empty element, no animation:
    <span class="c-onda" aria-hidden="true"></span>
    --corta: 36 bars. --creciente: 36 bars, quiet on the left and loud on the
    right. --espejo flips any of them.
  */
  .c-onda {
    display: block;
    width: 100%;
    max-width: 512px;
    aspect-ratio: 512 / 64;
    background: var(--g-wave);
    --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 64'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M4 32v0.01M12 32v0.01M20 31v2M28 30v4M36 30v4M44 30.5v3M52 28.5v7M60 27.5v9M68 27.5v9M76 29v6M84 27.5v9M92 27.5v9M100 25v14M108 19.5v25M116 13.5v37M124 10v44M132 9v46M140 10v44M148 12.5v39M156 14v36M164 16v32M172 19v26M180 24v16M188 18.5v27M196 10.5v43M204 4.5v55M212 3v58M220 6v52M228 11.5v41M236 17v30M244 19.5v25M252 18.5v27M260 15.5v33M268 13.5v37M276 13v38M284 15.5v33M292 18v28M300 20v24M308 20.5v23M316 21v22M324 23.5v17M332 21v22M340 13.5v37M348 6v52M356 2v60M364 2.5v59M372 7v50M380 13.5v37M388 19.5v25M396 23.5v17M404 26v12M412 27.5v9M420 27v10M428 25v14M436 24v16M444 23.5v17M452 25v14M460 27.5v9M468 29.5v5M476 30.5v3M484 30.5v3M492 30.5v3M500 31.5v1M508 32v0.01'/%3E%3C/svg%3E");
    -webkit-mask: var(--onda) center / 100% 100% no-repeat;
    mask: var(--onda) center / 100% 100% no-repeat;
  }

  .c-onda--corta,
  .c-onda--creciente {
    max-width: 288px;
    aspect-ratio: 288 / 64;
  }

  .c-onda--corta {
    --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 64'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M4 32v0.01M12 31v2M20 30v4M28 29.5v5M36 27v10M44 29v6M52 27v10M60 21.5v21M68 11.5v41M76 8.5v47M84 12v40M92 15.5v33M100 21.5v21M108 15v34M116 3.5v57M124 5.5v53M132 16v32M140 19v26M148 14v36M156 13.5v37M164 18v28M172 20.5v23M180 22v20M188 18v28M196 4.5v55M204 2v60M212 11.5v41M220 22v20M228 26.5v11M236 26.5v11M244 23.5v17M252 24.5v15M260 29v6M268 30.5v3M276 30.5v3M284 32v0.01'/%3E%3C/svg%3E");
  }

  .c-onda--creciente {
    --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 64'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M4 32v0.01M12 32v0.01M20 32v0.01M28 32v0.01M36 32v0.01M44 32v0.01M52 32v0.01M60 30.5v3M68 27v10M76 25.5v13M84 26v12M92 27v10M100 29v6M108 25.5v13M116 19.5v25M124 20v24M132 24.5v15M140 25.5v13M148 22v20M156 20.5v23M164 23v18M172 24v16M180 24.5v15M188 20.5v23M196 7v50M204 2v60M212 9.5v45M220 19.5v25M228 23.5v17M236 22.5v19M244 15.5v33M252 14v36M260 20v24M268 21.5v21M276 12v40M284 3.5v57'/%3E%3C/svg%3E");
  }

  .c-onda--espejo {
    transform: scaleX(-1);
  }
}

/* 10-hero.css */
/*
  Hero (#inicio), on the aurora. Four arrangements:
    below 640px        one column: title, short sub, button, stage, context line,
                       figures, notes (the text wrapper dissolves so the context
                       line can sit after the stage)
    640 to 1023px      stacked: text, stage, figures as a three-part ruled strip
    1024 to 1179px     stacked, with the title beside the sub and the button so
                       the stage starts higher
    from 1180px        two columns: text 5/12, stage 7/12, centred on each other,
                       and the figures strip under both
  Plus one for phones held sideways (640 to 1023px wide, at most 480px tall):
  text and stage side by side, so the top of the stage is on screen at once.

  The grid lives on an inner wrapper: the section's first .l-container stays
  position: static and untouched (the aurora hangs its third glow from it).
  Only the stage slot (.s-inicio__escena) is styled here, never the stage itself.
*/

@layer sections {
  .s-inicio__rejilla {
    --s-inicio-canal: var(--sp-40); /* gutter between the two columns */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  /* ----------------------------------------------------------------- Text */

  .s-inicio__titulo {
    font-size: clamp(1.75rem, 0.9rem + 4.4vw, 2.25rem); /* 28.5 at 320, 30 at 360 */
  }

  .s-inicio__sub {
    max-width: 38rem;
    margin-top: var(--sp-16);
    color: var(--text-2);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  /* The long sub from 640px, the short one below (and on phones held sideways).
     Only one is ever rendered; the wrapper carries the entrance, so swapping
     them at a breakpoint never replays it. */
  .s-inicio__sub-larga {
    display: none;
  }

  .s-inicio__texto > .c-btn {
    justify-self: start;
    margin-top: var(--sp-24);
  }

  .s-inicio__contexto,
  .s-inicio__sin-js {
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
  }

  .s-inicio__sin-js {
    margin-top: var(--sp-12);
  }

  /* ------------------------------------------------- Stage slot and caption */

  .s-inicio__visual {
    min-width: 0;
  }

  .s-inicio__escena {
    width: 100%;
  }

  /* Left-aligned, like the stage's own line under it ("Leer la explicación como texto") */
  .s-inicio__pie {
    margin-top: var(--sp-12);
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
  }

  /* ---------------------------------------------------------- Proof figures */

  /* Sentence-sized figures in a ruled list: rows on phones, a strip from 640px */
  .s-inicio__cifras {
    border-top: 1px solid var(--hairline-strong);
  }

  .s-inicio__cifra {
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    letter-spacing: var(--ls-fig);
    text-wrap: balance;
  }

  .s-inicio__junto {
    white-space: nowrap;
  }

  .s-inicio__notas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-12) var(--s-inicio-canal);
    margin-top: var(--sp-16);
  }

  .s-inicio__nota {
    max-width: 40rem;
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: 1.5;
  }

  .s-inicio__nota--menor {
    max-width: var(--measure);
  }

  /* ----------------------------------------------------------- Below 640px */

  @media (max-width: 639.98px) {
    /* The children of the text wrapper join the one-column grid, so the context
       line can be placed after the stage */
    .s-inicio__texto {
      display: contents;
    }

    .s-inicio__visual {
      order: 1;
      margin-top: var(--sp-32);
    }

    .s-inicio__contexto {
      order: 2;
      margin-top: var(--sp-32);
      color: var(--text-2);
      font-size: var(--fs-small);
    }

    .s-inicio__prueba {
      order: 3;
      margin-top: var(--sp-16);
    }
  }

  @media (max-width: 479.98px) {
    .s-inicio__texto > .c-btn {
      justify-self: stretch;
    }
  }

  /* The smallest phones: a little tighter, so the top of the stage is in view */
  @media (max-width: 359.98px) {
    .s-inicio__sub {
      margin-top: var(--sp-12);
      font-size: 1rem;
    }

    .s-inicio__texto > .c-btn {
      margin-top: var(--sp-20);
    }

    .s-inicio__visual {
      margin-top: var(--sp-24);
    }
  }

  /* ------------------------------------------------------------ From 640px */

  @media (min-width: 640px) {
    .s-inicio__rejilla {
      row-gap: clamp(40px, 5.5vw, 56px);
    }

    /* Button and context line share a row; everything else spans it */
    .s-inicio__texto {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      column-gap: var(--sp-20);
    }

    .s-inicio__titulo,
    .s-inicio__sub,
    .s-inicio__texto > noscript {
      grid-column: 1 / -1;
    }

    .s-inicio__titulo {
      max-width: 17em;
      font-size: clamp(2.5rem, 0.6rem + 4.75vw, 3.5rem); /* 40 at 640, 46 at 768, 56 from 980 */
    }

    .s-inicio__sub {
      margin-top: var(--sp-20);
    }

    .s-inicio__sub-larga {
      display: block;
    }

    .s-inicio__sub-corta {
      display: none;
    }

    .s-inicio__texto > .c-btn,
    .s-inicio__contexto {
      margin-top: var(--sp-32);
    }

    .s-inicio__contexto {
      max-width: 17rem;
    }

    .s-inicio__cifras {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-bottom: 1px solid var(--hairline);
    }

    .s-inicio__cifra {
      padding: var(--sp-20) var(--sp-24);
      border-bottom: 0;
      border-left: 1px solid var(--hairline);
      font-size: 1.125rem;
    }

    .s-inicio__cifra:first-child {
      padding-left: 0;
      border-left: 0;
    }

    .s-inicio__cifra:last-child {
      padding-right: 0;
    }

    /* Every figure sets on two balanced lines */
    .s-inicio__frase {
      display: block;
      max-width: 13.5em;
    }
  }

  /* Phones held sideways: text beside the stage. The stage column follows the
     width the portrait stage caps itself to (0.8 x 78% of the viewport height). */
  @media (min-width: 640px) and (max-width: 1023.98px) and (max-height: 480px) {
    .s-inicio__rejilla {
      --s-inicio-escena: clamp(13.5rem, 62.4vh, 17.5rem);
      grid-template-columns: minmax(0, 1fr) var(--s-inicio-escena);
      align-items: start;
      gap: var(--sp-32) var(--sp-24);
    }

    @supports (height: 1svh) {
      .s-inicio__rejilla {
        --s-inicio-escena: clamp(13.5rem, 62.4svh, 17.5rem);
      }
    }

    .s-inicio__prueba {
      grid-column: 1 / -1;
    }

    .s-inicio__titulo {
      font-size: clamp(1.5rem, 4.1vw, 1.75rem);
    }

    .s-inicio__sub {
      margin-top: var(--sp-12);
      font-size: 1rem;
    }

    .s-inicio__sub-larga {
      display: none;
    }

    .s-inicio__sub-corta {
      display: block;
    }

    .s-inicio__texto > .c-btn,
    .s-inicio__contexto {
      grid-column: 1 / -1;
    }

    .s-inicio__texto > .c-btn {
      margin-top: var(--sp-16);
    }

    .s-inicio__contexto {
      max-width: none;
      margin-top: var(--sp-12);
    }
  }

  @media (min-width: 1024px) {
    .s-inicio__cifra {
      font-size: 1.25rem;
    }

    /* The notes sit on the strip's own thirds: each starts under a figure */
    .s-inicio__notas {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 0;
    }

    .s-inicio__nota:first-child {
      padding-right: var(--sp-24);
    }

    .s-inicio__nota--menor {
      grid-column: 2 / -1;
      padding-left: calc(var(--sp-24) + 1px);
    }
  }

  /* 1024 to 1179px: the title takes 7/12, the sub and the button the other 5/12 */
  @media (min-width: 1024px) and (max-width: 1179.98px) {
    .s-inicio__texto {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      align-items: start;
      column-gap: var(--sp-48);
    }

    /* Sized for four lines: "telesuscripción, hechas" fits the 7/12 column */
    .s-inicio__titulo {
      grid-column: 1;
      grid-row: 1 / span 4;
      max-width: none;
      font-size: calc(5.05vw - 6.6px); /* 45 at 1024, 53 at 1179 */
    }

    .s-inicio__sub,
    .s-inicio__texto > .c-btn,
    .s-inicio__contexto,
    .s-inicio__texto > noscript {
      grid-column: 2;
    }

    /* The sub starts on the cap line of the title */
    .s-inicio__sub {
      margin-top: var(--sp-4);
      font-size: 1.125rem;
    }

    .s-inicio__texto > .c-btn {
      margin-top: var(--sp-24);
    }

    .s-inicio__contexto {
      max-width: none;
      margin-top: var(--sp-12);
    }
  }

  /* From 1180px: text 5/12, stage 7/12. Both start at the top, so the player bar that
     appears on Play pushes only what is under the stage and never moves the stage or the text */
  @media (min-width: 1180px) {
    .s-inicio__rejilla {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: start;
      column-gap: var(--s-inicio-canal);
    }

    /* The stage's top edge sits on the cap line of the title */
    .s-inicio__visual {
      margin-top: 0.75rem;
    }

    .s-inicio__prueba {
      grid-column: 1 / -1;
    }

    /* Sized so that "telesuscripción," fits the 5/12 column from 1180px up */
    .s-inicio__titulo {
      max-width: none;
      font-size: clamp(3rem, 3rem + (100vw - 1180px) * 0.08, 3.5rem); /* 48 at 1180, 56 from 1280 */
    }

    .s-inicio__sub {
      font-size: 1.125rem;
    }

    /* Up to 1279px the context line goes under the button, on one line */
    .s-inicio__texto > .c-btn,
    .s-inicio__contexto {
      grid-column: 1 / -1;
    }

    .s-inicio__contexto {
      max-width: none;
      margin-top: var(--sp-12);
    }
  }

  @media (min-width: 1280px) {
    .s-inicio__rejilla {
      --s-inicio-canal: var(--sp-48);
    }

    .s-inicio__texto > .c-btn,
    .s-inicio__contexto {
      grid-column: auto;
    }

    .s-inicio__contexto {
      max-width: 17rem;
      margin-top: var(--sp-32);
    }
  }

  /* --------------------------------------------------------------- Entrance */

  /*
    One load sequence: title, sub, button, figures, stage. The hidden state lives
    only in the first keyframe and the fill is "backwards": nothing stays hidden
    if the animation never runs, and once it has run it holds nothing (the button
    keeps its pressed state and the stage slot is not left as a stacking context).
  */
  @media (prefers-reduced-motion: no-preference) {
    .s-inicio__titulo,
    .s-inicio__sub,
    .s-inicio__texto > .c-btn,
    .s-inicio__contexto,
    .s-inicio__prueba,
    .s-inicio__visual {
      animation: s-inicio-entra var(--dur-slow) var(--ease-enter) backwards;
      animation-delay: calc(var(--s-inicio-paso, 0) * 90ms);
    }

    .s-inicio__sub { --s-inicio-paso: 1; }

    .s-inicio__texto > .c-btn,
    .s-inicio__contexto { --s-inicio-paso: 2; }

    .s-inicio__prueba { --s-inicio-paso: 3; }
    .s-inicio__visual { --s-inicio-paso: 4; }
  }

  @keyframes s-inicio-entra {
    from {
      opacity: 0;
      transform: translateY(12px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* 20-problema.css */
/*
  Problema (#problema), on the white surface. Sub-blocks, top to bottom:
    apertura     h2 and body, then the evidence: the case line (Venta,
                 Telesuscripción, Emisión) and the two schematic time bars
                 (drawn once by js/20-problema.js). Side by side from 1100px.
    pareja       the five limits beside the four changes (one column below 1024px)
    comparacion  the before / with Actuaria table
  The section's outer padding belongs to 02-layout.css.
*/

@layer sections {
  .s-problema {
    --s-problema-salto: var(--block-y);          /* between sub-blocks */
    --s-problema-punto: 12px;                   /* station dot */
  }

  .s-problema h3 {
    max-width: 22em;
  }

  /* ------------------------------------------------------------- Apertura */

  .s-problema__apertura {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 6vw, 48px) var(--col-gap);
  }

  /* Each sentence wraps as a unit before it breaks inside */
  .s-problema__frase {
    display: inline-block;
  }

  .s-problema__cuerpo {
    max-width: 40rem;
    margin-top: var(--sp-16);
  }

  /* The case line: an ordered list drawn as a track with three stations.
     Vertical on phones, horizontal from 640px. */
  .s-problema__linea {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .s-problema__estacion {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 var(--sp-24) var(--sp-32);
  }

  .s-problema__estacion:last-child {
    padding-bottom: 0;
  }

  /* Station dot */
  .s-problema__estacion::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: var(--s-problema-punto);
    height: var(--s-problema-punto);
    border-radius: 50%;
    background: var(--heading);
  }

  /* Stretch to the next station */
  .s-problema__estacion:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(7px + var(--s-problema-punto) + 5px);
    bottom: -2px;
    left: calc(var(--s-problema-punto) / 2 - 1px);
    width: 2px;
    border-radius: 2px;
    background: var(--hairline-strong);
  }

  /* The stretch where the case waits: dashed, in the warning tone */
  .s-problema__estacion--espera:not(:last-child)::after {
    border-radius: 0;
    background: repeating-linear-gradient(to bottom, var(--tone-warning-solid) 0 6px, transparent 6px 11px);
  }

  .s-problema__estacion-nombre {
    color: var(--heading);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    word-spacing: var(--ws-display);
  }

  .s-problema__estacion-texto {
    margin-top: var(--sp-2);
    color: var(--text-2);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .s-problema__espera {
    z-index: var(--z-raised);
    margin-top: var(--sp-16);
    margin-bottom: var(--sp-4);
  }

  /* ---------------------------------------------------------------- Ciclo */

  .s-problema__ciclo {
    margin-top: clamp(28px, 5vw, 40px);
    padding-top: clamp(24px, 4vw, 32px);
    border-top: 1px solid var(--hairline);
  }

  .s-problema__ciclo-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8) var(--sp-16);
  }

  .s-problema__barras {
    display: grid;
    gap: var(--sp-16);
    margin-top: var(--sp-20);
  }

  /* Label above its bar; the value sits at the end of the bar */
  .s-problema__barra {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .s-problema__barra-etiqueta {
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
  }

  .s-problema__barra--corta .s-problema__barra-etiqueta {
    color: var(--text);
    font-weight: var(--fw-semibold);
  }

  .s-problema__barra-pista {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    min-width: 0;
  }

  .s-problema__barra-relleno {
    height: 14px;
    border-radius: var(--r-full);
    transform-origin: left center;
  }

  .s-problema__barra--larga .s-problema__barra-relleno {
    flex: 1 1 auto;
    background: var(--c-slate);
  }

  .s-problema__barra--corta .s-problema__barra-relleno {
    flex: 0 0 max(7%, 28px);
    background: var(--g-band);
  }

  .s-problema__barra-valor {
    flex: none;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-fig);
    white-space: nowrap;
  }

  .s-problema__ciclo-nota {
    margin-top: var(--sp-16);
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
  }

  /* Drawn once when the figure first scrolls into view. js/20-problema.js arms the
     bars (.is-armada) and then releases them (.is-dibujada); without it, and
     under reduced motion, they are simply drawn. */
  .s-problema__barras.is-armada .s-problema__barra-relleno {
    transform: scaleX(0);
  }

  .s-problema__barras.is-dibujada .s-problema__barra-relleno {
    transform: none;
    transition: transform var(--dur-slow) var(--ease-standard);
  }

  .s-problema__barras.is-dibujada .s-problema__barra--corta .s-problema__barra-relleno {
    transition-delay: var(--dur-base);
  }

  @media (prefers-reduced-motion: reduce) {
    .s-problema__barras .s-problema__barra-relleno {
      transform: none;
      transition: none;
    }
  }

  /* --------------------------------------------------------------- Pareja */

  .s-problema__pareja {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-problema-salto) var(--col-gap);
    margin-top: var(--s-problema-salto);
  }

  .s-problema__intro {
    max-width: 36rem;
    margin-top: var(--sp-12);
    color: var(--text-2);
  }

  /* Ruled lists: a title and its sentence, hairlines between */
  .s-problema__lista {
    margin-top: var(--sp-24);
    border-top: 1px solid var(--hairline-strong);
  }

  .s-problema__item {
    padding: var(--sp-20) 0;
    border-bottom: 1px solid var(--hairline);
  }

  .s-problema__item-titulo {
    color: var(--text);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
  }

  .s-problema__item-texto {
    margin-top: var(--sp-6);
    color: var(--text-2);
  }

  .s-problema__item-texto strong {
    color: var(--text);
  }

  .s-problema__nota {
    max-width: 40rem;
    margin-top: var(--sp-16);
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: 1.5;
  }

  .s-problema__nota + .s-problema__nota {
    margin-top: var(--sp-8);
  }

  /* ---------------------------------------------------------- Comparación */

  .s-problema__comparacion {
    margin-top: var(--s-problema-salto);
  }

  .s-problema__tabla {
    margin-top: var(--sp-24);
  }

  /* Row-group labels */
  .s-problema__tabla .s-problema__grupo-fila th {
    color: var(--text);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
  }

  .s-problema__nota--tabla {
    max-width: var(--measure);
    margin-top: var(--sp-20);
  }

  /* ----------------------------------------------------------- Plegables */

  /* Below 640px js/20-problema.js turns the blocks marked [data-plegable] into
     disclosures (.is-plegable, closed until .is-abierto). Without it, and from
     640px, they are plain headings with everything visible. */

  /* The chevron only exists inside the disclosure button */
  .s-problema__plegable-titulo > .c-icon {
    display: none;
  }

  .s-problema__plegable-boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    width: 100%;
    min-height: 60px;
    padding: var(--sp-16) 0;
    border-radius: var(--r-6);
    text-align: left;
  }

  .s-problema__plegable-boton .c-icon {
    flex: none;
    color: var(--text-3);
    transition: transform var(--dur-base) var(--ease-standard);
  }

  .s-problema__plegable-boton[aria-expanded="true"] .c-icon {
    transform: rotate(180deg);
  }

  @media (hover: hover) {
    .s-problema__plegable-boton:hover .c-icon {
      color: var(--text);
    }
  }

  /* --------------------------------------------------------- Phones only */

  @media (max-width: 639.98px) {
    .s-problema .is-plegable {
      border-top: 1px solid var(--hairline-strong);
      border-bottom: 1px solid var(--hairline-strong);
    }

    .s-problema .is-plegable.is-abierto {
      border-bottom-color: transparent;
    }

    .s-problema .is-plegable > .s-problema__plegable-titulo {
      max-width: none;
    }

    .s-problema .is-plegable:not(.is-abierto) > .s-problema__plegable-cuerpo {
      display: none;
    }

    .s-problema .is-plegable > .s-problema__plegable-cuerpo > :first-child {
      margin-top: 0;
    }

    /* Only after a press, never on page load */
    .s-problema .is-plegable.is-animado.is-abierto > .s-problema__plegable-cuerpo {
      animation: c-rise-in var(--dur-base) var(--ease-enter) both;
    }

    /* Stacked table: each group is its own block, the MVP group on a tint */
    .s-problema__tabla .s-problema__grupo {
      margin-top: var(--sp-32);
    }

    .s-problema__tabla .s-problema__grupo--mvp {
      margin-top: 0;
      margin-inline: calc(-1 * var(--sp-12));
      padding: var(--sp-4) var(--sp-12);
      border-radius: var(--r-control);
      background: var(--c-row-selected);
    }

    .s-problema__tabla .s-problema__grupo tr.s-problema__grupo-fila {
      padding: var(--sp-12) 0;
      border-top: 0;
      border-bottom-color: var(--hairline-strong);
    }

    .s-problema__tabla .s-problema__grupo-fila th {
      margin-bottom: 0;
      font-size: var(--fs-caption);
    }

    .s-problema__tabla .s-problema__grupo--mvp tr:last-child {
      border-bottom: 0;
    }
  }

  /* ------------------------------------------------------------ From 640px */

  @media (min-width: 640px) {
    /* Horizontal case line */
    /* The first stretch, where the case waits, is the longest */
    .s-problema__linea {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .s-problema__estacion,
    .s-problema__estacion:last-child {
      padding: var(--sp-40) var(--sp-24) 0 0;
    }

    .s-problema__estacion::before {
      top: 8px;
    }

    .s-problema__estacion:not(:last-child)::after {
      top: 13px;
      right: 5px;
      bottom: auto;
      left: calc(var(--s-problema-punto) + 5px);
      width: auto;
      height: 2px;
    }

    .s-problema__estacion--espera:not(:last-child)::after {
      background: repeating-linear-gradient(to right, var(--tone-warning-solid) 0 6px, transparent 6px 11px);
    }

    /* The waiting label sits on its stretch of the line, centred between the dots */
    .s-problema__espera {
      position: absolute;
      top: 0;
      right: 0;
      left: var(--s-problema-punto);
      width: max-content;
      margin: 0 auto;
    }

    .s-problema__barra-relleno {
      height: 16px;
    }

    /* Table: column widths and group bands */
    .s-problema__tabla {
      table-layout: fixed;
    }

    .s-problema__tabla thead th:nth-child(1) { width: 26%; }
    .s-problema__tabla thead th:nth-child(2) { width: 30%; }

    .s-problema__tabla th:first-child,
    .s-problema__tabla td:first-child {
      padding-left: var(--sp-20);
    }

    .s-problema__tabla th:last-child,
    .s-problema__tabla td:last-child {
      padding-right: var(--sp-20);
    }

    .s-problema__tabla .s-problema__grupo-fila th {
      padding-top: var(--sp-32);
      padding-bottom: var(--sp-12);
      border-bottom-color: var(--hairline-strong);
    }

    /* The MVP rows sit on a tinted band, apart from the configuration rows */
    .s-problema__tabla .s-problema__grupo--mvp th,
    .s-problema__tabla .s-problema__grupo--mvp td {
      background: var(--c-row-selected);
    }

    .s-problema__tabla .s-problema__grupo--mvp .s-problema__grupo-fila th {
      padding-top: var(--sp-16);
      border-radius: var(--r-control) var(--r-control) 0 0;
    }

    .s-problema__tabla .s-problema__grupo--mvp tr:last-child > * {
      border-bottom-color: transparent;
    }

    .s-problema__tabla .s-problema__grupo--mvp tr:last-child > :first-child {
      border-bottom-left-radius: var(--r-control);
    }

    .s-problema__tabla .s-problema__grupo--mvp tr:last-child > :last-child {
      border-bottom-right-radius: var(--r-control);
    }
  }

  /* 640 to 1023px: list rows put the title beside its sentence */
  @media (min-width: 640px) and (max-width: 1023.98px) {
    .s-problema__item {
      display: grid;
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: var(--col-gap);
    }

    .s-problema__item-texto {
      margin-top: 0;
    }
  }

  /* ----------------------------------------------------------- From 1024px */

  @media (min-width: 1024px) {
    .s-problema__pareja {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    /* Side by side, only the four changes keep their inner rules: two ruled lists
       whose rows never meet read as a broken table */
    .s-problema__bloque--limites .s-problema__lista {
      padding-top: var(--sp-20);
    }

    .s-problema__bloque--limites .s-problema__item {
      padding: 0;
      border-bottom: 0;
    }

    .s-problema__bloque--limites .s-problema__item + .s-problema__item {
      margin-top: var(--sp-24);
    }
  }

  /* ----------------------------------------------------------- From 1100px */

  /* Heading and body beside the evidence (the case line needs about 550px) */
  @media (min-width: 1100px) {
    .s-problema__apertura {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .s-problema__cuerpo {
      margin-top: var(--sp-24);
    }

    /* The line starts level with the first line of the heading */
    .s-problema__evidencia {
      padding-top: var(--sp-8);
    }
  }

  /* One pixel smaller, so the first sentence fits the column in every engine */
  @media (min-width: 1280px) {
    .s-problema__titulo {
      font-size: 2.6875rem;
    }
  }
}

/* 30-como-funciona.css */
/*
  Cómo funciona (#como-funciona), on the canvas surface.
    pasos    the four numbered steps as ruled rows: numeral, title, text
    estados  the status chain: four chips in order, joined by a drawn connector,
             and the line about the exceptions
  Nothing moves in this section.
*/

@layer sections {
  /* ---------------------------------------------------------------- Pasos */

  .s-como-funciona__pasos {
    border-top: 1px solid var(--hairline-strong);
  }

  .s-como-funciona__paso {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sp-8) var(--sp-8);
    padding: var(--sp-24) 0;
    border-bottom: 1px solid var(--hairline-strong);
  }

  /* Large quiet numerals in the display face */
  .s-como-funciona__numero {
    color: var(--c-outline);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--fw-extrabold);
    font-variant-numeric: lining-nums;
    line-height: 1;
    letter-spacing: var(--ls-h2);
  }

  .s-como-funciona__paso-texto {
    grid-column: 1 / -1;
    max-width: var(--measure);
    color: var(--text-2);
  }

  /* -------------------------------------------------------------- Estados */

  .s-como-funciona__estados {
    margin-top: var(--block-y);
  }

  .s-como-funciona__cadena {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--sp-24);
  }

  /* Phones: a vertical chain. The connector runs down from each chip to the next. */
  .s-como-funciona__estado {
    position: relative;
    padding-bottom: var(--sp-24);
  }

  .s-como-funciona__estado:last-child {
    padding-bottom: 0;
  }

  .s-como-funciona__estado-chip {
    display: flex;
    align-items: center;
  }

  .s-como-funciona__estado:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 6px;
    left: 13px;
    width: 2px;
    border-radius: 2px;
    background: var(--hairline-strong);
  }

  .s-como-funciona__estado-texto {
    margin-top: var(--sp-8);
    padding-left: var(--sp-32);
    color: var(--text-2);
  }

  /* The shared live chip pulses; here it holds still */
  .s-como-funciona .c-chip--live::after {
    animation: none;
  }

  .s-como-funciona__excepciones {
    max-width: var(--measure);
    margin-top: var(--sp-32);
    color: var(--text-2);
    text-wrap: balance;
  }

  /* ------------------------------------------------------------ From 640px */

  @media (min-width: 640px) {
    /* Numeral and title share one cap line; the numeral hangs beside the text */
    .s-como-funciona__paso {
      grid-template-columns: 4rem minmax(0, 1fr);
      align-items: start;
      gap: var(--sp-8) var(--sp-16);
      padding: var(--sp-32) 0;
    }

    .s-como-funciona__numero {
      grid-row: 1 / span 2;
      margin-top: -0.04em;
      font-size: 2.75rem;
    }

    .s-como-funciona__paso-texto {
      grid-column: 2;
    }
  }

  /* ------------------------------------------------------------ From 900px */

  /* The chain turns horizontal: each connector runs from its chip to the next column */
  @media (min-width: 900px) {
    .s-como-funciona__cadena {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .s-como-funciona__estado,
    .s-como-funciona__estado:last-child {
      padding-bottom: 0;
    }

    .s-como-funciona__estado:not(:last-child)::before {
      content: none;
    }

    .s-como-funciona__estado:not(:last-child) .s-como-funciona__estado-chip::after {
      content: "";
      flex: 1 1 auto;
      height: 2px;
      margin-inline: var(--sp-8);
      border-radius: 2px;
      background: var(--hairline-strong);
    }

    .s-como-funciona__estado-texto {
      margin-top: var(--sp-12);
      padding-right: var(--sp-24);
      padding-left: 0;
    }
  }

  /* ----------------------------------------------------------- From 1024px */

  @media (min-width: 1024px) {
    .s-como-funciona__paso {
      /* The text starts on the 5/7 line shared with the other sections */
      grid-template-columns: 5.5rem minmax(0, 1fr) calc((100% - var(--col-gap)) * 7 / 12);
      gap: var(--sp-8) var(--sp-32);
      padding: var(--sp-40) 0;
    }

    /* Numeral, title and text share one cap line */
    .s-como-funciona__numero {
      grid-row: auto;
      margin-top: -0.055em;
      font-size: 3.5rem;
    }

    .s-como-funciona__paso-titulo {
      margin-top: -1px;
    }

    .s-como-funciona__paso-texto {
      grid-column: 3;
    }
  }
}

/* 40-plataforma.css */
/*
  La plataforma por dentro: the gallery of six product screens.

  Without JavaScript the six figures are all there: a stack from 1024px, a
  swipeable row below it. 40-gallery.js rebuilds the list from
  window.ACTUARIA_GALLERY, marks the gallery .is-activa and adds the controls:
    everywhere    the screen chooser, one tab list of six option buttons drawn
                  three ways:
                    from 1280px   a rail to the left of the frame; the chosen
                                  option is filled and holds the description
                    768 to 1279   a grid of buttons, three by two, above the
                                  frame; the description is the caption
                    below 768px   a row of chips that scrolls sideways
    from 1024px   one framed screen (the desktop recreation, never under 864px
                  wide: that is why the rail waits for 1280px), with "Anterior",
                  the counter and "Siguiente: <next title>" under it
    below 1024px  a scroll-snap carousel of the phone screens; the counter and
                  previous / next stay under the header while the gallery is
                  in view; from 640px the caption sits beside the phone
                  screen, which keeps its natural 360px
    everywhere    "Ampliar" opens the enlarged view (dialog#galeria-ampliada)
  Layout switches here by media query only; the script never sets a layout. It
  reserves one thing: the height of the rail's tallest state (min-height on the
  option list), so nothing moves when the choice changes.
*/

@layer sections {
  .s-plataforma {
    --s-plataforma-barra: 52px;
    /* The label over the options: its line and the space under it */
    --s-plataforma-elige: 20px;
    --s-plataforma-elige-aire: var(--sp-12);
  }

  /* Why the screens say "Aplicante": a margin note under the lead */
  .s-plataforma__puente {
    max-width: 40rem;
    margin-top: var(--sp-20);
    padding-left: var(--sp-12);
    border-left: 2px solid var(--hairline-strong);
    color: var(--text-2);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .s-plataforma__galeria {
    position: relative;
  }

  /* ------------------------------------------------------- Screen chooser */

  /* Six options that look like what they are: buttons. Below 768px they are
     chips in a row that scrolls sideways; the rules for the grid and the rail
     follow further down. */
  .s-plataforma__selector {
    margin-bottom: var(--sp-8);
  }

  .s-plataforma__elige {
    display: none;
    margin-bottom: var(--s-plataforma-elige-aire);
    color: var(--heading);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    line-height: var(--s-plataforma-elige);
    letter-spacing: var(--ls-ui);
  }

  .s-plataforma__opciones {
    /* The options measure their place in the row from here */
    position: relative;
    display: flex;
    gap: var(--sp-8);
    margin: 0 calc(-1 * var(--gutter));
    padding: var(--sp-6) var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .s-plataforma__opciones::-webkit-scrollbar {
    display: none;
  }

  .s-plataforma__opcion {
    position: relative;
    display: block;
    flex: none;
    min-width: 0;
    min-height: var(--tap);
    padding: var(--sp-8) var(--sp-16) var(--sp-8) var(--sp-8);
    border-radius: var(--r-full);
    background: var(--c-surface);
    box-shadow: inset 0 0 0 1px var(--hairline-strong);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  }

  .s-plataforma__opcion:focus-visible {
    outline-offset: 2px;
  }

  .s-plataforma__opcion-cabeza {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
  }

  .s-plataforma__opcion-marca {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--sp-8);
  }

  .s-plataforma__opcion-n {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-full);
    background: var(--fill-soft);
    color: var(--text-2);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  }

  .s-plataforma__opcion-marca > .c-icon {
    display: none;
    width: 20px;
    height: 20px;
    color: var(--text-3);
  }

  .s-plataforma__opcion-texto {
    display: grid;
    gap: var(--sp-2);
    min-width: 0;
  }

  /* The title is laid out twice in one cell, once at the weight of the chosen
     option (the copy in ::after is never shown): choosing an option cannot
     change how its title wraps, so the buttons keep their size. */
  .s-plataforma__opcion-titulo {
    display: grid;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-ui);
    white-space: nowrap;
  }

  .s-plataforma__opcion-titulo > span,
  .s-plataforma__opcion-titulo::after {
    grid-area: 1 / 1;
  }

  .s-plataforma__opcion-titulo::after {
    content: attr(data-texto);
    font-weight: var(--fw-semibold);
    visibility: hidden;
  }

  .s-plataforma__opcion-avance,
  .s-plataforma__opcion-descripcion {
    display: none;
  }

  /* The chosen chip is filled */
  .s-plataforma__opcion.is-elegida {
    background: var(--accent);
    box-shadow: none;
    color: var(--c-white);
    cursor: default;
  }

  .s-plataforma__opcion.is-elegida .s-plataforma__opcion-titulo {
    font-weight: var(--fw-semibold);
  }

  .s-plataforma__opcion.is-elegida .s-plataforma__opcion-n {
    background: var(--c-white);
    color: var(--accent);
  }

  @media (hover: hover) {
    .s-plataforma__opcion:not(.is-elegida):hover {
      background: var(--fill-hover);
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .s-plataforma__opcion:not(.is-elegida):hover .s-plataforma__opcion-marca > .c-icon {
      color: var(--accent);
    }
  }

  /* From 768px: buttons with their icon and a teaser line, three by two */
  @media (min-width: 768px) {
    .s-plataforma__selector {
      margin-bottom: var(--sp-16);
    }

    .s-plataforma__elige {
      display: block;
    }

    .s-plataforma__opciones {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 1fr;
      gap: var(--sp-8);
      margin: 0;
      padding: 0;
      overflow: visible;
    }

    .s-plataforma__opcion {
      padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16);
      border-radius: var(--r-control);
      box-shadow: inset 0 0 0 1px var(--hairline-strong), var(--e1);
    }

    /* Narrow buttons: number and icon on a line of their own */
    .s-plataforma__opcion-cabeza {
      flex-direction: column;
      align-items: flex-start;
    }

    .s-plataforma__opcion-marca > .c-icon {
      display: block;
    }

    .s-plataforma__opcion-titulo {
      white-space: normal;
    }

    .s-plataforma__opcion-avance {
      display: block;
      color: var(--text-2);
      font-size: var(--fs-micro);
      line-height: 1.35;
    }

    /* The chosen button: tinted, with an accent edge and bar */
    .s-plataforma__opcion.is-elegida {
      background: var(--c-primary-tint);
      box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 1px var(--accent);
      color: var(--heading);
    }

    .s-plataforma__opcion.is-elegida .s-plataforma__opcion-n {
      background: var(--accent);
      color: var(--c-white);
    }

    .s-plataforma__opcion.is-elegida .s-plataforma__opcion-marca > .c-icon {
      color: var(--accent);
    }

    .s-plataforma__opcion.is-elegida .s-plataforma__opcion-avance {
      color: var(--c-primary-tint-text);
    }

    @media (hover: hover) {
      .s-plataforma__opcion:not(.is-elegida):hover {
        box-shadow: inset 0 0 0 1px var(--accent), var(--e2);
      }
    }
  }

  /* From 1024px the buttons are wide enough for number, icon and text on one line */
  @media (min-width: 1024px) {
    .s-plataforma__opcion-cabeza {
      flex-direction: row;
      align-items: center;
      gap: var(--sp-12);
    }
  }

  /* --------------------------------------------- Counter, arrows and hint */

  .s-plataforma__nav {
    display: none;
  }

  .s-plataforma__estado {
    min-width: 0;
  }

  .s-plataforma__contador {
    color: var(--text);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-fig);
  }

  .s-plataforma__pista {
    display: none;
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
  }

  .s-plataforma__flechas {
    display: flex;
    flex: none;
    gap: var(--sp-8);
  }

  .s-plataforma__flecha {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--r-control);
    background: var(--c-surface);
    box-shadow: inset 0 0 0 1px var(--hairline-strong);
    color: var(--text);
    transition: transform var(--dur-fast) var(--ease-standard);
  }

  .s-plataforma__flecha:active {
    transform: scale(0.96);
  }

  .s-plataforma__flecha[aria-disabled="true"] {
    box-shadow: inset 0 0 0 1px var(--hairline);
    color: var(--c-text-disabled);
    cursor: default;
    transform: none;
  }

  @media (hover: hover) {
    .s-plataforma__flecha:not([aria-disabled="true"]):hover {
      background: var(--fill-hover);
    }
  }

  /* "Anterior", the counter and "Siguiente: <next title>" under the frame, from 1024px */
  .s-plataforma__pasos {
    display: none;
  }

  /* ------------------------------------------------- The six screens */

  .s-plataforma__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-64);
  }

  .s-plataforma__item {
    min-width: 0;
  }

  /* The frame: a product window. Hairline ring, soft shadow, and a status
     strip under the screen that carries the recreation label. */
  .s-plataforma__marco {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-ui);
    background: var(--c-surface);
    box-shadow: 0 0 0 1px var(--hairline-strong), var(--e3);
  }

  .s-plataforma__pantalla {
    background: var(--c-canvas);
  }

  .s-plataforma__img {
    width: 100%;
    height: auto;
    -webkit-user-select: none;
    user-select: none;
  }

  .s-plataforma__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8);
    min-height: var(--s-plataforma-barra);
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-12);
    border-top: 1px solid var(--hairline);
  }

  .s-plataforma__pie {
    margin-top: var(--sp-20);
  }

  .s-plataforma__descripcion {
    max-width: var(--measure);
    margin-top: var(--sp-8);
    color: var(--text-2);
  }

  /* "Ampliar" belongs to the window: it sits on the frame's status strip */
  .s-plataforma__ampliar {
    flex: none;
    margin-left: auto;
  }

  /* An entry may describe its phone image apart (descripcionMovil) */
  .s-plataforma__descripcion--movil {
    display: none;
  }

  .s-plataforma__nota {
    max-width: var(--measure);
    margin-top: var(--sp-24);
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
  }

  /* A screen changes with a short fade, nothing else */
  .s-plataforma__item.is-entrando > .s-plataforma__figura {
    animation: s-plataforma-entrar var(--dur-base) var(--ease-standard) both;
  }

  @keyframes s-plataforma-entrar {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* --------------------------------------------- Below 1024px: carousel */

  @media (max-width: 1023.98px) {
    .s-plataforma__nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-16);
      margin: 0 calc(-1 * var(--gutter)) var(--sp-4);
      padding: var(--sp-8) var(--gutter);
      background: var(--c-surface);
      box-shadow: 0 1px 0 var(--hairline);
    }

    /* Counter and arrows stay under the header while the gallery is on screen.
       Not on a phone held sideways: header, row and bottom bar would leave
       too little of the screen. */
    @media (min-height: 480px) {
      .s-plataforma__nav {
        position: sticky;
        top: var(--header-h);
        z-index: var(--z-raised);
      }
    }

    .s-plataforma__descripcion--escritorio {
      display: none;
    }

    .s-plataforma__descripcion--movil {
      display: block;
    }

    /* The strip's side padding closes up so badge and button share a line from 390px;
       below that the button takes the strip's second line, full width */
    .s-plataforma__barra {
      padding-right: var(--sp-8);
      padding-left: var(--sp-8);
    }

    .s-plataforma__ampliar {
      flex: 1 0 auto;
      /* Clear of the pinned row when focus scrolls to it */
      scroll-margin-top: calc(var(--tap) + var(--sp-32));
    }

    .s-plataforma__pantalla--encuadre {
      scroll-margin-top: calc(var(--tap) + var(--sp-32));
    }

    .s-plataforma__pista {
      display: block;
    }

    .s-plataforma__galeria > .s-plataforma__pista {
      margin-bottom: var(--sp-12);
    }

    /* With the chooser the hint sits right over the chips */
    .s-plataforma__selector > .s-plataforma__pista {
      margin-bottom: var(--sp-6);
    }

    /* The row runs to both screen edges and each screen keeps the full
       container width. The next one waits a few pixels outside, so neither
       its hairline nor its shadow shows at the edge. The top and bottom
       padding leave room for the frame's shadow inside the scroller. */
    .s-plataforma__lista {
      display: flex;
      gap: calc(var(--gutter) + var(--sp-8));
      margin: calc(-1 * var(--sp-4)) calc(-1 * var(--gutter)) calc(-1 * var(--sp-8));
      padding: var(--sp-4) 0 var(--sp-32) var(--gutter);
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--gutter);
      scrollbar-width: none;
    }

    .s-plataforma__lista::-webkit-scrollbar {
      display: none;
    }

    /* Closing space: a last item one gutter wide, pulled back over the gap
       before it. It needs a real size: Mobile Safari leaves an empty box out
       of the scroll width, and the last screen then stops a gutter short. */
    .s-plataforma__lista::after {
      content: "";
      flex: 0 0 var(--gutter);
      height: 1px;
      margin-left: calc(-1 * (var(--gutter) + var(--sp-8)));
    }

    .s-plataforma__item {
      flex: 0 0 calc(100% - var(--gutter));
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .s-plataforma__img--escritorio {
      display: none;
    }

    .s-plataforma__marco {
      border-radius: var(--r-20);
      box-shadow: 0 0 0 1px var(--hairline-strong), var(--e2);
    }

    .s-plataforma__barra:empty {
      display: none;
    }

    /* A capture without a phone version: the desktop screen inside a frame the
       visitor can pan, opened on the area the manifest points at. The script
       sizes the image and sets the first position. */
    .s-plataforma__pantalla--encuadre {
      aspect-ratio: 4 / 5;
      overflow: auto;
      scrollbar-width: none;
      cursor: grab;
    }

    .s-plataforma__pantalla--encuadre::-webkit-scrollbar {
      display: none;
    }

    .s-plataforma__pantalla--encuadre:focus-visible {
      outline-offset: -4px;
    }

    .s-plataforma__pantalla--encuadre > .s-plataforma__img {
      max-width: none;
    }

    /* Not painted while its screen is outside the row's visible part */
    .s-plataforma__item.is-fuera .s-plataforma__pantalla--encuadre > .s-plataforma__img {
      visibility: hidden;
    }

    .s-plataforma__nota {
      margin-top: 0;
    }
  }


  /* 640 to 1023px: the phone screen at its natural size, caption beside it */
  @media (min-width: 640px) and (max-width: 1023.98px) {
    .s-plataforma__figura {
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr);
      align-items: center;
      gap: clamp(24px, 5vw, 48px);
    }

    .s-plataforma__pie {
      margin-top: 0;
    }

    .s-plataforma__descripcion {
      margin-top: var(--sp-12);
    }
  }

  /* 768 to 1023px: the label over the grid says it; the swipe hint is for phones */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .s-plataforma__selector > .s-plataforma__pista {
      display: none;
    }
  }

  /* ------------------------------------ From 1024px: one frame at a time */

  @media (min-width: 1024px) {
    .s-plataforma__img--movil {
      display: none;
    }

    .s-plataforma__marco {
      box-shadow: 0 0 0 1px var(--hairline-strong), var(--e4);
    }

    /* Without the script the six screens are a stack, each caption above its frame.
       The frame never grows taller than the room under the header (864px keeps the
       smallest text of a 1000px artboard above 11px). */
    .s-plataforma__figura {
      display: flex;
      flex-direction: column;
    }

    .s-plataforma__pie {
      display: grid;
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      align-items: start;
      gap: var(--sp-8) var(--col-gap);
      order: -1;
      margin: 0 0 var(--sp-24);
    }

    /* Every caption keeps the room of the longest one (five lines; --s-plataforma-pie-lineas),
       so the page does not change height when the choice changes */
    .s-plataforma__descripcion {
      min-height: calc(var(--s-plataforma-pie-lineas, 5) * 1em * var(--lh-body));
      margin-top: 0;
    }

    .s-plataforma__marco {
      align-self: center;
      width: min(100%, max(864px, calc((100vh - var(--header-h) - var(--s-plataforma-barra) - 2 * var(--sp-24)) * var(--s-plataforma-ar, 1.5625))));
    }

    /* With the chooser the frame comes right under the options and its caption after it */
    .is-activa .s-plataforma__pie {
      order: 0;
      margin: var(--sp-24) 0 0;
    }

    .s-plataforma__pasos {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: var(--sp-16);
      margin-top: var(--sp-24);
    }

    .s-plataforma__paso {
      justify-self: start;
    }

    .s-plataforma__paso--siguiente {
      justify-self: end;
    }

    /* At either end the button stays where it is, dimmed, and keeps the focus it may
       hold (the shared rule would take it out of reach of the pointer) */
    .s-plataforma__paso[aria-disabled="true"] {
      pointer-events: auto;
      transform: none;
    }

    .s-plataforma__paso[aria-disabled="true"]::before,
    .s-plataforma__paso[aria-disabled="true"]::after {
      opacity: 0;
    }

    .s-plataforma__ampliar {
      --btn-bg: transparent;
      --btn-bg-hover: var(--btn-quiet-bg-hover);
      --btn-fg: var(--btn-quiet-fg);
      --btn-edge: none;
      scroll-margin-top: var(--sp-16);
    }

    .js .s-plataforma__pantalla {
      cursor: zoom-in;
    }
  }

  /* Just above 1024px the caption column is narrower than its measure: the longest takes six lines */
  @media (min-width: 1024px) and (max-width: 1039.98px) {
    .s-plataforma__descripcion {
      --s-plataforma-pie-lineas: 6;
    }
  }

  /* From 1280px: the options are a rail to the left of the frame. The chosen one
     holds the description of its screen; the other five stay closed. The frame
     takes the rest of the width (never under 864px) and hangs from the top of its
     column, so it stays put whatever the rail does. */
  @media (min-width: 1280px) {
    .s-plataforma__galeria.is-activa {
      display: grid;
      grid-template-columns: minmax(0, 296px) minmax(864px, 1fr);
      grid-template-rows: auto 1fr;
      align-items: start;
      column-gap: var(--sp-32);
    }

    .s-plataforma__selector {
      grid-column: 1;
      grid-row: 1 / span 2;
      margin-bottom: 0;
    }

    /* The frame lines up with the first option, not with the label over the rail */
    .s-plataforma__visor {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      margin-top: calc(var(--s-plataforma-elige) + var(--s-plataforma-elige-aire));
    }

    .is-activa > .s-plataforma__nota {
      grid-column: 2;
      grid-row: 2;
    }

    /* The script gives this list the height of its tallest state: the rows stay at the top */
    .s-plataforma__opciones {
      grid-template-columns: minmax(0, 1fr);
      grid-auto-rows: auto;
      align-content: start;
    }

    .s-plataforma__opcion.is-elegida .s-plataforma__opcion-avance {
      display: none;
    }

    .s-plataforma__opcion.is-elegida .s-plataforma__opcion-descripcion {
      display: block;
      margin-top: var(--sp-12);
      color: var(--text);
      font-size: 1rem;
      line-height: var(--lh-small);
      text-wrap: pretty;
    }

    .is-activa .s-plataforma__marco {
      align-self: auto;
      width: auto;
    }

    /* Title and description are read in the rail; the caption stays for screen readers */
    .is-activa .s-plataforma__pie {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .s-plataforma__pasos {
      margin-top: var(--sp-16);
    }
  }

  /* ------------------------------------------------------- Enlarged view */

  .s-plataforma__ampliada {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    overflow: hidden;
    background: var(--c-navy-deep);
  }

  .s-plataforma__ampliada[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    animation: c-fade-in var(--dur-fast) linear both;
  }

  .s-plataforma__ampliada::backdrop {
    background: var(--c-navy-deep);
  }

  .s-plataforma__ampliada.is-closing,
  .s-plataforma__ampliada.is-closing::backdrop {
    animation: c-fade-out var(--dur-fast) var(--ease-exit) both;
  }

  /* Title and "Cerrar" on one line, the recreation label under the title;
     from 600px the three share the line */
  .s-plataforma__ampliada-cabecera {
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2) var(--sp-12);
    padding: var(--sp-8) max(var(--sp-12), env(safe-area-inset-right, 0px)) var(--sp-8) max(var(--sp-16), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--hairline);
    /* Sticky and filled for iOS 26, like the controls row below: the strip behind the status bar
       takes its colour from this edge, not from the page header under the view */
    position: sticky;
    top: 0;
    background: var(--c-navy-deep);
  }

  .s-plataforma__ampliada-titulo {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
  }

  .s-plataforma__ampliada-insignia {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    margin-bottom: var(--sp-4);
  }

  .s-plataforma__ampliada-cerrar {
    grid-column: 2;
    grid-row: 1;
  }

  @media (min-width: 600px) {
    .s-plataforma__ampliada-cabecera {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .s-plataforma__ampliada-insignia {
      grid-column: 2;
      grid-row: 1;
      margin-bottom: 0;
    }

    .s-plataforma__ampliada-cerrar {
      grid-column: 3;
    }
  }

  /* The image is placed and scaled by the script; the stage only clips it */
  .s-plataforma__ampliada-escena {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .s-plataforma__ampliada-escena.is-movible {
    cursor: grab;
  }

  .s-plataforma__ampliada-escena.is-arrastrando {
    cursor: grabbing;
  }

  .s-plataforma__ampliada-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    border-radius: var(--r-6);
    background: var(--c-canvas);
    box-shadow: var(--e5);
    transform-origin: 0 0;
    -webkit-user-drag: none;
    animation: c-fade-in var(--dur-base) linear;
  }

  .s-plataforma__ampliada-img.is-animada {
    transition: transform var(--dur-base) var(--ease-standard);
  }

  /* "Mover": one button on each edge of the stage, over the image. The target
     is 44px; the disc drawn inside it is 36px so it hides less of the screen. */
  .s-plataforma__mover {
    grid-row: 2;
    grid-column: 1;
    z-index: var(--z-raised);
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    margin: var(--sp-4);
    border-radius: var(--r-full);
    color: var(--c-on-dark);
    transition: transform var(--dur-fast) var(--ease-standard);
  }

  .s-plataforma__mover::before {
    content: "";
    position: absolute;
    inset: var(--sp-4);
    z-index: var(--z-below);
    border-radius: inherit;
    background: color-mix(in srgb, var(--c-navy-deep) 80%, transparent);
    box-shadow: inset 0 0 0 1px var(--c-on-dark-hairline-strong);
  }

  .s-plataforma__mover[hidden] {
    display: none;
  }

  .s-plataforma__mover--arriba {
    align-self: start;
    justify-self: center;
  }

  .s-plataforma__mover--arriba > .c-icon {
    transform: rotate(180deg);
  }

  .s-plataforma__mover--abajo {
    align-self: end;
    justify-self: center;
  }

  .s-plataforma__mover--izquierda {
    align-self: center;
    justify-self: start;
  }

  .s-plataforma__mover--derecha {
    align-self: center;
    justify-self: end;
  }

  .s-plataforma__mover:active {
    transform: scale(0.96);
  }

  .s-plataforma__mover[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    transform: none;
  }

  .s-plataforma__ampliada-controles {
    grid-row: 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-8) var(--sp-16);
    padding: var(--sp-8) max(var(--sp-12), env(safe-area-inset-right, 0px)) max(var(--sp-8), env(safe-area-inset-bottom, 0px)) max(var(--sp-12), env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--hairline);
    /* iOS 26 takes the colour of the strip behind its toolbar from a sticky or fixed edge:
       without these three lines it keeps the white of the demo bar under this dark view */
    position: sticky;
    bottom: 0;
    background: var(--c-navy-deep);
  }

  .s-plataforma__ampliada-grupo {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .s-plataforma__ampliada-contador {
    min-width: 4.25em;
    color: var(--text);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-fig);
    text-align: center;
  }

  .s-plataforma__ampliada-pista {
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
    text-align: center;
  }

  .s-plataforma__ampliada-pista--tactil {
    display: none;
  }

  @media (max-height: 480px) and (orientation: landscape) {
    .s-plataforma__ampliada .s-plataforma__ampliada-pista {
      display: none;
    }
  }

  .s-plataforma__herramienta {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--r-control);
    color: var(--text);
    transition: transform var(--dur-fast) var(--ease-standard);
  }

  .s-plataforma__herramienta:active {
    transform: scale(0.96);
  }

  .s-plataforma__herramienta[aria-disabled="true"] {
    color: var(--c-on-dark-hairline-strong);
    cursor: default;
    transform: none;
  }

  @media (hover: hover) {
    .s-plataforma__herramienta:not([aria-disabled="true"]):hover {
      background: var(--fill-soft);
    }
  }

  /* Touch screens read the touch hint; the keyboard hint needs a keyboard */
  @media (hover: none), (pointer: coarse) {
    .s-plataforma__ampliada-pista--teclado {
      display: none;
    }

    .s-plataforma__ampliada-pista--tactil {
      display: block;
    }
  }

  /* Narrow screens: the hint takes its own line above the two groups, and the
     six controls close up so they fit 320px */
  @media (max-width: 767.98px) {
    .s-plataforma__ampliada-controles {
      grid-template-columns: auto auto;
      justify-content: space-between;
      padding-right: max(var(--sp-8), env(safe-area-inset-right, 0px));
      padding-left: max(var(--sp-8), env(safe-area-inset-left, 0px));
    }

    .s-plataforma__ampliada-pista {
      grid-column: 1 / -1;
      grid-row: 1;
      padding: var(--sp-4) var(--sp-8) 0;
    }

    .s-plataforma__ampliada-grupo {
      gap: 0;
    }

    .s-plataforma__ampliada-contador {
      min-width: 3.75em;
    }
  }

  /* Short stages (a phone on its side): the hint gives its line back to the image */
  @media (max-height: 480px) {
    .s-plataforma__ampliada-pista {
      display: none;
    }
  }
  /* 440 to 639px: the phone image is 720px wide at 2x, so it is never shown wider than 400px */
  @media (max-width: 639.98px) {
    .s-plataforma__marco {
      max-width: 400px;
    }
  }
}

/* 45-entregables.css */
/*
  Entregables: the four documents the underwriting area receives, laid out as
  paper sheets on the desk surface. One column on phones, two from 640px, four
  across from 1180px (slightly staggered, like papers put down one by one).
  The sheets share a frame (name, format, description, sample) but each sample
  has its own nature: a waveform, a timed transcript, answer rows, findings.
*/

@layer sections {
  .s-entregables__mesa {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-20);
  }

  /* ---------------------------------------------------------- One sheet */

  .s-entregables__hoja {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--sp-24);
  }

  /* 18px keeps the longest name on one line on a narrow sheet; wider sheets
     (phones from 360px, two across from 720px) take 20px */
  .s-entregables__nombre {
    font-size: var(--fs-h4);
    line-height: var(--lh-h3);
  }

  @media (min-width: 360px) and (max-width: 639.98px), (min-width: 720px) and (max-width: 1179.98px) {
    .s-entregables__nombre {
      font-size: 1.25rem;
    }
  }

  .s-entregables__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
  }

  .s-entregables__descripcion {
    margin-top: var(--sp-12);
    color: var(--text-2);
    font-size: 1rem;
    line-height: var(--lh-small);
  }

  /* The sample: ruled like the page of a report */
  .s-entregables__muestra {
    margin-top: var(--sp-20);
    padding-top: var(--sp-16);
    border-top: 1px solid var(--hairline-strong);
  }

  .s-entregables__rotulo {
    color: var(--text-3);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    letter-spacing: 0;
  }

  /* Label and value rows, tighter than the shared row so they fit a narrow sheet */
  .s-entregables__filas {
    margin-top: var(--sp-8);
  }

  .s-entregables__filas > .c-fila {
    gap: var(--sp-4) var(--sp-12);
    padding: 10px 0;
  }

  .s-entregables__filas > .c-fila:last-child,
  .s-entregables__turno:last-child,
  .s-entregables__hallazgo:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .s-entregables__filas > .c-fila > dt {
    font-size: var(--fs-caption);
  }

  .s-entregables__filas > .c-fila > dd {
    font-size: var(--fs-small);
    white-space: nowrap;
  }

  /* The completed questionnaire is the page this site is about: its rows run a
     little larger than the other samples */
  .s-entregables__filas--respuestas > .c-fila {
    padding: var(--sp-12) 0;
  }

  .s-entregables__filas--respuestas > .c-fila > dd {
    font-size: 1rem;
  }

  .s-entregables__calculo {
    min-height: 22px;
    margin-left: var(--sp-4);
    padding: 1px var(--sp-8);
    font-size: 0.75rem;
  }

  /* ----------------------------------------------- Recording: the voice */

  /* The one dark object on the desk: the call itself, before it becomes text */
  .s-entregables__audio {
    container-type: inline-size;
    margin-top: var(--sp-12);
    padding: var(--sp-12) var(--sp-16);
    border-radius: var(--r-10);
    background: var(--g-aurora), var(--aurora-base);
  }

  .s-entregables__onda {
    max-width: none;
  }

  .s-entregables__onda--larga {
    display: none;
  }

  @container (min-width: 380px) {
    .s-entregables__onda--larga {
      display: block;
    }

    .s-entregables__onda--corta {
      display: none;
    }
  }

  .s-entregables__audio + .s-entregables__filas {
    margin-top: var(--sp-4);
  }

  /* ------------------------------------------- Transcript: timed turns */

  .s-entregables__turnos {
    margin-top: var(--sp-8);
  }

  .s-entregables__turno {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-8);
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline);
  }

  .s-entregables__tiempo {
    color: var(--text-3);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-fig);
    /* A time stamp never breaks: Safari can leave this column at the width of the fallback face */
    white-space: nowrap;
  }

  .s-entregables__quien {
    color: var(--text-2);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
  }

  /* Spoken words keep the display face, at document size */
  .s-entregables__voz {
    grid-column: 1 / -1;
    font-size: var(--fs-small);
    line-height: 1.4;
  }

  /* The sample skips from the greeting to a question: a broken rule marks the cut */
  .s-entregables__turno:has(+ .s-entregables__turno--salto) {
    border-bottom: 1px dashed var(--hairline-strong);
  }

  /* -------------------------------------------- AI audit: the findings */

  .s-entregables__hallazgos {
    margin-top: var(--sp-8);
  }

  .s-entregables__hallazgo {
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline);
  }

  .s-entregables__hallazgo > dt {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    color: var(--text-2);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
  }

  .s-entregables__hallazgo > dd {
    margin-top: var(--sp-2);
    color: var(--text);
    font-size: var(--fs-small);
    line-height: 1.45;
  }

  .s-entregables__hallazgo--resumen > dd {
    font-weight: var(--fw-semibold);
  }

  .s-entregables__hallazgo--inconsistencia > dt::before,
  .s-entregables__hallazgo--omision > dt::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-warning);
  }

  .s-entregables__hallazgo--omision > dt::before {
    background: var(--tone-info-solid);
  }

  .s-entregables__hallazgo--origen > dd {
    color: var(--text-3);
    font-size: var(--fs-caption);
  }

  /* ------------------------------------------------- Closing statement */

  .s-entregables__cierre {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-24);
    margin-top: var(--close-y);
  }

  .s-entregables__cierre-texto {
    max-width: 38rem;
    color: var(--text);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  /* ---------------------------------------------------------- Two across */

  /* From two across, every second sheet sits a little lower: papers put down
     one by one, not a grid of tiles. No rotation, so the text stays sharp. */
  @media (min-width: 640px) {
    .s-entregables__mesa {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-24);
      padding-bottom: var(--sp-32);
    }

    .s-entregables__hoja:nth-child(even) {
      transform: translateY(var(--sp-32));
    }
  }

  /* Name, description and sample start on the same lines across a row */
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 640px) {
      .s-entregables__hoja {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 0;
      }
    }
  }

  @media (min-width: 900px) {
    .s-entregables__cierre {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-48);
    }
  }

  /* --------------------------------------------------------- Four across */

  @media (min-width: 1180px) {
    .s-entregables__mesa {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--sp-16);
    }

    .s-entregables__hoja {
      padding: var(--sp-24) var(--sp-16);
    }
  }

  @media (min-width: 1320px) {
    .s-entregables__mesa {
      gap: var(--sp-20);
    }

    .s-entregables__hoja {
      padding: var(--sp-24) var(--sp-20);
    }
  }
}

/* 50-situaciones.css */
/*
  Cuando la llamada se complica.
  Sin JavaScript: seis bloques en secuencia (título, llamada de ejemplo, registro).
  Con JavaScript (.is-mejorado, puesto por js/50-situaciones.js):
    desde 1024px   selector vertical (tablist) a la izquierda y un panel a la derecha;
                   los seis paneles comparten una celda, así el alto no cambia al elegir
    bajo 1024px    acordeón con una situación abierta a la vez
  La llamada y el registro se ponen lado a lado cuando el panel mide 720px o más
  (consulta de contenedor), no según el ancho de la ventana.
*/

@layer sections {
  .s-situaciones {
    --sit-pad: clamp(var(--sp-16), 4vw, var(--sp-32));
    --sit-paso: calc(var(--dur-instant) / 2);
  }

  /* ------------------------------------------------------- Bloque base */

  .s-situaciones__item + .s-situaciones__item {
    margin-top: clamp(var(--sp-32), 6vw, var(--sp-64));
  }

  .s-situaciones__titulo {
    margin-bottom: var(--sp-16);
  }

  /* La flecha solo existe dentro del botón del acordeón */
  .s-situaciones__titulo .c-icon {
    display: none;
  }

  .s-situaciones__panel {
    container-type: inline-size;
    border-radius: var(--r-ui);
  }

  /* Como panel de pestaña recibe el foco: el anillo va por el margen del escenario */
  .s-situaciones__panel:focus-visible {
    outline-offset: var(--sp-12);
  }

  .s-situaciones__escena {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-24);
    padding: var(--sit-pad);
    border-radius: var(--r-stage);
    background: var(--fill-soft);
  }

  .s-situaciones__llamada,
  .s-situaciones__registro {
    min-width: 0;
  }

  .s-situaciones__rotulo {
    display: block;
    margin-bottom: var(--sp-12);
    color: var(--text-3);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    letter-spacing: 0;
  }

  /* ---------------------------------------------------------- La llamada */

  /* Palabras dichas: la cara de titulares en 600, dentro de la burbuja */
  .s-situaciones__turnos .c-voz {
    display: block;
    color: inherit;
    font-size: var(--fs-body);
    line-height: var(--lh-h4);
  }

  .s-situaciones__turnos .c-burbuja {
    max-width: min(30rem, 90%);
  }

  /*
    Con JavaScript cada burbuja se ajusta a su línea más larga (js/50-situaciones.js).
    Con líneas parejas el ajuste es estable: al angostar la caja el corte no cambia.
  */
  .is-mejorado .s-situaciones__turnos .c-voz {
    text-wrap: balance;
  }

  /* Evento entre turnos: una nota centrada, no una burbuja */
  .s-situaciones__evento {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    margin: var(--sp-20) 0;
    color: var(--text-2);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    text-align: center;
  }

  .s-situaciones__evento::before,
  .s-situaciones__evento::after {
    content: "";
    flex: 1 1 var(--sp-16);
    min-width: var(--sp-16);
    height: 1px;
    background: var(--hairline-strong);
  }

  .s-situaciones__evento > span {
    flex: 0 1 auto;
    text-wrap: balance;
  }

  .s-situaciones__evento .c-icon {
    width: 16px;
    height: 16px;
    margin: -2px var(--sp-6) 0 0;
    color: var(--text-3);
  }

  /* ---------------------------------------------------------- El registro */

  .s-situaciones__registro {
    padding-top: var(--sp-24);
    border-top: 1px solid var(--hairline-strong);
  }

  .s-situaciones__registro > .s-situaciones__rotulo {
    color: var(--text);
    font-size: var(--fs-small);
  }

  .s-situaciones__hoja {
    padding: var(--sp-16) var(--sp-20);
  }

  .s-situaciones__origen {
    color: var(--text-3);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    letter-spacing: 0;
  }

  .s-situaciones__filas {
    margin-top: var(--sp-12);
    border-top: 1px solid var(--hairline);
  }

  /* Un valor largo baja a su propia línea, alineado a la derecha */
  .s-situaciones__filas .c-fila {
    flex-wrap: wrap;
  }

  .s-situaciones__filas .c-fila > dd {
    margin-left: auto;
  }

  .s-situaciones__filas .c-fila:last-child {
    padding-bottom: var(--sp-4);
    border-bottom: 0;
  }

  .s-situaciones__estado {
    margin-top: var(--sp-12);
    padding-bottom: var(--sp-4);
    line-height: var(--lh-ui);
  }

  /* "Reconectando llamada": el tono en vivo de la plataforma, con icono fijo y sin pulso */
  .s-situaciones__chip-reconexion {
    --chip-fg: var(--tone-live-fg);
    --chip-bg: var(--tone-live-bg);
    --chip-bd: var(--tone-live-bd);
    --chip-solid: var(--tone-live-solid);
  }

  .s-situaciones__explicacion {
    margin-top: var(--sp-16);
    color: var(--text-2);
  }

  /* Panel mediano: la hoja y su explicación comparten el renglón */
  @container (min-width: 480px) and (max-width: 719.98px) {
    .s-situaciones__registro {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 0 var(--sp-32);
      align-items: start;
    }

    .s-situaciones__registro > .s-situaciones__rotulo {
      grid-column: 1 / -1;
    }

    .s-situaciones__explicacion {
      margin-top: 0;
    }
  }

  @container (min-width: 720px) {
    .s-situaciones__escena {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      gap: clamp(var(--sp-32), 5cqw, var(--sp-48));
      align-items: start;
    }

    .s-situaciones__registro {
      padding-top: 0;
      border-top: 0;
    }
  }

  /* -------------------------------------------------------------- Cierre */

  .s-situaciones__cierre {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-24);
    margin-top: var(--close-y);
  }

  .s-situaciones__cierre-texto {
    max-width: 38rem;
    color: var(--text);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  @media (min-width: 640px) {
    .s-situaciones__cierre {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-32);
    }
  }

  /* ------------------------------------------------ Con JavaScript: común */

  .s-situaciones__selector {
    display: none;
  }

  .is-mejorado .s-situaciones__item + .s-situaciones__item {
    margin-top: 0;
  }

  .is-mejorado .s-situaciones__titulo {
    margin-bottom: 0;
  }

  .s-situaciones__boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    width: 100%;
    min-height: 60px;
    padding: var(--sp-16) 0;
    border-radius: var(--r-6);
    color: var(--heading);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    word-spacing: var(--ws-display);
    text-align: left;
  }

  .s-situaciones__boton .c-icon {
    display: block;
    color: var(--text-3);
    transition: transform var(--dur-base) var(--ease-standard);
  }

  .s-situaciones__boton[aria-expanded="true"] .c-icon {
    transform: rotate(180deg);
  }

  @media (hover: hover) {
    .s-situaciones__boton:hover .c-icon {
      color: var(--text);
    }
  }

  /* --------------------------------------------- Bajo 1024px: el acordeón */

  @media (max-width: 1023.98px) {
    .is-mejorado .s-situaciones__item {
      border-bottom: 1px solid var(--hairline);
    }

    .is-mejorado .s-situaciones__item:first-child {
      border-top: 1px solid var(--hairline);
    }

    .is-mejorado .s-situaciones__item:not(.is-activa) > .s-situaciones__panel {
      display: none;
    }

    .is-mejorado .s-situaciones__panel {
      padding-bottom: var(--sp-24);
    }

    .is-mejorado .s-situaciones__escena {
      border-radius: var(--r-ui);
    }
  }

  /* --------------------------------------- Desde 1024px: selector y panel */

  @media (min-width: 1024px) {
    .s-situaciones__marco.is-mejorado {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: clamp(var(--sp-24), 3vw, var(--sp-48));
      align-items: start;
    }

    .is-mejorado .s-situaciones__selector {
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--hairline-strong);
    }

    .s-situaciones__tab {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 56px;
      padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-24);
      border-radius: 0 var(--r-control) var(--r-control) 0;
      color: var(--text-3);
      font-family: var(--font-display);
      font-size: var(--fs-h4);
      font-weight: var(--fw-bold);
      line-height: var(--lh-h4);
      letter-spacing: var(--ls-h4);
      word-spacing: var(--ws-display);
      text-align: left;
      white-space: nowrap;
    }

    /* La marca de la situación elegida, sobre el riel */
    .s-situaciones__tab::before {
      content: "";
      position: absolute;
      top: var(--sp-8);
      bottom: var(--sp-8);
      left: -2px;
      width: 3px;
      border-radius: var(--r-full);
      background: var(--g-wave-bar);
      opacity: 0;
      transition: opacity var(--dur-fast) var(--ease-standard);
    }

    .s-situaciones__tab[aria-selected="true"] {
      color: var(--heading);
    }

    .s-situaciones__tab[aria-selected="true"]::before {
      opacity: 1;
    }

    .is-mejorado .s-situaciones__titulo {
      display: none;
    }

    /* Los seis paneles en la misma celda: el escenario mide lo que el más alto */
    .is-mejorado .s-situaciones__lista {
      display: grid;
      padding: clamp(var(--sp-24), 3vw, var(--sp-32));
      border-radius: var(--r-stage);
      background: var(--fill-soft);
    }

    .is-mejorado .s-situaciones__item {
      grid-area: 1 / 1;
      min-width: 0;
    }

    .is-mejorado .s-situaciones__item:not(.is-activa) {
      visibility: hidden;
      opacity: 0;
    }

    .is-mejorado .s-situaciones__escena {
      padding: 0;
      border-radius: 0;
      background: none;
    }
  }

  @media (min-width: 1024px) and (hover: hover) {
    .s-situaciones__tab:hover {
      color: var(--heading);
    }
  }

  /* ------------------------------------------------------------ Movimiento */

  /*
    Solo después de una acción de la persona (.is-animado). El panel que sale se
    desvanece; las burbujas del que entra suben de a una y el registro llega al
    final. Todo termina antes de 450ms.
  */
  @media (prefers-reduced-motion: no-preference) {
    .is-animado .is-activa .s-situaciones__turnos > *,
    .is-animado .is-activa .s-situaciones__registro {
      animation: c-rise-in var(--dur-fast) var(--ease-enter) both;
      animation-delay: var(--dur-instant);
    }

    .is-animado .is-activa .s-situaciones__turnos > :nth-child(2) {
      animation-delay: calc(var(--dur-instant) + var(--sit-paso));
    }

    .is-animado .is-activa .s-situaciones__turnos > :nth-child(3) {
      animation-delay: calc(var(--dur-instant) + var(--sit-paso) * 2);
    }

    .is-animado .is-activa .s-situaciones__turnos > :nth-child(4) {
      animation-delay: calc(var(--dur-instant) + var(--sit-paso) * 3);
    }

    .is-animado .is-activa .s-situaciones__turnos > :nth-child(n + 5) {
      animation-delay: calc(var(--dur-instant) + var(--sit-paso) * 4);
    }

    .is-animado .is-activa .s-situaciones__registro {
      animation-duration: var(--dur-base);
      animation-delay: calc(var(--dur-instant) + var(--sit-paso) * 2);
    }
  }

  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .is-animado .s-situaciones__item:not(.is-activa) {
      transition:
        opacity var(--dur-instant) linear,
        visibility 0s linear var(--dur-instant);
    }
  }
}

/* 60-segmentos.css */
/*
  Segmentos. Dos listas con filetes, sin tarjetas ni iconos:
    "Qué lo hace posible"     cuatro condiciones en columnas, cada una bajo su filete
    "Dónde se nota primero"   los cuatro segmentos con el nombre en la cara de
                              titulares y su línea al lado en pantallas anchas
  Sobre el lienzo gris los filetes usan el tono fuerte para que se vean.
*/

@layer sections {
  .s-segmentos__bloque + .s-segmentos__bloque {
    margin-top: var(--block-y);
  }

  .s-segmentos__subtitulo {
    margin-bottom: var(--sp-20);
  }

  /* ------------------------------------------------- Qué lo hace posible */

  .s-segmentos__condiciones {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--sp-32);
    border-bottom: 1px solid var(--hairline-strong);
  }

  .s-segmentos__condiciones > div {
    padding: var(--sp-20) 0;
    border-top: 1px solid var(--hairline-strong);
  }

  .s-segmentos__condiciones dt {
    color: var(--text);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
  }

  .s-segmentos__condiciones dd {
    max-width: 34rem;
    margin-top: var(--sp-6);
    color: var(--text-2);
  }

  @media (min-width: 640px) {
    .s-segmentos__condiciones {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-bottom: 0;
    }

    .s-segmentos__condiciones > div {
      padding-bottom: var(--sp-32);
    }
  }

  /* Cuatro columnas solo cuando cada título cabe en una línea */
  @media (min-width: 1180px) {
    .s-segmentos__condiciones {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .s-segmentos__condiciones > div {
      padding-bottom: 0;
    }
  }

  /* ----------------------------------------------- Dónde se nota primero */

  .s-segmentos__lista {
    border-top: 1px solid var(--hairline-strong);
  }

  .s-segmentos__segmento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8) var(--col-gap);
    padding: clamp(var(--sp-20), 3.2vw, var(--sp-32)) 0;
    border-bottom: 1px solid var(--hairline-strong);
  }

  .s-segmentos__segmento > dt {
    color: var(--heading);
    font-family: var(--font-display);
    font-size: calc(var(--fs-h2) * 0.9);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    word-spacing: var(--ws-display);
    text-wrap: balance;
  }

  .s-segmentos__segmento > dd {
    max-width: 30rem;
    color: var(--text-2);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  @media (min-width: 1024px) {
    .s-segmentos__segmento {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      align-items: baseline;
    }
  }
}

/* 65-seguridad.css */
/*
  Datos de salud: qué hacemos y qué no.
  Una sola hoja con filetes: la lista de definiciones (.c-def) y, debajo, "Lo que
  Actuaria no hace" en las mismas dos columnas (título a la izquierda, frases a
  la derecha), para que todo se lea como un documento.
*/

@layer sections {
  .s-seguridad__lista dd,
  .s-seguridad__no p {
    max-width: var(--measure);
  }

  .s-seguridad__limites {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-16) var(--col-gap);
    margin-top: var(--block-y);
  }

  .s-seguridad__no {
    border-top: 1px solid var(--hairline-strong);
  }

  .s-seguridad__no > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-12);
    padding: var(--sp-20) 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-2);
  }

  .s-seguridad__no .c-icon {
    width: 20px;
    height: 20px;
    margin-top: var(--sp-2);
    color: var(--c-slate);
  }

  .s-seguridad__no strong {
    color: var(--text);
  }

  .s-seguridad__privacidad {
    margin-top: var(--sp-12);
  }

  /* Enlace suelto: subrayado como los del texto, con un área táctil de 44px */
  .s-seguridad__enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--link);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  @media (hover: hover) {
    .s-seguridad__enlace:hover {
      color: var(--link-hover);
      text-decoration-thickness: 2px;
    }
  }

  /*
    Desde 640px: las mismas columnas que .c-def. Un filete abre el bloque a todo
    el ancho y el título se alinea con la primera frase.
  */
  @media (min-width: 640px) {
    .s-seguridad__limites {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      border-top: 1px solid var(--hairline-strong);
    }

    .s-seguridad__subtitulo {
      padding-top: var(--sp-16);
    }

    .s-seguridad__no {
      border-top: 0;
    }
  }
}

/* 70-preguntas.css */
/*
  Preguntas frecuentes. Nueve <details class="c-acordeon"> dentro de una lista.
  Desde 1024px el título queda a la izquierda y acompaña la lectura (sticky);
  las preguntas ocupan la columna ancha.
*/

@layer sections {
  .s-preguntas__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--sp-24), 4vw, var(--sp-40));
  }

  /* Cada <details> vive en su <li>: un solo filete entre preguntas, visible sobre el lienzo */
  .s-preguntas__lista .c-acordeon {
    border-color: var(--hairline-strong);
  }

  .s-preguntas__lista > li + li > .c-acordeon {
    border-top: 0;
  }

  .s-preguntas__lista .c-acordeon > summary {
    min-height: 64px;
    line-height: var(--lh-h4);
    text-wrap: balance;
  }

  .s-preguntas__lista .c-acordeon__cuerpo {
    padding-bottom: var(--sp-24);
  }

  @media (min-width: 640px) {
    .s-preguntas__lista .c-acordeon > summary {
      padding-block: var(--sp-20);
      font-size: var(--fs-h4);
      letter-spacing: var(--ls-h4);
    }

    .s-preguntas__lista .c-acordeon__cuerpo {
      padding-bottom: var(--sp-32);
    }
  }

  @media (min-width: 1024px) {
    .s-preguntas__rejilla {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: var(--col-gap);
      align-items: start;
    }

    .s-preguntas__cabecera {
      position: sticky;
      top: calc(var(--header-h) + var(--sp-32));
    }
  }
}

/* 75-demo.css */
/*
  Piloto y cierre, sobre la aurora. Dos momentos separados por un filete:
    el piloto     título y texto a la izquierda, los cuatro puntos en una lista
                  con filetes a la derecha
    la demo       qué verás, la promesa y el único botón; la onda estática repite
                  el motivo de la portada
  El primer .l-container queda en position: static (de él cuelga un brillo de la aurora).
*/

@layer sections {
  /* ------------------------------------------------------------ El piloto */

  .s-demo__piloto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--sp-32), 5vw, var(--sp-64)) var(--col-gap);
  }

  .s-demo__cabecera > p {
    margin-top: var(--sp-16);
  }

  .s-demo__puntos {
    border-top: 1px solid var(--hairline-strong);
  }

  .s-demo__puntos > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4) var(--sp-32);
    padding: var(--sp-20) 0;
    border-bottom: 1px solid var(--hairline);
  }

  .s-demo__puntos dt {
    color: var(--text);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
  }

  .s-demo__puntos dd {
    color: var(--text-2);
  }

  .s-demo__integracion {
    margin-top: var(--sp-20);
    color: var(--text-2);
  }

  @media (min-width: 640px) {
    .s-demo__puntos > div {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: baseline;
    }
  }

  @media (min-width: 1024px) {
    .s-demo__piloto {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
  }

  /* -------------------------------------------------------------- La demo */

  .s-demo__cierre {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-32);
    align-items: center;
    margin-top: var(--block-y);
    padding-top: clamp(var(--sp-40), 7vw, var(--sp-80));
    border-top: 1px solid var(--hairline);
  }

  .s-demo__subtitulo {
    font-size: calc(var(--fs-h2) * 0.82);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  .s-demo__promesa {
    max-width: 36rem;
    margin-top: var(--sp-16);
    color: var(--text-2);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  .s-demo__accion {
    margin-top: var(--sp-32);
  }

  /* El último botón de la página, un punto más grande */
  .s-demo__accion > .c-btn {
    --btn-h: 56px;
    --btn-px: var(--sp-32);
  }

  .s-demo__onda {
    order: -1;
  }

  /* The aurora fades into its base colour before the footer, which has the same
     colour: no glow is cut at the seam. Covers only the section's bottom padding. */
  .s-demo > .l-container::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--section-y);
    background: linear-gradient(to bottom, rgba(4, 24, 50, 0), var(--aurora-base));
    pointer-events: none;
  }

  @media (min-width: 1024px) {
    .s-demo__cierre {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: var(--col-gap);
    }

    .s-demo__onda {
      order: 0;
      justify-self: end;
    }
  }
}

/* 80-explainer.css */
/*
  Explainer: the stage, its static poster, the player bar, the reduced-motion
  stepper, the text version, the enlarged view and the film itself.

  Sizing. Everything on the stage is measured in --u, one hundredth of the
  stage's own width (container query units; the engine pins the same value in
  px on the film). Landscape 16:9 when the slot is at least 600px wide,
  portrait 4:5 below: one container query drives the poster, the stage box and
  (through --x-layout, which the engine reads) the film.
  Minimum text: 2.1u in landscape (12.6px at 600px), 4.4u in portrait (12.3px at 280px).

  Motion. Before Play only the two [data-ambient] rings move. Inside .x-film
  nothing is animated by CSS: the engine sets transform and opacity from the
  film's time.
*/

@layer explainer {
  /* ------------------------------------------------------------ the box */

  .x-player {
    --x-cap: max(280px, calc(min(100vh - var(--header-h) - 110px, 720px) * 0.8));
    --x-radius: var(--r-stage);
    --x-pad: 16px;
    container: x-player / inline-size;
    width: 100%;
    min-width: 0;
  }

  @supports (height: 1svh) {
    .x-player {
      --x-cap: max(280px, calc(min(100svh - var(--header-h) - 110px, 720px) * 0.8));
    }
  }

  .x-player__home,
  .x-texto,
  .x-nojs,
  .x-error {
    width: min(100%, var(--x-cap));
    margin-inline: auto;
  }

  .x-stage {
    --x-layout: p;
    position: relative;
    container: x-stage / inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--x-radius);
    background: var(--g-aurora), var(--aurora-base);
    color: var(--c-on-dark);
  }

  /* The proportion lives on a sizer, not on the box: the stage is 4:5 (or 16:9) unless the
     poster's text needs more height (text-spacing overrides, WCAG 1.4.12) */
  .x-stage::before {
    content: "";
    grid-area: 1 / 1;
    aspect-ratio: 4 / 5;
    pointer-events: none;
  }

  /* Depth: the stage floats over a soft ground shadow. It is a gradient, not a
     blurred box-shadow, so it is drawn the same way on every repaint. */
  .x-escena {
    position: relative;
    isolation: isolate;
  }

  .x-escena::before {
    content: "";
    position: absolute;
    right: 5%;
    bottom: -30px;
    left: 5%;
    z-index: -1;
    height: 64px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--c-navy-deep) 88%, transparent), transparent);
    pointer-events: none;
  }

  /* Hairline edge, drawn over the film */
  .x-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    border-radius: inherit;
    box-shadow:
      inset 0 0 0 1px var(--c-on-dark-hairline-strong),
      inset 0 1px 0 0 color-mix(in srgb, var(--c-white) 30%, transparent);
    pointer-events: none;
  }

  .x-stage > * {
    --u: 1cqw;
  }

  @supports not (width: 1cqw) {
    .x-stage > * {
      --u: calc((100vw - 40px) / 100);
    }

    @media (min-width: 640px) {
      .x-stage > * {
        --u: 0.9vw;
      }
    }

    @media (min-width: 1180px) {
      .x-stage > * {
        --u: calc(min(1200px, 100vw - 80px) * 0.0056);
      }
    }
  }

  .x-nw {
    white-space: nowrap;
  }

  /* ------------------------------------------------------------- poster */

  .x-poster {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: calc(var(--u) * 4.5);
    padding: calc(var(--u) * 6);
    background-image: radial-gradient(circle at center, var(--aurora-dot) 0.9px, transparent 1.5px);
    background-size: var(--aurora-grid) var(--aurora-grid);
  }

  .x-poster[hidden] {
    display: none;
  }

  /* With JavaScript the whole poster is a press on Play */
  .js .x-poster {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .js .x-poster:hover .x-play__disco {
      transform: scale(1.05);
    }
  }

  .x-poster__cabeza {
    --x-play: max(64px, calc(var(--u) * 20));
    position: relative;
    display: grid;
    grid-template-columns: var(--x-play) minmax(0, 1fr);
    column-gap: calc(var(--u) * 3.6);
    min-height: var(--x-play);
  }

  .x-play {
    position: relative;
    z-index: 1;
    display: flex;
    grid-area: 1 / 1 / 2 / 3;
    gap: calc(var(--u) * 3.6);
    align-items: flex-start;
    justify-self: start;
    border-radius: var(--r-full) var(--r-10) var(--r-10) var(--r-full);
    color: var(--c-on-dark);
  }

  .x-play__disco {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: var(--x-play);
    height: var(--x-play);
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: var(--glow-cyan);
    color: var(--c-navy-deep);
    transition: transform var(--dur-fast) var(--ease-standard);
  }

  .x-play__icono {
    width: 52%;
    height: 52%;
  }

  .x-play__texto {
    padding-top: calc(var(--u) * 0.6);
    color: var(--c-cyan);
    font-size: calc(var(--u) * 4.6);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    letter-spacing: var(--ls-ui);
    white-space: nowrap;
  }

  @media (hover: hover) {
    .x-play:hover .x-play__disco {
      transform: scale(1.05);
    }
  }

  .x-play:active .x-play__disco {
    transform: scale(0.97);
  }

  .x-play:focus-visible {
    outline: 2px solid var(--c-focus-on-dark);
    outline-offset: 4px;
  }

  /* The only thing that moves before Play: two rings leaving the button */
  .x-play__onda {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--c-cyan);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: x-onda var(--dur-ambient-slow) var(--ease-out) 2;
  }

  .x-play__onda--2 {
    animation-delay: calc(var(--dur-ambient-slow) / -2);
  }

  @keyframes x-onda {
    from { opacity: 0.6; transform: scale(1); }
    to { opacity: 0; transform: scale(1.5); }
  }

  .x-player.is-fuera .x-play__onda {
    animation: none;
  }

  .x-player.is-loading .x-play__onda {
    animation-play-state: paused;
  }

  /* Loading: the triangle gives way to a turning arc */
  .x-play__carga {
    position: absolute;
    inset: 22%;
    display: none;
    border: 3px solid color-mix(in srgb, var(--c-navy-deep) 16%, transparent);
    border-top-color: var(--c-primary);
    border-radius: 50%;
  }

  .x-player.is-loading .x-play__icono {
    display: none;
  }

  .x-player.is-loading .x-play__carga {
    display: block;
    animation: x-gira 800ms linear infinite;
  }

  @keyframes x-gira {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .x-play__onda,
    .x-player.is-loading .x-play__carga {
      animation: none;
    }

    .x-play__disco {
      transition: none;
    }
  }

  .x-poster__ficha {
    grid-area: 1 / 2 / 2 / 3;
    align-self: start;
    min-width: 0;
    padding-top: calc(var(--u) * 7.4);
  }

  .x-poster__titulo {
    color: var(--c-on-dark);
    font-family: var(--font-display);
    font-size: calc(var(--u) * 4.7);
    font-weight: var(--fw-extrabold);
    line-height: 1.15;
    letter-spacing: var(--ls-h3);
    word-spacing: var(--ws-display);
  }

  .x-poster__meta {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 1) calc(var(--u) * 2);
    align-items: center;
    margin-top: calc(var(--u) * 1.2);
    color: var(--c-on-dark-2);
    font-size: calc(var(--u) * 4.4);
    line-height: 1.25;
  }

  .x-poster__duracion {
    padding: calc(var(--u) * 0.3) calc(var(--u) * 1.6);
    border: 1px solid var(--c-on-dark-hairline-strong);
    border-radius: var(--r-full);
    background: var(--c-on-dark-fill);
    color: var(--c-on-dark);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }

  .x-poster__voz {
    align-self: end;
    min-width: 0;
  }

  .x-poster__cita {
    color: var(--c-on-dark);
    font-size: calc(var(--u) * 4.9);
    line-height: 1.3;
    text-wrap: balance;
  }

  .x-poster__quien {
    margin-bottom: calc(var(--u) * 1);
    color: var(--c-on-dark-2);
    font-size: calc(var(--u) * 4.4);
  }

  /* .c-onda keeps its own proportions (512:64), so the width sets the height */
  .x-poster__onda {
    max-width: none;
    margin-top: calc(var(--u) * 2);
  }

  .x-poster__hoja {
    padding: calc(var(--u) * 3.2) calc(var(--u) * 4) calc(var(--u) * 1.2);
    border-radius: calc(var(--u) * 1.6);
    background: var(--g-band) top / 100% calc(var(--u) * 0.9) no-repeat, var(--c-surface);
    box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * -2) color-mix(in srgb, var(--c-navy-deep) 80%, transparent);
  }

  .x-poster__doc {
    padding-bottom: calc(var(--u) * 1.6);
    color: var(--heading);
    font-family: var(--font-display);
    font-size: calc(var(--u) * 4.7);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: var(--ls-h4);
  }

  .x-poster__fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--u) * 3);
    padding: calc(var(--u) * 1.7) 0;
    border-top: 1px solid var(--hairline);
  }

  .x-poster__fila > dt {
    color: var(--text-2);
    font-size: calc(var(--u) * 4.4);
    font-weight: var(--fw-medium);
    line-height: 1.3;
  }

  .x-poster__fila > dd {
    color: var(--text);
    font-size: calc(var(--u) * 5);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    letter-spacing: var(--ls-fig);
  }

  /* ----------------------------------------------------- landscape box */

  @container x-player (min-width: 600px) {
    .x-player__home,
    .x-texto,
    .x-nojs,
    .x-error {
      width: 100%;
    }

    .x-stage {
      --x-layout: l;
      border-radius: var(--r-hero);
    }

    .x-stage::before {
      aspect-ratio: 16 / 9;
    }

    .x-poster {
      grid-template-columns: minmax(0, 1fr) calc(var(--u) * 31);
      grid-template-rows: auto minmax(0, 1fr);
      column-gap: calc(var(--u) * 5);
      row-gap: calc(var(--u) * 3);
      padding: calc(var(--u) * 5.5) calc(var(--u) * 6);
    }

    .x-poster__cabeza {
      --x-play: max(64px, calc(var(--u) * 11));
      column-gap: calc(var(--u) * 2.6);
    }

    .x-play {
      gap: calc(var(--u) * 2.6);
    }

    .x-play__texto {
      padding-top: calc(var(--u) * 0.5);
      font-size: calc(var(--u) * 2.5);
    }

    .x-poster__ficha {
      padding-top: calc(var(--u) * 4.1);
    }

    .x-poster__titulo {
      font-size: calc(var(--u) * 3.1);
    }

    .x-poster__meta {
      gap: calc(var(--u) * 0.6) calc(var(--u) * 1.4);
      margin-top: calc(var(--u) * 0.7);
      font-size: calc(var(--u) * 2.15);
    }

    .x-poster__duracion {
      padding: calc(var(--u) * 0.2) calc(var(--u) * 1.1);
    }

    .x-poster__cita {
      font-size: calc(var(--u) * 3.1);
    }

    .x-poster__quien {
      margin-bottom: calc(var(--u) * 0.7);
      font-size: calc(var(--u) * 2.15);
    }

    /* The voice runs on under the paper: that is where it ends up */
    .x-poster__onda {
      width: calc(100% + var(--u) * 14);
      margin-top: calc(var(--u) * 1.4);
    }

    .x-poster__hoja {
      position: relative;
      z-index: 1;
      grid-area: 1 / 2 / 3 / 3;
      align-self: end;
      padding: calc(var(--u) * 2.6) calc(var(--u) * 2.8) calc(var(--u) * 0.8);
      border-radius: calc(var(--u) * 1);
      background-size: 100% calc(var(--u) * 0.5);
    }

    .x-poster__doc {
      padding-bottom: calc(var(--u) * 1.3);
      font-size: calc(var(--u) * 2.7);
    }

    .x-poster__fila {
      padding: calc(var(--u) * 1.5) 0;
    }

    .x-poster__fila > dt {
      font-size: calc(var(--u) * 2.3);
    }

    .x-poster__fila > dd {
      font-size: calc(var(--u) * 2.8);
    }
  }

  /* A layout forced through the engine's options wins over the container */
  .x-player[data-x-forzado="p"] .x-stage {
    --x-layout: p;
  }

  .x-player[data-x-forzado="p"] .x-stage::before {
    aspect-ratio: 4 / 5;
  }

  .x-player[data-x-forzado="l"] .x-stage {
    --x-layout: l;
  }

  .x-player[data-x-forzado="l"] .x-stage::before {
    aspect-ratio: 16 / 9;
  }

  /* --------------------------------------------------------------- film */

  .x-film {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background-color: var(--aurora-base);
    background-image: radial-gradient(circle at center, var(--aurora-dot) 0.9px, transparent 1.5px);
    background-size: var(--aurora-grid) var(--aurora-grid);
    color: var(--c-on-dark);
    font-family: var(--font-body);
    font-size: calc(var(--u) * 2.4);
    line-height: 1.3;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  .x-film[hidden] {
    display: none;
  }

  /* Nothing in the film moves by itself: the engine writes every frame */
  .x-film,
  .x-film *,
  .x-film *::before,
  .x-film *::after,
  .x-fin,
  .x-fin > .c-btn {
    transition-property: none;
    animation: none;
  }

  .x-film.is-cebando {
    opacity: 0;
  }

  /* The one CSS transition on the film: its own reveal over the poster */
  .x-film.is-entrando {
    transition-property: opacity;
    transition-duration: var(--dur-base);
    transition-timing-function: linear;
  }

  /* Paused mid-way: the film says so itself. Not a control: a press on the film resumes */
  .x-pausa {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: none;
    place-items: center;
    width: max(56px, calc(var(--u) * 9));
    height: max(56px, calc(var(--u) * 9));
    margin: calc(max(56px, var(--u) * 9) / -2) 0 0 calc(max(56px, var(--u) * 9) / -2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-white) 92%, transparent);
    box-shadow: var(--e3);
    color: var(--c-navy-deep);
    pointer-events: none;
  }

  .x-pausa > .c-icon {
    width: 52%;
    height: 52%;
  }

  .x-player.is-pausada:not(.is-pasos) .x-pausa {
    display: grid;
  }

  .x-n {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
  }

  .x-n--sobre {
    z-index: 3;
  }

  .x-lienzo {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
  }

  /* Aurora glows: three discs whose opacity and position follow the film */
  .x-luz {
    z-index: 0;
    width: calc(var(--u) * 120);
    height: calc(var(--u) * 120);
    border-radius: 50%;
  }

  .x-luz--1 { background: radial-gradient(closest-side, var(--aurora-glow-1), transparent); }
  .x-luz--2 { background: radial-gradient(closest-side, var(--aurora-glow-2), transparent); }
  .x-luz--3 { background: radial-gradient(closest-side, var(--aurora-glow-3), transparent); }

  /* Headlines: Plus Jakarta 800, revealed line by line through a mask */
  .x-h {
    color: var(--c-on-dark);
    font-family: var(--font-display);
    font-size: calc(var(--u) * 6.2);
    font-weight: var(--fw-extrabold);
    line-height: 1.12;
    letter-spacing: var(--ls-h2);
    word-spacing: var(--ws-display);
    white-space: nowrap;
  }

  .x-h--tenue {
    color: var(--c-on-dark-3);
  }

  .x-h--cifra {
    font-size: calc(var(--u) * 6.4);
    line-height: 1.1;
  }

  /* The second line of plano 2: one line in both layouts, so the product name never breaks */
  .x-h--sub {
    font-size: calc(var(--u) * 4.4);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: var(--ls-h4);
  }

  .x-ln {
    display: block;
    margin: -0.1em -0.1em -0.18em;
    padding: 0.1em 0.1em 0.18em;
    overflow: hidden;
  }

  .x-ln > span {
    display: block;
    will-change: transform;
  }

  /* Small labels on the dark stage */
  .x-rotulo {
    color: var(--c-on-dark-2);
    font-size: calc(var(--u) * 2.4);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    letter-spacing: var(--ls-ui);
    white-space: nowrap;
  }

  .x-rotulo--fuerte {
    color: var(--c-on-dark);
  }

  /* The stretch the film does not draw: from the insurer's own team to "Póliza" */
  .x-tramo {
    height: 0;
    border-top: calc(var(--u) * 0.3) dashed var(--c-on-dark-3);
  }

  .x-nodo {
    width: calc(var(--u) * 1.5);
    height: calc(var(--u) * 1.5);
    border-radius: 50%;
    background: var(--c-white);
  }

  .x-nodo--fin {
    border: calc(var(--u) * 0.32) solid var(--c-on-dark-3);
    background: var(--aurora-base);
  }

  .x-punto {
    width: calc(var(--u) * 2.8);
    height: calc(var(--u) * 2.8);
    border-radius: 50%;
  }

  .x-punto--calido {
    background: var(--c-warning);
    box-shadow: 0 0 calc(var(--u) * 2.4) calc(var(--u) * 0.4) color-mix(in srgb, var(--c-warning) 70%, transparent);
  }

  .x-punto--frio {
    background: var(--c-slate);
  }

  .x-anillo {
    width: calc(var(--u) * 2.8);
    height: calc(var(--u) * 2.8);
    border: 1.5px solid var(--c-slate);
    border-radius: 50%;
  }

  .x-anillo--voz {
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 10);
    border-color: var(--c-cyan);
  }

  /* The Actuaria mark: source of the call, then Sofía's avatar */
  .x-marca {
    display: grid;
    place-items: center;
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 10);
    border-radius: 50%;
    background: var(--c-navy-deep);
    box-shadow:
      0 0 0 1px var(--c-on-dark-hairline-strong),
      0 0 calc(var(--u) * 4) color-mix(in srgb, var(--c-cyan) 45%, transparent);
  }

  .x-marca > img {
    width: 62%;
    height: 62%;
    object-fit: contain;
  }

  /* The same mark at avatar size, inside the call */
  .x-marca--avatar {
    width: calc(var(--u) * 5.4);
    height: calc(var(--u) * 5.4);
    box-shadow:
      0 0 0 1px var(--c-on-dark-hairline-strong),
      0 0 calc(var(--u) * 2.2) color-mix(in srgb, var(--c-cyan) 45%, transparent);
  }

  /* Glass chips: the stage of the call, the status of the case, the proof label, the pilot */
  .x-chip {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 1);
    height: calc(var(--u) * 5);
    padding: 0 calc(var(--u) * 1.8);
    border: 1px solid var(--c-on-dark-hairline-strong);
    border-radius: var(--r-full);
    background: var(--c-on-dark-fill);
    color: var(--c-on-dark);
    font-size: calc(var(--u) * 2.35);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .x-chip--etapa {
    width: calc(var(--u) * 21.5);
  }

  .x-chip__punto {
    flex: none;
    width: calc(var(--u) * 1.3);
    height: calc(var(--u) * 1.3);
    border-radius: 50%;
    background: var(--c-slate);
  }

  /* The status of the case. Solid: it also rides on the corner of the white paper */
  .x-chip--estado {
    background: var(--c-navy-deep);
    box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 1.8) calc(var(--u) * -0.6) color-mix(in srgb, var(--c-navy-deep) 90%, transparent);
  }

  .x-chip--estado.es-2 > .x-chip__punto { background: var(--c-cyan); box-shadow: var(--glow-live); }
  .x-chip--estado.es-3 > .x-chip__punto { background: var(--c-ai); }
  .x-chip--estado.es-4 > .x-chip__punto { background: var(--c-success); }

  /* "What if": ghost chips at the end of the dashed lanes */
  .x-chip--carril {
    border: 1.5px dashed color-mix(in srgb, var(--c-white) 48%, transparent);
    background: color-mix(in srgb, var(--c-navy-deep) 72%, transparent);
    color: var(--c-on-dark-2);
  }

  .x-chip--carril.es-reprogramada > .x-chip__punto { background: var(--c-teal); }
  .x-chip--carril.es-escalado > .x-chip__punto { background: var(--c-warning); }

  .x-chip__luces {
    position: relative;
    flex: none;
    width: calc(var(--u) * 1.3);
    height: calc(var(--u) * 1.3);
  }

  .x-chip__luces > i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
  }

  .x-luzdot--live { background: var(--c-cyan); box-shadow: var(--glow-live); }
  .x-luzdot--voz { background: var(--c-white); }
  .x-luzdot--ia { background: var(--c-ai); box-shadow: 0 0 calc(var(--u) * 1.4) var(--c-ai); }

  .x-chip__palabras {
    position: relative;
    flex: 1 1 auto;
    height: 1.2em;
  }

  .x-chip__palabras > span {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.2;
    opacity: 0;
  }

  /* The call scales as one piece in the monitor shot: the engine writes this group's transform */
  .x-grupo {
    position: absolute;
    inset: 0;
    z-index: 1;
    transform-origin: 0 0;
    will-change: transform, opacity;
  }

  /* The call: bubbles in the spoken-word face. They fill word by word with the voice. */
  .x-burbuja {
    padding: calc(var(--u) * 1.4) calc(var(--u) * 2);
    border: 1px solid var(--bubble-ia-bd);
    border-radius: calc(var(--u) * 2.2);
    border-bottom-left-radius: calc(var(--u) * 0.6);
    background: var(--bubble-ia-bg);
    color: var(--c-on-dark);
    font-family: var(--font-display);
    font-size: calc(var(--u) * 2.5);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: var(--ls-h4);
    white-space: nowrap;
    transform-origin: 0 100%;
  }

  .x-burbuja > span {
    display: block;
  }

  .x-burbuja i {
    opacity: 0;
  }

  .x-burbuja--persona {
    border-color: var(--bubble-persona-bd);
    border-bottom-right-radius: calc(var(--u) * 0.6);
    border-bottom-left-radius: calc(var(--u) * 2.2);
    background: var(--bubble-persona-bg);
    transform-origin: 100% 100%;
  }

  /* A turn without words: the rest of the interview, and what the monitor shows */
  .x-burbuja--muda {
    display: flex;
    align-items: center;
    height: calc(var(--u) * 6.05 + 2px);
    padding-top: 0;
    padding-bottom: 0;
  }

  .x-traza {
    display: block;
    width: calc(var(--u) * 15);
    max-width: none;
    height: calc(var(--u) * 3);
    aspect-ratio: auto;
    background: var(--c-on-dark-3);
  }

  .x-burbuja--muda:not(.x-burbuja--persona) > .x-traza {
    background: var(--g-wave);
  }

  .x-avatar {
    display: grid;
    place-items: center;
    width: calc(var(--u) * 5.4);
    height: calc(var(--u) * 5.4);
    border: 1px solid var(--c-on-dark-hairline-strong);
    border-radius: 50%;
    background: var(--c-on-dark-fill-strong);
    color: var(--c-on-dark);
    font-size: calc(var(--u) * 2.4);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: 0;
  }

  /* The questionnaire: white paper, hairlines, Inter tabular */
  .x-papel {
    --text: var(--c-text);
    --text-2: var(--c-text-2);
    --hairline: var(--c-border);
    width: calc(var(--u) * 31.5);
    padding: calc(var(--u) * 2.9) calc(var(--u) * 2.4) calc(var(--u) * 0.8);
    border-radius: calc(var(--u) * 1);
    background: var(--g-band) top / 100% calc(var(--u) * 0.5) no-repeat, var(--c-surface);
    box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 5) calc(var(--u) * -1.6) color-mix(in srgb, var(--c-navy-deep) 85%, transparent);
    color: var(--c-text);
  }

  /* Header: two layers that cross-fade. "Cuestionario" and its tag while the insurer sets it
     up; the applicant once the call starts. */
  .x-papel__cab {
    position: relative;
    height: calc(var(--u) * 7);
  }

  .x-papel__capa {
    position: absolute;
    inset: 0 0 calc(var(--u) * 1) 0;
    display: flex;
    opacity: 0;
    will-change: opacity;
  }

  /* Landscape: the tag sits under the title, there is no room beside it */
  .x-papel__capa--a {
    align-items: flex-start;
  }

  .x-papel__capa--b {
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--u) * 0.5);
  }

  .x-papel__titulo,
  .x-papel__nombre {
    color: var(--c-ink);
    font-size: calc(var(--u) * 2.7);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    letter-spacing: var(--ls-ui);
    white-space: nowrap;
  }

  .x-papel__titulo {
    font-size: calc(var(--u) * 2.5);
  }

  .x-papel__k {
    color: var(--c-text-2);
    font-size: calc(var(--u) * 2.4);
    font-weight: var(--fw-medium);
    line-height: 1.1;
    white-space: nowrap;
  }

  /* Small tags: the state of the questionnaire, the file type, the optional document */
  .x-tag {
    display: inline-flex;
    align-items: center;
    height: calc(var(--u) * 3.4);
    padding: 0 calc(var(--u) * 1.1);
    border-radius: var(--r-full);
    background: var(--c-surface-mid);
    box-shadow: inset 0 0 0 1px var(--c-border-strong);
    color: var(--c-text-2);
    font-size: calc(var(--u) * 2.1);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .x-tag--borrador {
    background: var(--tone-warning-bg);
    box-shadow: inset 0 0 0 1px var(--tone-warning-bd);
    color: var(--tone-warning-fg);
  }

  .x-tag--publicado {
    background: var(--tone-success-bg);
    box-shadow: inset 0 0 0 1px var(--tone-success-bd);
    color: var(--tone-success-fg);
  }

  .x-tag--activas {
    background: color-mix(in srgb, var(--c-ai) 10%, var(--c-white));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ai) 34%, var(--c-white));
    color: color-mix(in srgb, var(--c-ai) 72%, var(--c-ink));
  }

  .x-papel__capa--a > .x-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    height: calc(var(--u) * 2.9);
    opacity: 0;
    will-change: opacity;
  }

  .x-fila {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--u) * 7);
    border-top: 1px solid var(--c-border);
  }

  .x-fila__k {
    color: var(--c-text-2);
    font-size: calc(var(--u) * 2.4);
    font-weight: var(--fw-medium);
    line-height: 1;
    opacity: 0;
    will-change: transform, opacity;
  }

  /* A row before it has a name: a grey line where the label will be */
  .x-fila__sk {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(var(--u) * 9);
    height: calc(var(--u) * 1.1);
    margin-top: calc(var(--u) * -0.55);
    border-radius: var(--r-full);
    background: var(--c-border-strong);
    opacity: 0;
  }

  .x-fila__v {
    position: relative;
    color: var(--c-text);
    font-size: calc(var(--u) * 3);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: var(--ls-fig);
    white-space: pre;
  }

  .x-fila__v > span {
    display: inline-block;
    transform-origin: 100% 50%;
    will-change: transform, opacity;
  }

  .x-fila__v i {
    opacity: 0;
  }

  .x-fila__hueco {
    position: absolute;
    top: 50%;
    right: 0;
    width: calc(var(--u) * 7);
    height: calc(var(--u) * 1.1);
    margin-top: calc(var(--u) * -0.55);
    border-radius: var(--r-full);
    background: var(--c-border);
    opacity: 0;
  }

  /* An answer outside the plausible range: nothing is typed. The empty slot takes an amber
     edge and the row its tag, under the label (the engine sets the tag's top). */
  .x-fila__borde {
    position: absolute;
    top: 50%;
    right: calc(var(--u) * -0.9);
    width: calc(var(--u) * 8.8);
    height: calc(var(--u) * 3.6);
    margin-top: calc(var(--u) * -1.8);
    border: calc(var(--u) * 0.3) solid var(--c-warning);
    border-radius: calc(var(--u) * 1);
    background: color-mix(in srgb, var(--c-warning) 9%, transparent);
    opacity: 0;
  }

  .x-fila__fuera {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.7);
    color: var(--tone-warning-fg);
    font-size: calc(var(--u) * 2.1);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    white-space: nowrap;
    opacity: 0;
  }

  .x-fila__fuera::before {
    content: "";
    flex: none;
    width: calc(var(--u) * 1.1);
    height: calc(var(--u) * 1.1);
    border-radius: 50%;
    background: var(--c-warning);
  }

  .x-fila__calc {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    gap: calc(var(--u) * 0.8);
    margin-top: calc(var(--u) * -0.55);
    opacity: 0;
  }

  .x-fila__calc > b {
    width: calc(var(--u) * 1.1);
    height: calc(var(--u) * 1.1);
    border-radius: 50%;
    background: var(--c-ai);
  }

  /* Ready: a tick lands on a sheet's corner, at the end of a row, at the end of a setting */
  .x-listo {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-success);
    color: var(--c-white);
    opacity: 0;
    will-change: transform, opacity;
  }

  .x-listo > .c-icon {
    width: 78%;
    height: 78%;
  }

  .x-hoja > .x-listo {
    top: calc(var(--u) * -1.3);
    right: calc(var(--u) * -1.3);
    width: calc(var(--u) * 3.8);
    height: calc(var(--u) * 3.8);
    border: calc(var(--u) * 0.35) solid var(--c-navy-deep);
  }

  .x-fila > .x-listo {
    top: 50%;
    right: calc(var(--u) * -3.9);
    width: calc(var(--u) * 3);
    height: calc(var(--u) * 3);
    margin-top: calc(var(--u) * -1.5);
    border: calc(var(--u) * 0.3) solid var(--c-surface);
  }

  .x-ajuste > .x-listo {
    position: relative;
    flex: none;
    width: calc(var(--u) * 3.2);
    height: calc(var(--u) * 3.2);
  }

  /* Plano 3: the document the insurer uploads, the bars that read it, its lines on the way */
  .x-hoja--subida > .x-hoja__arte {
    margin-top: calc(var(--u) * 1.6);
  }

  .x-barrido {
    width: calc(var(--u) * 12);
    height: calc(var(--u) * 24);
  }

  .x-barrido > b {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    background: var(--g-band);
  }

  .x-renglon {
    width: calc(var(--u) * 9);
    height: calc(var(--u) * 1.1);
    border-radius: var(--r-full);
    background: var(--c-border-strong);
  }

  /* Plano 4: three settings */
  .x-ajuste {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    width: calc(var(--u) * 46);
    height: calc(var(--u) * 7.4);
    padding: 0 calc(var(--u) * 2.2);
    border: 1px solid var(--c-on-dark-hairline-strong);
    border-radius: calc(var(--u) * 1.6);
    background: var(--c-on-dark-fill);
    color: var(--c-on-dark);
  }

  .x-ajuste__k {
    flex: none;
    width: calc(var(--u) * 15);
    font-family: var(--font-display);
    font-size: calc(var(--u) * 2.8);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: var(--ls-h4);
    white-space: nowrap;
  }

  .x-ajuste__arte {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: calc(var(--u) * 1.1);
  }

  .x-ajuste__arte > b {
    position: relative;
    flex: none;
    width: calc(var(--u) * 1.7);
    height: calc(var(--u) * 1.7);
    border: calc(var(--u) * 0.26) solid var(--c-on-dark-3);
    border-radius: 50%;
  }

  .x-ajuste__arte > b > i {
    position: absolute;
    inset: calc(var(--u) * -0.26);
    border-radius: 50%;
    background: var(--c-cyan);
    opacity: 0;
  }

  .x-ajuste__arte--giro > .c-icon {
    width: calc(var(--u) * 3.6);
    height: calc(var(--u) * 3.6);
    color: var(--c-cyan);
    will-change: transform;
  }

  /* Plano 7: the window the team sees. Its height is set by the engine to fit the call. */
  .x-marco {
    width: calc(var(--u) * 81.4);
    border: 1px solid var(--c-on-dark-hairline-strong);
    border-radius: calc(var(--u) * 2);
    background: color-mix(in srgb, var(--c-navy-deep) 60%, transparent);
    box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 5) calc(var(--u) * -1.6) color-mix(in srgb, var(--c-navy-deep) 85%, transparent);
  }

  .x-marco__barra {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 1.2);
    height: calc(var(--u) * 5.4);
    padding: 0 calc(var(--u) * 2);
    border-bottom: 1px solid var(--c-on-dark-hairline);
    color: var(--c-on-dark);
    font-family: var(--font-display);
    font-size: calc(var(--u) * 2.5);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: var(--ls-h4);
    white-space: nowrap;
  }

  .x-marco__vivo {
    flex: none;
    width: calc(var(--u) * 1.3);
    height: calc(var(--u) * 1.3);
    border-radius: 50%;
    background: var(--c-cyan);
    box-shadow: var(--glow-live);
  }

  .x-marco__pie {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--u) * 1.4);
    height: calc(var(--u) * 6.2);
    padding: 0 calc(var(--u) * 2);
    border-top: 1px solid var(--c-on-dark-hairline);
  }

  /* Pictures of the two controls, not controls: nothing here can be pressed */
  .x-ctrl {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.9);
    height: calc(var(--u) * 4.2);
    padding: 0 calc(var(--u) * 1.6);
    border-radius: var(--r-full);
    color: var(--c-on-dark);
    font-size: calc(var(--u) * 2.2);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .x-ctrl > span,
  .x-ctrl > .c-icon {
    position: relative;
  }

  .x-ctrl > .c-icon {
    width: calc(var(--u) * 2.6);
    height: calc(var(--u) * 2.6);
  }

  .x-ctrl--tonal {
    background: var(--c-on-dark-fill-strong);
  }

  .x-ctrl--borde {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-danger) 62%, var(--c-white));
  }

  .x-ctrl__luz,
  .x-ctrl__anillo {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    will-change: transform, opacity;
  }

  .x-ctrl__luz {
    background: color-mix(in srgb, var(--c-cyan) 30%, transparent);
    box-shadow: 0 0 0 1.5px var(--c-cyan), var(--glow-live);
  }

  .x-ctrl__anillo {
    box-shadow: 0 0 0 1.5px var(--c-on-dark);
  }

  /* Plano 8: dashed lanes under the thread. Their heights are set by the engine. */
  .x-carril {
    width: 0;
  }

  .x-carril > i {
    display: block;
    width: 0;
    height: 0;
    margin-left: calc(var(--u) * -0.15);
    border-left: calc(var(--u) * 0.3) dashed color-mix(in srgb, var(--c-white) 48%, transparent);
    transform-origin: 50% 0;
    will-change: transform;
  }

  .x-mini {
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 3);
  }

  .x-mini > b {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    background: var(--c-on-dark-3);
    will-change: transform;
  }

  /* Rescheduled: the call goes back up to the thread */
  .x-retorno {
    width: calc(var(--u) * 2);
  }

  .x-retorno > i {
    position: absolute;
    top: calc(var(--u) * 0.5);
    bottom: 0;
    left: 50%;
    margin-left: calc(var(--u) * -0.15);
    border-left: calc(var(--u) * 0.3) dashed color-mix(in srgb, var(--c-white) 48%, transparent);
    transform-origin: 50% 100%;
    will-change: transform;
  }

  .x-retorno > b {
    position: absolute;
    top: calc(var(--u) * 0.3);
    left: 50%;
    width: calc(var(--u) * 1.5);
    height: calc(var(--u) * 1.5);
    margin-left: calc(var(--u) * -0.75);
    border-top: calc(var(--u) * 0.3) solid color-mix(in srgb, var(--c-white) 62%, transparent);
    border-left: calc(var(--u) * 0.3) solid color-mix(in srgb, var(--c-white) 62%, transparent);
    transform: rotate(45deg);
    opacity: 0;
  }

  /* The four documents */
  .x-hoja {
    width: calc(var(--u) * 19.8);
    height: calc(var(--u) * 29.4);
    padding: calc(var(--u) * 2.4) calc(var(--u) * 1.8) calc(var(--u) * 1.8);
    border-radius: calc(var(--u) * 0.9);
    background: var(--g-band) top / 100% calc(var(--u) * 0.4) no-repeat, var(--c-surface);
    box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4.4) calc(var(--u) * -1.4) color-mix(in srgb, var(--c-navy-deep) 85%, transparent);
    color: var(--c-ink);
  }

  .x-hoja--opcional {
    background: color-mix(in srgb, var(--c-white) 90%, transparent);
    box-shadow: none;
    outline: 1.5px dashed color-mix(in srgb, var(--c-white) 62%, transparent);
    outline-offset: calc(var(--u) * 0.5);
  }

  .x-hoja__titulo {
    display: block;
    height: calc(var(--u) * 5.6);
    color: var(--c-ink);
    font-size: calc(var(--u) * 2.12);
    font-weight: var(--fw-semibold);
    line-height: 1.22;
    letter-spacing: var(--ls-ui);
    white-space: nowrap;
  }

  .x-hoja__titulo > span {
    display: block;
  }

  .x-hoja__titulo > .x-tag {
    display: inline-flex;
    height: calc(var(--u) * 2.9);
    margin-top: calc(var(--u) * 0.4);
  }

  .x-hoja__arte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1.6);
    height: calc(var(--u) * 18.4);
    margin-top: calc(var(--u) * 1.2);
    padding-top: calc(var(--u) * 1.5);
    border-top: 1px solid var(--c-border);
  }

  .x-arte__linea {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 1);
  }

  .x-arte__linea > i {
    flex: none;
    width: calc(var(--u) * 1.1);
    height: calc(var(--u) * 1.1);
    border-radius: 50%;
    background: var(--c-slate);
  }

  .x-arte__linea > .es-ia { background: var(--c-live); }
  .x-arte__linea > .es-aviso { background: var(--c-warning); }
  .x-arte__linea > .es-ok { background: var(--c-success); }

  .x-arte__linea > b {
    display: block;
    height: calc(var(--u) * 1.1);
    border-radius: var(--r-full);
    background: var(--c-border-strong);
  }

  .x-arte__linea > .es-valor {
    margin-left: auto;
    background: var(--c-text-2);
  }

  .x-arte__pista {
    position: absolute;
    right: 0;
    bottom: calc(var(--u) * 1.2);
    left: 0;
    height: calc(var(--u) * 0.5);
    border-radius: var(--r-full);
    background: var(--c-border);
  }

  .x-arte__avance {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--c-ocean);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  .x-arte__perilla {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(var(--u) * 1.5);
    height: calc(var(--u) * 1.5);
    margin: calc(var(--u) * -0.75) 0 0 calc(var(--u) * -0.75);
    border-radius: 50%;
    background: var(--c-ocean);
  }

  /* Proof */
  .x-dato {
    color: var(--c-on-dark-2);
    font-size: calc(var(--u) * 4.2);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: var(--ls-fig);
    white-space: nowrap;
  }

  .x-dato--fuerte {
    color: var(--c-on-dark);
    font-size: calc(var(--u) * 9.4);
  }

  .x-fantasma {
    width: calc(var(--u) * 84);
    height: calc(var(--u) * 4.2);
    border: 1.5px dashed color-mix(in srgb, var(--c-white) 34%, transparent);
    border-radius: var(--r-full);
  }

  /* Close */
  .x-logo {
    width: calc(var(--u) * 44);
  }

  .x-logo > img {
    width: 100%;
    height: auto;
  }

  .x-lema {
    color: var(--c-on-dark-2);
    font-family: var(--font-display);
    font-size: calc(var(--u) * 3.3);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: var(--ls-h4);
    word-spacing: var(--ws-display);
    text-align: center;
    white-space: nowrap;
  }

  .x-lema > span {
    display: block;
  }

  /* The caption strip: one sentence of the narrator in a band at the foot of the stage */
  .x-sub {
    z-index: 4;
    color: var(--c-on-dark);
    font-size: calc(var(--u) * 2.6);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    letter-spacing: var(--ls-body);
    text-align: center;
    white-space: nowrap;
  }

  .x-sub > span {
    display: block;
  }

  /* End card buttons: real controls, laid over the film by the engine */
  .x-fin {
    position: absolute;
    right: 0;
    bottom: calc(var(--u) * 11.5);
    left: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 0 calc(var(--u) * 6);
    visibility: hidden;
    pointer-events: none;
  }

  .x-fin > .c-btn {
    --btn-h: max(48px, calc(var(--u) * 7));
    --btn-fs: max(1rem, calc(var(--u) * 2.3));
    --btn-px: max(24px, calc(var(--u) * 3.4));
    pointer-events: auto;
    will-change: transform, opacity;
  }

  /* ----------------------------------------------------- film, portrait */

  .x-film[data-layout="p"] {
    font-size: calc(var(--u) * 4.4);
  }

  .x-film[data-layout="p"] .x-luz {
    width: calc(var(--u) * 170);
    height: calc(var(--u) * 170);
  }

  .x-film[data-layout="p"] .x-h {
    font-size: calc(var(--u) * 9.4);
  }

  .x-film[data-layout="p"] .x-h--chico {
    font-size: calc(var(--u) * 8.6);
  }

  .x-film[data-layout="p"] .x-h--sub {
    font-size: calc(var(--u) * 4.6);
  }

  .x-film[data-layout="p"] .x-rotulo {
    font-size: calc(var(--u) * 4.6);
  }

  .x-film[data-layout="p"] .x-nodo {
    width: calc(var(--u) * 2.4);
    height: calc(var(--u) * 2.4);
  }

  .x-film[data-layout="p"] .x-nodo--fin {
    border-width: calc(var(--u) * 0.5);
  }

  .x-film[data-layout="p"] .x-tramo {
    border-top-width: calc(var(--u) * 0.5);
  }

  .x-film[data-layout="p"] .x-punto,
  .x-film[data-layout="p"] .x-anillo {
    width: calc(var(--u) * 4.6);
    height: calc(var(--u) * 4.6);
  }

  .x-film[data-layout="p"] .x-anillo--voz,
  .x-film[data-layout="p"] .x-marca {
    width: calc(var(--u) * 17);
    height: calc(var(--u) * 17);
  }

  .x-film[data-layout="p"] .x-marca--avatar {
    width: calc(var(--u) * 9.4);
    height: calc(var(--u) * 9.4);
  }

  .x-film[data-layout="p"] .x-chip {
    gap: calc(var(--u) * 1.8);
    height: calc(var(--u) * 8.6);
    padding: 0 calc(var(--u) * 3);
    font-size: calc(var(--u) * 4.4);
  }

  .x-film[data-layout="p"] .x-chip--etapa {
    width: calc(var(--u) * 40.5);
    font-size: calc(var(--u) * 4.6);
  }

  .x-film[data-layout="p"] .x-chip__luces {
    width: calc(var(--u) * 2.4);
    height: calc(var(--u) * 2.4);
  }

  .x-film[data-layout="p"] .x-chip__punto {
    width: calc(var(--u) * 2.4);
    height: calc(var(--u) * 2.4);
  }

  .x-film[data-layout="p"] .x-burbuja {
    padding: calc(var(--u) * 2.2) calc(var(--u) * 3.2);
    border-radius: calc(var(--u) * 3.6);
    border-bottom-left-radius: calc(var(--u) * 1);
    font-size: calc(var(--u) * 4.6);
    line-height: 1.26;
  }

  .x-film[data-layout="p"] .x-burbuja--persona {
    border-bottom-right-radius: calc(var(--u) * 1);
    border-bottom-left-radius: calc(var(--u) * 3.6);
  }

  .x-film[data-layout="p"] .x-burbuja--muda {
    height: calc(var(--u) * 10.196 + 2px);
  }

  .x-film[data-layout="p"] .x-traza {
    width: calc(var(--u) * 27);
    height: calc(var(--u) * 5);
  }

  .x-film[data-layout="p"] .x-avatar {
    width: calc(var(--u) * 9.4);
    height: calc(var(--u) * 9.4);
    font-size: calc(var(--u) * 4.4);
  }

  .x-film[data-layout="p"] .x-papel {
    width: calc(var(--u) * 88);
    padding: calc(var(--u) * 4.4) calc(var(--u) * 4.6) calc(var(--u) * 0.6);
    border-radius: calc(var(--u) * 1.6);
    background-size: 100% calc(var(--u) * 0.9);
  }

  .x-film[data-layout="p"] .x-papel__cab {
    height: calc(var(--u) * 8.4);
  }

  .x-film[data-layout="p"] .x-papel__capa {
    bottom: calc(var(--u) * 1.4);
  }

  /* Room for both on one line: the label on the left, the name on the right */
  .x-film[data-layout="p"] .x-papel__capa--b {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--u) * 2.4);
  }

  .x-film[data-layout="p"] .x-papel__titulo,
  .x-film[data-layout="p"] .x-papel__nombre {
    font-size: calc(var(--u) * 4.8);
  }

  .x-film[data-layout="p"] .x-papel__k {
    font-size: calc(var(--u) * 4.4);
  }

  .x-film[data-layout="p"] .x-tag {
    height: calc(var(--u) * 6.4);
    padding: 0 calc(var(--u) * 2);
    font-size: calc(var(--u) * 4.2);
  }

  .x-film[data-layout="p"] .x-papel__capa--a {
    align-items: center;
  }

  .x-film[data-layout="p"] .x-papel__capa--a > .x-tag {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    height: calc(var(--u) * 6.4);
    margin-top: calc(var(--u) * -3.2);
  }

  .x-film[data-layout="p"] .x-fila {
    height: calc(var(--u) * 9.8);
  }

  .x-film[data-layout="p"] .x-h--cifra {
    font-size: calc(var(--u) * 9.4);
  }

  .x-film[data-layout="p"] .x-fila__k {
    font-size: calc(var(--u) * 4.4);
  }

  .x-film[data-layout="p"] .x-fila__sk {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 1.8);
    margin-top: calc(var(--u) * -0.9);
  }

  .x-film[data-layout="p"] .x-fila__v {
    font-size: calc(var(--u) * 5.2);
  }

  .x-film[data-layout="p"] .x-fila__hueco {
    width: calc(var(--u) * 13);
    height: calc(var(--u) * 1.8);
    margin-top: calc(var(--u) * -0.9);
  }

  .x-film[data-layout="p"] .x-fila__borde {
    right: calc(var(--u) * -1.3);
    width: calc(var(--u) * 15.6);
    height: calc(var(--u) * 6);
    margin-top: calc(var(--u) * -3);
    border-width: calc(var(--u) * 0.5);
    border-radius: calc(var(--u) * 1.6);
  }

  .x-film[data-layout="p"] .x-fila__fuera {
    gap: calc(var(--u) * 1.2);
    font-size: calc(var(--u) * 4);
  }

  .x-film[data-layout="p"] .x-fila__fuera::before {
    width: calc(var(--u) * 1.9);
    height: calc(var(--u) * 1.9);
  }

  .x-film[data-layout="p"] .x-fila__calc {
    gap: calc(var(--u) * 1.4);
    margin-top: calc(var(--u) * -0.9);
  }

  .x-film[data-layout="p"] .x-fila__calc > b {
    width: calc(var(--u) * 1.8);
    height: calc(var(--u) * 1.8);
  }

  .x-film[data-layout="p"] .x-fila > .x-listo {
    right: calc(var(--u) * -7.2);
    width: calc(var(--u) * 5.2);
    height: calc(var(--u) * 5.2);
    margin-top: calc(var(--u) * -2.6);
    border-width: calc(var(--u) * 0.5);
  }

  .x-film[data-layout="p"] .x-hoja {
    width: calc(var(--u) * 41);
    height: calc(var(--u) * 41);
    padding: calc(var(--u) * 4) calc(var(--u) * 3.2) calc(var(--u) * 3);
    border-radius: calc(var(--u) * 1.6);
    background-size: 100% calc(var(--u) * 0.8);
  }

  .x-film[data-layout="p"] .x-hoja--opcional {
    outline-offset: calc(var(--u) * 0.9);
  }

  .x-film[data-layout="p"] .x-hoja__titulo {
    height: calc(var(--u) * 11.2);
    font-size: calc(var(--u) * 4.4);
    line-height: 1.24;
  }

  .x-film[data-layout="p"] .x-hoja > .x-listo {
    top: calc(var(--u) * -2);
    right: calc(var(--u) * -2);
    width: calc(var(--u) * 6.6);
    height: calc(var(--u) * 6.6);
    border-width: calc(var(--u) * 0.6);
  }

  .x-film[data-layout="p"] .x-hoja__arte {
    gap: calc(var(--u) * 2.1);
    height: calc(var(--u) * 21);
    margin-top: calc(var(--u) * 1.6);
    padding-top: calc(var(--u) * 2.6);
  }

  .x-film[data-layout="p"] .x-arte__linea {
    gap: calc(var(--u) * 1.8);
  }

  .x-film[data-layout="p"] .x-arte__linea > i,
  .x-film[data-layout="p"] .x-arte__linea > b {
    height: calc(var(--u) * 1.9);
  }

  .x-film[data-layout="p"] .x-arte__linea > i {
    width: calc(var(--u) * 1.9);
  }

  .x-film[data-layout="p"] .x-arte__pista {
    bottom: calc(var(--u) * 2);
    height: calc(var(--u) * 0.9);
  }

  .x-film[data-layout="p"] .x-arte__perilla {
    width: calc(var(--u) * 2.6);
    height: calc(var(--u) * 2.6);
    margin: calc(var(--u) * -1.3) 0 0 calc(var(--u) * -1.3);
  }

  .x-film[data-layout="p"] .x-dato {
    font-size: calc(var(--u) * 6.4);
  }

  .x-film[data-layout="p"] .x-dato--fuerte {
    font-size: calc(var(--u) * 14);
  }

  .x-film[data-layout="p"] .x-fantasma {
    height: calc(var(--u) * 7);
  }

  .x-film[data-layout="p"] .x-logo {
    width: calc(var(--u) * 66);
  }

  .x-film[data-layout="p"] .x-lema {
    font-size: calc(var(--u) * 6.2);
  }

  .x-film[data-layout="p"] .x-hoja__titulo > .x-tag {
    height: calc(var(--u) * 5.4);
    margin-top: calc(var(--u) * 0.4);
  }

  .x-film[data-layout="p"] .x-hoja--subida {
    height: calc(var(--u) * 36);
  }

  .x-film[data-layout="p"] .x-hoja--subida > .x-hoja__arte {
    margin-top: calc(var(--u) * 2.4);
  }

  .x-film[data-layout="p"] .x-barrido {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 30);
  }

  .x-film[data-layout="p"] .x-renglon {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 1.8);
  }

  .x-film[data-layout="p"] .x-ajuste {
    gap: calc(var(--u) * 3);
    width: calc(var(--u) * 88);
    height: calc(var(--u) * 10);
    padding: 0 calc(var(--u) * 3.6);
    border-radius: calc(var(--u) * 2.6);
  }

  .x-film[data-layout="p"] .x-ajuste__k {
    width: calc(var(--u) * 30);
    font-size: calc(var(--u) * 4.8);
  }

  .x-film[data-layout="p"] .x-ajuste__arte {
    gap: calc(var(--u) * 1.9);
  }

  .x-film[data-layout="p"] .x-ajuste__arte > b {
    width: calc(var(--u) * 3);
    height: calc(var(--u) * 3);
    border-width: calc(var(--u) * 0.44);
  }

  .x-film[data-layout="p"] .x-ajuste__arte > b > i {
    inset: calc(var(--u) * -0.44);
  }

  .x-film[data-layout="p"] .x-ajuste__arte--giro > .c-icon {
    width: calc(var(--u) * 6.2);
    height: calc(var(--u) * 6.2);
  }

  .x-film[data-layout="p"] .x-ajuste > .x-listo {
    width: calc(var(--u) * 5.6);
    height: calc(var(--u) * 5.6);
  }

  .x-film[data-layout="p"] .x-marco {
    width: calc(var(--u) * 83);
    border-radius: calc(var(--u) * 3.2);
  }

  .x-film[data-layout="p"] .x-marco__barra {
    gap: calc(var(--u) * 2);
    height: calc(var(--u) * 8.6);
    padding: 0 calc(var(--u) * 3.2);
    font-size: calc(var(--u) * 4.4);
  }

  .x-film[data-layout="p"] .x-marco__vivo {
    width: calc(var(--u) * 2.2);
    height: calc(var(--u) * 2.2);
  }

  .x-film[data-layout="p"] .x-marco__pie {
    justify-content: center;
    gap: calc(var(--u) * 2);
    height: calc(var(--u) * 10.4);
    padding: 0 calc(var(--u) * 2.4);
  }

  .x-film[data-layout="p"] .x-ctrl {
    gap: calc(var(--u) * 1.5);
    height: calc(var(--u) * 7.4);
    padding: 0 calc(var(--u) * 2.6);
    font-size: calc(var(--u) * 4);
  }

  .x-film[data-layout="p"] .x-ctrl > .c-icon {
    width: calc(var(--u) * 4.6);
    height: calc(var(--u) * 4.6);
  }

  .x-film[data-layout="p"] .x-carril > i {
    margin-left: calc(var(--u) * -0.25);
    border-left-width: calc(var(--u) * 0.5);
  }

  .x-film[data-layout="p"] .x-mini {
    width: calc(var(--u) * 18);
    height: calc(var(--u) * 5);
  }

  .x-film[data-layout="p"] .x-retorno {
    width: calc(var(--u) * 3.4);
  }

  .x-film[data-layout="p"] .x-retorno > i {
    top: calc(var(--u) * 0.9);
    margin-left: calc(var(--u) * -0.25);
    border-left-width: calc(var(--u) * 0.5);
  }

  .x-film[data-layout="p"] .x-retorno > b {
    top: calc(var(--u) * 0.5);
    width: calc(var(--u) * 2.6);
    height: calc(var(--u) * 2.6);
    margin-left: calc(var(--u) * -1.3);
    border-top-width: calc(var(--u) * 0.5);
    border-left-width: calc(var(--u) * 0.5);
  }

  .x-film[data-layout="p"] .x-sub {
    font-size: calc(var(--u) * 3.9);
    line-height: 1.28;
  }

  .x-film[data-layout="p"] ~ .x-fin {
    bottom: calc(var(--u) * 12);
    flex-direction: column;
  }

  /* ------------------------------------------------------- player bar */

  .x-bar,
  .x-pasos {
    margin-top: var(--sp-8);
    color: var(--c-on-dark);
  }

  .x-bar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--sp-4);
    min-height: 48px;
    padding: 2px var(--sp-6);
    border: 1px solid var(--c-on-dark-hairline);
    border-radius: var(--r-ui);
    background: var(--c-on-dark-fill-soft);
  }

  .x-player.is-started:not(.is-pasos) .x-bar,
  .x-ampliada .x-bar {
    display: flex;
  }

  .x-ctl {
    display: inline-flex;
    flex: none;
    gap: var(--sp-6);
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    height: var(--tap);
    padding: 0 var(--sp-8);
    border-radius: var(--r-control);
    color: var(--c-on-dark);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: var(--ls-ui);
    white-space: nowrap;
  }

  @media (hover: hover) {
    .x-ctl:hover {
      background: var(--c-on-dark-fill-strong);
    }
  }

  .x-ctl:focus-visible {
    outline: 2px solid var(--c-focus-on-dark);
    outline-offset: -2px;
  }

  .x-ctl[hidden] {
    display: none;
  }

  .x-ctl__pause,
  .x-player.is-playing .x-ctl__play {
    display: none;
  }

  .x-player.is-playing .x-ctl__pause {
    display: block;
  }

  .x-ctl__texto {
    display: none;
  }

  .x-bar__tiempo {
    flex: none;
    order: 2;
    min-width: 9ch;
    margin-right: auto;
    padding: 0 var(--sp-4);
    color: var(--c-on-dark-2);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
  }

  .x-bar > .x-ctl:first-child {
    order: 1;
  }

  .x-bar > .x-ctl--texto {
    order: 3;
  }

  /* Phones: the scrubber takes its own row above the buttons */
  .x-scrub {
    position: relative;
    flex: 1 1 100%;
    order: 0;
    height: var(--tap);
    margin: 0 var(--sp-8);
  }

  .x-scrub__pista {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 4px;
    margin-top: -2px;
    border-radius: var(--r-full);
    background: var(--c-on-dark-hairline-strong);
  }

  .x-scrub__avance {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--g-band);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  /* One tick where each shot starts (the player redraws them from the engine's table) */
  .x-scrub__pista > i {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 10px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--c-on-dark-3);
  }

  .x-scrub__pista > i:first-of-type {
    margin-left: 0;
  }

  .x-scrub__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: var(--r-6);
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .x-scrub__input::-webkit-slider-runnable-track {
    height: 100%;
    background: transparent;
  }

  .x-scrub__input::-moz-range-track {
    height: 100%;
    background: transparent;
  }

  .x-scrub__input::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: calc(var(--tap) / 2 - 8px);
    border: 0;
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: var(--e2);
    -webkit-appearance: none;
    appearance: none;
  }

  .x-scrub__input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: var(--e2);
  }

  .x-scrub__input:disabled {
    cursor: default;
  }

  .x-scrub__input:focus-visible {
    outline: 2px solid var(--c-focus-on-dark);
    outline-offset: -4px;
  }

  @container x-player (min-width: 600px) {
    /* Landscape: the bar is part of the player from the first paint, so nothing moves on Play */
    .x-player:not(.is-pasos) .x-bar {
      display: flex;
    }

    .x-player:not(.is-started) .x-bar [data-x-replay] {
      display: none;
    }

    /* The end card already says "Ver de nuevo": the bar keeps its button, without the words */
    .x-player.is-ended .x-bar [data-x-replay] .x-ctl__texto {
      display: none;
    }

    /* Reduced motion: Play leads to the stepper, so there is no player bar before it */
    @media (prefers-reduced-motion: reduce) {
      .x-player:not(.is-started) .x-bar {
        display: none;
      }
    }

    .x-bar {
      flex-wrap: nowrap;
      column-gap: var(--sp-8);
      padding: 2px var(--sp-8);
    }

    .x-bar__tiempo {
      order: 0;
      margin-right: 0;
    }

    .x-scrub {
      flex: 1 1 auto;
      margin: 0 var(--sp-4);
    }

    .x-bar > .x-ctl:first-child,
    .x-bar > .x-ctl--texto {
      order: 0;
    }

    .x-ctl--texto {
      padding: 0 var(--sp-12) 0 var(--sp-8);
    }

    .x-ctl__texto {
      display: inline;
    }

  }

  .x-ampliada [data-x-ampliar] {
    display: none;
  }

  /* -------------------------------------------- reduced-motion stepper */

  .x-pasos {
    display: grid;
    gap: var(--sp-8);
    justify-items: center;
  }

  .x-pasos[hidden] {
    display: none;
  }

  .x-pasos__nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-4) var(--sp-8);
    align-items: center;
    width: 100%;
    padding: var(--sp-8) var(--sp-6) 2px;
    border: 1px solid var(--c-on-dark-hairline);
    border-radius: var(--r-ui);
    background: var(--c-on-dark-fill-soft);
  }

  .x-pasos__nav > .c-btn {
    display: flex;
  }

  .x-pasos__pos {
    grid-column: 1 / -1;
    order: -1;
  }

  @container x-player (min-width: 600px) {
    .x-pasos__nav {
      grid-template-columns: auto minmax(0, 1fr) auto;
      padding: 2px var(--sp-6);
    }

    .x-pasos__pos {
      grid-column: auto;
      order: 0;
    }
  }

  .x-pasos__nav > .c-btn[aria-disabled="true"] {
    --btn-bg: transparent;
    --btn-fg: var(--c-on-dark-3);
    --btn-edge: inset 0 0 0 1px var(--c-on-dark-hairline);
  }

  .x-pasos__pos {
    min-width: 0;
    color: var(--c-on-dark);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    text-align: center;
    text-wrap: balance;
  }

  .x-pasos__nota {
    max-width: 34rem;
    color: var(--c-on-dark-2);
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
    text-align: center;
    text-wrap: balance;
  }

  .x-pasos__animar {
    --btn-fg: var(--c-on-dark);
    --btn-bg-hover: var(--c-on-dark-fill);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  /* ------------------------------------------------------ text version */

  .x-texto {
    margin-top: var(--sp-4);
    color: var(--c-on-dark-2);
  }

  .x-texto__resumen {
    display: inline-flex;
    gap: var(--sp-4);
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--sp-4);
    margin-left: calc(var(--sp-4) * -1);
    border-radius: var(--r-6);
    list-style: none;
    color: var(--c-on-dark);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    text-decoration: underline;
    text-decoration-color: var(--c-on-dark-hairline-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }

  .x-texto__resumen::-webkit-details-marker {
    display: none;
  }

  .x-texto__resumen::marker {
    content: "";
  }

  .x-texto__resumen > .c-icon {
    width: 20px;
    height: 20px;
    color: var(--c-on-dark-3);
    transition: transform var(--dur-base) var(--ease-standard);
  }

  .x-texto[open] > .x-texto__resumen > .c-icon {
    transform: rotate(180deg);
  }

  @media (hover: hover) {
    .x-texto__resumen:hover {
      text-decoration-color: currentColor;
    }
  }

  .x-texto__cuerpo {
    margin-top: var(--sp-8);
    padding: var(--sp-4) var(--sp-20) var(--sp-20);
    border: 1px solid var(--c-on-dark-hairline);
    border-radius: var(--r-ui);
    background: var(--c-on-dark-fill-soft);
    font-size: var(--fs-body);
    line-height: var(--lh-small);
  }

  .x-texto__lista {
    counter-reset: x-plano;
  }

  .x-texto__lista > li {
    position: relative;
    padding: var(--sp-12) 0 var(--sp-12) var(--sp-32);
    border-bottom: 1px solid var(--c-on-dark-hairline);
    color: var(--c-on-dark);
    counter-increment: x-plano;
  }

  .x-texto__lista > li::before {
    content: counter(x-plano);
    position: absolute;
    top: var(--sp-12);
    left: 0;
    color: var(--c-on-dark-3);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }

  .x-texto__cuerpo > p {
    margin-top: var(--sp-12);
    font-size: var(--fs-small);
  }

  .x-nojs,
  .x-error {
    margin-top: var(--sp-8);
    color: var(--c-on-dark-2);
    font-size: var(--fs-body);
    line-height: var(--lh-small);
  }

  .x-error[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .x-texto__resumen > .c-icon {
      transition: none;
    }
  }

  /* ----------------------------------------------------- enlarged view */

  .x-ampliada {
    position: fixed;
    inset: 0;
    width: min(100vw - 32px, 1400px, (100vh - 176px) * 16 / 9);
    max-width: none;
    height: fit-content;
    max-height: none;
    margin: auto;
    padding: var(--sp-8) var(--sp-16) var(--sp-16);
    overflow: visible;
    border: 1px solid var(--c-on-dark-hairline);
    border-radius: var(--r-hero);
    background: var(--c-navy-deep);
    box-shadow: var(--e5);
    color: var(--c-on-dark);
  }

  @supports (height: 1dvh) {
    .x-ampliada {
      width: min(100vw - 32px, 1400px, (100dvh - 176px) * 16 / 9);
    }
  }

  .x-ampliada::backdrop {
    background: color-mix(in srgb, var(--c-navy-deep) 84%, transparent);
  }

  .x-ampliada[open] {
    animation:
      c-fade-in var(--dur-fast) linear both,
      c-pop-in var(--dur-base) var(--ease-enter) both;
  }

  .x-ampliada[open]::backdrop {
    animation: c-fade-in var(--dur-fast) linear both;
  }

  .x-ampliada.is-closing,
  .x-ampliada.is-closing::backdrop {
    animation: c-fade-out var(--dur-fast) var(--ease-exit) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .x-ampliada[open],
    .x-ampliada[open]::backdrop,
    .x-ampliada.is-closing,
    .x-ampliada.is-closing::backdrop {
      animation: none;
    }
  }

  .x-ampliada__barra {
    display: flex;
    gap: var(--sp-16);
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding-bottom: var(--sp-8);
  }

  .x-ampliada__titulo {
    padding-left: var(--sp-8);
    color: var(--c-on-dark);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
  }

  .x-ampliada__hueco {
    container: x-player / inline-size;
  }

  .x-ampliada .x-stage {
    border-radius: var(--r-stage);
  }

  .x-ampliada .x-escena::before {
    content: none;
  }
}

/* 82-explainer-sonido.css */
/*
  Explainer, sound: what the 90-second film with voices adds to the player's own chrome.
  The sound button of the bar, the line about the voices under the player and the script
  layout of the text version. Same layer as 80-explainer.css, which it follows.
*/
@layer explainer {
  /* ------------------------------------------------------- sound button */

  /* One button for voices and music together. is-mudo: muted, or the sound could not be played */
  .x-ctl__mudo,
  .x-player.is-mudo .x-ctl__son {
    display: none;
  }

  .x-player.is-mudo .x-ctl__mudo {
    display: block;
  }

  /* Phones: after the time, before "Ver de nuevo" */
  .x-bar > .x-ctl--sonido {
    order: 3;
  }

  @container x-player (min-width: 600px) {
    .x-bar > .x-ctl--sonido {
      order: 0;
    }
  }

  /* ------------------------------------------------- note on the voices */

  .x-voces {
    margin-top: var(--sp-8);
    color: var(--text-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-small);
  }

  /* ------------------------------------ text version: the film's script */

  .x-texto__cap {
    display: block;
    color: var(--c-on-dark-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
  }

  .x-texto__lista > li > span {
    display: block;
    margin-top: var(--sp-4);
  }

  .x-texto__quien {
    font-weight: var(--fw-semibold);
  }

  .x-texto__pantalla {
    color: var(--c-on-dark-2);
    font-size: var(--fs-small);
  }
}

/* 90-legal.css */
/*
  Legal pages (terminos.html and privacidad.html): long-form reading inside the
  shell's column (.l-legal__col). Every rule hangs from .lg-doc, the root element
  of each legal partial, so nothing here reaches the marketing page.

  Blocks
    .lg-doc            root; __titulo is the page h1
    .lg-meta           last-update date and version
    .lg-resumen        plain-language summary box ("En resumen")
    .lg-indice         table of contents (one column on screen, two in print)
    .lg-clausula       one numbered clause; __num is its number
    .lg-nota           a quoted notice inside a clause
    .lg-cifras         the three approved figures
    .lg-tabla          purposes, legal bases and retention (stacks below 640px)
    .lg-ph             pending fact, shown as a highlighted [PLACEHOLDER]
    .lg-fin            closing links
    .lg-volver         link back to the index at the end of each clause (below 1024px)

  Colour, type, spacing and radius come from 00-tokens.css. Print uses the system
  colours Canvas and CanvasText (black on white) and hides the site chrome.
*/

@layer legal {
  .lg-doc {
    color: var(--text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* ------------------------------------------------------------ Title block */

  .lg-doc__titulo {
    font-size: min(var(--fs-h1), 3rem);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  .lg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-32);
    margin-top: var(--sp-20);
    color: var(--text-2);
  }

  .lg-meta > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-8);
  }

  .lg-meta dd {
    color: var(--text);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
  }

  /* --------------------------------------------------------- Summary box */

  .lg-resumen {
    margin-top: clamp(28px, 5vw, 40px);
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--hairline);
    border-radius: var(--r-ui);
    background: var(--c-surface-low);
  }

  .lg-resumen > h2,
  .lg-indice > h2 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
  }

  .lg-resumen > ul {
    margin-top: var(--sp-12);
  }

  .lg-resumen li + li {
    margin-top: var(--sp-8);
  }

  .lg-resumen > p {
    margin-top: var(--sp-16);
    padding-top: var(--sp-16);
    border-top: 1px solid var(--hairline);
    color: var(--text-2);
  }

  /* --------------------------------------------------- Table of contents */

  .lg-indice {
    margin-top: clamp(32px, 6vw, 48px);
  }

  /* Every row draws its own top and bottom rule; neighbours share one line.
     That keeps both columns closed whatever the column break turns out to be. */
  .lg-indice__lista {
    margin-top: var(--sp-12);
  }

  .lg-indice__lista > li {
    border-top: 1px solid var(--hairline);
    box-shadow: 0 1px 0 var(--hairline);
    break-inside: avoid;
  }

  .lg-indice__enlace {
    display: flex;
    align-items: baseline;
    gap: var(--sp-8);
    min-height: var(--tap);
    padding: var(--sp-12) 0;
    border-radius: var(--r-4);
    color: var(--text);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
  }

  .lg-indice__num {
    flex: none;
    min-width: 1.75em;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  @media (hover: hover) {
    .lg-indice__enlace:hover {
      color: var(--link);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
    }
  }

  @media (min-width: 1024px) {
    .lg-indice__enlace {
      min-height: 0;
      padding: var(--sp-8) 0;
    }
  }

  /* The index heading is the target of the links back from each clause: html already pads the scroll position */
  .lg-indice > h2 {
    scroll-margin-top: 0;
  }

  /* Link back to the index at the end of each clause, phones and tablets only */
  .lg-volver {
    display: none;
  }

  @media (max-width: 1023.98px) {
    .lg-volver {
      display: block;
    }
  }

  .lg-volver__enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    border-radius: var(--r-4);
    color: var(--link);
    font-weight: var(--fw-semibold);
  }

  @media (hover: hover) {
    .lg-volver__enlace:hover {
      color: var(--link-hover);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
    }
  }

  /* -------------------------------------------------------------- Clauses */

  /* html already pads the scroll position for the fixed header, so the clause
     itself adds nothing: an index link lands with the rule just under the header */
  .lg-clausula {
    margin-top: clamp(36px, 6vw, 56px);
    padding-top: clamp(28px, 5vw, 40px);
    border-top: 1px solid var(--hairline);
    scroll-margin-top: 0;
  }

  .lg-indice + .lg-clausula {
    margin-top: clamp(40px, 7vw, 64px);
    border-top-color: var(--hairline-strong);
  }

  .lg-clausula > h2 {
    position: relative;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
  }

  .lg-clausula__num {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  /* On wide screens the number hangs in the margin and the title lines up with the text */
  @media (min-width: 1024px) {
    .lg-clausula__num {
      position: absolute;
      top: 0;
      right: 100%;
      margin-right: var(--sp-16);
      white-space: nowrap;
    }
  }

  .lg-clausula > h3 {
    margin-top: var(--sp-32);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
  }

  .lg-clausula > h2 + *,
  .lg-clausula > h3 + * {
    margin-top: var(--sp-12);
  }

  .lg-clausula > :is(p, ul, ol, table, dl) + :is(p, ul, ol, table, dl) {
    margin-top: var(--sp-16);
  }

  .lg-clausula li + li {
    margin-top: var(--sp-8);
  }

  .lg-clausula li > :is(ul, ol) {
    margin-top: var(--sp-8);
  }

  /* A notice quoted inside a clause */
  .lg-nota {
    padding: var(--sp-16) var(--sp-20);
    border-radius: var(--r-control);
    background: var(--fill-soft);
    font-weight: var(--fw-medium);
  }

  /* The three approved figures */
  .lg-cifras {
    border-top: 1px solid var(--hairline);
  }

  .lg-cifras > li {
    padding: var(--sp-12) 0;
    border-bottom: 1px solid var(--hairline);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-fig);
  }

  .lg-clausula .lg-cifras > li + li {
    margin-top: 0;
  }

  /* ------------------------------------------------------------- Pending */

  .lg-ph {
    padding: 0.08em 0.32em;
    border-radius: var(--r-4);
    background: var(--tone-warning-bg);
    box-shadow: inset 0 0 0 1px var(--tone-warning-bd);
    color: var(--tone-warning-fg);
    font-size: 0.9375em;
    font-weight: var(--fw-semibold);
    letter-spacing: 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* --------------------------------------------------------------- Table */

  .lg-tabla {
    width: 100%;
    border-top: 1px solid var(--hairline-strong);
  }

  .lg-tabla caption {
    padding-bottom: var(--sp-12);
    color: var(--text-2);
    font-weight: var(--fw-medium);
    text-align: left;
    caption-side: top;
  }

  .lg-tabla th,
  .lg-tabla td {
    padding: var(--sp-16) var(--sp-24) var(--sp-16) 0;
    border-bottom: 1px solid var(--hairline);
    text-align: left;
    vertical-align: top;
  }

  .lg-tabla th:last-child,
  .lg-tabla td:last-child {
    padding-right: 0;
  }

  .lg-tabla thead th {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-12);
    border-bottom-color: var(--hairline-strong);
    color: var(--text-2);
    font-weight: var(--fw-semibold);
    vertical-align: bottom;
  }

  .lg-tabla tbody th {
    width: 36%;
    font-weight: var(--fw-semibold);
  }

  .lg-tabla tbody td {
    color: var(--text-2);
  }

  /* Below 640px every row becomes a block: purpose, then label and value pairs */
  @media (max-width: 639.98px) {
    .lg-tabla,
    .lg-tabla caption,
    .lg-tabla tbody,
    .lg-tabla tr,
    .lg-tabla th,
    .lg-tabla td {
      display: block;
    }

    .lg-tabla {
      border-top: 0;
    }

    .lg-tabla caption {
      border-bottom: 1px solid var(--hairline-strong);
    }

    .lg-tabla thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }

    .lg-tabla tbody tr {
      padding: var(--sp-20) 0;
      border-bottom: 1px solid var(--hairline);
    }

    .lg-tabla tbody th,
    .lg-tabla tbody td {
      width: auto;
      padding: 0;
      border: 0;
    }

    .lg-tabla tbody td {
      margin-top: var(--sp-12);
    }

    .lg-tabla tbody td::before {
      content: attr(data-label);
      display: block;
      margin-bottom: var(--sp-2);
      color: var(--text-3);
      font-size: var(--fs-caption);
      font-weight: var(--fw-semibold);
      line-height: var(--lh-small);
    }
  }

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

  .lg-fin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4) var(--sp-32);
    margin-top: clamp(40px, 7vw, 64px);
    padding-top: var(--sp-24);
    border-top: 1px solid var(--hairline-strong);
  }

  .lg-fin__enlace {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    min-height: var(--tap);
    border-radius: var(--r-4);
    color: var(--link);
    font-weight: var(--fw-semibold);
  }

  .lg-fin__enlace > .c-icon {
    width: 20px;
    height: 20px;
  }

  @media (hover: hover) {
    .lg-fin__enlace:hover {
      color: var(--link-hover);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
    }
  }

  /* ---------------------------------------------------------------- Print */

  @media print {
    /* Site chrome off: fixed header, menu sheet, skip link, footer, dialogs */
    body:has(> .l-legal) > :is(.c-header, .c-menu, .c-footer, .c-sticky-cta, .u-skip, dialog) {
      display: none;
    }

    .l-legal ~ .c-footer,
    .l-legal ~ dialog {
      display: none;
    }

    :root:has(.l-legal),
    :root:has(.l-legal) body {
      background: Canvas;
    }

    :root:has(.l-legal) body {
      display: block;
      min-height: 0;
    }

    .l-legal {
      --text: CanvasText;
      --text-2: CanvasText;
      --text-3: CanvasText;
      --heading: CanvasText;
      --link: CanvasText;
      --hairline: CanvasText;
      --hairline-strong: CanvasText;
      --fill-soft: Canvas;
      padding: 0;
      background: Canvas;
      color: CanvasText;
    }

    .l-legal > .l-container {
      max-width: none;
      padding: 0;
    }

    .l-legal .l-legal__col {
      max-width: none;
    }

    .l-legal__col > .c-aviso {
      border-color: CanvasText;
      background: Canvas;
      color: CanvasText;
    }

    .lg-doc {
      font-size: 10.5pt;
      line-height: 1.45;
    }

    .lg-doc__titulo {
      font-size: 22pt;
    }

    .lg-clausula > h2 {
      font-size: 13pt;
    }

    .lg-clausula > h3,
    .lg-resumen > h2,
    .lg-indice > h2 {
      font-size: 11pt;
    }

    .lg-doc :is(h1, h2, h3) {
      break-after: avoid;
    }

    .lg-doc :is(p, li) {
      orphans: 3;
      widows: 3;
    }

    .lg-resumen,
    .lg-nota,
    .lg-cifras,
    .lg-tabla tr {
      break-inside: avoid;
    }

    .lg-resumen,
    .lg-nota {
      border: 1px solid CanvasText;
      background: Canvas;
    }

    .lg-clausula {
      margin-top: 18pt;
      padding-top: 12pt;
      border-top-width: 0.5pt;
    }

    .lg-clausula__num {
      position: static;
      margin-right: 0;
    }

    .lg-indice__lista {
      columns: 2;
      column-gap: 24pt;
    }

    .lg-indice__lista > li {
      border: 0;
      box-shadow: none;
    }

    .lg-indice__enlace {
      min-height: 0;
      padding: 2pt 0;
    }

    .lg-doc a {
      color: CanvasText;
      text-decoration: none;
    }

    /* Bracketed capitals, bold and underlined: a border would be sliced at page breaks */
    .lg-ph {
      padding: 0;
      background: Canvas;
      box-shadow: none;
      color: CanvasText;
      text-decoration: underline;
      text-decoration-thickness: 0.75pt;
      text-underline-offset: 0.2em;
    }

    .lg-fin,
    .lg-volver {
      display: none;
    }
  }
}

/* 95-forced-colors.css */
/*
  Windows contrast themes (forced-colors: active).
  The browser swaps the brand colours for the visitor's palette and removes
  gradients and shadows. These rules put back what that takes away: the edge of
  each control and surface, the mark of the selected item, the film's progress
  and a logo that can be read on any canvas. System colours only, except on the
  two things kept as authored: the logo plates and the explainer stage.
*/

@layer utilities {
  @media (forced-colors: active) {
    /* ---------------------------------------------------- Edges of controls */

    /* The fill and the inset edge are gone: every button gets a real border */
    .c-btn:not(.x-stage .c-btn) {
      border: 2px solid ButtonText;
    }

    .c-btn:disabled,
    .c-btn[aria-disabled="true"] {
      border-color: GrayText;
      color: GrayText;
    }

    .s-plataforma__flecha {
      border: 1px solid ButtonText;
    }

    /* Gallery chooser: each option is drawn by a shadow and a fill */
    .s-plataforma__opcion {
      border: 1px solid ButtonText;
    }

    .s-plataforma__flecha[aria-disabled="true"],
    .s-plataforma__herramienta[aria-disabled="true"] {
      border-color: GrayText;
      color: GrayText;
    }

    /* ---------------------------------------- Surfaces drawn by a shadow */

    .c-dialog,
    .c-hoja {
      border: 1px solid CanvasText;
    }

    .c-menu {
      border-left: 1px solid CanvasText;
    }

    .c-sticky-cta {
      border-top: 1px solid CanvasText;
    }

    /* ------------------------------------------------- Selected and filled */

    /* Gallery chooser: the chosen option is filled with the highlight colour, text and
       icon included, and keeps a thicker edge */
    .s-plataforma__opcion.is-elegida {
      forced-color-adjust: none;
      border-color: Highlight;
      background: Highlight;
      box-shadow: inset 0 0 0 2px HighlightText;
      color: HighlightText;
    }

    .s-plataforma__opcion.is-elegida .s-plataforma__opcion-n {
      background: HighlightText;
      color: Highlight;
    }

    .s-plataforma__opcion.is-elegida .s-plataforma__opcion-marca > .c-icon,
    .s-plataforma__opcion.is-elegida .s-plataforma__opcion-avance,
    .s-plataforma__opcion.is-elegida .s-plataforma__opcion-descripcion {
      color: HighlightText;
    }

    .s-plataforma__opcion.is-elegida:focus-visible {
      outline-color: Highlight;
    }

    .s-plataforma__opcion-n {
      border: 1px solid ButtonText;
    }

    /* Situations: the mark beside the selected one */
    .s-situaciones__tab::before {
      background-color: Highlight;
    }

    /* Time bars: the long one and the short one */
    .s-problema__barra-relleno {
      background-color: CanvasText;
    }

    .s-problema__barra--corta .s-problema__barra-relleno {
      background-color: Highlight;
    }

    /* Film player: track, progress, chapter ticks and thumb */
    .x-scrub__pista {
      background-color: GrayText;
    }

    .x-scrub__avance {
      background-color: Highlight;
    }

    .x-scrub__pista > i {
      background-color: CanvasText;
    }

    .x-scrub__input::-webkit-slider-thumb {
      background-color: ButtonText;
    }

    .x-scrub__input::-moz-range-thumb {
      background-color: ButtonText;
    }

    /* The chevron of an accordion without its own icon is a masked fill */
    .c-acordeon > summary:not(:has(.c-icon))::after {
      background-color: CanvasText;
    }

    /* Icons take the colour of the text beside them */
    .c-icon:not(.x-stage .c-icon) {
      color: inherit;
    }

    /* The dot of a status chip */
    .c-chip--dot::before,
    .c-chip--live::before {
      background-color: CanvasText;
    }

    /* Case line of the problem section: the stations and the stretches between them */
    .s-problema__estacion::before,
    .s-problema__estacion:not(:last-child)::after {
      background-color: CanvasText;
    }

    .s-problema__estacion--espera:not(:last-child)::after {
      background-color: Highlight;
    }

    /* Waveforms outside the film are a masked fill */
    .c-onda:not(.x-stage .c-onda) {
      background-color: CanvasText;
    }

    /* Sample audit: the mark beside each finding */
    .s-entregables__hallazgo--inconsistencia > dt::before,
    .s-entregables__hallazgo--omision > dt::before {
      background-color: CanvasText;
    }

    /* ------------------------------------------- Kept as they were drawn */

    /* The film and its poster are a picture: navy stage, own colours */
    .x-stage {
      forced-color-adjust: none;
    }

    /* The logo is a bitmap: it gets a plate of its own colour scheme */
    .c-header__logo,
    .c-footer__logo,
    .c-menu__logo {
      forced-color-adjust: none;
      margin-left: calc(-1 * var(--sp-8));
      padding-inline: var(--sp-8);
    }

    .c-header__logo,
    .c-footer__logo {
      background-color: var(--c-navy-deep);
    }

    .c-menu__logo {
      background-color: var(--c-white);
    }

    .c-header__logo-img--white {
      left: var(--sp-8);
      opacity: 1;
    }

    .c-header__logo-img--color {
      opacity: 0;
    }

    .c-header__logo:focus-visible,
    .c-footer__logo:focus-visible,
    .c-menu__logo:focus-visible {
      outline-color: Highlight;
    }
  }
}