/* ============================================================
   main.css — GENERADO por scripts/build_css.py. NO editar a mano.
   Edite los archivos fuente en css/** y reejecute el script.
   Bundle de una sola petición (sin waterfall de @import). §16.6.
   ============================================================ */
@layer settings, base, layout, components, pages, utilities;

/* ===== settings/fonts.css ===== */
@layer settings {
/* ============================================================
   settings/fonts.css — Lato auto-alojada (woff2, subconjunto latin)
   Elimina la dependencia de Google Fonts: mejora el rendimiento
   (sin saltos a fonts.googleapis.com/gstatic.com en la ruta crítica)
   y la privacidad/cumplimiento GDPR. font-display: swap → el texto se
   pinta de inmediato con la fuente de respaldo y cambia a Lato al cargar.
   ============================================================ */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-900-normal.woff2") format("woff2");
}

/* Fraunces — display serif de alto contraste para titulares editoriales.
   Variable (ejes opsz + wght): un solo archivo cubre todos los pesos y el
   tamaño óptico, que fijamos alto (opsz 144) en los headings para máximo
   contraste de display. Auto-alojada (OFL) como Lato; sin Google Fonts. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-opsz-wght-normal.woff2") format("woff2");
}
}

/* ===== settings/tokens.color.css ===== */
@layer settings {
/* ============================================================
   tokens.color.css — Paleta de marca y roles semánticos
   Capa: settings (asignada por main.css vía @import layer(settings))
   Fuente: Manual de Identidad Signia v1.0 + PLAN §4.1
   Regla: los componentes consumen SIEMPRE roles semánticos
   (--surface, --text-primary, --link…), nunca los hex crudos.
   ============================================================ */
:root {
  /* —— Marca (manual v1.0) —— */
  --teal: #00a69c;   /* Primario / identidad */
  --navy: #333b4f;   /* Institucional / texto / superficies oscuras */
  --gray: #6d6e70;   /* Secundario / apoyo */

  /* —— Escala Teal (derivada; 500 = marca) —— */
  --teal-900: #004a45;
  --teal-800: #006a64;
  --teal-700: #007a72; /* 700 = teal accesible para texto/links sobre claro */
  --teal-600: #008c84;
  --teal-500: #00a69c; /* marca */
  --teal-400: #33b8af;
  --teal-300: #66cac3;
  --teal-200: #b3e5e1;
  --teal-100: #e6f6f5;

  /* —— Escala Navy —— */
  --navy-900: #1e2330;
  --navy-800: #272d3c;
  --navy-700: #333b4f; /* marca */
  --navy-600: #475063;
  --navy-500: #5c6678;
  --navy-300: #9aa1ae;
  --navy-100: #e8eaed;
  --navy-050: #f3f4f6;

  /* —— Escala Gris —— */
  --gray-700: #54565a;
  --gray-600: #6d6e70; /* marca */
  --gray-400: #9a9b9d;
  --gray-200: #d7d8d9;
  --gray-100: #ededee;

  /* —— Neutros / papel —— */
  --white: #ffffff;
  --paper: #f7f8f8; /* off-white para secciones alternas */
  --ink: #1e2330;

  /* ============================================================
     Paleta extendida — docs/brief-paleta-extendida-signia.md
     Regla 60·30·10: ~60% fondos claros, ~30% navy+teal, ~10% acentos.
     Coral/ámbar como TEXTO solo sobre navy o dentro de su tinte;
     nunca texto pequeño de acento sobre fondos claros.
     Máx. 2 acentos distintos por componente. El teal sigue siendo
     el color dominante de la marca; el logo es intocable.
     ============================================================ */

  --gridline: rgba(51, 59, 79, 0.09); /* retícula editorial de fondo (section--lines) */

  /* —— Acentos (máx. ~10% de la superficie) —— */
  --coral: #f2705e; /* energía: hovers, subrayados, micro-detalles (3.9:1 sobre navy → solo texto ≥24px; 2.9:1 sobre blanco → solo decorativo) */
  --ambar: #f2b84b; /* cifras destacadas, badges, iconos sobre navy (6.2:1 sobre navy ✓ texto; 1.8:1 sobre blanco → solo decorativo) */
  --menta: #8fe3d9; /* etiquetas suaves, iconos, fondos de chip (~8:1 sobre navy ✓ texto) */
  --cielo: #5fb4e5; /* gráficos, enlaces secundarios, datos (4.9:1 sobre navy ✓ texto normal) */

  /* —— Tintes de acento (fondos de pill/tag/chip) + texto asignado (>4.5:1) —— */
  --coral-tinte: #fbddd6;
  --coral-tinte-text: #a03a26;
  --ambar-tinte: #fbedd2;
  --ambar-tinte-text: #8a5a10;
  --menta-tinte: #dff7f4;
  --menta-tinte-text: #00786f;
  --cielo-tinte: #dfeffa;
  --cielo-tinte-text: #1f6fa8;

  /* —— Fondos de sección (alternar en vez de blanco continuo; navy >10:1 ✓) —— */
  --espuma: #eff8f7; /* fresco, teal al ~5% */
  --arena: #fbf5ea;  /* cálido, editorial */
  --niebla: #eef1f5; /* neutro frío, navy al ~5% */

  /* —— Derivados —— */
  --teal-profundo: #00786f; /* texto/enlaces teal sobre espuma/arena/niebla (mejor contraste que el teal puro) */
  --navy-profundo: #252b3b; /* footer, secciones muy oscuras */

  /* —— Roles semánticos (USAR SIEMPRE estos en componentes) —— */
  --surface: var(--white);
  --surface-muted: var(--paper);
  --surface-inverse: var(--navy-700);
  --surface-inverse-deep: var(--navy-900);
  --surface-brand: var(--teal-500);

  --text-primary: var(--navy-700);
  --text-secondary: var(--gray-600);
  --text-on-inverse: #edeff2;        /* sobre navy (~10:1) */
  --text-muted-inverse: #aeb4c0;
  --text-brand: var(--teal-700);     /* texto/links teal sobre claro (accesible ~5.2:1) */
  --text-on-brand: var(--white);     /* solo texto grande/bold sobre teal */

  --border-subtle: var(--navy-100);
  --border-strong: var(--navy-300);
  --link: var(--teal-700);
  --link-hover: var(--teal-800);
  --focus-ring: var(--teal-500);

  /* Estados (accesibles sobre claro) */
  --success: #1e7f5c;
  --warning: #9a6b00;
  --error: #b3261e;
  --info: var(--teal-700);
}
}

/* ===== settings/tokens.type.css ===== */
@layer settings {
/* ============================================================
   tokens.type.css — Tipografía Lato + escala fluida
   Capa: settings · Fuente: Manual v1.0 + PLAN §4.3
   ============================================================ */
:root {
  --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;
  --fw-display: 560; /* peso de los titulares serif: autoritario pero elegante */

  /* Escala fluida (min … max) — base 18px, ratio ~1.25 móvil / 1.333 desktop */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);  /* notas, captions */
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.125rem); /* cuerpo */
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);  /* lead */
  --step-2:  clamp(1.50rem, 1.30rem + 1.00vw, 2.00rem);  /* h4/h3 */
  --step-3:  clamp(1.90rem, 1.55rem + 1.70vw, 2.75rem);  /* h2 */
  --step-4:  clamp(2.40rem, 1.85rem + 2.70vw, 3.75rem);  /* h1 */
  --step-5:  clamp(3.00rem, 2.10rem + 4.50vw, 5.50rem);  /* hero display */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --measure: 68ch;
  --tracking-label: 0.14em; /* etiquetas en versalitas (manual) */
  --tracking-display: -0.02em; /* interletraje negativo para Lato 900 a gran escala */
  --tracking-serif: -0.01em; /* serif display: necesita más aire que Lato 900 */
}
}

/* ===== settings/tokens.space.css ===== */
@layer settings {
/* ============================================================
   tokens.space.css — Espaciado fluido y ritmo
   Capa: settings · Fuente: PLAN §4.4
   ============================================================ */
:root {
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem); /* padding vertical de sección */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --flow: var(--space-sm); /* ritmo vertical por defecto en prosa (.u-flow) */
}
}

/* ===== settings/tokens.motion.css ===== */
@layer settings {
/* ============================================================
   tokens.motion.css — Duraciones y curvas de animación
   Capa: settings · Fuente: PLAN §4.4
   Nota: bajo prefers-reduced-motion las duraciones colapsan a 0.
   ============================================================ */
:root {
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-xslow: 1000ms;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1); /* "signia smooth" */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-xslow: 0ms;
  }
}
}

/* ===== settings/tokens.layout.css ===== */
@layer settings {
/* ============================================================
   tokens.layout.css — Contenedores, header, radios, sombras, capas Z
   Capa: settings · Fuente: PLAN §4.4 + §19 (C/D)
   ============================================================ */
:root {
  --container: 1280px;
  --container-wide: 1440px;
  --container-narrow: 768px;

  --header-height: 72px;
  --header-height-scrolled: 64px; /* reservar para evitar CLS del header inyectado */
  --scroll-offset: calc(var(--header-height) + 1rem); /* scroll-margin-top de anclas */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(30, 35, 48, 0.06), 0 1px 3px rgba(30, 35, 48, 0.08);
  --shadow-md: 0 4px 12px rgba(30, 35, 48, 0.08), 0 2px 6px rgba(30, 35, 48, 0.06);
  --shadow-lg: 0 18px 40px rgba(30, 35, 48, 0.14);

  --z-header: 1000;
  --z-dropdown: 1010;
  --z-mobile-menu: 1020;
  --z-modal: 1100;
  --z-toast: 1200;

  /* Breakpoints (documentados; en CSS se usan en media queries):
     xs<480  sm≥480  md≥640  lg≥768  xl≥1024  2xl≥1280  3xl≥1536 */
}
}

/* ===== base/reset.css ===== */
@layer base {
/* ============================================================
   reset.css — Reset moderno (capa base)
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

:target {
  scroll-margin-top: var(--scroll-offset);
}

/* Quita animaciones para quien lo prefiera (refuerzo global a tokens.motion) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}

/* ===== base/root.css ===== */
@layer base {
/* ============================================================
   root.css — Superficie e idioma base del documento (capa base)
   ============================================================ */
html {
  font-family: var(--font-sans);
  font-size: 100%; /* respeta el zoom del usuario */
  color: var(--text-primary);
  background-color: var(--surface);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-size: var(--step-0);
  font-weight: var(--fw-regular);
  text-rendering: optimizeLegibility;
}

/* Selección coherente con marca */
::selection {
  background-color: var(--teal-200);
  color: var(--navy-900);
}

/* Contenedor de página: evita scroll horizontal en 320→1536 */
body {
  overflow-x: hidden;
}
}

/* ===== base/typography.css ===== */
@layer base {
/* ============================================================
   typography.css — Jerarquía tipográfica base (capa base)
   Fuente: Manual v1.0 (jerarquía) + PLAN §4.3
   Display/Titulares: Lato Black 900 · Subtítulos: Bold 700 teal/navy
   Cuerpo: Regular 400 · Etiquetas/eyebrow: Light 300 versalitas
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

/* Titulares editoriales (primer nivel): display serif Fraunces con el tamaño
   óptico fijado alto para el contraste de display. h4–h6 siguen en Lato porque
   funcionan como etiquetas/UI, no como titulares. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  letter-spacing: var(--tracking-serif);
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
  line-height: var(--lh-snug);
}

h4 {
  font-size: var(--step-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h5 {
  font-size: var(--step-0);
  font-weight: var(--fw-bold);
}

h6 {
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

/* Lead / entradilla */
.lead {
  font-size: var(--step-1);
  font-weight: var(--fw-light);
  color: var(--text-secondary);
  max-width: var(--measure);
}

/* Eyebrow / kicker — etiqueta que precede un titular (Manual: Light versalitas) */
.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: var(--fw-light);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-brand);
}

/* Enlaces de cuerpo */
.prose a,
a.link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

.prose a:hover,
a.link:hover {
  color: var(--link-hover);
}

/* Prosa: ritmo vertical y medida */
.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-block-start: var(--space-md);
}

.prose :is(h2, h3, h4) {
  margin-block-start: var(--space-xl);
}

/* El primer hijo no arrastra margen superior: el aire lo pone la sección.
   Sin esto, un prose que abre con h2 queda desalineado frente a columnas
   vecinas (p. ej. Trayectoria vs. Áreas de práctica en los perfiles). */
.prose > :first-child {
  margin-block-start: 0;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.25em;
}

.prose li + li {
  margin-block-start: var(--space-2xs);
}

small,
.caption {
  font-size: var(--step--1);
  color: var(--text-secondary);
}

strong,
b {
  font-weight: var(--fw-bold);
}
}

/* ===== base/a11y.css ===== */
@layer base {
/* ============================================================
   a11y.css — Accesibilidad transversal (capa base)
   PLAN §12 + §4.2 · WCAG 2.2 AA
   ============================================================ */

/* Foco visible coherente en todo elemento interactivo (2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* No quitamos el foco a quien navega con teclado */
:focus:not(:focus-visible) {
  outline: none;
}

/* Objetivos táctiles mínimos (2.5.8 Target Size) en controles de navegación */
@media (pointer: coarse) {
  a,
  button,
  [role="button"],
  input,
  select {
    min-height: 44px;
  }
}

/* Más contraste si el usuario lo pide */
@media (prefers-contrast: more) {
  :root {
    --border-subtle: var(--navy-300);
    --text-secondary: var(--gray-700);
  }
}

/* Oculta visualmente pero deja accesible a lectores de pantalla
   (variante utilitaria en utilities.css: .u-visually-hidden) */
[hidden] {
  display: none !important;
}
}

/* ===== base/print.css ===== */
@layer base {
/* ============================================================
   print.css — Hoja de impresión base (capa base)
   Legible para bios y guías (checklist QA §17.1).
   ============================================================ */
@media print {
  :root {
    --surface: #fff;
    --text-primary: #000;
  }

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }

  /* Oculta el chrome no informativo */
  .site-header,
  .site-footer,
  .skip-link,
  .back-to-top,
  .cookie-consent,
  .language-switch,
  [data-no-print] {
    display: none !important;
  }

  main {
    max-width: 100%;
  }

  /* Muestra el destino de los enlaces */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    word-break: break-all;
  }

  a[href^="#"]::after,
  a[href^="/"]::after {
    content: "";
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }

  img,
  figure,
  table {
    page-break-inside: avoid;
  }

  p,
  blockquote {
    orphans: 3;
    widows: 3;
  }
}
}

/* ===== layout/container.css ===== */
@layer layout {
/* ============================================================
   container.css — Primitivas de composición (capa layout)
   "Every Layout"-style: reutilizables, sin valores mágicos.
   El contenedor centrado atómico vive en utilities (.u-container).
   ============================================================ */

/* Stack: ritmo vertical entre hijos */
.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--l-gap, var(--space-md));
}

/* Cluster: fila que envuelve con separación uniforme (barra de nav, tags) */
.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--l-gap, var(--space-sm));
}

/* Spread: extremos opuestos en una fila (logo … acciones) */
.l-spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--l-gap, var(--space-md));
}

/* Switcher: fila que colapsa a columna bajo un umbral */
.l-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l-gap, var(--space-md));
}

.l-switcher > * {
  flex: 1 1 var(--l-switcher-threshold, 22rem);
}
}

/* ===== layout/grid.css ===== */
@layer layout {
/* ============================================================
   grid.css — Retícula editorial 12 columnas (capa layout)
   PLAN §4.5
   ============================================================ */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* Auto-grid de tarjetas: se redistribuye según el ancho mínimo de ítem */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min, 16rem), 100%), 1fr));
  gap: var(--grid-gap, var(--space-lg));
}

/* Spans útiles en md+ (la retícula colapsa a 1 col en móvil) */
@media (min-width: 48rem) {
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
}

@media (max-width: 47.999rem) {
  .grid-12 {
    grid-template-columns: 1fr;
  }
}
}

/* ===== layout/section.css ===== */
@layer layout {
/* ============================================================
   section.css — Bloques de sección y ritmo vertical (capa layout)
   PLAN §4.4 (--section-y) + §19 D (scroll-margin de anclas)
   ============================================================ */
.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: var(--space-2xl);
}

/* Primer bloque tras hero--route con menos aire superior (Contacto,
   La Firma, etc.): el contenido sube hacia el quiebre diagonal. */
.hero--route + .section--snug {
  --section-y-snug: clamp(1.75rem, 0.9rem + 2.5vw, 3.25rem);
  padding-top: calc(var(--section-y-snug) + var(--hero-cut, clamp(2rem, 3.5vw, 4rem)));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.section--muted {
  background-color: var(--surface-muted);
}

.section--inverse {
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.section--inverse-deep {
  background-color: var(--surface-inverse-deep);
  color: var(--text-on-inverse);
}

/* Tipografía y chrome sobre navy (rompe la racha de pasteles). */
.section--inverse .eyebrow,
.section--inverse-deep .eyebrow {
  color: var(--menta);
}

.section--inverse .section__title,
.section--inverse-deep .section__title {
  color: var(--text-on-inverse);
}

.section--inverse .lead,
.section--inverse-deep .lead,
.section--inverse .section__header p:not(.eyebrow),
.section--inverse-deep .section__header p:not(.eyebrow) {
  color: var(--text-muted-inverse);
}

.section--inverse.section__header--rule,
.section--inverse .section__header--rule,
.section--inverse-deep .section__header--rule {
  border-bottom-color: rgba(237, 239, 242, 0.14);
}

/* Retícula visible sobre fondos oscuros */
.section--inverse.section--lines::before,
.section--inverse-deep.section--lines::before {
  background-image:
    linear-gradient(rgba(237, 239, 242, 0.1), rgba(237, 239, 242, 0.1)),
    linear-gradient(rgba(237, 239, 242, 0.1), rgba(237, 239, 242, 0.1)),
    linear-gradient(rgba(237, 239, 242, 0.1), rgba(237, 239, 242, 0.1)),
    linear-gradient(rgba(237, 239, 242, 0.1), rgba(237, 239, 242, 0.1));
}

.section--brand {
  background-color: var(--surface-brand);
  color: var(--text-on-brand);
}

/* Fondos de la paleta extendida (brief §2/§4.5): alternar en vez de
   blanco continuo. Navy sobre cualquiera de los tres >10:1. Enlaces
   teal directamente sobre estos fondos: usar --teal-profundo. */
.section--espuma {
  background-color: var(--espuma);
}

.section--arena {
  background-color: var(--arena);
}

.section--niebla {
  background-color: var(--niebla);
}

/* Difuminado muy tenue de marca sobre superficies muy blancas (prueba) */
.section--wash {
  background-image: linear-gradient(to left, var(--teal-100), transparent 60%);
}

/* Espejo del wash: permite alternar el lado del tinte entre secciones contiguas */
.section--wash-reverse {
  background-image: linear-gradient(to right, var(--teal-100), transparent 60%);
}

/* —— Quiebre diagonal entre secciones de color ——
   Misma familia que .hero--route + .section y .cta-band--inverse:
   la sección sube y el clip deja ver el fondo anterior en el ángulo.
   Usar en la 2.ª+ banda de una página (la 1.ª tras hero--route ya
   hereda el quiebre automático). Alternar --cut / --cut-mirror para
   no repetir el mismo pico en cascada. */
.section--cut,
.section--cut-mirror {
  position: relative;
  --section-cut: clamp(2rem, 3.5vw, 4rem);
  margin-top: calc(-1 * var(--section-cut));
  padding-top: calc(var(--section-y) + var(--section-cut));
}

.section--cut {
  clip-path: polygon(
    0 var(--section-cut),
    40% 0,
    100% calc(var(--section-cut) * 0.7),
    100% 100%,
    0 100%
  );
}

.section--cut-mirror {
  clip-path: polygon(
    0 calc(var(--section-cut) * 0.7),
    60% 0,
    100% var(--section-cut),
    100% 100%,
    0 100%
  );
}

/* —— Retícula editorial ——
   Finas reglas verticales alineadas al contenedor (bordes + tercios)
   que atraviesan las bandas de color y las "cosen" entre sí. Se pintan
   sobre el fondo pero bajo el contenido (isolation + z-index -1). */
.section--lines {
  position: relative;
  isolation: isolate;
}

.section--lines::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  margin-inline: auto;
  width: 100%;
  max-width: var(--container);
  padding-inline: var(--gutter);
  background-image:
    linear-gradient(var(--gridline), var(--gridline)),
    linear-gradient(var(--gridline), var(--gridline)),
    linear-gradient(var(--gridline), var(--gridline)),
    linear-gradient(var(--gridline), var(--gridline));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position:
    0 0,
    33.33% 0,
    66.67% 0,
    100% 0;
  background-origin: content-box;
  background-clip: content-box;
  pointer-events: none;
}

/* Encabezado de sección: eyebrow + título + intro */
.section__header {
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
}

/* Encabezado con regla: línea de contraste que estructura los bloques
   grandes; el texto conserva su medida de lectura. */
.section__header--rule {
  position: relative;
  max-width: none;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.section__header--rule > * {
  max-width: var(--measure);
}

/* Índice editorial (p. ej. "01 — 03") apoyado sobre la regla, a la
   derecha: voz de revista que anuncia la secuencia numerada. */
.section__index {
  position: absolute;
  right: 0;
  bottom: var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--border-strong);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 48rem) {
  .section__index {
    display: none;
  }
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

/* Encabezado con acción (p. ej. "Ver todos los recursos"): título a la
   izquierda, enlace discreto a la derecha sobre la regla. */
.section__header--with-action {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}

.section__header--with-action > :first-child {
  min-width: min(100%, 18rem);
  flex: 1 1 16rem;
}

.section__header--with-action .section__title {
  margin-bottom: 0;
}

.section__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
  margin-bottom: 0.15em; /* alinea ópticamente con la línea base del h2 */
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-brand);
  white-space: nowrap;
}

.section__action .icon {
  transition: transform var(--dur-base) var(--ease-brand);
}

.section__action:hover .icon,
.section__action:focus-visible .icon {
  transform: translateX(0.2rem);
}

.section__title {
  margin-block: var(--space-2xs) var(--space-sm);
}

/* Anclas internas (#quienes-somos, #grupo-fm…) no quedan bajo el header fijo */
[id] {
  scroll-margin-top: var(--scroll-offset);
}
}

/* ===== layout/header.css ===== */
@layer layout {
/* ============================================================
   header.css — site-header sticky (capa layout)
   PLAN §6 (site-header) + §19 C (CLS del header inyectado)
   Estados: por defecto sólido; .is-transparent sobre hero;
   .is-scrolled al desplazar; .is-open (drawer móvil).
   Las internas del menú están en components/nav|dropdown|mega-menu.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  min-height: var(--header-height); /* reserva → evita CLS al inyectar */
  background-color: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    min-height var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  min-height: var(--header-height-scrolled);
  box-shadow: var(--shadow-sm);
}

/* Variante transparente sobre hero navy (se vuelve sólida al hacer scroll) */
.site-header.is-transparent:not(.is-scrolled) {
  background-color: transparent;
  border-bottom-color: transparent;
  color: var(--text-on-inverse);
}

/* —— Home statement: el menú se funde con el hero espuma ——
   Sin franja blanca: fondo transparente (las líneas del hero se ven
   detrás). Logo y nav se quedan en colores claros (no es is-transparent
   navy). Al scroll o con el drawer abierto vuelve a superficie sólida.
   El hero se estira bajo el header (margin negativo) en statement.css. */
body:has(.hero--statement) .site-header:not(.is-scrolled):not(.is-open) {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Drawer abierto: barra sólida para legibilidad del panel. */
body:has(.hero--statement) .site-header.is-open {
  background-color: var(--surface);
  border-bottom-color: var(--border-subtle);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: inherit;
  padding-block: var(--space-2xs);
}

/* —— Marca / logo —— */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-3xs); /* área de protección mínima */
}

.site-header__logo {
  height: 40px; /* width≈122px ⇒ respeta mínimo 120px del manual */
  width: auto;
}

.site-header__logo--reverse {
  display: none;
}

.site-header.is-transparent:not(.is-scrolled) .site-header__logo--color {
  display: none;
}

.site-header.is-transparent:not(.is-scrolled) .site-header__logo--reverse {
  display: block;
}

/* —— Panel (nav + acciones): fila en desktop, drawer en móvil —— */
.site-header__panel {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Los estilos del CTA del header ([data-nav-cta]) viven en button.css:
   header.css está en la capa layout y perdería contra .btn (components). */

/* —— Botón hamburguesa —— */
.site-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-brand), opacity var(--dur-fast) var(--ease-out);
}

.hamburger {
  position: relative;
}

.hamburger::before {
  position: absolute;
  top: -7px;
}

.hamburger::after {
  position: absolute;
  top: 7px;
}

.site-header__toggle[aria-expanded="true"] .hamburger {
  background-color: transparent;
}

.site-header__toggle[aria-expanded="true"] .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* —— Responsive: drawer bajo 78rem (1248px) —— el menú horizontal completo
   (8 ítems + idioma + CTA) necesita ~1230px; por debajo pasamos al drawer
   para que la fila nunca se desborde ni se corte el CTA. —— */
@media (max-width: 77.999rem) {
  .site-header__toggle {
    display: inline-flex;
  }

  .site-header__panel {
    position: fixed;
    inset: var(--header-height) 0 0 auto;
    width: min(360px, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--gutter) var(--space-2xl);
    background-color: var(--surface);
    color: var(--text-primary);
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--dur-base) var(--ease-brand),
      visibility 0s linear var(--dur-base);
  }

  .site-header.is-open .site-header__panel {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform var(--dur-base) var(--ease-brand),
      visibility 0s;
  }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    margin-top: auto;
  }

  /* Overlay tras el drawer */
  .site-header.is-open::after {
    content: "";
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background-color: rgba(30, 35, 48, 0.45);
    z-index: -1;
  }
}
}

/* ===== layout/footer.css ===== */
@layer layout {
/* ============================================================
   footer.css — site-footer (capa layout)
   PLAN §6 + §15 (datos de la firma, disclaimer informativo)
   Navy, logo reversa, columnas, redes, legal.
   ============================================================ */
.site-footer {
  /* Versión clara en niebla (el cliente vetó los bloques oscuros);
     el logo del partial pasa a la versión color. */
  background-color: var(--niebla);
  color: var(--text-primary);
  padding-block: var(--space-2xl) var(--space-lg);
  position: relative;
  border-top: 1px solid var(--border-subtle);
}

.site-footer a {
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer a:hover {
  color: var(--teal-profundo);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-xl) var(--space-lg);
}

@media (max-width: 63.999rem) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 30rem) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

.site-footer__brand-logo {
  height: 44px;
  width: auto;
  margin-bottom: var(--space-md);
}

.site-footer__tagline {
  color: var(--text-secondary);
  font-size: var(--step--1);
  max-width: 34ch;
}

.site-footer__col-title {
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-brand);
  margin-bottom: var(--space-sm);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-footer__contact {
  font-style: normal;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.site-footer__social a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
}

.site-footer__social a:hover {
  border-color: var(--teal-profundo);
}

.site-footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  padding: 0;
}

.site-footer__disclaimer {
  margin-top: var(--space-md);
  font-size: var(--step--1);
  color: var(--text-secondary);
  max-width: var(--measure);
}
}

/* ===== components/button.css ===== */
@layer components {
/* ============================================================
   button.css — Botones (capa components)
   PLAN §6 + §4.2: teal-700 con texto blanco = AA; teal-500 solo
   con texto bold ≥16px. Foco visible siempre.
   ============================================================ */
.btn {
  --btn-bg: var(--teal-700);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--teal-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.75em 1.5em;
  min-height: 44px;
  font-size: max(1rem, var(--step-0)); /* ≥16px para contraste de píldoras */
  font-weight: var(--fw-bold);
  line-height: 1.1;
  text-align: center;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background-color: var(--btn-bg-hover);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* —— Variantes —— */
.btn--primary {
  --btn-bg: var(--teal-700);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--teal-800);
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-bg-hover: var(--navy-050);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  border-color: var(--navy-700);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-brand);
  --btn-bg-hover: var(--teal-100);
}

.btn--link {
  --btn-bg: transparent;
  --btn-fg: var(--text-brand);
  min-height: 0;
  padding: 0.25em 0;
  border-radius: var(--radius-sm);
  gap: var(--space-3xs);
}

.btn--link:hover {
  background-color: transparent;
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* —— CTA del header —— en la voz del micro-nav (versalitas) y en
   contorno: el rediseño claro pide menos masa que la píldora teal
   maciza. Se rellena teal al interactuar (blanco/teal-700 ≈ 4.6:1 AA).
   OJO: render.js reescribe su texto desde nav.json — solo estilos aquí.
   Vive en esta capa (components) para ganar a .btn--primary. */
.site-header__actions [data-nav-cta] {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-bg-hover: var(--teal-700);
  border-color: var(--teal-700);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
  padding-block: 0.6em;
}

.site-header__actions [data-nav-cta]:hover,
.site-header__actions [data-nav-cta]:focus-visible {
  --btn-fg: var(--white);
}

/* —— Sobre superficies oscuras —— */
.btn--on-inverse.btn--primary {
  --btn-bg: var(--white);
  --btn-fg: var(--navy-700);
  --btn-bg-hover: var(--menta-tinte);
}

.btn--on-inverse.btn--secondary {
  --btn-fg: var(--text-on-inverse);
  --btn-bg-hover: rgba(255, 255, 255, 0.08);
  border-color: var(--text-on-inverse);
}

/* —— Tamaños y ancho —— */
.btn--lg {
  padding: 1em 2em;
  font-size: var(--step-1);
}

.btn--sm {
  min-height: 36px;
  padding: 0.5em 1em;
  font-size: var(--step--1);
}

.btn--block {
  width: 100%;
}

/* Flecha que evoca el trazo de marca en hover */
.btn .btn__icon {
  transition: transform var(--dur-base) var(--ease-brand);
}

.btn:hover .btn__icon {
  transform: translateX(0.2em);
}
}

/* ===== components/icon.css ===== */
@layer components {
/* ============================================================
   icon.css — Iconos SVG (capa components)
   Uso: <svg class="icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#i-scale"/></svg>
   ============================================================ */
.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  vertical-align: middle;
  stroke-width: 2;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--lg {
  width: 2rem;
  height: 2rem;
}

.icon--xl {
  width: 2.75rem;
  height: 2.75rem;
}
}

/* ===== components/nav.css ===== */
@layer components {
/* ============================================================
   nav.css — Navegación principal (capa components)
   PLAN §6 + §19 B: patrón Disclosure (NO role=menu).
   El árbol se renderiza desde data/nav.<lang>.json (render.js).
   Internas de submenú: dropdown.css / mega-menu.css
   ============================================================ */
.nav {
  display: flex;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
}

.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-2xs);
  /* Micro-nav en versalitas: chrome discreto que cede protagonismo a los
     titulares serif y rima con los eyebrows del sitio. Lato no tiene peso
     medio (300/400/700/900), así que el "peso" lo dan tamaño + tracking. */
  font-size: 0.8125rem; /* ~13px: nav compacto para 8 ítems */
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: inherit;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  /* Marcador ámbar que barre el ítem al pasar el cursor: el mismo gesto
     del resaltado del hero (statement en reposo = ámbar-tinte + navy),
     llevado al chrome. El texto se queda navy (>9:1 sobre el tinte). */
  background-image: linear-gradient(var(--ambar-tinte), var(--ambar-tinte));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-size var(--dur-base) var(--ease-brand);
}

.nav__link:hover,
.nav__trigger:hover,
.nav__link:focus-visible,
.nav__trigger:focus-visible,
.nav__item.is-open > .nav__trigger {
  background-size: 100% 100%;
}

/* Con el submenú abierto o sobre header transparente (texto claro), el
   texto pasa a navy para leerse sobre el tinte ámbar. */
.site-header.is-transparent:not(.is-scrolled) .nav__link:hover,
.site-header.is-transparent:not(.is-scrolled) .nav__trigger:hover,
.site-header.is-transparent:not(.is-scrolled) .nav__item.is-open > .nav__trigger {
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .nav__link,
  .nav__trigger {
    transition-duration: 0ms;
  }
}

/* Ítem activo (aria-current lo marca render.js) — aplica también al trigger,
   que es un enlace real a su índice (/equipo, /servicios…).
   Refuerzo discreto: tinte ámbar en reposo (misma receta del hover) + tinta
   brand + raya inferior teal. Sin pill, sin peso extra: se lee al primer
   vistazo y no compite con el barrido del hover.
   box-shadow (no ::after) para no pelear con el puente hover de triggers
   abiertos en dropdown.css. */
.nav__link[aria-current="page"],
.nav__trigger[aria-current="page"] {
  color: var(--text-brand);
  background-size: 100% 100%;
  box-shadow: inset 0 -2px 0 0 var(--teal-500);
}

/* Hover/foco sobre el activo: el tinte ya está lleno; se mantiene brand. */
.nav__link[aria-current="page"]:hover,
.nav__trigger[aria-current="page"]:hover,
.nav__link[aria-current="page"]:focus-visible,
.nav__trigger[aria-current="page"]:focus-visible,
.nav__item.is-open > .nav__trigger[aria-current="page"] {
  color: var(--text-brand);
}

/* Header transparente: mismo tinte ámbar + navy (legible sobre el tinte)
   y raya teal; unifica el activo con el hover en lugar del solo teal-200. */
.site-header.is-transparent:not(.is-scrolled) .nav__link[aria-current="page"],
.site-header.is-transparent:not(.is-scrolled) .nav__trigger[aria-current="page"] {
  color: var(--text-primary);
  background-size: 100% 100%;
  box-shadow: inset 0 -2px 0 0 var(--teal-500);
}

/* —— Comportamiento en el drawer móvil (lista vertical) —— */
@media (max-width: 77.999rem) {
  .nav {
    width: 100%;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav__item {
    border-bottom: 1px solid var(--border-subtle);
  }

  .nav__link,
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-2xs);
    font-size: var(--step--1); /* versalitas legibles en lista vertical */
    letter-spacing: 0.06em;
  }

  /* Drawer: raya lateral en vez de inferior (filas altas; se lee mejor). */
  .nav__link[aria-current="page"],
  .nav__trigger[aria-current="page"] {
    box-shadow: inset 3px 0 0 0 var(--teal-500);
  }
}
}

/* ===== components/dropdown.css ===== */
@layer components {
/* ============================================================
   dropdown.css — Submenú disclosure (capa components)
   PLAN §6 / §19 B. Trigger = enlace real con aria-expanded/
   aria-controls: en desktop navega (panel flotante por hover);
   en el drawer móvil alterna el acordeón (dropdown.js).
   ============================================================ */
.nav__trigger {
  cursor: pointer;
}

.nav__chevron {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-brand);
}

.nav__item.is-open > .nav__trigger .nav__chevron {
  transform: rotate(180deg);
}

.nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__submenu-link {
  display: block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav__submenu-link:hover {
  background-color: var(--teal-100);
  color: var(--text-brand);
}

.nav__submenu-sub {
  display: block;
  font-size: var(--step--1);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
}

/* —— Desktop: panel flotante —— */
@media (min-width: 78rem) {
  .nav__submenu {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    left: 0;
    min-width: 18rem;
    padding: var(--space-2xs);
    background-color: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-base) var(--ease-brand),
      visibility 0s linear var(--dur-base);
  }

  /* Puente invisible: con el menú ABIERTO, una franja bajo el botón llega hasta
     el panel para que el hover no se pierda en el hueco (cubre también el alto
     de la barra en el mega, ~29px). Solo activo abierto → sin zona fantasma que
     abra el menú al pasar por debajo cuando está cerrado. */
  .nav__item--has-menu.is-open > .nav__trigger {
    position: relative;
  }
  .nav__item--has-menu.is-open > .nav__trigger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 2.25rem;
  }

  .nav__item.is-open > .nav__submenu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-base) var(--ease-brand),
      visibility 0s;
  }

  /* Submenús alineados al borde derecho no se salen del viewport */
  .nav__item:last-child .nav__submenu:not(.nav__submenu--mega) {
    left: auto;
    right: 0;
  }
}

/* —— Móvil: acordeón dentro del drawer —— */
@media (max-width: 77.999rem) {
  .nav__submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--dur-base) var(--ease-out);
    padding-left: var(--space-2xs);
  }

  .nav__item.is-open > .nav__submenu {
    max-height: 200vh; /* suficiente para listas largas */
    padding-block: var(--space-2xs);
  }

  .nav__submenu-link {
    padding-block: var(--space-xs);
  }
}
}

/* ===== components/mega-menu.css ===== */
@layer components {
/* ============================================================
   mega-menu.css — Mega-menú de Servicios por 4 bloques (capa components)
   PLAN §6 / §7.2. Desktop: panel ancho anclado a la barra del header.
   Móvil: acordeón (hereda de dropdown.css).
   ============================================================ */
.mega {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md) var(--space-lg);
}

.mega__block-title {
  display: block;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-brand);
  padding: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-3xs);
}

.mega__block-title:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* —— Desktop: anclar el panel a la barra (no al ítem) para ir a lo ancho —— */
@media (min-width: 78rem) {
  .nav__item--mega {
    position: static; /* el panel se ancla a .site-header__bar (relative) */
  }

  .nav__submenu--mega {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    min-width: 0;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    padding: var(--space-md);
  }
}

/* Desktop estrecho (1248–1408px): el panel ancho cabe mejor en 2 columnas */
@media (min-width: 78rem) and (max-width: 87.999rem) {
  .mega {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* —— Móvil: bloques apilados dentro del acordeón —— */
@media (max-width: 77.999rem) {
  .mega {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .mega__block-title {
    padding-inline: var(--space-2xs);
  }
}
}

/* ===== components/language-switch.css ===== */
@layer components {
/* ============================================================
   language-switch.css — Selector ES/EN (capa components)
   PLAN §6 / §10. Lleva a la URL equivalente (language-switch.js + url-map.json).
   ============================================================ */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
}

.language-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25em;
  padding: 0.35em 0.5em;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.language-switch__link:hover {
  color: var(--text-brand);
  background-color: var(--teal-100);
}

.language-switch__link[aria-current="true"] {
  color: var(--text-primary);
  background-color: var(--navy-050);
}

.language-switch__sep {
  color: var(--border-strong);
}

/* Sobre header transparente */
.site-header.is-transparent:not(.is-scrolled) .language-switch__link {
  color: var(--text-muted-inverse);
}

.site-header.is-transparent:not(.is-scrolled) .language-switch__link[aria-current="true"] {
  color: var(--text-on-inverse);
  background-color: rgba(255, 255, 255, 0.12);
}

/* En el drawer móvil ocupa toda la fila */
@media (max-width: 77.999rem) {
  .language-switch {
    justify-content: center;
    font-size: var(--step-0);
  }
}
}

/* ===== components/skip-link.css ===== */
@layer components {
/* ============================================================
   skip-link.css — Enlace "saltar al contenido" (capa components)
   PLAN §12. Oculto hasta recibir foco con teclado.
   ============================================================ */
.skip-link {
  position: fixed;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: var(--z-toast);
  padding: var(--space-2xs) var(--space-md);
  background-color: var(--surface);
  color: var(--text-brand);
  font-weight: var(--fw-bold);
  border: 2px solid var(--focus-ring);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform: translateY(-150%);
  transition: transform var(--dur-base) var(--ease-brand);
}

.skip-link:focus {
  transform: translateY(0);
}
}

/* ===== components/back-to-top.css ===== */
@layer components {
/* ============================================================
   back-to-top.css — Botón volver arriba (capa components)
   Aparece tras desplazar (back-to-top.js añade .is-visible).
   ============================================================ */
.back-to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--text-on-brand);
  background-color: var(--teal-700);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(1rem);
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-brand),
    visibility 0s linear var(--dur-base),
    background-color var(--dur-fast) var(--ease-out);
}

.back-to-top:hover {
  background-color: var(--teal-800);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-brand),
    visibility 0s,
    background-color var(--dur-fast) var(--ease-out);
}

.back-to-top__icon {
  width: 1.25rem;
  height: 1.25rem;
}
}

/* ===== components/breadcrumb.css ===== */
@layer components {
/* ============================================================
   breadcrumb.css — Migas de pan (capa components)
   PLAN §6: acompañar con JSON-LD BreadcrumbList en cada página.
   ============================================================ */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--text-secondary);
}

.breadcrumb__item:not(:first-child)::before {
  content: "/";
  color: var(--border-strong);
}

.breadcrumb__link {
  color: var(--text-brand);
}

.breadcrumb__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.breadcrumb__item [aria-current="page"] {
  color: var(--text-secondary);
  font-weight: var(--fw-bold);
}

/* Sobre fondo oscuro */
.breadcrumb--inverse .breadcrumb__item {
  color: var(--text-muted-inverse);
}

.breadcrumb--inverse .breadcrumb__item:not(:first-child)::before {
  color: var(--text-muted-inverse);
}

.breadcrumb--inverse .breadcrumb__link {
  color: var(--teal-200);
}

.breadcrumb--inverse .breadcrumb__item [aria-current="page"] {
  color: var(--text-on-inverse);
}
}

/* ===== components/media.css ===== */
@layer components {
/* ============================================================
   media.css — Sistema de imagen (capa components)
   <figure class="media"><img class="media__img" .../></figure>
   aspect-ratio reservado (CLS 0). Tratamiento duotono navy/teal (§5.4).
   Placeholders de marca mientras llegan las fotos reales del cliente.
   ============================================================ */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--navy-050);
  aspect-ratio: var(--media-ratio, 4 / 3);
}

.media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Duotono de marca: unifica fotografías heterogéneas */
.media--duotone .media__img {
  filter: grayscale(1) contrast(1.04);
}

.media--duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(51, 59, 79, 0.78), rgba(0, 122, 114, 0.55));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.media--portrait {
  --media-ratio: 4 / 5;
}

.media--wide {
  --media-ratio: 16 / 9;
}

/* —— Placeholder de retrato con arte de marca (sin caras falsas) —— */
.avatar-ph {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(0, 166, 156, 0.55), transparent 60%),
    linear-gradient(155deg, var(--navy-700), var(--navy-900));
}

.avatar-ph__mono {
  position: relative;
  z-index: 1;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.92);
}

/* Marca de agua del símbolo en el placeholder */
.avatar-ph__motif {
  position: absolute;
  right: -18%;
  bottom: -12%;
  width: 70%;
  height: auto;
  opacity: 0.1;
  pointer-events: none;
}

/* Banda de imagen ancha (skyline / arquitectura) con superposición.
   Versión clara (el cliente vetó los bloques oscuros): espuma con
   acentos teal/ámbar en vez del gradiente navy→teal. */
.media-band {
  position: relative;
  /* Manifiesto de la página: banda alta y tipografía monumental. */
  min-height: clamp(24rem, 16rem + 26vw, 38rem);
  padding-block: clamp(var(--space-2xl), 8vw, 6rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--espuma);
  color: var(--text-primary);
}

/* El símbolo nítido solo funciona sobre oscuro: fuera en la banda clara. */
.media-band .brand-watermark {
  display: none;
}

.media-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) contrast(1.05);
  opacity: 0.45;
}

/* Contenido centrado de la banda. Wrapper flex en columna: centra el botón
   de forma robusta (es un flex item, no un <p> sujeto al max-width de medida
   tipográfica que lo descentraba). El z-index lo coloca sobre la marca de agua. */
.media-band .u-container {
  position: relative;
  z-index: 1;
}

.media-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  max-width: 62rem;
  margin-inline: auto;
}

/* Eyebrow enmarcado por reglas ámbar (presenta el manifiesto) */
.media-band__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-brand);
}

.media-band__eyebrow::before,
.media-band__eyebrow::after {
  content: "";
  width: 2.75rem;
  height: 2px;
  background-color: var(--ambar);
}

/* Escala de manifiesto: el mismo display del hero (step-5). */
.media-band__title {
  color: var(--text-primary);
  max-width: 22ch;
  font-size: var(--step-5);
  line-height: var(--lh-tight);
}

/* —— Cifras del manifiesto (1904 / 80+ / 0% / BBB) —— */
.media-band__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: center;
  gap: var(--space-lg) 0;
  margin-top: var(--space-xs);
}

.media-band__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-inline: clamp(var(--space-sm), 2.5vw, var(--space-xl));
  text-align: center;
}

.media-band__stat + .media-band__stat {
  border-left: 1px solid var(--border-strong);
}

.media-band__stat-value {
  font-size: var(--step-4);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--text-brand);
  font-variant-numeric: tabular-nums;
}

.media-band__stat-label {
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
  max-width: 18ch;
  margin-inline: auto;
}

/* 2×2: separadores verticales en columnas pares, horizontales en la 2.ª fila */
@media (max-width: 56rem) {
  .media-band__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-band__stat:nth-child(2n + 1) {
    border-left: 0;
  }

  .media-band__stat:nth-child(n + 3) {
    border-top: 1px solid var(--border-strong);
    padding-top: var(--space-md);
  }
}

@media (max-width: 30rem) {
  .media-band__stats {
    grid-template-columns: 1fr;
  }

  .media-band__stat {
    border-left: 0;
  }

  .media-band__stat + .media-band__stat {
    border-left: 0;
    border-top: 1px solid var(--border-strong);
    padding-top: var(--space-md);
  }

  .media-band__stat:nth-child(n + 3) {
    /* ya cubierto por el + .stat de arriba; evita doble borde raro */
    border-top: 1px solid var(--border-strong);
  }
}

.media-band__inner .btn {
  margin-top: var(--space-xs);
}

/* —— Entrada coreografiada de la banda (data-reveal="scene") ——
   Las frases del titular suben desde detrás de una máscara en cascada
   y un subrayado teal se dibuja bajo los datos clave. Los estados
   ocultos viven SOLO bajo no-preference (patrón de utilities.css):
   con movimiento reducido todo nace visible y subrayado. */
.band-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* aire para los descendentes (j, y, q) que la máscara recortaría */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.band-line__inner {
  display: inline-block;
}

.band-key {
  font-style: normal;
  /* Subrayado ámbar (decorativo, brief §5) — más grueso para que se lea
     como marcador sobre el fondo claro. */
  background-image: linear-gradient(var(--ambar), var(--ambar));
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 100% 0.14em;
}

@media (prefers-reduced-motion: no-preference) {
  .media-band[data-reveal] .media-band__eyebrow {
    opacity: 0;
    letter-spacing: 0.5em;
    transition:
      opacity 600ms var(--ease-out),
      letter-spacing 900ms var(--ease-brand);
  }

  .media-band[data-reveal].is-revealed .media-band__eyebrow {
    opacity: 1;
    letter-spacing: var(--tracking-label);
  }

  .media-band[data-reveal] .band-line__inner {
    transform: translateY(120%);
    transition: transform 700ms var(--ease-brand);
  }

  .media-band[data-reveal] .band-line:nth-child(1) .band-line__inner { transition-delay: 120ms; }
  .media-band[data-reveal] .band-line:nth-child(2) .band-line__inner { transition-delay: 220ms; }
  .media-band[data-reveal] .band-line:nth-child(3) .band-line__inner { transition-delay: 320ms; }
  .media-band[data-reveal] .band-line:nth-child(4) .band-line__inner { transition-delay: 420ms; }

  .media-band[data-reveal].is-revealed .band-line__inner {
    transform: none;
  }

  .media-band[data-reveal] .band-key {
    background-size: 0% 0.14em;
    transition: background-size 550ms var(--ease-out);
  }

  .media-band[data-reveal] .band-line:nth-child(1) .band-key { transition-delay: 950ms; }
  .media-band[data-reveal] .band-line:nth-child(2) .band-key { transition-delay: 1120ms; }
  .media-band[data-reveal] .band-line:nth-child(3) .band-key { transition-delay: 1290ms; }
  .media-band[data-reveal] .band-line:nth-child(4) .band-key { transition-delay: 1460ms; }

  .media-band[data-reveal].is-revealed .band-key {
    background-size: 100% 0.14em;
  }

  /* Las cifras entran tras los subrayados… */
  .media-band[data-reveal] .media-band__stats {
    opacity: 0;
    transform: translateY(1rem);
    transition:
      opacity 600ms var(--ease-out) 1550ms,
      transform 600ms var(--ease-brand) 1550ms;
  }

  .media-band[data-reveal].is-revealed .media-band__stats {
    opacity: 1;
    transform: none;
  }

  /* …y el botón cierra la escena. */
  .media-band[data-reveal] .media-band__inner .btn {
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
      opacity 500ms var(--ease-out) 1850ms,
      transform 500ms var(--ease-brand) 1850ms;
  }

  .media-band[data-reveal].is-revealed .media-band__inner .btn {
    opacity: 1;
    transform: none;
  }
}
}

/* ===== components/brand-art.css ===== */
@layer components {
/* ============================================================
   brand-art.css — Motivos decorativos de marca (capa components)
   El símbolo es un "trazo envolvente en movimiento" (§5.3): lo evocamos
   con una cinta SVG abstracta animada (NO es el logotipo) + malla de
   gradiente. Todo respeta prefers-reduced-motion.
   ============================================================ */

/* —— Malla de gradiente animada (fondo de hero oscuro) —— */
.hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__mesh::before,
.hero__mesh::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}

.hero__mesh::before {
  top: -12%;
  right: -6%;
  background: radial-gradient(circle, var(--teal-600), transparent 65%);
}

.hero__mesh::after {
  bottom: -18%;
  left: -8%;
  background: radial-gradient(circle, var(--navy-500), transparent 65%);
}

/* —— Cinta de marca (trazo envolvente abstracto) —— */
.brand-ribbon {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brand-ribbon path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.5;
  /* paths usan pathLength="1" → dibujo completo sin medir longitud real */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ribbon-draw 2.6s var(--ease-brand) forwards;
}

.brand-ribbon path:nth-child(2) { animation-delay: 0.25s; }
.brand-ribbon path:nth-child(3) { animation-delay: 0.5s; }

@keyframes ribbon-draw {
  to { stroke-dashoffset: 0; }
}

/* El movimiento del motif lo aporta el parallax JS (motion.js), no un loop CSS. */

/* —— Símbolo como marca de agua en bandas oscuras ——
   Nítido y recortado (receta del panel del hero); posición fina por
   inline style y movimiento vía parallax JS (data-parallax). La versión
   ampliada+difusa sigue vetada. */
.brand-watermark {
  position: absolute;
  width: clamp(16rem, 30vw, 28rem);
  height: auto;
  opacity: 0.1;
  pointer-events: none;
  /* El PNG viene cortado a ras por la izquierda: desvanecer el borde. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__mesh::before,
  .hero__mesh::after,
  .hero__motif {
    animation: none;
  }
  .brand-ribbon path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
}

/* ===== components/hero.css ===== */
@layer components {
/* ============================================================
   hero.css — Héroes de página (capa components)
   Variantes: --home (display + CTAs + motif), --interior (kicker +
   breadcrumb + título), --route (narrativo).
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  margin-bottom: var(--space-sm);
}

.hero__title {
  max-width: 18ch;
}

.hero__lead {
  margin-top: var(--space-md);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xl);
}

/* Secundario ligero: link de texto + flecha, no un segundo btn--lg. */
.hero__actions .btn--link {
  min-height: 44px;
  padding-inline: 0.15em;
  font-size: var(--step-0);
}

.hero__actions .btn--link .icon {
  transition: transform var(--dur-base) var(--ease-brand);
}

.hero__actions .btn--link:hover .icon,
.hero__actions .btn--link:focus-visible .icon {
  transform: translateX(0.2rem);
}

.hero__actions .btn--link:hover {
  text-decoration: none; /* la flecha ya da feedback de interacción */
}

/* —— Home: superficie navy + display + motif del símbolo —— */
.hero--home {
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 70%);
  color: var(--text-on-inverse);
  padding-block: clamp(3.5rem, 2rem + 9vw, 9rem);
  overflow: hidden;
}

/* —— Variante con fotografía de fondo (duotono navy/teal + legibilidad) —— */
.hero--image {
  position: relative;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}

.hero__bg img,
.hero__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: grayscale(0.5) contrast(1.06) brightness(0.95);
}

/* El póster es la capa base (LCP + fallback); el video va encima. Si el video
   no carga o se oculta (movimiento reducido), el póster queda visible. */
.hero__video {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

/* Superposición: navy denso a la izquierda (texto legible) → tinte teal a la
   derecha, y oscurecido al pie para fundir con la sección siguiente. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      100deg,
      rgba(30, 35, 48, 0.97) 0%,
      rgba(30, 35, 48, 0.86) 34%,
      rgba(38, 45, 60, 0.55) 62%,
      rgba(0, 122, 114, 0.42) 100%
    ),
    linear-gradient(to top, var(--navy-900) 2%, transparent 44%);
}

.hero--home .hero__eyebrow {
  color: var(--teal-300);
}

.hero--home .hero__title {
  font-size: var(--step-5);
  color: var(--white);
  letter-spacing: var(--tracking-serif);
}

.hero--home .hero__lead {
  color: var(--text-muted-inverse);
}

/* Marca de agua del símbolo: retirada (ampliada se veía "muddy" y recreaba el
   efecto cinta). Los héroes de ruta usan el gradiente teal/navy limpio. */
.hero__motif {
  display: none;
}

/* —— Interior: kicker + breadcrumb + título sobre superficie clara —— */
.hero--interior {
  padding-block: var(--space-2xl) var(--space-xl);
  background-color: var(--surface-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.hero--interior .hero__title {
  font-size: var(--step-4);
  max-width: 24ch;
}

.hero--interior .breadcrumb {
  margin-bottom: var(--space-md);
}

/* —— Ruta puente / hubs: version clara ——
   Antes navy profundo; el cliente vetó los bloques oscuros. Misma
   receta que el hero de Home (brief §4.1): espuma, frescor teal al
   ~5%. Sin marca de agua del símbolo — el recorte nítido solo
   funciona sobre oscuro (misma razón que cta-band__motif y
   media-band .brand-watermark: display none en vez de retinte). */
.hero--route {
  overflow: hidden;
  background-color: var(--espuma);
  padding-block: clamp(3rem, 2rem + 7vw, 7rem);
}

/* —— Variante compacta: hojas y legales ——
   Misma receta clara pero banda baja: las hojas comparten la marca
   sin fingir ser portadas (jerarquía por escala, no por peso visual). */
.hero--route.hero--compact {
  padding-block: var(--space-2xl) var(--space-xl);
}

.hero--route.hero--compact .hero__title {
  font-size: var(--step-4);
  max-width: 24ch;
}

.hero--route .breadcrumb {
  margin-bottom: var(--space-md);
}

/* El HTML (generado y manual, ~170 páginas) sigue llevando
   breadcrumb--inverse — mismo motivo que .cta-band--inverse: se
   sobreescribe aquí a los valores del breadcrumb claro por defecto,
   en vez de tocar cada página. */
.hero--route .breadcrumb--inverse .breadcrumb__item {
  color: var(--text-secondary);
}

.hero--route .breadcrumb--inverse .breadcrumb__item:not(:first-child)::before {
  color: var(--border-strong);
}

.hero--route .breadcrumb--inverse .breadcrumb__link {
  color: var(--text-brand);
}

.hero--route .breadcrumb--inverse .breadcrumb__item [aria-current="page"] {
  color: var(--text-secondary);
}

.hero--route .hero__eyebrow {
  color: var(--text-brand);
}

.hero--route .hero__title {
  color: var(--text-primary);
}

.hero--route .hero__lead {
  color: var(--text-secondary);
}

/* —— Quiebre diagonal hacia la sección de contenido ——
   Mismo gesto que .cta-band--inverse: la sección sube sobre el hero y
   el clip-path deja ver su fondo en el ángulo (pico a la derecha).
   Cubre dos DOM reales:
   · sibling directo (.hero--route + .section) — páginas simple
   · índice /servicios: el 1.er bloque vive DENTRO de [data-services-index]
     (render.js), no es sibling del hero — sin este selector el quiebre
     fallaba y se veía un corte horizontal duro (espuma → arena). */
.hero--route + .section,
.hero--route + [data-services-index] > .section:first-of-type {
  position: relative;
  z-index: 1;
  --hero-cut: clamp(2.5rem, 4vw, 5rem);
  margin-top: calc(-1 * var(--hero-cut));
  padding-top: calc(var(--section-y) + var(--hero-cut));
  clip-path: polygon(
    0 calc(var(--hero-cut) * 0.7),
    62% 0,
    100% var(--hero-cut),
    100% 100%,
    0 100%
  );
}

/* —— Trazos verticales a la deriva (variante tenue del home) ——
   Misma receta que .hero--statement (SVG data-URI + drift horizontal),
   con opacidad más baja para no competir con el título en hubs de
   servicios. Activar con .hero--lines junto a .hero--route. */
.hero--route.hero--lines::before,
.hero--route.hero--lines::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

/* Capa A — navy (misma composición que el statement, ~55% de su fuerza). */
.hero--route.hero--lines::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='560' viewBox='0 0 400 560' fill='none'%3E%3Cg stroke='%23333b4f' stroke-linecap='round'%3E%3Cline x1='18' y1='22' x2='18' y2='118' stroke-opacity='.09' stroke-width='1'/%3E%3Cline x1='41' y1='210' x2='41' y2='268' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='67' y1='48' x2='67' y2='290' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='92' y1='340' x2='92' y2='402' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='118' y1='90' x2='118' y2='148' stroke-opacity='.09' stroke-width='1'/%3E%3Cline x1='143' y1='250' x2='143' y2='430' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='169' y1='12' x2='169' y2='72' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='194' y1='180' x2='194' y2='228' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='220' y1='310' x2='220' y2='498' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='246' y1='55' x2='246' y2='165' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='271' y1='400' x2='271' y2='455' stroke-opacity='.09' stroke-width='1'/%3E%3Cline x1='298' y1='130' x2='298' y2='350' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='324' y1='20' x2='324' y2='95' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='350' y1='275' x2='350' y2='335' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='376' y1='160' x2='376' y2='420' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='28' y1='380' x2='28' y2='520' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='80' y1='470' x2='80' y2='540' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='155' y1='470' x2='155' y2='530' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='235' y1='480' x2='235' y2='545' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='310' y1='460' x2='310' y2='530' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='55' y1='300' x2='55' y2='360' stroke-opacity='.05' stroke-width='1'/%3E%3Cline x1='200' y1='70' x2='200' y2='140' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='360' y1='50' x2='360' y2='200' stroke-opacity='.06' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 25rem 35rem;
  opacity: 0.48;
}

/* Capa B — teal, más lenta y aún más suave. */
.hero--route.hero--lines::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='520' viewBox='0 0 360 520' fill='none'%3E%3Cg stroke='%23007a72' stroke-linecap='round'%3E%3Cline x1='24' y1='90' x2='24' y2='210' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='52' y1='30' x2='52' y2='78' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='78' y1='240' x2='78' y2='400' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='108' y1='140' x2='108' y2='190' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='136' y1='320' x2='136' y2='470' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='164' y1='40' x2='164' y2='160' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='192' y1='200' x2='192' y2='255' stroke-opacity='.05' stroke-width='1'/%3E%3Cline x1='220' y1='15' x2='220' y2='95' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='248' y1='280' x2='248' y2='360' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='276' y1='110' x2='276' y2='300' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='304' y1='380' x2='304' y2='455' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='332' y1='60' x2='332' y2='130' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='40' y1='430' x2='40' y2='500' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='95' y1='450' x2='95' y2='505' stroke-opacity='.05' stroke-width='1'/%3E%3Cline x1='180' y1='420' x2='180' y2='510' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='260' y1='430' x2='260' y2='490' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='340' y1='200' x2='340' y2='380' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='12' y1='300' x2='12' y2='360' stroke-opacity='.05' stroke-width='1'/%3E%3Cline x1='150' y1='260' x2='150' y2='310' stroke-opacity='.07' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 22.5rem 32.5rem;
  background-position: 8rem 4rem;
  opacity: 0.38;
}

@media (prefers-reduced-motion: no-preference) {
  .hero--route.hero--lines::before {
    animation: hero-route-lines 260s linear infinite;
  }

  .hero--route.hero--lines::after {
    animation: hero-route-lines 400s linear infinite;
  }

  @keyframes hero-route-lines {
    to {
      transform: translate3d(-50%, 0, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--route.hero--lines::before,
  .hero--route.hero--lines::after {
    width: 100%;
  }
}
}

/* ===== components/statement.css ===== */
@layer components {
/* ============================================================
   statement.css — Hero-statement (capa components)
   Tipografía como protagonista sobre superficie clara, con un
   resaltado teal que recorre las palabras clave (módulo
   statement.js). Referencia de arte: cintillo/hero Eversheds.
   ============================================================ */
/* —— Trazos verticales irregulares (decorativos) ——
   Longitudes y posiciones dispares (no retícula ni guiones iguales).
   SVG en data-URI: cada trazo es una línea corta/media/larga a distintas
   alturas. Dos capas desfasadas + drift lento. */
.hero--statement {
  /* Espuma en vez de blanco (brief §4.1): frescor teal al ~5%. */
  background-color: var(--espuma);
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem) clamp(2.5rem, 2rem + 3vw, 5rem);
  overflow: hidden;
}

/* Estira el hero bajo el header sticky para un solo plano visual
   (menú + statement). El padding-top compensa el solape. */
body:has(.hero--statement) .hero--statement {
  margin-top: calc(-1 * var(--header-height));
  padding-top: calc(clamp(3.5rem, 2.5rem + 5vw, 7rem) + var(--header-height));
}

.hero--statement::before,
.hero--statement::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%; /* loop seamless con translateX(-50%) */
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  /* Desvanecer bordes laterales para que no se lea como jaula. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* Capa A — navy: más trazos, tamaños muy dispares. */
.hero--statement::before {
  /* viewBox 400×560; stroke navy ~8% */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='560' viewBox='0 0 400 560' fill='none'%3E%3Cg stroke='%23333b4f' stroke-linecap='round'%3E%3Cline x1='18' y1='22' x2='18' y2='118' stroke-opacity='.09' stroke-width='1'/%3E%3Cline x1='41' y1='210' x2='41' y2='268' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='67' y1='48' x2='67' y2='290' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='92' y1='340' x2='92' y2='402' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='118' y1='90' x2='118' y2='148' stroke-opacity='.09' stroke-width='1'/%3E%3Cline x1='143' y1='250' x2='143' y2='430' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='169' y1='12' x2='169' y2='72' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='194' y1='180' x2='194' y2='228' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='220' y1='310' x2='220' y2='498' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='246' y1='55' x2='246' y2='165' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='271' y1='400' x2='271' y2='455' stroke-opacity='.09' stroke-width='1'/%3E%3Cline x1='298' y1='130' x2='298' y2='350' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='324' y1='20' x2='324' y2='95' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='350' y1='275' x2='350' y2='335' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='376' y1='160' x2='376' y2='420' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='28' y1='380' x2='28' y2='520' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='80' y1='470' x2='80' y2='540' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='155' y1='470' x2='155' y2='530' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='235' y1='480' x2='235' y2='545' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='310' y1='460' x2='310' y2='530' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='55' y1='300' x2='55' y2='360' stroke-opacity='.05' stroke-width='1'/%3E%3Cline x1='200' y1='70' x2='200' y2='140' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='360' y1='50' x2='360' y2='200' stroke-opacity='.06' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 25rem 35rem;
  opacity: 0.9;
}

/* Capa B — teal: otra composición (más huecos, longitudes distintas). */
.hero--statement::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='520' viewBox='0 0 360 520' fill='none'%3E%3Cg stroke='%23007a72' stroke-linecap='round'%3E%3Cline x1='24' y1='90' x2='24' y2='210' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='52' y1='30' x2='52' y2='78' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='78' y1='240' x2='78' y2='400' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='108' y1='140' x2='108' y2='190' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='136' y1='320' x2='136' y2='470' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='164' y1='40' x2='164' y2='160' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='192' y1='200' x2='192' y2='255' stroke-opacity='.05' stroke-width='1'/%3E%3Cline x1='220' y1='15' x2='220' y2='95' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='248' y1='280' x2='248' y2='360' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='276' y1='110' x2='276' y2='300' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='304' y1='380' x2='304' y2='455' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='332' y1='60' x2='332' y2='130' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='40' y1='430' x2='40' y2='500' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='95' y1='450' x2='95' y2='505' stroke-opacity='.05' stroke-width='1'/%3E%3Cline x1='180' y1='420' x2='180' y2='510' stroke-opacity='.07' stroke-width='1'/%3E%3Cline x1='260' y1='430' x2='260' y2='490' stroke-opacity='.06' stroke-width='1'/%3E%3Cline x1='340' y1='200' x2='340' y2='380' stroke-opacity='.08' stroke-width='1'/%3E%3Cline x1='12' y1='300' x2='12' y2='360' stroke-opacity='.05' stroke-width='1'/%3E%3Cline x1='150' y1='260' x2='150' y2='310' stroke-opacity='.07' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 22.5rem 32.5rem;
  background-position: 8rem 4rem; /* desfase vs capa A: menos “mosaico” */
  opacity: 0.7;
}

/* Un solo sentido (derecha → izquierda). La capa B va más lenta para
   dar un poco de profundidad sin el cruce de direcciones. */
@media (prefers-reduced-motion: no-preference) {
  .hero--statement::before {
    animation: hero-statement-lines 220s linear infinite;
  }

  .hero--statement::after {
    animation: hero-statement-lines 360s linear infinite;
  }

  @keyframes hero-statement-lines {
    to {
      transform: translate3d(-50%, 0, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--statement::before,
  .hero--statement::after {
    width: 100%;
  }
}

.hero--statement .hero__eyebrow {
  color: var(--text-brand);
}

.hero--statement .hero__title {
  font-size: var(--step-5);
  max-width: 24ch;
  color: var(--text-primary);
  letter-spacing: var(--tracking-serif);
  text-wrap: balance;
}

.hero--statement .hero__lead {
  color: var(--text-secondary);
  max-width: 52ch;
}

/* En pantallas muy estrechas el statement baja un paso para no
   empujar los CTAs demasiado lejos del primer viewport. */
@media (max-width: 30rem) {
  .hero--statement .hero__title {
    font-size: var(--step-4);
  }
}

/* —— Split asimétrico: statement + panel de color ——
   El panel navy→teal (receta de avatar-ph) rompe el blanco y aloja
   las cifras de trayectoria; el símbolo va nítido sobre oscuro, que
   es el único contexto donde funciona como textura. */
.hero--statement .hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  gap: var(--space-2xl) clamp(var(--space-xl), 5vw, var(--space-3xl, 5rem));
  align-items: stretch;
}

/* Ángulo animable para el haz del borde (conic). Fallback: 0deg estático. */
@property --hero-panel-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.hero__panel {
  --hero-panel-angle: 0deg;
  position: relative;
  /* Motivo oculto; overflow visible para que el aura de sombra respire. */
  overflow: visible;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  color: var(--text-primary);
  /* Interior en padding-box; haz teal/menta en border-box (recorre el perímetro). */
  border: 1px solid transparent;
  background:
    radial-gradient(130% 90% at 85% 0%, var(--menta-tinte), transparent 60%) padding-box,
    linear-gradient(var(--white), var(--white)) padding-box,
    conic-gradient(
      from var(--hero-panel-angle),
      var(--border-subtle) 0deg,
      var(--teal-300) 40deg,
      var(--menta) 70deg,
      var(--teal-500) 95deg,
      var(--border-subtle) 140deg,
      var(--border-subtle) 200deg,
      var(--teal-200) 240deg,
      var(--border-subtle) 290deg,
      var(--border-subtle) 360deg
    )
    border-box;
  box-shadow:
    var(--shadow-md),
    0 0 0 1px color-mix(in srgb, var(--teal-500) 8%, transparent),
    0 16px 40px -12px color-mix(in srgb, var(--teal-500) 22%, transparent),
    0 0 56px -10px color-mix(in srgb, var(--menta) 35%, transparent);
}

/* Anillo exterior suave: no pinta encima del contenido (mask en el trazo). */
.hero__panel::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--hero-panel-angle),
    transparent 0deg,
    color-mix(in srgb, var(--menta) 55%, transparent) 50deg,
    color-mix(in srgb, var(--teal-400) 70%, transparent) 85deg,
    transparent 130deg,
    transparent 210deg,
    color-mix(in srgb, var(--teal-300) 40%, transparent) 260deg,
    transparent 310deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

.hero__panel > * {
  position: relative; /* por encima del anillo / motivo */
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__panel {
    animation:
      hero-panel-beam 11s linear infinite,
      hero-panel-breathe 5.5s var(--ease-in-out) infinite;
  }

  .hero__panel::before {
    animation: hero-panel-beam 11s linear infinite;
  }

  @keyframes hero-panel-beam {
    to {
      --hero-panel-angle: 360deg;
    }
  }

  /* Respiro del aura: profundidad que sube y baja, no un pulso agresivo. */
  @keyframes hero-panel-breathe {
    0%,
    100% {
      box-shadow:
        var(--shadow-md),
        0 0 0 1px color-mix(in srgb, var(--teal-500) 8%, transparent),
        0 16px 40px -12px color-mix(in srgb, var(--teal-500) 18%, transparent),
        0 0 48px -12px color-mix(in srgb, var(--menta) 28%, transparent);
    }
    50% {
      box-shadow:
        var(--shadow-lg),
        0 0 0 1px color-mix(in srgb, var(--teal-500) 14%, transparent),
        0 22px 52px -10px color-mix(in srgb, var(--teal-500) 28%, transparent),
        0 0 72px -8px color-mix(in srgb, var(--menta) 42%, transparent);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__panel {
    /* Sin giro: borde con un acento teal fijo (sigue leyéndose premium). */
    background:
      radial-gradient(130% 90% at 85% 0%, var(--menta-tinte), transparent 60%) padding-box,
      linear-gradient(var(--white), var(--white)) padding-box,
      linear-gradient(
        145deg,
        var(--teal-300),
        var(--border-subtle) 35%,
        var(--border-subtle) 70%,
        var(--menta)
      )
      border-box;
  }

  .hero__panel::before {
    opacity: 0.5;
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--teal-400) 50%, transparent),
      transparent 40%,
      transparent 60%,
      color-mix(in srgb, var(--menta) 45%, transparent)
    );
  }
}

.hero__panel-motif {
  /* El símbolo nítido solo funciona sobre oscuro; en la tarjeta clara se oculta. */
  display: none;
  position: absolute;
  right: -24%;
  bottom: -14%;
  width: 78%;
  height: auto;
  opacity: 0.14;
  pointer-events: none;
  /* El PNG viene cortado a ras por la izquierda: desvanecer el borde. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%);
}

.hero__panel .eyebrow {
  color: var(--text-brand);
}

.hero__panel-title {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: normal;
}

/* Cifras como libro mayor: teal accesible sobre blanco (ámbar como texto
   sobre claro está vetado por el brief §3); labels en gris de apoyo. */
.hero__panel-stats {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-2xs);
}

.hero__panel-stats .stat {
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

.hero__panel .stat__value {
  font-size: var(--step-4);
  color: var(--text-brand);
}

.hero__panel .stat__label {
  font-size: var(--step--1);
  color: var(--text-secondary);
}

@media (max-width: 64rem) {
  .hero--statement .hero__split {
    grid-template-columns: 1fr;
  }

  .hero__panel-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
  }
}

/* —— Resaltado animado ——
   <mark> reseteado: transparente en reposo; .is-active pinta el
   bloque teal (blanco sobre teal-700 ≈ 5.2:1, AA incluso en texto
   normal; aquí es display). box-decoration-break para saltos de
   línea limpios en "hacer negocios". */
.statement-hl {
  padding: 0 0.14em;
  margin: 0 -0.04em;
  color: inherit;
  background-color: transparent;
  border-radius: 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* Salida rápida para que nunca haya dos palabras teñidas a la vez… */
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out);
}

.statement-hl.is-active {
  /* Ámbar como marcador (brief §4.1): navy sobre ámbar 6.2:1 ✓. */
  background-color: var(--ambar);
  color: var(--text-primary);
  /* …y entrada pausada. */
  transition-duration: var(--dur-slow, 600ms);
}

/* Reposo tras las dos vueltas: las tres palabras quedan con el
   resaltado suave (mismo estado que con movimiento reducido). */
.statement-hl.is-rest {
  background-color: var(--ambar-tinte);
  color: var(--text-primary);
}

/* Sin animación: todas las palabras quedan marcadas en suave
   (el módulo JS no arranca con movimiento reducido). */
@media (prefers-reduced-motion: reduce) {
  .statement-hl {
    background-color: var(--ambar-tinte);
    color: var(--text-primary);
  }
}
}

/* ===== components/feature-band.css ===== */
@layer components {
/* ============================================================
   feature-band.css — Banda cinematográfica full-bleed (capa
   components). Fotografía/video oscuro con tarjeta blanca en
   composición asimétrica y botón-flecha saliente.
   ============================================================ */
.feature-band {
  position: relative;
  isolation: isolate;
  background-color: var(--navy-900);
  overflow: visible;
}

.feature-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}

.feature-band__media img,
.feature-band__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(0.45) contrast(1.05) brightness(0.9);
}

@media (prefers-reduced-motion: reduce) {
  .feature-band__media video {
    display: none;
  }
}

/* Tinte navy→teal para legibilidad y coherencia de marca. */
.feature-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(30, 35, 48, 0.55) 0%, rgba(30, 35, 48, 0.25) 55%, rgba(0, 122, 114, 0.35) 100%),
    linear-gradient(to top, rgba(30, 35, 48, 0.65) 0%, transparent 40%);
}

.feature-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: clamp(20rem, 14rem + 24vw, 32rem);
  padding-block: var(--space-2xl) 0;
}

/* Tarjeta blanca asimétrica, pegada al pie de la banda. */
.feature-band__card {
  position: relative;
  max-width: 30rem;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  background-color: var(--surface);
  box-shadow: var(--shadow-md);
}

.feature-band__card .eyebrow {
  color: var(--text-brand);
}

.feature-band__title {
  margin-top: var(--space-2xs);
  font-size: var(--step-2);
  line-height: var(--lh-snug);
}

.feature-band__text {
  margin-top: var(--space-2xs);
  color: var(--text-secondary);
}

/* Enlace estirado sobre la tarjeta (patrón de card.css): el <a>
   envuelve el título y su ::after cubre toda la tarjeta. */
.feature-band__link {
  color: inherit;
}

.feature-band__link::after {
  content: "";
  position: absolute;
  /* Cubre también la franja donde sobresale el botón-flecha. */
  inset: -1.5rem 0 0 0;
}

/* Botón-flecha saliente en la esquina superior derecha (decorativo;
   el clic lo captura el enlace estirado). */
.feature-band__arrow {
  position: absolute;
  top: -1.5rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--white);
  /* Teal de marca en reposo (antes navy-900; el cliente vetó lo oscuro). */
  background-color: var(--teal-700);
  transition: background-color var(--dur-base) var(--ease-out);
  /* Decorativa: el clic lo captura el enlace estirado de debajo. */
  pointer-events: none;
}

.feature-band__card:hover .feature-band__arrow,
.feature-band__card:focus-within .feature-band__arrow {
  /* Hover teal→coral (brief §5, micro-interacciones). */
  background-color: var(--coral);
}

/* —— Variante cálida (Guía destacada, fotografía estática sin video) ——
   Duotono navy+coral (brief §5: permitido en UNA sección destacada) y
   tarjeta en arena con acentos coral (modo editorial del brief). */
.feature-band--calido .feature-band__media img {
  /* Encuadre en la ciudad iluminada (abajo), no en el cielo nublado, y
     revelado cálido: la banda debe sentirse dorada, no crepuscular. */
  object-position: center 72%;
  filter: contrast(1.06) brightness(1.08) saturate(1.2);
}

/* Proporción constante ~2.5:1 (el encuadre en el que el panorama luce):
   la banda sigue a sangre completa en cualquier monitor y su altura
   crece con el ancho (40vw), con suelo móvil y techo de cordura. */
.feature-band--calido .feature-band__inner {
  min-height: max(20rem, min(40vw, 56rem));
}

/* —— ≥1600px: la fotografía vuelve a ser FONDO ——
   En monitores grandes el duotono navy+coral se intensifica y la foto
   pasa a textura de marca; la tarjeta lleva el protagonismo. */
@media (min-width: 100rem) {
  .feature-band--calido .feature-band__inner {
    min-height: clamp(34rem, 26vw, 42rem);
  }

  .feature-band--calido .feature-band__media img {
    object-position: center 70%;
    filter: grayscale(0.3) contrast(1.05) brightness(0.82) saturate(1.1);
  }

  .feature-band--calido .feature-band__media::after {
    background:
      linear-gradient(100deg, rgba(51, 59, 79, 0.55) 0%, rgba(0, 74, 69, 0.3) 50%, rgba(242, 112, 94, 0.4) 100%),
      linear-gradient(to top, rgba(30, 35, 48, 0.5) 0%, transparent 55%);
  }

  .feature-band--calido .feature-band__card {
    max-width: 34rem;
    padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
  }

  .feature-band--calido .feature-band__title {
    font-size: var(--step-3);
  }
}

.feature-band--calido .feature-band__media::after {
  background:
    linear-gradient(100deg, rgba(30, 35, 48, 0.32) 0%, rgba(30, 35, 48, 0.08) 45%, rgba(242, 112, 94, 0.22) 100%),
    linear-gradient(to top, rgba(30, 35, 48, 0.45) 0%, transparent 38%);
}

/* La tarjeta FLOTA sobre el fondo: aire alrededor, radio como el resto
   del sitio, sombra profunda y lift al hover. */
.feature-band--calido .feature-band__inner {
  padding-block: var(--space-2xl);
}

.feature-band--calido .feature-band__card {
  background-color: var(--arena);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-lg),
    0 34px 70px -24px rgba(30, 35, 48, 0.45);
  transition:
    transform var(--dur-base) var(--ease-brand),
    box-shadow var(--dur-base) var(--ease-out);
}

.feature-band--calido .feature-band__card:hover,
.feature-band--calido .feature-band__card:focus-within {
  transform: translateY(-6px);
  box-shadow:
    var(--shadow-lg),
    0 42px 80px -22px rgba(30, 35, 48, 0.5);
}

.feature-band--calido .feature-band__arrow {
  border-radius: var(--radius-sm);
}

.feature-band--calido .feature-band__card .eyebrow {
  color: var(--coral-tinte-text);
}

/* La micro-interacción se invierte en la banda cálida: coral en reposo,
   teal de marca al hover. */
.feature-band--calido .feature-band__arrow {
  background-color: var(--coral);
}

.feature-band--calido .feature-band__card:hover .feature-band__arrow,
.feature-band--calido .feature-band__card:focus-within .feature-band__arrow {
  background-color: var(--teal-700);
}

@media (max-width: 48rem) {
  .feature-band__inner {
    justify-content: stretch;
  }

  .feature-band__card {
    max-width: none;
    width: 100%;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }
}
}

/* ===== components/carousel.css ===== */
@layer components {
/* ============================================================
   carousel.css — Carrusel cinematográfico del Home (capa components)
   Fundido lento entre fotografías full-bleed con velo esmeralda→navy
   (20–40%, legibilidad AA del texto blanco), titulares con entrada
   escalonada, Ken Burns sutil y pestañas-progreso en ámbar.
   Módulo: js/modules/carousel.js (hook [data-carousel]).
   ============================================================ */
.carousel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--navy-900); /* asoma solo durante el fundido */
}

.carousel__viewport {
  position: relative;
  min-height: clamp(26rem, 20rem + 28vw, 40rem);
}

/* Fundido lento (elegante, sin deslizamiento). La saliente pierde el
   z-index para que la entrante funda por encima. */
.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}

.carousel__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.carousel__slide[aria-hidden="true"] {
  pointer-events: none;
}

.carousel__media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.carousel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo esmeralda→navy: denso abajo-izquierda (donde vive el texto),
   ligero arriba-derecha (deja respirar la fotografía). */
.carousel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(78deg, rgba(0, 74, 69, 0.5) 0%, rgba(0, 74, 69, 0.16) 45%, rgba(30, 35, 48, 0.3) 100%),
    linear-gradient(to top, rgba(30, 35, 48, 0.62) 0%, rgba(30, 35, 48, 0.12) 45%, transparent 70%);
}

/* —— Copy sobre la fotografía —— */
.carousel__frame {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  /* deja sitio a la botonera inferior */
  padding-block: var(--space-2xl) 7rem;
}

.carousel__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--menta);
}

/* Regla ámbar que presenta al kicker (acento decorativo, brief §5) */
.carousel__kicker::before {
  content: "";
  flex: none;
  width: 2.75rem;
  height: 2px;
  background-color: var(--ambar);
}

.carousel__title {
  margin-top: var(--space-sm);
  font-size: var(--step-4);
  color: var(--white);
  max-width: 22ch;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(30, 35, 48, 0.45);
}

/* —— Botonera: pestañas-progreso + contador + flechas —— */
.carousel__controls {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}

.carousel__tabs {
  display: flex;
  gap: var(--space-2xs);
  flex: 1;
  max-width: 20rem;
}

/* Botón de 2.25rem de alto (objetivo táctil) con raíl fino dentro */
.carousel__tab {
  position: relative;
  flex: 1;
  height: 2.25rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.carousel__tab::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.35);
}

.carousel__tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* El relleno ámbar avanza durante la diapositiva (duración desde JS) */
.carousel__tab-fill {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 3px;
  translate: 0 -50%;
  border-radius: var(--radius-pill);
  background-color: var(--ambar);
  transform: scaleX(0);
  transform-origin: left;
}

.carousel__tab.is-active .carousel__tab-fill {
  animation: carousel-fill var(--carousel-dur, 7000ms) linear forwards;
}

.carousel.is-paused .carousel__tab-fill {
  animation-play-state: paused;
}

.carousel__count {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--white);
  font-size: var(--step-1);
}

.carousel__count-total {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.7);
}

.carousel__nav {
  margin-left: auto;
  display: flex;
  gap: var(--space-2xs);
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--white);
  background-color: rgba(30, 35, 48, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-pill);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.carousel__btn:hover {
  background-color: var(--teal-500);
  border-color: transparent;
}

.carousel__btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* —— Entrada y presencia (solo con movimiento permitido) —— */
@media (prefers-reduced-motion: no-preference) {
  .carousel__kicker,
  .carousel__title {
    opacity: 0;
  }

  .carousel__slide.is-active .carousel__kicker {
    animation: carousel-kicker 800ms var(--ease-out) 400ms forwards;
  }

  .carousel__slide.is-active .carousel__title {
    animation: carousel-rise 950ms var(--ease-brand) 600ms forwards;
  }

  /* Ken Burns: la fotografía asienta de 1.06 a 1 durante la diapositiva */
  .carousel__media img {
    transform: scale(1.06);
  }

  .carousel__slide.is-active .carousel__media img {
    animation: carousel-zoom 8500ms var(--ease-out) forwards;
  }

  .carousel.is-paused .carousel__slide.is-active .carousel__media img {
    animation-play-state: paused;
  }
}

@keyframes carousel-rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes carousel-kicker {
  from {
    opacity: 0;
    letter-spacing: 0.45em;
  }
  to {
    opacity: 1;
    letter-spacing: var(--tracking-label);
  }
}

@keyframes carousel-zoom {
  to {
    transform: scale(1);
  }
}

@keyframes carousel-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Con movimiento reducido: sin autoplay (JS), fundido instantáneo y la
   pestaña activa queda rellena en estático. */
@media (prefers-reduced-motion: reduce) {
  .carousel__slide {
    transition-duration: 0ms;
  }

  .carousel__tab.is-active .carousel__tab-fill {
    animation: none;
    transform: none;
  }
}

@media (max-width: 48rem) {
  .carousel__title {
    font-size: var(--step-3);
  }

  .carousel__frame {
    padding-bottom: 6.5rem;
  }

  .carousel__controls {
    gap: var(--space-md);
  }

  .carousel__count {
    display: none;
  }
}
}

/* ===== components/stat.css ===== */
@layer components {
/* ============================================================
   stat.css — Prueba de experiencia / cifras (capa components)
   Contador animado opcional (counter.js) respetando reduced-motion.
   ============================================================ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-xl) var(--space-lg);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.stat__value {
  font-size: var(--step-4);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--text-brand);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--step-0);
  color: var(--text-secondary);
  max-width: 22ch;
}

/* Sobre superficie oscura */
.stat-row--inverse .stat__value {
  color: var(--teal-300);
}

.stat-row--inverse .stat__label {
  color: var(--text-muted-inverse);
}

/* Separadores verticales en desktop */
@media (min-width: 48rem) {
  .stat-row--divided .stat {
    padding-inline: var(--space-lg);
    border-left: 1px solid var(--border-subtle);
  }

  .stat-row--divided .stat:first-child {
    padding-inline-start: 0;
    border-left: 0;
  }
}
}

/* ===== components/card.css ===== */
@layer components {
/* ============================================================
   card.css — Tarjeta base (capa components)
   Base compartida por card-service/team/insight/sector y route-card.
   Patrón "stretched link": .card__link::after cubre toda la tarjeta
   (clic en toda la superficie sin perder la semántica del enlace).
   ============================================================ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg);
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition:
    transform var(--dur-base) var(--ease-brand),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal-200);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-md);
  color: var(--text-brand);
  background-color: var(--teal-100);
  border-radius: var(--radius-md);
}

.card__title {
  font-size: var(--step-2);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.card__summary {
  margin-top: var(--space-2xs);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Enlace que se estira sobre toda la tarjeta */
.card__link {
  margin-top: auto;
  padding-top: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-brand);
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__link .icon {
  /* Flecha en coral (brief §4.6): micro-detalle gráfico, no texto. */
  color: var(--coral);
  transition: transform var(--dur-base) var(--ease-brand);
}

.card:hover .card__link .icon {
  transform: translateX(0.25rem);
}

/* Tarjeta sobre superficie oscura */
.card--inverse {
  background-color: var(--navy-800);
  border-color: var(--navy-600);
  color: var(--text-on-inverse);
}

.card--inverse .card__summary {
  color: var(--text-muted-inverse);
}

.card--inverse .card__link {
  color: var(--teal-300);
}
}

/* ===== components/card-service.css ===== */
@layer components {
/* ============================================================
   card-service.css — Tarjeta de servicio (capa components)
   Hereda de .card. Usada en índices de Servicios, Sectores y Rutas.
   ============================================================ */
/* Sombra de reposo: sin ella, la tarjeta blanca se funde con la sección
   (mismo criterio que route-card en la home). */
.card-service {
  box-shadow: var(--shadow-sm);
}

.card-service .card__title {
  font-size: var(--step-1);
}

.card-service__framework {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.card-service__framework dt {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 0.7rem;
  color: var(--text-brand);
}
}

/* ===== components/service-dir.css ===== */
@layer components {
/* ============================================================
   service-dir.css — Directorio editorial de servicios (capa components)
   Índice /servicios: filas de directorio + atmósfera de papel
   (anillos concéntricos + lavado de luz + grano). Los anillos viven
   en el aire vacío alrededor del panel; no cruzan el texto.
   ============================================================ */

/* —— Atmósfera de sección (render.js → .section--svc-sky) ——
   Papel más denso + anillos de campo + mesh de luz + grano + velo
   (el listado “flota” sobre el fondo). */

/* Papeles más saturados solo en este índice (no tocan el resto del sitio). */
.section--svc-sky.section--arena {
  background-color: color-mix(in srgb, var(--arena) 55%, var(--ambar-tinte) 45%);
}
.section--svc-sky.section--niebla {
  background-color: color-mix(in srgb, var(--niebla) 50%, var(--navy-100) 50%);
}
.section--svc-sky.section--espuma {
  background-color: color-mix(in srgb, var(--espuma) 45%, var(--teal-100) 55%);
}

.section--svc-sky {
  /* Contención de la atmósfera; reutilizable fuera de /servicios
     (p. ej. Recursos en Home). El padding compacto es solo del índice. */
  --section-y-svc: clamp(2rem, 1.1rem + 3.5vw, 4rem);
  --section-y-svc-bottom: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Padding compacto del índice /servicios: el eyebrow arranca más cerca
   del quiebre; abajo, aire extra para el panel flotante. */
[data-services-index] > .section--svc-sky {
  padding-top: var(--section-y-svc);
  padding-bottom: var(--section-y-svc-bottom);
}

/* Quiebres diagonales entre bloques del índice (cut / cut-mirror).
   overflow: visible — el recorte lo hace clip-path; overflow:hidden
   del .section--svc-sky podía esconder el header bajo el solape. */
[data-services-index] > .section--svc-sky.section--cut,
[data-services-index] > .section--svc-sky.section--cut-mirror {
  --section-cut: clamp(2.5rem, 4vw, 5rem);
  z-index: 1;
  overflow: visible;
  padding-top: calc(var(--section-y-svc) + var(--section-cut) + var(--space-md));
  padding-bottom: var(--section-y-svc-bottom);
}

/* Primer bloque tras el hero (quiebre de hero.css; padding compacto svc).
   Incluye el caso con wrapper [data-services-index]. */
.hero--route + .section--svc-sky,
.hero--route + [data-services-index] > .section--svc-sky:first-of-type {
  overflow: visible;
  padding-top: calc(var(--section-y-svc) + var(--hero-cut, clamp(2.5rem, 4vw, 5rem)) + var(--space-md));
  padding-bottom: var(--section-y-svc-bottom);
}

/* Header del bloque siempre por encima de la atmósfera */
[data-services-index] .section__header {
  position: relative;
  z-index: 2;
}

/* Último bloque (p. ej. Resolución de Disputas): el cta-band--inverse
   sube con clip-path y se come el panel si el padding es el estándar. */
[data-services-index] > .section--svc-sky:last-of-type {
  padding-bottom: clamp(5rem, 3rem + 6vw, 8.5rem);
}

.section--svc-sky > .u-container {
  position: relative;
  z-index: 1;
}

.svc-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Lavado equilibrado: sin mancha teal a la derecha (el panel flotante
   es el protagonista; el fondo se mantiene plano y limpio). */
.svc-sky__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      90% 60% at 8% 0%,
      color-mix(in srgb, var(--white) 55%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      70% 50% at 20% 100%,
      color-mix(in srgb, var(--ambar-tinte) 45%, transparent) 0%,
      transparent 55%
    );
}

/* —— Anillos concéntricos (vida en el vacío del bloque) ——
   Campo grande + nido acento; se alternan L/R por bloque (render.js).
   Tinta suave por papel; máscara radial abre el centro para no
   competir con el panel del directorio. */
.svc-sky__rings {
  --svc-ring: color-mix(in srgb, var(--navy-400) 16%, transparent);
  --svc-ring-gap: clamp(2.15rem, 1.35rem + 1.4vw, 3.1rem);
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0,
    transparent calc(var(--svc-ring-gap) - 1.1px),
    var(--svc-ring) calc(var(--svc-ring-gap) - 1.1px),
    var(--svc-ring) var(--svc-ring-gap)
  );
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent 0%,
    transparent 10%,
    #000 26%,
    #000 58%,
    transparent 76%
  );
  mask-image: radial-gradient(
    circle at center,
    transparent 0%,
    transparent 10%,
    #000 26%,
    #000 58%,
    transparent 76%
  );
  opacity: 0.7;
  will-change: transform;
}

/* Campo principal: anillos amplios que enmarcan el bloque */
.svc-sky__rings--field1 {
  width: min(74rem, 135vw);
  height: min(74rem, 135vw);
  top: -32%;
  right: -28%;
}

.svc-sky__rings--field2 {
  width: min(70rem, 130vw);
  height: min(70rem, 130vw);
  bottom: -34%;
  left: -26%;
}

/* Nido acento: anillos más densos, esquina opuesta al campo */
.svc-sky__rings--accent1,
.svc-sky__rings--accent2 {
  --svc-ring-gap: clamp(1.35rem, 0.9rem + 0.9vw, 2.1rem);
  opacity: 0.42;
}

.svc-sky__rings--accent1 {
  width: min(38rem, 72vw);
  height: min(38rem, 72vw);
  bottom: -14%;
  left: -12%;
}

.svc-sky__rings--accent2 {
  width: min(42rem, 78vw);
  height: min(42rem, 78vw);
  top: -10%;
  right: -14%;
}

/* Tinte de anillo por papel del bloque */
.section--arena .svc-sky__rings {
  --svc-ring: color-mix(
    in srgb,
    color-mix(in srgb, var(--ambar) 45%, var(--navy-500)) 18%,
    transparent
  );
}

/*
  Home · Recursos — relleno de círculos (receta de diseño gráfico):
  · Polar grid con ESPACIADO GENEROSO (no radar denso)
  · Aire entre anillos = legibilidad y elegancia (white space)
  · Trazos hairline (≈1px), no bandas gruesas
  · Núcleo vacío amplio (el centro no se “rellena”)
  · Solo una franja de anillos visible (máscara tipo arco editorial)
  No aplica al índice /servicios.
*/
.section--svc-sky-bold .svc-sky__rings {
  /* Intervalo amplio: ~3.5–5rem entre anillos (antes ~2rem = “pegados”) */
  --svc-ring-gap: clamp(3.5rem, 2.75rem + 2.2vw, 5.25rem);
  --svc-ring: color-mix(
    in srgb,
    color-mix(in srgb, var(--ambar) 40%, var(--navy-500)) 26%,
    transparent
  );
  opacity: 0.88;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0,
    transparent calc(var(--svc-ring-gap) - 1px),
    var(--svc-ring) calc(var(--svc-ring-gap) - 1px),
    var(--svc-ring) var(--svc-ring-gap)
  );
  /* Centro hueco grande + fade exterior: arcos de relleno, no diana */
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent 0%,
    transparent 32%,
    #000 42%,
    #000 70%,
    transparent 86%
  );
  mask-image: radial-gradient(
    circle at center,
    transparent 0%,
    transparent 32%,
    #000 42%,
    #000 70%,
    transparent 86%
  );
}

/* Campo: más grande, anclado a esquina — enmarca, no invade el centro */
.section--svc-sky-bold .svc-sky__rings--field1 {
  width: min(90rem, 155vw);
  height: min(90rem, 155vw);
  top: -42%;
  right: -38%;
}

/* Acento: MISMO ritmo amplio (nunca más denso: eso apretaba) */
.section--svc-sky-bold .svc-sky__rings--accent1,
.section--svc-sky-bold .svc-sky__rings--accent2 {
  --svc-ring-gap: clamp(3rem, 2.25rem + 1.8vw, 4.5rem);
  opacity: 0.5;
}

.section--svc-sky-bold .svc-sky__rings--accent1 {
  width: min(52rem, 95vw);
  height: min(52rem, 95vw);
  bottom: -28%;
  left: -26%;
}

.section--niebla .svc-sky__rings {
  --svc-ring: color-mix(
    in srgb,
    color-mix(in srgb, var(--cielo) 50%, var(--navy-500)) 16%,
    transparent
  );
}

.section--espuma .svc-sky__rings {
  --svc-ring: color-mix(
    in srgb,
    color-mix(in srgb, var(--teal-500) 55%, var(--navy-500)) 17%,
    transparent
  );
}

/* Orbes discretos, fuera del margen derecho (evita el “difuminado” lateral). */
.svc-sky__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(2.5rem);
  will-change: transform;
}

/* Antes era un blob teal enorme top-right → lo reubicamos abajo-izq, suave. */
.svc-sky__glow--a {
  width: min(36rem, 55vw);
  height: min(36rem, 55vw);
  bottom: -18%;
  left: -12%;
  opacity: 0.28;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--teal-200) 35%, transparent) 0%,
    transparent 70%
  );
}

.svc-sky__glow--b {
  width: min(32rem, 48vw);
  height: min(32rem, 48vw);
  top: -12%;
  left: 15%;
  opacity: 0.22;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--ambar) 22%, transparent) 0%,
    transparent 72%
  );
}

/* Centro: apenas un soplo de menta, sin empujar color al borde derecho. */
.svc-sky__glow--c {
  width: min(28rem, 42vw);
  height: min(28rem, 42vw);
  top: 45%;
  left: 30%;
  opacity: 0.18;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--menta) 28%, transparent) 0%,
    transparent 70%
  );
}

/* Velo ligero detrás del panel (sin competir con él). */
.svc-sky__veil {
  position: absolute;
  inset: 10% 6%;
  border-radius: 2rem;
  background: radial-gradient(
    ellipse 65% 55% at 50% 48%,
    color-mix(in srgb, var(--white) 32%, transparent) 0%,
    transparent 70%
  );
}

/* Grano de papel: textura fina, sin gritar. */
.svc-sky__grain {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}

/* —— Variantes por papel (misma lógica: sin acento fuerte a la derecha) —— */
.section--niebla .svc-sky__wash {
  background:
    radial-gradient(
      90% 60% at 8% 0%,
      color-mix(in srgb, var(--white) 50%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      70% 50% at 25% 100%,
      color-mix(in srgb, var(--navy-100) 55%, transparent) 0%,
      transparent 55%
    );
}
.section--niebla .svc-sky__glow--a {
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--cielo) 22%, transparent) 0%,
    transparent 70%
  );
  opacity: 0.24;
}
.section--niebla .svc-sky__glow--b {
  opacity: 0.18;
}
.section--niebla .svc-sky__glow--c {
  opacity: 0.15;
}

.section--espuma .svc-sky__wash {
  background:
    radial-gradient(
      90% 60% at 8% 0%,
      color-mix(in srgb, var(--white) 50%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      70% 50% at 20% 100%,
      color-mix(in srgb, var(--menta-tinte) 55%, transparent) 0%,
      transparent 55%
    );
}
.section--espuma .svc-sky__glow--a {
  opacity: 0.26;
}
.section--espuma .svc-sky__glow--b {
  opacity: 0.18;
}
.section--espuma .svc-sky__glow--c {
  opacity: 0.16;
}

.section--arena .svc-sky__grain {
  opacity: 0.09;
}

@media (prefers-reduced-motion: no-preference) {
  .svc-sky__glow--a {
    animation: svc-sky-drift-a 34s var(--ease-in-out) infinite alternate;
  }

  .svc-sky__glow--b {
    animation: svc-sky-drift-b 40s var(--ease-in-out) infinite alternate;
  }

  .svc-sky__glow--c {
    animation: svc-sky-drift-c 28s var(--ease-in-out) infinite alternate;
  }

  /* Respiración lenta de los anillos: escala + micro-rotación */
  .svc-sky__rings--field1,
  .svc-sky__rings--field2 {
    animation: svc-rings-breathe 52s var(--ease-in-out) infinite alternate;
  }

  .svc-sky__rings--accent1,
  .svc-sky__rings--accent2 {
    animation: svc-rings-breathe-rev 40s var(--ease-in-out) infinite alternate;
  }
}

@keyframes svc-sky-drift-a {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(4%, -5%) scale(1.05);
  }
}

@keyframes svc-sky-drift-b {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-4%, 4%) scale(1.06);
  }
}

@keyframes svc-sky-drift-c {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(3%, -3%) scale(1.05);
  }
}

@keyframes svc-rings-breathe {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1.055) rotate(3.5deg);
  }
}

@keyframes svc-rings-breathe-rev {
  from {
    transform: scale(1.04) rotate(-2deg);
  }
  to {
    transform: scale(1) rotate(2.5deg);
  }
}

/* En pantallas estrechas: un solo campo, menos densidad visual */
@media (max-width: 40rem) {
  .svc-sky__rings--accent1,
  .svc-sky__rings--accent2 {
    display: none;
  }

  .svc-sky__rings--field1,
  .svc-sky__rings--field2 {
    opacity: 0.5;
  }
}

.svc-dir {
  list-style: none;
  margin: 0;
  /* Espacio superior para que la caída desde arriba no choque
     con el header de la sección. */
  padding: 0.25rem 0 0;
}

/* Sobre el mesh, el directorio se asienta en un panel de papel
   semitransparente: el fondo se lee alrededor, el listado gana peso. */
.section--svc-sky .svc-dir {
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--white) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--navy-100) 70%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--white) 80%, transparent),
    0 18px 40px -28px color-mix(in srgb, var(--navy-700) 28%, transparent);
  backdrop-filter: blur(6px);
}

@media (min-width: 64rem) {
  .svc-dir {
    columns: 2;
    column-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
    column-rule: 1px solid var(--border-subtle);
  }

  .section--svc-sky .svc-dir {
    padding: var(--space-lg) var(--space-md);
  }
}

.svc-dir__item {
  break-inside: avoid;
  border-bottom: 1px solid var(--border-subtle);
}

/* —— Caída en cascada (data-reveal="scene" en el <ul>) ——
   Las filas parten por encima y aterrizan con la curva brand
   (ligero overshoot). Un solo IntersectionObserver en el listado
   dispara la lluvia; el stagger va por nth-child (patrón media-band).
   Estados ocultos solo bajo no-preference → con reduce-motion todo
   nace visible. */
@media (prefers-reduced-motion: no-preference) {
  .svc-dir[data-reveal="scene"] .svc-dir__item {
    opacity: 0;
    transform: translateY(-2.5rem);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-xslow) var(--ease-brand);
  }

  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(1) {
    transition-delay: 0ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(2) {
    transition-delay: 45ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(3) {
    transition-delay: 90ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(4) {
    transition-delay: 135ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(5) {
    transition-delay: 180ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(6) {
    transition-delay: 225ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(7) {
    transition-delay: 270ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(8) {
    transition-delay: 315ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(9) {
    transition-delay: 360ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(10) {
    transition-delay: 405ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(11) {
    transition-delay: 450ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(12) {
    transition-delay: 495ms;
  }
  .svc-dir[data-reveal="scene"] .svc-dir__item:nth-child(n + 13) {
    transition-delay: 540ms;
  }

  .svc-dir[data-reveal="scene"].is-revealed .svc-dir__item {
    opacity: 1;
    transform: none;
  }
}

/* La fila completa es el enlace: número / cuerpo / flecha. */
.svc-dir__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  color: inherit;
  border-left: 3px solid transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* Estado activo (hover / focus / press): tinte teal más marcado */
.svc-dir__link:hover,
.svc-dir__link:focus-visible,
.svc-dir__link:active {
  background-color: var(--teal-100);
  border-left-color: var(--teal-600);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal-500) 22%, transparent);
}

/* Sobre el panel de papel del índice: más saturado, no se diluye en blanco */
.section--svc-sky .svc-dir__link:hover,
.section--svc-sky .svc-dir__link:focus-visible,
.section--svc-sky .svc-dir__link:active {
  background-color: color-mix(in srgb, var(--teal-100) 72%, var(--teal-200) 28%);
  border-left-color: var(--teal-600);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--teal-500) 28%, transparent),
    0 4px 14px color-mix(in srgb, var(--teal-700) 12%, transparent);
}

/* Número de orden: tabular, en micro-registro de marca (rima con eyebrows).
   El padding-top lo alinea ópticamente con la caja alta del título serif. */
.svc-dir__num {
  padding-top: 0.45em;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-label);
  color: var(--text-brand);
  transition: color var(--dur-fast) var(--ease-out);
}

.svc-dir__link:hover .svc-dir__num,
.svc-dir__link:focus-visible .svc-dir__num,
.svc-dir__link:active .svc-dir__num {
  color: var(--teal-800);
}

.svc-dir__body {
  display: block;
  min-width: 0;
}

.svc-dir__name {
  font-size: var(--step-1);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.svc-dir__link:hover .svc-dir__name,
.svc-dir__link:focus-visible .svc-dir__name,
.svc-dir__link:active .svc-dir__name {
  color: var(--teal-800);
}

/* Resumen en una línea y media de aire: contexto sin engordar la página. */
.svc-dir__sum {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--space-3xs);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.svc-dir__link:hover .svc-dir__sum,
.svc-dir__link:focus-visible .svc-dir__sum {
  color: var(--navy-700);
}

/* Flecha: presente pero quieta; se desliza al hover (patrón route-card). */
.svc-dir__arrow {
  margin-top: 0.55em;
  color: var(--text-brand);
  transition:
    transform var(--dur-base) var(--ease-brand),
    color var(--dur-fast) var(--ease-out);
}

.svc-dir__link:hover .svc-dir__arrow,
.svc-dir__link:focus-visible .svc-dir__arrow,
.svc-dir__link:active .svc-dir__arrow {
  transform: translateX(0.3rem);
  color: var(--coral);
}

.svc-dir__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
}

/* ===== components/card-team.css ===== */
@layer components {
/* ============================================================
   card-team.css — Tarjeta de miembro del equipo (capa components)
   ============================================================ */
.card-team {
  padding: 0;
  overflow: hidden;
}

.card-team__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  background-color: var(--navy-050);
}

.card-team__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.card-team__name {
  font-size: var(--step-1);
  line-height: var(--lh-snug);
}

.card-team__role {
  margin-top: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-brand);
}

.card-team__link {
  margin-top: auto;
  padding-top: var(--space-md);
}
}

/* ===== components/profile-hero.css ===== */
@layer components {
/* ============================================================
   profile-hero.css — Cabecera editorial de perfil (capa components)
   Nombre en display XXL + tag de rol resaltado + filas de contacto,
   retrato (avatar-ph) y riel de acciones compartir/correo/imprimir.
   Referencia de arte: páginas People de Eversheds.
   ============================================================ */
.profile-hero {
  padding-block: var(--space-xl) var(--space-2xl);
  background-color: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}

.profile-hero .breadcrumb {
  margin-bottom: var(--space-xl);
}

/* La sección que sigue al hero no repite el --section-y completo: el hero
   ya aporta su propio aire por el padding inferior; sin esto el perfil
   abre con un vacío blanco de ~250px antes de la Trayectoria. */
.profile-hero + .section {
  padding-block-start: var(--space-2xl);
}

.profile-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(13rem, 24vw, 18rem) 3rem;
  gap: var(--space-xl) var(--space-2xl);
  align-items: start;
}

.profile-hero__name {
  font-size: var(--step-4);
  max-width: 16ch;
}

/* Tag de rol: bloque resaltado bajo el nombre (Lato, no serif). */
.profile-hero__tag {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.12em 0.5em;
  font-size: var(--step-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--navy-800);
  background-color: var(--teal-200);
}

.profile-hero__role {
  margin-top: var(--space-sm);
  font-size: var(--step-1);
  color: var(--text-primary);
  max-width: 44ch;
}

.profile-hero__meta {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}

.profile-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-secondary);
}

.profile-hero__meta-item .icon {
  flex: none;
  color: var(--text-brand);
}

.profile-hero__explore {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.profile-hero__explore .icon {
  color: var(--text-brand);
  transition: transform var(--dur-base) var(--ease-brand);
}

.profile-hero__explore:hover .icon {
  transform: translateY(0.25rem);
}

.profile-hero__portrait {
  width: 100%;
}

/* Riel de acciones (compartir / correo / imprimir). */
.profile-hero__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.profile-hero__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--navy-700);
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.profile-hero__action:hover,
.profile-hero__action:focus-visible {
  color: var(--white);
  background-color: var(--teal-700);
  border-color: var(--teal-700);
}

.profile-hero__action.is-copied {
  color: var(--white);
  background-color: var(--success);
  border-color: var(--success);
}

/* Tableta / móvil: retrato bajo el texto y riel en fila. */
@media (max-width: 64rem) {
  .profile-hero__grid {
    grid-template-columns: 1fr;
  }

  .profile-hero__portrait {
    max-width: 15rem;
  }

  .profile-hero__rail {
    flex-direction: row;
  }
}

@media print {
  .profile-hero__rail,
  .profile-hero__explore {
    display: none;
  }
}
}

/* ===== components/card-insight.css ===== */
@layer components {
/* ============================================================
   card-insight.css — Tarjeta de contenido (Insights) (capa components)
   Superficie papel; el color va en dosis mínimas y sancionadas por
   el brief de paleta: filete superior + tag tintado (§4.4), acentos
   ≤10% de la superficie (§3), máx. 2 acentos por componente (§6).
   El protagonismo queda en el titular serif, no en el chrome.
   Nota: las variantes efectistas del Home (--page / --glass / --skew)
   se retiraron; los recursos del Home usan resource-index.css.
   ============================================================ */

.card.card-insight {
  /* Identidad por recurso — redefinida por .card.card-insight--* */
  --insight-accent: var(--teal-500);
  --insight-tint: var(--teal-100);
  --insight-ink: var(--teal-700);

  overflow: hidden; /* el filete ::before respeta el radio de la tarjeta */
  padding: var(--space-xl);
}

/* Filete de acento superior: micro-detalle, ~1% de la superficie */
.card.card-insight::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background-color: var(--insight-accent);
  pointer-events: none;
}

/* El hover es el de .card base (misma elevación y sombra que el resto
   del sitio); solo el borde responde con el acento, en dosis baja. */
.card.card-insight:hover {
  border-color: color-mix(in srgb, var(--insight-accent) 40%, var(--border-subtle) 60%);
}

.card-insight__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.card-insight .card__title {
  font-size: var(--step-1);
  max-width: 28ch;
}

.card-insight__date {
  font-variant-numeric: tabular-nums;
}

/*
  Acento por tarjeta (brief §4.4): identidad propia de cada recurso en
  el filete y el borde hover; el tag lleva su tinte vía .tag--*.
  Misma especificidad que la base (.card.card-insight = 0,2,0).
*/
.card.card-insight--coral {
  --insight-accent: var(--coral);
  --insight-tint: var(--coral-tinte);
  --insight-ink: var(--coral-tinte-text);
}

.card.card-insight--ambar {
  --insight-accent: var(--ambar);
  --insight-tint: var(--ambar-tinte);
  --insight-ink: var(--ambar-tinte-text);
}

.card.card-insight--menta {
  --insight-accent: var(--menta);
  --insight-tint: var(--menta-tinte);
  --insight-ink: var(--menta-tinte-text);
}

.card.card-insight--cielo {
  --insight-accent: var(--cielo);
  --insight-tint: var(--cielo-tinte);
  --insight-ink: var(--cielo-tinte-text);
}
}

/* ===== components/section-media.css ===== */
@layer components {
/* ============================================================
   section-media.css — Fondo de video/foto en banda de sección
   (capa components). Póster + video full-bleed + velo legible.
   Uso: .section.section--media > .section-media (aria-hidden).
   ============================================================ */

.section.section--media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* El color base queda bajo el media por si el video tarda */
  background-color: var(--arena);
}

.section--media > .u-container {
  position: relative;
  z-index: 1;
}

/* Anillos svc-sky opcionales encima del video, bajo el contenido */
.section--media > .svc-sky {
  z-index: 0;
}

.section-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.section-media__poster,
.section-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Póster = LCP/fallback; el video se superpone cuando reproduce */
.section-media__poster {
  z-index: 0;
}

.section-media__video {
  z-index: 1;
  /* Metraje oscuro: abrir sombras y bajar contraste para no “apagar”
     la banda bajo las cards claras y el texto navy. */
  filter: grayscale(0.12) contrast(0.95) brightness(1.28) saturate(1.05);
}

/* Velo genérico: apagado salvo variantes que lo activen */
.section-media__veil {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* —— Abstract (assets/abstract/*.jpg) — relleno editorial ——
   La foto no debe “competir”: se trata como textura (desaturada +
   blur leve + velo denso). Título y cards llevan el protagonismo. */
.section--media-abstract {
  background-color: var(--arena);
}

.section--media-abstract .section-media__poster {
  z-index: 0;
  object-position: center center;
  /* Textura suave sin blur GPU (costoso en scroll); el velo hace el resto */
  filter: saturate(0.55) contrast(0.88) brightness(1.12);
  opacity: 0.72;
}

.section--media-abstract .section-media__veil {
  display: block;
  /* Velo más opaco: el patrón se intuye, no se lee como pieza gráfica */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--arena) 78%, transparent) 0%,
      color-mix(in srgb, var(--arena) 62%, transparent) 42%,
      color-mix(in srgb, var(--arena) 80%, transparent) 100%
    ),
    radial-gradient(
      85% 70% at 50% 45%,
      color-mix(in srgb, var(--white) 42%, transparent) 0%,
      transparent 68%
    ),
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--white) 28%, transparent) 0%,
      transparent 50%,
      color-mix(in srgb, var(--ambar-tinte) 22%, transparent) 100%
    );
}

/* Header normal sobre abstract (sin placa flotante) */
.section--media-abstract .section__header {
  margin-bottom: var(--space-xl);
}

.section--media-abstract .section__title {
  color: var(--text-primary);
}

/* Sin movimiento: solo foto (a11y) */
@media (prefers-reduced-motion: reduce) {
  .section-media__video {
    display: none;
  }
}
}

/* ===== components/resource-index.css ===== */
@layer components {
/* ============================================================
   resource-index.css — "Muro de proyección" de recursos (Home)
   Sustituye el índice editorial plano: cada recurso es un
   FOTOGRAMA retroiluminado — marco navy-900 con viñeta interior,
   el grabado a tinta viva (sin duotono: el coral, el ámbar y el
   azul de cada plancha son la identidad), scrim cinematográfico
   para el bloque de texto, píldora oscura con la categoría,
   numeral fantasma en serif y barra de luz en el acento del
   recurso (dosis del brief §4.4: 1 acento por fotograma; el
   teal/menta queda para la interacción). El 01 abre en
   panorámico 21:9 (formato anamórfico); 02 y 03 acompañan en
   16:10. Coreografía al hover: lift del marco, push-in lento
   del grabado (Ken Burns), barrido de luz de proyector y barra
   de acento que se enciende a lo ancho.
   ============================================================ */

.resource-index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* —— El marco-pantalla —— */
.resource-index__item {
  /* Identidad por recurso — redefinida por __item--* (marca por defecto) */
  --ri-accent: var(--menta); /* barra de luz + filo al hover */
  --ri-tinte: var(--menta-tinte); /* tinta de la píldora */

  position: relative;
  isolation: isolate;
  /* Pila "stack": figura y cuerpo ocupan la misma celda. La altura la
     fija el aspect-ratio de la FIGURA (nunca del ítem: ratio + min-height
     en la misma caja desborda el track del grid vía transferencia de
     tamaño) y el cuerpo se superpone anclado al pie; si el texto crece
     (zoom), el marco crece con él y el grabado estira a relleno. */
  display: grid;
  grid-template: "stack" 1fr / 1fr;
  min-width: 0;
  overflow: hidden;
  background-color: var(--navy-900); /* pantalla apagada mientras carga */
  border: 1px solid color-mix(in srgb, var(--navy-700) 16%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-slow) var(--ease-brand),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* [data-reveal] (utilities) gana por capa y pisaría la transición del
   marco: se replican aquí opacity/transform del reveal junto al resto. */
.resource-index__item[data-reveal] {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-brand),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.resource-index__item:is(:hover, :focus-within) {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--ri-accent) 45%, transparent);
  box-shadow:
    var(--shadow-lg),
    0 34px 70px -24px rgba(30, 35, 48, 0.45);
}

/* Barra de luz superior ("ahora en cartelera"): en reposo un filo
   encendido al 16%; al hover barre hasta ocupar el ancho del marco. */
.resource-index__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 3px;
  background: var(--ri-accent);
  transform: scaleX(0.16);
  transform-origin: left;
  transition: transform var(--dur-xslow) var(--ease-brand);
  pointer-events: none;
}

.resource-index__item:is(:hover, :focus-within)::before {
  transform: scaleX(1);
}

/* —— 01 en panorámico anamórfico —— */
.resource-index__item--feature {
  grid-column: 1 / -1;
}

/* —— El grabado: rellena el marco a sangre, a tinta viva —— */
.resource-index__figure {
  grid-area: stack;
  z-index: 0;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.resource-index__item--feature .resource-index__figure {
  aspect-ratio: 21 / 9;
}

.resource-index__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03);
  transition:
    transform var(--dur-xslow) var(--ease-brand),
    filter var(--dur-slow) var(--ease-out);
}

/* Push-in Ken Burns: lento, casi imperceptible, como travelling */
.resource-index__item:is(:hover, :focus-within) .resource-index__figure img {
  transform: scale(1.06) translate(0.5%, -0.75%);
  filter: saturate(1.1) contrast(1.04) brightness(1.04);
}

/* Scrim de sala oscura: baño navy general que asienta el grabado en la
   pantalla, pie denso para el bloque de texto (cubre hasta ~¾ del alto,
   donde nace el titular), techo tenue para píldora y numeral, y viñeta
   que redondea la pantalla. */
.resource-index__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(30, 35, 48, 0.96) 0%, rgba(30, 35, 48, 0.88) 22%, rgba(30, 35, 48, 0.62) 42%, rgba(30, 35, 48, 0.32) 60%, transparent 78%),
    linear-gradient(to bottom, rgba(30, 35, 48, 0.34) 0%, transparent 30%),
    radial-gradient(120% 90% at 50% 40%, transparent 62%, rgba(30, 35, 48, 0.28) 100%),
    linear-gradient(rgba(30, 35, 48, 0.1), rgba(30, 35, 48, 0.1));
  pointer-events: none;
}

/* Barrido de luz de proyector al hover (solo con movimiento OK) */
@media (prefers-reduced-motion: no-preference) {
  .resource-index__figure::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
    transform: translateX(-130%);
    transition: transform var(--dur-xslow) var(--ease-in-out);
    pointer-events: none;
  }

  .resource-index__item:is(:hover, :focus-within) .resource-index__figure::before {
    transform: translateX(130%);
  }
}

/* —— Píldora de categoría: chip oscuro con tinta del acento —— */
.resource-index__tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  padding: 0.3em 0.75em;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ri-tinte);
  background-color: rgba(30, 35, 48, 0.72);
  border: 1px solid color-mix(in srgb, var(--ri-accent) 55%, transparent);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

/* —— Numeral fantasma: número de plancha en la esquina —— */
.resource-index__num {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.75rem, 5vw + 1rem, 4.25rem);
  line-height: 1;
  color: color-mix(in srgb, var(--navy-900) 24%, transparent);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.resource-index__item--feature .resource-index__num {
  font-size: clamp(3.5rem, 7vw + 1rem, 6rem);
}

/* —— Bloque de texto anclado al pie del fotograma ——
   Sin position: los ítems de grid aceptan z-index directamente y el
   enlace estirado (::after) sigue anclado al article (área de clic
   = fotograma completo). */
.resource-index__body {
  grid-area: stack;
  align-self: end;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.resource-index__item--feature .resource-index__body {
  padding: var(--space-xl) var(--space-2xl);
}

.resource-index__title {
  margin: 0 0 var(--space-2xs);
  max-width: 24ch;
  font-size: var(--step-2);
  line-height: var(--lh-snug);
  color: var(--white);
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(30, 35, 48, 0.4);
}

.resource-index__item--feature .resource-index__title {
  max-width: 22ch;
  font-size: var(--step-3);
}

/* Toda la pieza es clicable: enlace estirado sobre el article */
.resource-index__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-base) var(--ease-out);
}

.resource-index__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}

.resource-index__item:is(:hover, :focus-within) .resource-index__link {
  text-decoration-color: rgba(255, 255, 255, 0.65);
}

.resource-index__link:focus-visible {
  outline: none;
}

.resource-index__link:focus-visible::after {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.resource-index__summary {
  margin: 0 0 var(--space-sm);
  max-width: 48ch;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-muted-inverse);
  text-wrap: pretty;
}

.resource-index__item--feature .resource-index__summary {
  max-width: 58ch;
  font-size: var(--step-0);
}

/* CTA en menta con filete de "títulos de crédito" */
.resource-index__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-top: var(--space-sm);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--menta);
}

.resource-index__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 1px;
  background: color-mix(in srgb, var(--menta) 45%, transparent);
}

.resource-index__cta .icon {
  transition: transform var(--dur-base) var(--ease-brand);
}

.resource-index__item:is(:hover, :focus-within) .resource-index__cta .icon {
  transform: translateX(0.2rem);
}

/* Identidad por recurso (brief §4.4): barra de luz + tinta de píldora */
.resource-index__item--coral {
  --ri-accent: var(--coral);
  --ri-tinte: var(--coral-tinte);
}

.resource-index__item--ambar {
  --ri-accent: var(--ambar);
  --ri-tinte: var(--ambar-tinte);
}

.resource-index__item--menta {
  --ri-accent: var(--menta);
  --ri-tinte: var(--menta-tinte);
}

.resource-index__item--cielo {
  --ri-accent: var(--cielo);
  --ri-tinte: var(--cielo-tinte);
}

/* Apilado: los tres fotogramas a una columna en 16:9 */
@media (max-width: 64rem) {
  .resource-index {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .resource-index__item--feature {
    grid-column: auto;
  }

  .resource-index__figure,
  .resource-index__item--feature .resource-index__figure {
    aspect-ratio: 16 / 9;
  }

  .resource-index__body,
  .resource-index__item--feature .resource-index__body {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }
}

/* Móvil angosto: formato póster 4:3 para que el bloque de texto
   respire dentro del fotograma */
@media (max-width: 40rem) {
  .resource-index__figure,
  .resource-index__item--feature .resource-index__figure {
    aspect-ratio: 4 / 3;
  }

  .resource-index__body,
  .resource-index__item--feature .resource-index__body {
    padding: var(--space-md);
  }

  .resource-index__tag {
    top: var(--space-sm);
    left: var(--space-sm);
  }

  .resource-index__num,
  .resource-index__item--feature .resource-index__num {
    top: var(--space-xs);
    right: var(--space-sm);
    font-size: 2.5rem;
  }
}

/* Reduce-motion: sin lift, sin push-in, sin barridos (las duraciones
   ya colapsan a 0 vía tokens; aquí se anulan los transforms de hover) */
@media (prefers-reduced-motion: reduce) {
  .resource-index__item:is(:hover, :focus-within) {
    transform: none;
  }

  .resource-index__item:is(:hover, :focus-within) .resource-index__figure img {
    transform: none;
  }
}
}

/* ===== components/card-sector.css ===== */
@layer components {
/* ============================================================
   card-sector.css — Tarjeta de sector (capa components)
   Más compacta; ícono + nombre + gancho.
   ============================================================ */
.card-sector {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}

.card-sector .card__icon {
  margin-bottom: 0;
  width: 2.75rem;
  height: 2.75rem;
}

.card-sector__name {
  font-size: var(--step-1);
  line-height: var(--lh-snug);
}

.card-sector__hook {
  margin-top: var(--space-3xs);
  font-size: var(--step--1);
  color: var(--text-secondary);
}
}

/* ===== components/route-card.css ===== */
@layer components {
/* ============================================================
   route-card.css — Tarjeta de ruta (capa components)
   Las 3 rutas del Home (Invertir / Residencia / Empresas y Patrimonio).
   Jerarquía de color 60-30-10: superficie blanca (dominante), navy para
   texto/estructura, teal como acento deliberado (tile + barra + enlace).
   Tarjeta clara y premium: profundidad por sombras, no por peso de color.
   ============================================================ */
.route-card {
  /* Identidad por ruta (brief §4.3): cada tarjeta redefine su acento,
     tinte e "ink" (texto del tinte). Por defecto, teal de marca. */
  --route-accent: var(--teal-500);
  --route-tint: var(--teal-100);
  --route-ink: var(--teal-700);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-xl);
  background-color: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-base) var(--ease-brand),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* Barra de acento superior (acento de la ruta), revelada al pasar el cursor */
.route-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--route-accent), var(--route-ink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-brand);
}

/* Resplandor de marca muy sutil en la esquina (presencia en reposo), que
   se intensifica al pasar el cursor para dar más presencia sobre el
   blanco de la tarjeta (el hueco bajo el texto). */
.route-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 100% at 100% 100%, var(--route-tint) 0%, transparent 55%);
  opacity: 0.7;
  z-index: -1;
  transition: opacity var(--dur-base) var(--ease-out);
}

.route-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--route-accent);
}

.route-card:hover::before {
  transform: scaleX(1);
}

.route-card:hover::after {
  opacity: 1;
}

/* Numeral editorial de la ruta (01–03): contorno serif con el "ink" de
   su ruta (firma tipográfica del sitio, receta de route-editorial); se
   rellena con el tinte al pasar el cursor. Decorativo (aria-hidden). */
.route-card__num {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-xl);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(3rem, 2.5rem + 1.2vw, 3.75rem);
  line-height: 1;
  letter-spacing: var(--tracking-serif);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--route-ink);
  transition: color var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.route-card:hover .route-card__num {
  color: var(--route-tint);
}

.route-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-lg);
  /* Icono sobre el tinte de su ruta, con el texto asignado del tinte
     (>4.5:1); sustituye el tile teal uniforme (brief §4.3). */
  color: var(--route-ink);
  background-color: var(--route-tint);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-brand);
}

.route-card:hover .route-card__icon {
  transform: scale(1.05);
}

.route-card__title {
  font-size: var(--step-2);
  color: var(--text-primary);
}

.route-card__desc {
  margin-top: var(--space-sm);
  color: var(--text-secondary);
}

.route-card__link {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-brand);
}

.route-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.route-card__link .icon {
  /* Flecha en coral (brief §4.6): micro-detalle gráfico, no texto. */
  color: var(--coral);
  transition: transform var(--dur-base) var(--ease-brand);
}

.route-card:hover .route-card__link .icon {
  transform: translateX(0.25rem);
}

/* Acentos por ruta (brief §4.3): menta / ámbar / cielo. Solo un acento
   por tarjeta; el enlace sigue en teal (la marca no se sustituye). */
.route-card--menta {
  --route-accent: var(--menta);
  --route-tint: var(--menta-tinte);
  --route-ink: var(--menta-tinte-text);
}

.route-card--ambar {
  --route-accent: var(--ambar);
  --route-tint: var(--ambar-tinte);
  --route-ink: var(--ambar-tinte-text);
}

.route-card--cielo {
  --route-accent: var(--cielo);
  --route-tint: var(--cielo-tinte);
  --route-ink: var(--cielo-tinte-text);
}

/* .route-cards-stats retirado: el BBB pasó a media-band (Por qué Panamá). */
}

/* ===== components/route-editorial.css ===== */
@layer components {
/* ============================================================
   route-editorial.css — Maquetación de revista para las rutas
   (capa components). Letra capital, columna de cifras marginales,
   pasos con numeral display que se enciende al leer (route-steps.js),
   pull-quote y barra de progreso de lectura.
   ============================================================ */

/* —— Barra de progreso de lectura —— */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: calc(var(--z-header) + 10);
  background: linear-gradient(90deg, var(--teal-500), var(--teal-700));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* —— Intro editorial: prose + marginalia de cifras —— */
.route-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem);
  gap: var(--space-2xl) clamp(var(--space-xl), 6vw, 6rem);
  align-items: start;
}

/* Letra capital en el arranque (Fraunces, tamaño óptico display) */
.route-intro__prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: 4.6em;
  line-height: 0.76;
  padding-right: 0.14em;
  margin-top: 0.05em;
  color: var(--teal-700);
}

/* Cifras al margen, con regla teal de revista */
.route-figures {
  display: grid;
  gap: var(--space-lg);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--teal-500);
}

.route-figure__value {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--navy-800);
}

.route-figure__label {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--step--1);
  color: var(--text-secondary);
  max-width: 20ch;
}

/* —— Pasos numerados con conector —— */
.route-step {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

/* Numeral display: contorno en reposo, se rellena teal al leerlo */
.route-step__num {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: var(--step-5);
  line-height: 0.9;
  color: var(--navy-100);
  transition: color 600ms var(--ease-brand);
}

@supports (-webkit-text-stroke: 1px black) {
  .route-step__num {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--navy-300);
    transition:
      color 600ms var(--ease-brand),
      -webkit-text-stroke-color 600ms var(--ease-brand);
  }
}

.route-step.is-active .route-step__num {
  color: var(--teal-700);
  -webkit-text-stroke-color: var(--teal-700);
}

/* Línea conectora entre pasos (se tiñe al activar) */
.route-step::before {
  content: "";
  position: absolute;
  left: 2.7rem;
  top: 5rem;
  bottom: calc(-1 * var(--l-gap, var(--space-2xl)));
  width: 2px;
  background-color: var(--border-subtle);
  transition: background-color 600ms var(--ease-out);
}

.route-step.is-active::before {
  background-color: var(--teal-200);
}

.route-steps > .route-step:last-of-type::before,
.route-steps > .route-step:last-child::before {
  display: none;
}

.route-step__title {
  font-size: var(--step-3);
  max-width: 24ch;
}

/* —— Pull-quote editorial —— */
.route-pull {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  /* padding-bottom extra: la comilla de cierre (6.5rem) se ancla abajo. */
  padding: var(--space-md) clamp(var(--space-lg), 4vw, 3rem) clamp(var(--space-xl), 4vw, 3rem)
    clamp(var(--space-xl), 6vw, 5rem);
}

/* Comillas tipográficas del mismo tamaño (apertura y cierre). */
.route-pull::before,
.route-pull::after {
  position: absolute;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: 6.5rem;
  line-height: 1;
  color: var(--teal-300);
  pointer-events: none;
}

.route-pull::before {
  content: "\201C"; /* “ */
  left: 0;
  top: -0.08em;
}

.route-pull::after {
  content: "\201D"; /* ” */
  right: 0;
  bottom: -0.28em;
}

/* Texto de la cita en Lato ligera: a este cuerpo la serif display
   pierde legibilidad (la voz editorial la ponen las comillas Fraunces). */
.route-pull__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.4;
  color: var(--navy-800);
  text-wrap: balance;
}

/* —— Responsive —— */
@media (max-width: 64rem) {
  .route-intro__grid {
    grid-template-columns: 1fr;
  }

  .route-figures {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-lg) var(--space-md);
  }
}

@media (max-width: 40rem) {
  .route-step {
    grid-template-columns: 1fr;
    row-gap: var(--space-xs);
  }

  .route-step::before {
    display: none;
  }

  .route-step__num {
    font-size: var(--step-4);
  }
}

@media print {
  .reading-progress {
    display: none;
  }
}
}

/* ===== components/properties.css ===== */
@layer components {
/* ============================================================
   properties.css — Propiedades de Referencia (capa components)
   Sección 7 del entregable: catálogo ilustrativo con filtros en
   Por qué Panamá. Tarjetas sin fotografía: placeholder de marca
   (degradado navy→teal + inicial en serif display), porque los
   proyectos son ejemplos, no listings comerciales.
   ============================================================ */
.props__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.props__filter {
  display: grid;
  gap: var(--space-3xs);
  flex: 1 1 12rem;
  min-width: 11rem;
}

.props__filter-label {
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.props__select {
  width: 100%;
}

.props__reset {
  border: 0;
  background: none;
  padding: var(--space-2xs) var(--space-3xs);
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.props__reset:hover {
  color: var(--link-hover);
}

.props__count {
  margin-top: var(--space-lg);
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.props__grid {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
  gap: var(--space-lg);
}

.props__empty {
  margin-top: var(--space-lg);
  color: var(--text-secondary);
}

/* ---- Tarjeta ---- */
.prop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.prop-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.prop-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600) 62%, var(--teal-700));
  overflow: hidden;
}

/* Variantes sutiles por tipo, para que el grid no se vea monocorde */
.prop-card__media--casa {
  background: linear-gradient(135deg, var(--navy-800) 30%, var(--teal-700));
}

.prop-card__media--penthouse {
  background: linear-gradient(160deg, var(--navy-900), var(--navy-600));
}

.prop-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.prop-card:hover .prop-card__img {
  transform: scale(1.04);
}

.prop-card__initial {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: 5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  user-select: none;
}

.prop-card__badge {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  padding: 0.15em 0.65em;
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--white);
  background-color: rgba(26, 43, 69, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
}

.prop-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
}

.prop-card__meta {
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.prop-card__name {
  font-size: var(--step-1);
  line-height: var(--lh-tight);
}

/* Toda la tarjeta es clicable: enlace estirado en el nombre */
.prop-card__link {
  color: inherit;
  text-decoration: none;
}

.prop-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.prop-card:hover .prop-card__link,
.prop-card__link:focus-visible {
  color: var(--link);
}

.prop-card__price {
  font-size: var(--step-0);
  font-weight: var(--fw-bold);
  color: var(--text-brand);
}

.prop-card__specs {
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.prop-card__visas {
  position: relative;
  z-index: 2;
  margin-top: var(--space-2xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

a.prop-card__visa {
  text-decoration: none;
}

a.prop-card__visa:hover,
a.prop-card__visa:focus-visible {
  background-color: var(--teal-700);
  color: var(--white);
}

.prop-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  color: var(--link);
}

.prop-card__more .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.prop-card:hover .prop-card__more .icon {
  transform: translateX(4px);
}

/* ---- Detalle: galería ---- */
.prop-gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-sm);
}

.prop-gallery__item {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--navy-050);
}

.prop-gallery__item:only-of-type {
  grid-column: 1 / -1;
}

.prop-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.prop-gallery__item:only-of-type .prop-gallery__img {
  aspect-ratio: 16 / 9;
}

.prop-gallery__badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
}

/* ---- Detalle: ficha de datos ---- */
.prop-facts {
  margin: var(--space-md) 0 0;
  display: grid;
  gap: var(--space-2xs);
}

.prop-facts__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--border);
}

.prop-facts__row dt {
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.prop-facts__row dd {
  margin: 0;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-align: right;
}

.prop-facts__visas {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.prop-facts__visa-label {
  display: block;
  width: 100%;
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.prop-facts__visas .tag {
  text-decoration: none;
}

.prop-facts__visas a.tag:hover,
.prop-facts__visas a.tag:focus-visible {
  background-color: var(--teal-700);
  color: var(--white);
}
}

/* ===== components/firm.css ===== */
@layer components {
/* ============================================================
   firm.css — La Firma: maquetación editorial de portada (capa
   components). Entradilla display, cuerpo a dos columnas con
   letra capital, valores numerados sobre navy que se encienden
   al leer (route-steps.js) y panel de sectores del grupo.
   ============================================================ */

/* —— Ritmo del bloque editorial (entradilla → columnas → cita) ——
   Stack con huecos deliberados; sin retícula que cruce el texto.
   El ancho se limita en los hijos (no en .u-container: utilities gana
   la capa y pisa max-width del container). */
#quienes-somos > .u-container,
#who-we-are > .u-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(var(--space-xl), 3vw, var(--space-2xl));
}

#quienes-somos .firm-standfirst,
#who-we-are .firm-standfirst,
#quienes-somos .firm-columns,
#who-we-are .firm-columns,
#quienes-somos .route-pull,
#who-we-are .route-pull {
  width: 100%;
  max-width: 48rem;
}

/* —— Entradilla (standfirst) ——
   Lato ligera, NO serif: a este tamaño Fraunces cansa.
   Más ancha y con más aire que un lead normal de página. */
.firm-standfirst {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.85rem);
  line-height: 1.42;
  color: var(--navy-800);
  max-width: 36ch;
  text-wrap: balance;
  margin: 0;
  /* Filo teal de revista: ancla el bloque sin dibujar una caja. */
  padding-left: clamp(var(--space-md), 2vw, var(--space-lg));
  border-left: 3px solid var(--teal-500);
}

/* Entrada del bloque editorial (cascada data-reveal-delay).
   !important: [data-reveal] vive en utilities, que en build gana por capa. */
@media (prefers-reduced-motion: no-preference) {
  #quienes-somos [data-reveal],
  #who-we-are [data-reveal] {
    transform: translateY(2.25rem) !important;
  }

  #quienes-somos [data-reveal].is-revealed,
  #who-we-are [data-reveal].is-revealed {
    transform: none !important;
  }
}

/* —— Cuerpo a dos columnas: grid (no multi-column) ——
   Cada <p> es una columna estable; la regla va en el segundo párrafo
   para no depender del balanceo de columns. */
.firm-columns {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-lg);
}

.firm-columns p {
  margin: 0;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.firm-columns > p:first-child {
  padding-right: clamp(var(--space-md), 3vw, var(--space-xl));
}

.firm-columns > p + p {
  padding-left: clamp(var(--space-md), 3vw, var(--space-xl));
  border-left: 1px solid var(--border-subtle);
}

/* Capital editorial: Fraunces display, alineada ópticamente al cuerpo. */
.firm-columns > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: 3.6em;
  line-height: 0.82;
  padding-right: 0.12em;
  margin-top: 0.08em;
  color: var(--teal-700);
}

@media (max-width: 48rem) {
  .firm-columns {
    grid-template-columns: 1fr;
  }

  .firm-columns > p:first-child {
    padding-right: 0;
  }

  .firm-columns > p + p {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
  }
}

/* —— Cita: alinea al bloque (no centrada) y cierra la página editorial —— */
#quienes-somos .route-pull,
#who-we-are .route-pull {
  margin-inline: 0;
  margin-top: 0;
  max-width: 38rem;
  padding-top: var(--space-md);
  /* Espacio para la comilla de cierre (mismo tamaño que la apertura). */
  padding-bottom: clamp(var(--space-xl), 4vw, 3rem);
  padding-left: clamp(var(--space-xl), 5vw, 4.5rem);
  padding-right: clamp(var(--space-lg), 4vw, 3rem);
  border-top: 1px solid var(--border-subtle);
}

/* —— Retrato del fundador como fondo del bloque editorial ——
   Recorte con alpha (assets/fotos/fmp.webp) anclado al pie derecho de
   quiénes-somos en pantallas anchas: presencia institucional tras el
   texto. El contenedor reserva el carril derecho para que las columnas
   nunca lo pisen; en pantallas medianas/chicas se retira. Decorativo
   (aria-hidden): el fundador ya está nombrado en el propio texto. */
.firm-founder {
  display: none;
}

@media (min-width: 90rem) {
  .firm-founder {
    display: block;
    position: absolute;
    right: clamp(var(--space-lg), 4vw, 7rem);
    bottom: 0;
    z-index: -1; /* tras el texto; sobre el fondo de la sección */
    width: clamp(22rem, 24vw, 30rem);
    height: auto;
    pointer-events: none;
    filter: saturate(0.94) drop-shadow(0 28px 44px rgba(30, 35, 48, 0.28));
  }

  /* El stack editorial ya va a 48rem a la izquierda del container;
     el retrato ocupa el carril derecho sin empujar el texto. */
}

/* —— Valores sobre navy profundo con supergráfico —— */
.firm-values {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--space-2xl), 8vw, 6rem);
  background:
    radial-gradient(120% 90% at 80% 8%, rgba(0, 166, 156, 0.45), transparent 60%),
    linear-gradient(155deg, var(--navy-700), var(--navy-900));
  color: var(--text-on-inverse);
}

.firm-values::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -8%;
  bottom: -30%;
  width: clamp(18rem, 34vw, 34rem);
  aspect-ratio: 502 / 658;
  background: url("/assets/brand/signia-simbolo-blanco.png") center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%);
}

.firm-values > .u-container {
  position: relative;
  z-index: 1;
}

.firm-values .eyebrow {
  color: var(--teal-300);
}

.firm-values__title {
  font-size: var(--step-3);
  color: var(--white);
}

.firm-values__lead {
  margin-top: var(--space-sm);
  max-width: 52ch;
  font-size: var(--step-1);
  color: var(--text-muted-inverse);
}

.firm-values__grid {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) clamp(var(--space-xl), 5vw, var(--space-2xl));
}

.firm-value {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: var(--space-md);
  align-items: start;
  position: relative;
  isolation: isolate;
}

/* Halo de hover: pseudo absoluto que desborda el ítem para no tocar el
   layout de la retícula; z-index -1 queda contenido por isolation. */
.firm-value::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--space-md)) calc(-1 * var(--space-lg));
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, rgba(0, 166, 156, 0.14), rgba(255, 255, 255, 0.04) 55%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-brand);
}

/* Numeral en contorno que se rellena teal al entrar en viewport */
.firm-value__num {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: var(--step-3);
  line-height: 0.9;
  color: rgba(255, 255, 255, 0.28);
  transition:
    color 600ms var(--ease-brand),
    transform var(--dur-base) var(--ease-brand),
    text-shadow var(--dur-base) var(--ease-brand);
}

@supports (-webkit-text-stroke: 1px black) {
  .firm-value__num {
    color: transparent;
    -webkit-text-stroke: 1.25px rgba(255, 255, 255, 0.35);
    transition:
      color 600ms var(--ease-brand),
      -webkit-text-stroke-color 600ms var(--ease-brand),
      transform var(--dur-base) var(--ease-brand),
      text-shadow var(--dur-base) var(--ease-brand);
  }
}

.firm-value.is-active .firm-value__num {
  color: var(--teal-300);
  -webkit-text-stroke-color: var(--teal-300);
}

/* inline-block para que el subrayado dibujado mida el ancho del texto,
   no el de la columna */
.firm-value__title {
  display: inline-block;
  font-size: var(--step-1);
  color: var(--white);
  background-image: linear-gradient(var(--teal-300), var(--teal-300));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur-base) var(--ease-brand);
}

.firm-value__text {
  margin-top: var(--space-2xs);
  color: var(--text-muted-inverse);
  transition: color var(--dur-base) var(--ease-brand);
}

/* —— Hover: el valor se "enciende" (acento teal = interacción, §4.1).
   Solo en punteros con hover real; el lift respeta reduced-motion
   (las duraciones ya colapsan a 0 vía tokens de motion). —— */
@media (hover: hover) {
  .firm-value:hover::before {
    opacity: 1;
  }

  .firm-value:hover .firm-value__num {
    color: var(--teal-300);
    -webkit-text-stroke-color: var(--teal-300);
    text-shadow: 0 0 1.75rem rgba(0, 166, 156, 0.55);
  }

  .firm-value:hover .firm-value__title {
    background-size: 100% 2px;
  }

  .firm-value:hover .firm-value__text {
    color: var(--text-on-inverse);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .firm-value:hover .firm-value__num {
    transform: translateY(-0.1em);
  }
}

@media (max-width: 48rem) {
  .firm-values__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .firm-value {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
}

/* —— Split con panel de sectores (Grupo FM) —— */
.firm-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
  gap: var(--space-2xl) clamp(var(--space-xl), 6vw, 6rem);
  align-items: start;
}

.firm-sectors {
  display: grid;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--teal-500);
}

/* Logo del holding (marca de tercero: color real, tamaño contenido) */
.firm-sectors__logo {
  width: min(12rem, 85%);
  height: auto;
  margin-bottom: var(--space-2xs);
}

.firm-sectors .eyebrow {
  margin-bottom: var(--space-2xs);
}

.firm-sectors__item {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  letter-spacing: var(--tracking-serif);
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--navy-800);
}

@media (max-width: 64rem) {
  .firm-split {
    grid-template-columns: 1fr;
  }
}
}

/* ===== components/value-card.css ===== */
@layer components {
/* ============================================================
   value-card.css — Valor de la firma (capa components)
   Ética · Transparencia · Eficiencia · Confidencialidad · Lealtad.
   ============================================================ */
.value-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-2xs);
  color: var(--text-brand);
}

.value-card__title {
  font-size: var(--step-1);
}

.value-card__text {
  color: var(--text-secondary);
}

.value-card--inverse {
  background-color: var(--navy-800);
  border-color: var(--navy-600);
  color: var(--text-on-inverse);
}

.value-card--inverse .value-card__icon {
  color: var(--teal-300);
}

.value-card--inverse .value-card__text {
  color: var(--text-muted-inverse);
}
}

/* ===== components/tag.css ===== */
@layer components {
/* ============================================================
   tag.css — Etiqueta / píldora (capa components)
   Categorías de Insights, filtros, marcadores.
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.25em 0.75em;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--text-brand);
  background-color: var(--teal-100);
  border-radius: var(--radius-pill);
}

/* Tintes de la paleta extendida (brief §4.4): rotar por tarjeta en
   Insights. Cada tinte usa SU color de texto asignado (>4.5:1). */
.tag--coral {
  color: var(--coral-tinte-text);
  background-color: var(--coral-tinte);
}

.tag--ambar {
  color: var(--ambar-tinte-text);
  background-color: var(--ambar-tinte);
}

.tag--menta {
  color: var(--menta-tinte-text);
  background-color: var(--menta-tinte);
}

.tag--cielo {
  color: var(--cielo-tinte-text);
  background-color: var(--cielo-tinte);
}

.tag--neutral {
  color: var(--text-secondary);
  background-color: var(--navy-050);
}

.tag--solid {
  color: var(--white);
  background-color: var(--teal-700);
}

.tag--outline {
  color: var(--text-secondary);
  background-color: transparent;
  border: 1px solid var(--border-strong);
}

/* Sobre héroes de ruta (claros / espuma): chips legibles.
   Antes asumían navy y pintaban texto blanco → invisibles. */
.hero--route .tag {
  color: var(--text-primary);
  background-color: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.hero--route .tag--outline {
  color: var(--text-secondary);
  background-color: transparent;
  border-color: var(--border-strong);
  box-shadow: none;
}

/* Variante interactiva (filtro) */
a.tag,
button.tag {
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

a.tag:hover,
button.tag:hover,
.tag[aria-pressed="true"] {
  color: var(--white);
  background-color: var(--teal-700);
  border-color: var(--teal-700);
  box-shadow: none;
}
}

/* ===== components/accordion.css ===== */
@layer components {
/* ============================================================
   accordion.css — Acordeón / FAQ (capa components)
   Animación de altura accesible con grid-template-rows 0fr→1fr.
   aria-expanded/aria-controls los gestiona accordion.js.
   ============================================================ */
.accordion {
  border-top: 1px solid var(--border-subtle);
}

.accordion__item {
  border-bottom: 1px solid var(--border-subtle);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-2xs);
  text-align: left;
  font-size: var(--step-1);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.accordion__trigger:hover {
  color: var(--text-brand);
}

.accordion__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-brand);
  transition: transform var(--dur-base) var(--ease-brand);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
}

/* Panel: grid-rows animable (0fr cerrado → 1fr abierto) */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__content {
  padding: 0 var(--space-2xs) var(--space-lg);
  color: var(--text-secondary);
  max-width: var(--measure);
}

/* Fallback sin JS: usar [hidden] no oculta el contenido crítico */
@media (prefers-reduced-motion: reduce) {
  .accordion__panel {
    transition: none;
  }
}
}

/* ===== components/table-compare.css ===== */
@layer components {
/* ============================================================
   table-compare.css — Tabla comparativa (capa components)
   Visas / jurisdicciones (BVI, Nevis, Belice, Anguila).
   Responsive: scroll horizontal con 1ª columna y cabecera fijas.
   ============================================================ */
.table-compare {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

.table-compare table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: var(--step-0);
}

.table-compare caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-md) var(--space-md) var(--space-2xs);
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.table-compare th,
.table-compare td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
}

.table-compare thead th {
  position: sticky;
  top: 0;
  background-color: var(--navy-700);
  color: var(--text-on-inverse);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  z-index: 2;
}

.table-compare thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

/* Primera columna (criterios) fija al hacer scroll horizontal */
.table-compare tbody th {
  position: sticky;
  left: 0;
  background-color: var(--surface-muted);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  z-index: 1;
}

.table-compare tbody tr:hover td,
.table-compare tbody tr:hover th {
  background-color: var(--teal-100);
}

.table-compare td .icon {
  color: var(--success);
}
}

/* ===== components/cta-band.css ===== */
@layer components {
/* ============================================================
   cta-band.css — Franja de conversión reutilizable (capa components)
   Variantes: --inverse (navy) y --brand (teal). Marca de agua opcional.
   ============================================================ */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-2xl);
}

/* Antes navy sólido; versión clara en menta-tinte (el cliente vetó los
   bloques oscuros). El nombre --inverse se conserva porque está en ~20
   páginas generadas: hoy significa "banda de cierre". */
.cta-band--inverse {
  /* Quiebre diagonal de entrada (referencia del cliente: corte angular
     tipo España Abogados): la banda sube sobre la sección anterior y el
     clip-path deja ver su fondo en el ángulo. Vértice al 38%, poca
     profundidad — gesto, no montaña. */
  --cta-cut: clamp(2.5rem, 4vw, 4.5rem);
  background-color: var(--menta-tinte);
  color: var(--text-primary);
  margin-top: calc(-1 * var(--cta-cut));
  padding-top: calc(var(--space-2xl) + var(--cta-cut));
  clip-path: polygon(
    0 var(--cta-cut),
    38% 0,
    100% calc(var(--cta-cut) * 0.7),
    100% 100%,
    0 100%
  );
  /* Filo solo en la juntura inferior (el superior ahora es el quiebre). */
  border-bottom: 1px solid rgba(51, 59, 79, 0.12);
}

.cta-band--brand {
  background-color: var(--teal-700);
  color: var(--white);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-xl);
}

.cta-band__main {
  flex: 1 1 22rem;
  min-width: min(100%, 18rem);
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.cta-band__content {
  max-width: 52ch;
}

/* —— CTA con retrato del fundador (home) ——
   Misma foto recortada que /la-firma (assets/fotos/fmp.webp).
   Copy + botones a la izquierda; presencia humana a la derecha.
   El retrato escala con el hueco libre (no queda “sello” pequeño). */
.cta-band--with-portrait {
  padding-bottom: 0;
}

.cta-band--with-portrait .cta-band__inner {
  align-items: flex-end;
  gap: var(--space-xl) clamp(var(--space-lg), 4vw, var(--space-3xl));
  /* Deja que el retrato crezca con el carril derecho */
  min-height: clamp(18rem, 32vw, 26rem);
}

.cta-band--with-portrait .cta-band__main {
  flex: 1 1 20rem;
  max-width: 36rem;
  padding-block: 0 var(--space-2xl);
}

.cta-band__portrait {
  position: relative;
  flex: 1 1 16rem;
  display: block;
  /* Ocupa buena parte del espacio libre a la derecha del copy */
  width: clamp(16rem, 38vw, 28rem);
  max-width: min(100%, 30rem);
  margin: 0;
  margin-inline-start: auto;
  color: inherit;
  text-decoration: none;
  line-height: 0;
}

.cta-band__portrait img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
  filter: saturate(0.96) drop-shadow(0 18px 36px rgba(30, 35, 48, 0.22));
  transition: filter var(--dur-base) var(--ease-out);
}

.cta-band__portrait:hover img,
.cta-band__portrait:focus-visible img {
  filter: saturate(1) drop-shadow(0 22px 40px rgba(30, 35, 48, 0.28));
}

.cta-band__portrait:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.cta-band__portrait-meta {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.75rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: 0.5em 0.75em;
  line-height: 1.25;
  background-color: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cta-band__portrait-name {
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.cta-band__portrait-role {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-brand);
}

@media (max-width: 48rem) {
  .cta-band--with-portrait .cta-band__inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .cta-band--with-portrait .cta-band__main {
    max-width: none;
    padding-bottom: var(--space-md);
  }

  .cta-band__portrait {
    flex: 0 1 auto;
    width: min(100%, 20rem);
    max-width: 20rem;
    margin-inline: auto;
  }
}

.cta-band__title {
  font-size: var(--step-3);
  color: inherit;
}

.cta-band--inverse .cta-band__title {
  color: var(--text-primary);
}

.cta-band__text {
  margin-top: var(--space-sm);
  color: inherit;
  opacity: 0.92;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Sobre la banda clara, el botón secundario vuelve a su esquema de
   superficie clara aunque el HTML generado aún lleve .btn--on-inverse
   (así las ~20 páginas generadas no quedan con outline blanco invisible). */
.cta-band--inverse .btn--secondary {
  --btn-fg: var(--text-primary);
  --btn-bg-hover: rgba(242, 112, 94, 0.12);
  border-color: var(--border-strong);
}

/* Hover coral del botón secundario (brief §4.6): acento de energía. */
.cta-band--inverse .btn--secondary:hover {
  border-color: var(--coral);
}

/* CTA sobre teal: botón blanco con texto teal para contraste AA */
.cta-band--brand .btn--primary {
  --btn-bg: var(--white);
  --btn-fg: var(--teal-800);
  --btn-bg-hover: var(--teal-100);
}

/* Anillo de pulso en la banda navy (última llamada a la acción de la
   página): capta la mirada sin competir con el propio feedback de hover.
   Se pausa al interactuar y se omite con reduce-motion. */
@media (prefers-reduced-motion: no-preference) {
  .cta-band--inverse .cta-band__actions .btn--primary {
    animation: cta-pulse-teal 2.6s var(--ease-out) infinite;
  }

  .cta-band--inverse .cta-band__actions .btn--secondary {
    animation: cta-pulse-outline 2.6s var(--ease-out) infinite;
    animation-delay: 0.35s;
  }

  .cta-band--inverse .cta-band__actions .btn:hover,
  .cta-band--inverse .cta-band__actions .btn:focus-visible {
    animation-play-state: paused;
  }

  @keyframes cta-pulse-teal {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(0, 166, 156, 0.45);
    }
    50% {
      box-shadow: 0 0 0 12px rgba(0, 166, 156, 0);
    }
  }

  @keyframes cta-pulse-outline {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(242, 112, 94, 0.3);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(242, 112, 94, 0);
    }
  }
}

/* Marca de agua del símbolo: nítida y recortada sobre el color pleno
   (receta del panel del hero; la versión ampliada+difusa sigue vetada). */
.cta-band__motif {
  /* Símbolo blanco: invisible/vetado sobre la banda clara. */
  display: none;
  position: absolute;
  right: -5%;
  bottom: -30%;
  width: clamp(15rem, 26vw, 24rem);
  height: auto;
  opacity: 0.1;
  pointer-events: none;
  /* El PNG viene cortado a ras por la izquierda: desvanecer el borde. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%);
}
}

/* ===== components/callout.css ===== */
@layer components {
/* ============================================================
   callout.css — Bloque destacado (capa components)
   "Marco legal" en páginas de servicio + avisos legales (disclaimers).
   ============================================================ */
.callout {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--teal-100);
  border-left: 4px solid var(--teal-700);
  border-radius: var(--radius-md);
}

.callout__icon {
  flex-shrink: 0;
  color: var(--teal-700);
}

.callout__label {
  display: block;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-brand);
  margin-bottom: var(--space-3xs);
}

.callout__body {
  color: var(--text-primary);
}

.callout__body :where(p) {
  max-width: none;
}

/* Aviso legal (disclaimer): tono de advertencia neutro */
.callout--notice {
  background-color: var(--navy-050);
  border-left-color: var(--navy-500);
}

.callout--notice .callout__icon,
.callout--notice .callout__label {
  color: var(--text-secondary);
}

/* Sobre section--inverse / bandas navy: placa arena (crema del sistema),
   no blanco — coherente con el resto de callouts/tintes del sitio. */
.callout--on-inverse {
  background-color: var(--arena);
  border-left-color: var(--teal-700);
  box-shadow: var(--shadow-md);
}

.callout--on-inverse .callout__icon,
.callout--on-inverse .callout__label {
  color: var(--text-brand);
}

.callout--on-inverse .callout__body {
  color: var(--text-primary);
}

/* "Le asesoramos en" — listas con check */
.advise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.advise-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
}

.advise-list .icon {
  color: var(--teal-700);
  margin-top: 0.15em;
}

.advise-block {
  margin-bottom: var(--space-xl);
}

.advise-block__title {
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-brand);
  margin-bottom: var(--space-sm);
}
}

/* ===== components/logo-wall.css ===== */
@layer components {
/* ============================================================
   logo-wall.css — Muro de aliados (capa components)
   Grises a color en hover. PLAN §6 / §8.10.
   ============================================================ */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-lg);
  align-items: center;
}

.logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  min-height: 5rem;
}

.logo-wall__img {
  max-height: 3rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.65;
  transition:
    filter var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.logo-wall__item:hover .logo-wall__img,
.logo-wall__item:focus-within .logo-wall__img {
  filter: grayscale(0);
  opacity: 1;
}

/* Placeholder de aliado cuando aún no hay logotipo (texto) */
.logo-wall__placeholder {
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-align: center;
  filter: none;
  opacity: 0.8;
}
}

/* ===== components/instagram.css ===== */
@layer components {
/* ============================================================
   instagram.css — Rejilla del feed de Instagram (capa components)
   Las imágenes son LOCALES (las baja scripts/gen_instagram.py vía la Graph
   API en build-time), por eso pasan la CSP `img-src 'self'`. Chrome discreto:
   el titular serif manda; el acento teal solo aparece en hover/foco.
   ============================================================ */
.ig-feed__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* El título dentro del encabezado del feed no necesita su margen inferior:
   el espacio lo da .ig-feed__head. */
.ig-feed__head .section__title {
  margin-bottom: 0;
}

.ig-feed__handle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-brand);
  white-space: nowrap;
}

.ig-feed__handle svg {
  width: 1.15em;
  height: 1.15em;
}

.ig-feed__handle .icon {
  transition: transform var(--dur-base) var(--ease-brand);
}

.ig-feed__handle:hover .icon {
  transform: translateX(0.2rem);
}

/* Rejilla fluida: tiles cuadrados que se reflujan según el ancho.
   auto-fit (no auto-fill) para que las columnas vacías colapsen y las
   tiles reales crezcan a ocupar el espacio libre. */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-xs);
}

@media (min-width: 48rem) {
  .ig-grid {
    gap: var(--space-sm);
  }
}

.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--surface-muted);
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.ig-tile:hover {
  box-shadow: var(--shadow-md);
}

.ig-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-brand);
}

.ig-tile:hover .ig-tile__img,
.ig-tile:focus-visible .ig-tile__img {
  transform: scale(1.06);
}

/* Velo navy con la glifa de IG y un extracto del pie, revelado al pasar/foco. */
.ig-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-sm);
  color: var(--white);
  background: linear-gradient(to top, rgba(30, 35, 48, 0.82) 0%, rgba(30, 35, 48, 0) 62%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.ig-tile:hover .ig-tile__overlay,
.ig-tile:focus-visible .ig-tile__overlay {
  opacity: 1;
}

.ig-tile__glyph {
  width: 1.4rem;
  height: 1.4rem;
  align-self: flex-end;
  filter: drop-shadow(0 1px 2px rgba(30, 35, 48, 0.5));
}

.ig-tile__caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--step--1);
  line-height: 1.35;
}

.ig-tile:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ig-tile__img,
  .ig-tile:hover .ig-tile__img,
  .ig-tile:focus-visible .ig-tile__img {
    transition: none;
    transform: none;
  }
}
}

/* ===== components/download-card.css ===== */
@layer components {
/* ============================================================
   download-card.css — Tarjeta de descarga de Guía (capa components)
   Con gate de lead: el CTA abre el modal de captura. PLAN §8.14 / §14.
   ============================================================ */
.download-card {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: var(--space-lg);
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  /* Sombra de reposo: sin ella la tarjeta blanca se funde con la
     sección (mismo criterio que card-service y route-card). */
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.download-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--teal-200);
}

.download-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--text-brand);
  background-color: var(--teal-100);
  border-radius: var(--radius-md);
}

.download-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.download-card__title {
  font-size: var(--step-1);
  line-height: var(--lh-snug);
}

.download-card__desc {
  color: var(--text-secondary);
  font-size: var(--step--1);
}

.download-card__cta {
  margin-top: var(--space-xs);
  align-self: flex-start;
}

@media (max-width: 30rem) {
  .download-card {
    flex-direction: column;
    gap: var(--space-md);
  }
}
}

/* ===== components/form.css ===== */
@layer components {
/* ============================================================
   form.css — Formularios (capa components)
   PLAN §14: label asociado, aria-describedby, errores con aria-live,
   consentimiento Ley 81/2019, honeypot anti-spam. No depender solo del color.
   ============================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form__row {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 40rem) {
  .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form__label {
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.form__label--required::after {
  content: " *";
  color: var(--error);
}

.form__control {
  width: 100%;
  padding: 0.7em 0.9em;
  font-size: var(--step-0);
  color: var(--text-primary);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.form__control::placeholder {
  color: var(--gray-400);
}

.form__control:hover {
  border-color: var(--navy-500);
}

.form__control:focus-visible {
  border-color: var(--focus-ring);
  outline: 3px solid var(--teal-200);
  outline-offset: 0;
}

.form__control[aria-invalid="true"] {
  border-color: var(--error);
}

textarea.form__control {
  min-height: 8rem;
  resize: vertical;
}

/* Select con flecha propia */
select.form__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23007A72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  padding-right: 2.5em;
}

.form__hint {
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.form__error {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  color: var(--error);
}

.form__error[hidden] {
  display: none;
}

/* Checkbox de consentimiento */
.form__checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs) var(--space-sm);
  align-items: start;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.form__checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1em;
  accent-color: var(--teal-700);
}

/* Estado de envío (aria-live) */
.form__status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
}

.form__status[hidden] {
  display: none;
}

.form__status--success {
  color: var(--success);
  background-color: #e7f4ee;
  border: 1px solid var(--success);
}

.form__status--error {
  color: var(--error);
  background-color: #fbeae9;
  border: 1px solid var(--error);
}

/* Honeypot anti-spam: fuera de pantalla, oculto a usuarios reales */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* —— Contacto: layout con presencia (página /contacto) ——
   Arena de fondo + formulario en placa blanca + rail navy.
   Solo tokens de paleta (surface / inverse / menta / teal).
   El aire bajo el hero lo controla .section--snug (section.css). */
.form-shell {
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.contact-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.contact-rail__block + .contact-rail__block {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(237, 239, 242, 0.14);
}

.contact-rail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-md);
  color: var(--teal-700);
  background-color: var(--menta);
  border-radius: var(--radius-md);
}

.contact-rail__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "opsz" 144;
  font-size: var(--step-1);
  letter-spacing: var(--tracking-serif);
  color: var(--text-on-inverse);
  line-height: var(--lh-snug);
}

.contact-rail__text {
  margin-top: var(--space-sm);
  color: var(--text-muted-inverse);
  font-style: normal;
  line-height: var(--lh-body);
}

.contact-rail__list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.contact-rail .link {
  color: var(--menta);
}

.contact-rail .link:hover,
.contact-rail .link:focus-visible {
  color: var(--white);
}

.contact-rail__hours {
  margin-top: var(--space-md);
  font-size: var(--step--1);
  color: var(--text-muted-inverse);
}
}

/* ===== components/modal.css ===== */
@layer components {
/* ============================================================
   modal.css — Modal / diálogo (capa components)
   Lead capture de Guías. PLAN §12: foco gestionado, retorno de foco,
   cierre con Esc/overlay (modal.js). role="dialog" aria-modal.
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.modal[hidden] {
  display: none;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(30, 35, 48, 0.6);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.modal.is-open .modal__overlay {
  opacity: 1;
}

.modal__panel {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  padding: var(--space-xl);
  background-color: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(1rem) scale(0.98);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-brand);
}

.modal.is-open .modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.modal__close:hover {
  background-color: var(--navy-050);
  color: var(--text-primary);
}

.modal__eyebrow {
  margin-bottom: var(--space-2xs);
}

.modal__title {
  font-size: var(--step-2);
}

.modal__body {
  margin-top: var(--space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .modal__panel,
  .modal__overlay {
    transition: none;
  }
}
}

/* ===== components/cookie-consent.css ===== */
@layer components {
/* ============================================================
   cookie-consent.css — Banner de consentimiento (capa components)
   PLAN §14: accesible (aceptar/rechazar/configurar), no setear
   analítica hasta aceptar. cookie-consent.js gestiona el estado.
   ============================================================ */
.cookie-consent {
  position: fixed;
  inset-inline: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-toast);
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  transform: translateY(calc(100% + var(--gutter)));
  transition: transform var(--dur-base) var(--ease-brand);
}

.cookie-consent.is-visible {
  transform: translateY(0);
}

.cookie-consent__text {
  flex: 1 1 22rem;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.cookie-consent__text a {
  color: var(--text-brand);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent {
    transition: none;
  }
}
}

/* ===== components/help-ribbon.css ===== */
@layer components {
/* ============================================================
   help-ribbon.css — Cintillo "¿Cómo podemos ayudarle hoy?"
   (capa components). Barra fija al pie en todas las páginas:
   grafito en reposo, se enciende en teal al interactuar, y abre
   un panel de sugerencias hacia arriba (módulo help-ribbon.js).
   ============================================================ */
:root {
  --help-ribbon-h: 3.25rem;
}

.help-ribbon {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: calc(var(--z-header) - 10);
  print-color-adjust: exact;
}

/* Versión clara (el cliente vetó los bloques oscuros): barra blanca con
   filo superior que se enciende en teal al interactuar. */
.help-ribbon__bar {
  display: flex;
  align-items: center;
  min-height: var(--help-ribbon-h);
  background-color: var(--surface);
  border-top: 2px solid var(--border-subtle);
  box-shadow: 0 -6px 18px rgba(30, 35, 48, 0.08);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-top-color var(--dur-base) var(--ease-out);
}

.help-ribbon:hover .help-ribbon__bar,
.help-ribbon:focus-within .help-ribbon__bar {
  background-color: var(--espuma);
  border-top-color: var(--teal-500);
}

.help-ribbon__bar > .u-container {
  width: 100%;
}

.help-ribbon__form {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}

.help-ribbon__icon {
  flex: none;
  color: var(--text-secondary);
  transition: color var(--dur-base) var(--ease-out);
}

.help-ribbon:hover .help-ribbon__icon,
.help-ribbon:focus-within .help-ribbon__icon {
  color: var(--text-brand);
}

.help-ribbon__input {
  flex: 1;
  min-width: 0;
  padding-block: 0.875rem;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  outline: none;
}

.help-ribbon__input::placeholder {
  color: var(--text-secondary);
  opacity: 1;
  transition: color var(--dur-base) var(--ease-out);
}

.help-ribbon:hover .help-ribbon__input::placeholder,
.help-ribbon:focus-within .help-ribbon__input::placeholder {
  color: var(--text-primary);
}

/* —— Panel de sugerencias (se abre hacia arriba) —— */
.help-ribbon__panel {
  position: absolute;
  bottom: 100%;
  inset-inline: 0;
  max-height: min(50vh, 24rem);
  overflow-y: auto;
  background-color: var(--surface);
  border-top: 3px solid var(--teal-500);
  box-shadow: 0 -8px 24px rgba(30, 35, 48, 0.16);
}

.help-ribbon__list {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0;
}

.help-ribbon__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  color: var(--text-primary);
}

.help-ribbon__link:hover,
.help-ribbon__link:focus-visible {
  background-color: var(--teal-100);
  color: var(--teal-800);
}

.help-ribbon__group {
  flex: none;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.help-ribbon__empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  color: var(--text-secondary);
}

/* El contenido de página no queda tapado por la barra; los
   flotantes (volver-arriba, cookies) suben con ella. */
body:has(.help-ribbon) {
  padding-bottom: var(--help-ribbon-h);
}

body:has(.help-ribbon) .back-to-top,
body:has(.help-ribbon) .cookie-consent {
  bottom: calc(var(--gutter) + var(--help-ribbon-h));
}

@media (max-width: 48rem) {
  .help-ribbon__input {
    font-size: var(--step--1);
    padding-block: 0.75rem;
  }
}

@media print {
  .help-ribbon {
    display: none;
  }
}
}

/* ===== components/page-loader.css ===== */
@layer components {
/* ============================================================
   page-loader.css — Splash de entrada (capa components)
   Símbolo Signia en disco navy→teal, anillos concéntricos y arco
   teal girando. Solo primera visita por sesión (page-loader.js);
   sin JS, el <noscript> de la página lo elimina.
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast) + 100);
  display: grid;
  place-items: center;
  background-color: var(--surface);
  transition:
    opacity 450ms var(--ease-out),
    visibility 0s 450ms;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__badge {
  position: relative;
  width: clamp(8rem, 8vw + 6rem, 10rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: page-loader-in 650ms var(--ease-out) both;
}

/* Al salir, el emblema crece sutilmente mientras el velo se desvanece. */
.page-loader.is-done .page-loader__badge {
  transition:
    transform 450ms var(--ease-brand),
    opacity 450ms var(--ease-out);
  transform: scale(1.08);
  opacity: 0;
}

/* Anillos concéntricos finos (entran escalonados) */
.page-loader__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  animation: page-loader-ring 800ms var(--ease-out) 150ms both;
}

.page-loader__ring--inner {
  inset: 0.9rem;
  animation-delay: 280ms;
}

/* Arco de progreso girando */
.page-loader__arc {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--teal-500);
  border-radius: 50%;
  animation: page-loader-spin 1.1s linear infinite;
}

/* Disco central con el símbolo (misma receta de gradiente que avatar-ph) */
.page-loader__disc {
  width: 58%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(0, 166, 156, 0.55), transparent 60%),
    linear-gradient(155deg, var(--navy-700), var(--navy-900));
}

.page-loader__disc img {
  width: 46%;
  height: auto;
}

@keyframes page-loader-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes page-loader-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes page-loader-ring {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    /* El módulo JS lo retira al instante; esto evita el flash del arco. */
    display: none;
  }
}
}

/* ===== components/brand-edge.css ===== */
@layer components {
/* ============================================================
   brand-edge.css — Marca vertical en el borde izquierdo (capa
   components). Gesto editorial (ref. Eversheds): el wordmark en
   versalitas leyéndose de abajo hacia arriba, solo en pantallas
   con margen sobrante respecto al contenedor (1280px).
   ============================================================ */
.brand-edge {
  position: fixed;
  top: 50%;
  left: clamp(0.75rem, 1.4vw, 2rem);
  translate: 0 -50%;
  z-index: calc(var(--z-header) - 20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  pointer-events: none;
  user-select: none;
}

.brand-edge__name {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: 0.8125rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--navy-300);
}

/* Sello de origen: la bandera va DEBAJO de la marca (país nunca por
   encima de Signia), pequeña y en sus colores oficiales. */
.brand-edge__flag {
  width: 1.25rem;
  height: auto;
  border-radius: 2px;
  /* delimita los cuadrantes blancos sobre fondos claros */
  box-shadow: 0 0 0 1px var(--border-subtle);
}

@media (max-width: 90rem) {
  .brand-edge {
    display: none;
  }
}

@media print {
  .brand-edge {
    display: none;
  }
}
}

/* ===== components/sitemap-dir.css ===== */
@layer components {
/* ============================================================
   sitemap-dir.css — directorio del mapa del sitio (/mapa-del-sitio)
   Columnas tipo periódico; grupos renderizados desde nav.<lang>.json
   por render.js (renderSitemapDir) + grupos estáticos de la página.
   ============================================================ */
.sitemap-dir {
  columns: 3;
  column-gap: var(--space-xl);
}

@media (max-width: 63.999rem) {
  .sitemap-dir {
    columns: 2;
  }
}

@media (max-width: 40rem) {
  .sitemap-dir {
    columns: 1;
  }
}

.sitemap-dir__group {
  break-inside: avoid;
  margin-bottom: var(--space-xl);
}

.sitemap-dir__eyebrow {
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-brand);
  margin-bottom: var(--space-3xs);
}

.sitemap-dir__title {
  font-size: var(--step-1);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-sm);
}

.sitemap-dir__title a {
  color: inherit;
  text-decoration: none;
}

.sitemap-dir__title a:hover {
  color: var(--link);
}

.sitemap-dir__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.sitemap-dir__list a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.sitemap-dir__list a:hover {
  color: var(--link);
  text-decoration: underline;
}
}

/* ===== pages/styleguide.css ===== */
@layer pages {
/* ============================================================
   styleguide.css — Estilos propios del banco de pruebas (capa pages)
   Solo se usa en /styleguide. Muestra tokens y componentes para QA.
   ============================================================ */
.sg-hero {
  padding-block: var(--space-2xl);
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color: var(--text-on-inverse);
}

.sg-hero__kicker {
  color: var(--teal-300);
}

.sg-section {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--border-subtle);
}

.sg-section__head {
  margin-bottom: var(--space-lg);
}

.sg-section__num {
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-brand);
}

/* —— Swatches de color —— */
.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-md);
}

.sg-swatch {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--surface);
}

.sg-swatch__chip {
  height: 88px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-2xs);
  color: #fff;
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
}

.sg-swatch__meta {
  padding: var(--space-2xs) var(--space-sm) var(--space-sm);
}

.sg-swatch__name {
  font-weight: var(--fw-bold);
  font-size: var(--step--1);
}

.sg-swatch__val {
  font-size: var(--step--1);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.sg-swatch__contrast {
  display: inline-block;
  margin-top: var(--space-3xs);
  font-size: 0.75rem;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-pill);
  background-color: var(--navy-050);
  color: var(--text-secondary);
}

/* —— Specimen tipográfico —— */
.sg-type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}

.sg-type-row__label {
  flex: 0 0 9rem;
  font-size: var(--step--1);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* —— Demos de componentes —— */
.sg-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--surface-muted);
  border-radius: var(--radius-lg);
}

.sg-demo--dark {
  background-color: var(--surface-inverse);
}

.sg-demo--stack {
  flex-direction: column;
  align-items: stretch;
}

.sg-grid-tokens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-sm);
}

.sg-token-box {
  padding: var(--space-sm);
  background-color: var(--surface-muted);
  border-radius: var(--radius-md);
  font-size: var(--step--1);
}

.sg-token-box__demo {
  background-color: var(--teal-200);
  border-radius: var(--radius-sm);
  height: 12px;
  margin-bottom: var(--space-2xs);
}

/* Índice lateral del styleguide */
.sg-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-md);
}

.sg-toc a {
  font-size: var(--step--1);
  color: var(--text-on-inverse);
  border: 1px solid var(--navy-500);
  padding: 0.25em 0.75em;
  border-radius: var(--radius-pill);
}

.sg-toc a:hover {
  border-color: var(--teal-300);
  color: var(--teal-200);
}

.sg-note {
  font-size: var(--step--1);
  color: var(--text-secondary);
  background-color: var(--teal-100);
  border-left: 3px solid var(--teal-700);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}
}

/* ===== utilities/utilities.css ===== */
@layer utilities {
/* ============================================================
   utilities.css — Helpers atómicos (capa utilities, máxima prioridad)
   PLAN §16.2 · mantener AL MÍNIMO.
   ============================================================ */

/* Centro de contenido con gutter fluido */
.u-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

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

/* Ritmo vertical (owl) configurable con --flow */
.u-flow > * + * {
  margin-block-start: var(--flow, var(--space-sm));
}

/* Oculto visualmente, accesible para lectores de pantalla */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Oculto en todo medio */
.u-hidden {
  display: none !important;
}

/* Sección con superficie alterna */
.u-surface-muted {
  background-color: var(--surface-muted);
}

.u-surface-inverse {
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.u-text-center {
  text-align: center;
}

.u-no-scroll {
  overflow: hidden !important;
}

/* Aspect ratio del logo (evita CLS antes de cargar la imagen) */
.u-aspect-logo {
  aspect-ratio: 2424 / 792;
}

.u-aspect-symbol {
  aspect-ratio: 502 / 658;
}

/* Aparición al hacer scroll (reveal.js). Solo si el usuario acepta
   movimiento → si falla el JS o hay reduce-motion, el contenido se ve. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-brand);
  }

  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  [data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
  [data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
  [data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }
  [data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; }
  [data-reveal][data-reveal-delay="5"] { transition-delay: 400ms; }

  /* Variante de presentación para tarjetas (p. ej. Equipo): más
     recorrido y un punto de escala al entrar. */
  [data-reveal="card"] {
    transform: translateY(2rem) scale(0.97);
  }

  /* Caída desde arriba (“del cielo”): mayor recorrido + ligera rotación
     y overshoot brand. Ideal en bandas con overflow hidden (svc-sky). */
  [data-reveal="fall"] {
    opacity: 0;
    transform: translateY(-5.5rem) scale(0.94) rotate(-2deg);
    transition:
      opacity var(--dur-xslow) var(--ease-out),
      transform 1.15s var(--ease-brand);
  }

  [data-reveal="fall"].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Cascada más espaciada: se lee como lluvia de tarjetas, no un fade. */
  [data-reveal="fall"][data-reveal-delay="1"] { transition-delay: 160ms; }
  [data-reveal="fall"][data-reveal-delay="2"] { transition-delay: 320ms; }
  [data-reveal="fall"][data-reveal-delay="3"] { transition-delay: 480ms; }
  [data-reveal="fall"][data-reveal-delay="4"] { transition-delay: 640ms; }
  [data-reveal="fall"][data-reveal-delay="5"] { transition-delay: 800ms; }

  /* Escena coreografiada: el contenedor no se oculta — sus hijos
     definen su propia entrada al recibir .is-revealed (el CSS de la
     escena vive junto al componente, p. ej. media-band / service-dir). */
  [data-reveal="scene"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
}