/* ==========================================================================
   Breve — sistema de diseño sobre tokens de Carbon (IBM), tema White.
   Valores de @carbon/colors, @carbon/layout y @carbon/type v11.
   El color interactivo es el verde de Breve en su variante accesible.

   Regla de alineación: TODO vive dentro de .grid. Ningún elemento define
   su propio ancho máximo con márgenes automáticos, que es lo que hacía que
   los titulares no cuadraran con los mosaicos.
   ========================================================================== */

:root {
  --gray-10:#f4f4f4; --gray-20:#e0e0e0; --gray-30:#c6c6c6; --gray-40:#a8a8a8; --gray-50:#8d8d8d;
  --gray-60:#6f6f6f; --gray-70:#525252; --gray-80:#393939; --gray-90:#262626;
  --gray-100:#161616; --white:#fff;

  --background: var(--white);
  --layer-01: var(--gray-10);
  --border-subtle: var(--gray-20);
  --border-strong: var(--gray-50);
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-70);
  --text-helper: var(--gray-60);
  --field-01: var(--gray-10);

  --verde:       #00ab71;   /* marca — solo fondos con texto blanco */
  --interactive: #00704e;   /* 6.13:1 sobre blanco — texto y enlaces */
  --interactive-hover: #005c3d;
  --verde-claro: #4ecb95;   /* sobre fondos oscuros */

  /* Acento — familia púrpura de Carbon. Complementa al verde sin competir
     con él: el verde es el color de ACCIÓN (botones, enlaces, iconos) y el
     púrpura solo pinta CAMPOS de sección. Nunca al revés. */
  --ac-10:#f6f2ff; --ac-20:#e8daff; --ac-70:#6929c4;
  --ac-80:#491d8b; --ac-90:#31135e;

  --error:#da1e28; --success:#24a148; --warning:#f1c21b;

  --sp-01:.125rem; --sp-02:.25rem; --sp-03:.5rem;  --sp-04:.75rem;
  --sp-05:1rem;    --sp-06:1.5rem; --sp-07:2rem;   --sp-08:2.5rem;
  --sp-09:3rem;    --sp-10:4rem;   --sp-11:5rem;   --sp-12:6rem; --sp-13:10rem;

  --grid-max:82rem;      /* xlg de la rejilla 2x */
  --prosa:42rem;
  --nav-h:48px;
  --dur:110ms; --ease:cubic-bezier(.2,0,.38,.9);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 1rem); }

body {
  margin:0; background:var(--background); color:var(--text-primary);
  font-family:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:1rem; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
:focus-visible { outline:2px solid var(--interactive); outline-offset:-2px; }

h1,h2,h3,h4 { color:var(--text-primary); margin:0; letter-spacing:0; text-wrap:balance; }
p { margin:0; }
a { color:var(--interactive); }
a:hover { color:var(--interactive-hover); }

/* Marca registrada: el símbolo va pequeño y elevado, para que no pese
   sobre los titulares en peso 300 ni interrumpa la línea de texto. */
.marca {
  font-size:.68em; line-height:1; vertical-align:.42em;
  font-weight:400; letter-spacing:0; margin-left:.08em;
}

/* Escala expressive de Carbon */
.t-display { font-size:clamp(2rem,1.25rem + 3.4vw,3.375rem); line-height:1.19; font-weight:300; }
.t-h1      { font-size:clamp(2rem,1.5rem + 2.2vw,2.625rem); line-height:1.22; font-weight:300; }
.t-h2      { font-size:clamp(1.5rem,1.2rem + 1.3vw,2rem); line-height:1.25; font-weight:400; }
.t-h3      { font-size:1.25rem; line-height:1.4; font-weight:400; }
.t-body-lg { font-size:1.125rem; line-height:1.55; color:var(--text-secondary); }

/* --------------------------------------------------------------------------
   Rejilla y secciones — el único contenedor de ancho
   -------------------------------------------------------------------------- */
.grid { max-width:var(--grid-max); margin:0 auto; padding-inline:var(--sp-05); }
.section { padding-block:var(--sp-11); }
.section-lg { padding-block:var(--sp-12); }
.band { background:var(--ac-10); }
.rule { border:0; border-top:1px solid var(--border-subtle); margin:0; }

.sec-head > * { max-width:44rem; }
.sec-label { font-size:.875rem; letter-spacing:.16px; color:var(--interactive); margin-bottom:var(--sp-03); }
.sec-head p { margin-top:var(--sp-05); }
.sec-head + * { margin-top:var(--sp-09); }

/* --------------------------------------------------------------------------
   Botones — patrón de Carbon: texto a la izquierda, icono al borde derecho
   -------------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:flex-start; gap:0;
  position:relative; min-height:48px; max-width:20rem;
  padding:0 3.9375rem 0 .9375rem;      /* 63px / 15px — components/button/_mixins.scss:64 */
  font:inherit; font-size:.875rem; letter-spacing:.16px; text-decoration:none;
  border:1px solid transparent; border-radius:0; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn svg { flex:none; position:absolute; inset-inline-end:var(--sp-05); top:50%; transform:translateY(-50%); width:16px; height:16px; }
.btn-primary { background:var(--interactive); color:#fff; }
.btn-primary:hover { background:var(--interactive-hover); color:#fff; }
.btn-secondary { background:var(--gray-80); color:#fff; }
.btn-secondary:hover { background:var(--gray-70); color:#fff; }
.btn-tertiary { border-color:var(--interactive); color:var(--interactive); background:transparent; }
.btn-tertiary:hover { background:var(--interactive); color:#fff; }
.btn-ghost-light { border-color:#fff; color:#fff; background:transparent; }
.btn-ghost-light:hover { background:rgba(255,255,255,.14); color:#fff; }
.btn-block { width:100%; }

.link-arrow { display:inline-flex; align-items:center; gap:var(--sp-03); text-decoration:none; font-size:1rem; }
.link-arrow:hover { text-decoration:underline; }

/* --------------------------------------------------------------------------
   Mosaicos — la canaleta de 1px dibuja la retícula
   -------------------------------------------------------------------------- */
.tiles { display:grid; gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); }
.tiles-2 { grid-template-columns:repeat(2,1fr); }
.tiles-3 { grid-template-columns:repeat(3,1fr); }
.tiles-4 { grid-template-columns:repeat(4,1fr); }
.tile {
  background:var(--background); padding:var(--sp-06);
  display:flex; flex-direction:column; gap:var(--sp-03); min-height:11rem;
}
.tile h3 { font-size:1.25rem; font-weight:400; }
.tile p { font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); }
.tile .tile-foot { margin-top:auto; padding-top:var(--sp-05); }
.tile-ic { color:var(--interactive); margin-bottom:var(--sp-02); }
.band .tile { background:var(--white); }
.band a.tile:hover { background:var(--ac-20); }
a.tile { text-decoration:none; transition:background var(--dur) var(--ease); }
a.tile:hover { background:var(--layer-01); }
a.tile h3 { color:var(--text-primary); }
.band a.tile:hover { background:var(--gray-20); }

/* --------------------------------------------------------------------------
   Cifras
   -------------------------------------------------------------------------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-subtle); }
.stats-3 { grid-template-columns:repeat(3,1fr); }
.stat { background:var(--background); padding:var(--sp-06) var(--sp-05); }
/* Las cifras van en color sobre el tinte, no en un campo oscuro: un campo
   intenso por página, y en esta el que manda es el cierre. */
.band:has(.stats) { padding-block:var(--sp-03); }
.band:has(.stats) .stats { background:var(--ac-20); }
.band .stat { background:var(--ac-10); }
.band .stat .n { color:var(--ac-80); }
.stat .n { font-size:2.5rem; line-height:1.1; font-weight:300; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.stat .t { font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); margin-top:var(--sp-02); }

/* --------------------------------------------------------------------------
   Listas con regla — sustituyen a las tarjetas sueltas
   -------------------------------------------------------------------------- */
.deflist { display:grid; }
.defitem {
  display:grid; grid-template-columns:2.5rem 1fr; gap:var(--sp-05);
  padding-block:var(--sp-06); border-top:1px solid var(--border-subtle);
}
.deflist .defitem:last-child { border-bottom:1px solid var(--border-subtle); }
.defitem > *:not(.ic) { grid-column:2; min-width:0; }
.defitem .ic { grid-column:1; color:var(--interactive); padding-top:var(--sp-01); }
.defitem h3 { font-size:1rem; font-weight:600; margin-bottom:var(--sp-02); }
.defitem p { font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); }

/* Secuencias reales: el número informa */
.steps { counter-reset:paso; border-top:1px solid var(--border-subtle); }
.step {
  display:grid; grid-template-columns:3rem 1fr; gap:var(--sp-05);
  padding-block:var(--sp-06); border-bottom:1px solid var(--border-subtle);
}
.step > * { grid-column:2; min-width:0; }
.step::before {
  counter-increment:paso; content:counter(paso,decimal-leading-zero);
  grid-column:1; grid-row:1; font-size:1.25rem; font-weight:300;
  color:var(--interactive); font-variant-numeric:tabular-nums;
}
.step h3 { font-size:1rem; font-weight:600; margin-bottom:var(--sp-02); }
.step p { font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); }

/* --------------------------------------------------------------------------
   Formularios — campo de Carbon: fondo gris, solo borde inferior
   -------------------------------------------------------------------------- */
.form { display:grid; gap:var(--sp-05); }
.field { display:grid; gap:var(--sp-02); }
.field label { font-size:.75rem; color:var(--text-secondary); }
.field label .opt { color:var(--text-helper); }
.field input, .field select {
  font:inherit; font-size:1rem; height:48px; padding:0 var(--sp-05);
  color:var(--text-primary); background:var(--field-01);
  border:none; border-bottom:1px solid var(--border-strong); border-radius:0;
  transition:background var(--dur) var(--ease);
}
.field select {
  appearance:none; padding-right:var(--sp-09);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23161616' d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--sp-05) center;
}
.field input:focus, .field select:focus { outline:2px solid var(--interactive); outline-offset:-2px; border-bottom-color:transparent; }
.field input::placeholder { color:var(--text-helper); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note { font-size:.75rem; color:var(--text-helper); }

.notif { display:none; gap:var(--sp-04); padding:var(--sp-05); background:var(--layer-01); border-left:3px solid var(--border-strong); font-size:.875rem; letter-spacing:.16px; color:var(--text-primary); }
.notif.is-on { display:flex; }
.notif.ok { border-left-color:var(--success); }
.notif.err { border-left-color:var(--error); }

/* --------------------------------------------------------------------------
   Acordeón
   -------------------------------------------------------------------------- */
.faq { border-top:1px solid var(--border-subtle); max-width:var(--prosa); }
.faq details { border-bottom:1px solid var(--border-subtle); }
.faq summary {
  list-style:none; cursor:pointer; padding:var(--sp-05) var(--sp-07) var(--sp-05) 0;
  font-size:1rem; color:var(--text-primary); position:relative;
  transition:background var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:""; position:absolute; right:var(--sp-05); top:50%;
  width:9px; height:9px;
  border-right:1px solid var(--text-primary); border-bottom:1px solid var(--text-primary);
  transform:translateY(-70%) rotate(45deg); transition:transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform:translateY(-30%) rotate(225deg); }
.faq summary:hover { background:var(--layer-01); }
.faq .answer { padding:0 var(--sp-09) var(--sp-06) 0; font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); }

/* --------------------------------------------------------------------------
   Barra superior — UI shell de Carbon
   -------------------------------------------------------------------------- */
.shell { position:sticky; top:0; z-index:100; background:var(--gray-100); border-bottom:1px solid var(--gray-80); }
.shell-in {
  max-width:var(--grid-max); margin:0 auto; height:var(--nav-h);
  padding-inline:var(--sp-05); display:flex; align-items:center; gap:var(--sp-06);
}
.shell-logo { display:flex; align-items:center; height:100%; }
/* El logotipo claro ya viene en verde de marca: se usa tal cual, sin filtros */
.shell-logo img { height:20px; width:auto; }
.shell nav { display:flex; height:100%; margin-left:var(--sp-05); }
.shell nav a {
  display:flex; align-items:center; padding:0 var(--sp-05);
  font-size:.875rem; line-height:1.28572; letter-spacing:.16px; color:#c6c6c6; text-decoration:none;
  border:2px solid transparent; position:relative;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.shell nav a:hover { background:rgba(141,141,141,.16); color:#f4f4f4; }
.shell nav a[aria-current="page"] { color:#f4f4f4; border-bottom:3px solid var(--verde-claro); background:transparent; }
.shell-right { margin-left:auto; display:flex; align-items:center; height:100%; }
.shell-tel {
  display:flex; align-items:center; gap:var(--sp-03); padding-inline:var(--sp-05);
  font-size:.875rem; letter-spacing:.16px; color:#c6c6c6; text-decoration:none; font-variant-numeric:tabular-nums;
}
.shell-tel:hover { color:#fff; }
.shell-cta {
  display:flex; align-items:center; height:100%; padding-inline:var(--sp-05);
  background:var(--interactive); color:#fff; font-size:.875rem; letter-spacing:.16px; text-decoration:none;
}
.shell-cta:hover { background:var(--interactive-hover); color:#fff; }

.strip { background:var(--gray-90); color:#f4f4f4; font-size:.75rem; letter-spacing:.32px; }
.strip .grid { display:flex; align-items:center; gap:var(--sp-05); flex-wrap:wrap; padding-block:var(--sp-03); }
.strip a { color:var(--verde-claro); }
.strip .cuenta { font-variant-numeric:tabular-nums; color:#fff; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { background:var(--gray-100); color:#f4f4f4; }
.hero .grid { padding-block:var(--sp-12); }
.hero h1 { color:#fff; max-width:18ch; }
.hero .eyebrow { font-size:.875rem; letter-spacing:.16px; color:#c6c6c6; margin-bottom:var(--sp-05); }
/* Breadcrumb de Carbon: body-compact-01, enlaces en link-primary y la barra
   «/» a spacing-03 del anterior (components/breadcrumb/_breadcrumb.scss:72). */
.breadcrumb { margin-bottom:var(--sp-05); font-size:.875rem; line-height:1.28572; letter-spacing:.16px; }
.breadcrumb a { color:var(--verde-claro); text-decoration:none; }
.breadcrumb a:hover { color:#fff; text-decoration:underline; }
.breadcrumb a + a::before { content:"/"; color:#c6c6c6; margin-inline:var(--sp-03) var(--sp-02); }
.hero .lede { margin-top:var(--sp-06); max-width:42rem; font-size:1.125rem; color:#c6c6c6; }
.hero .actions { margin-top:var(--sp-08); display:flex; gap:1px; flex-wrap:wrap; }
.hero-compact .grid { padding-block:var(--sp-11); }
.hero-compact h1 { max-width:24ch; }
.hero .meta { margin-top:var(--sp-05); font-size:.875rem; letter-spacing:.16px; color:var(--gray-50); }

.hero-split { display:grid; grid-template-columns:1fr 25rem; gap:var(--sp-10); align-items:start; }
.hero-form { background:#fff; padding:var(--sp-07); color:var(--text-secondary); }
.hero-form h2 { font-size:1.25rem; font-weight:400; }
.hero-form .hint { font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); margin-top:var(--sp-03); }
.hero-form .form { margin-top:var(--sp-06); }
.hero-form .alt { margin-top:var(--sp-05); font-size:.875rem; letter-spacing:.16px; }

.checks { list-style:none; margin:var(--sp-07) 0 0; padding:0; display:grid; gap:var(--sp-04); max-width:36rem; }
.checks li { display:flex; gap:var(--sp-04); align-items:flex-start; font-size:.875rem; letter-spacing:.16px; }
.checks svg { flex:none; margin-top:var(--sp-01); color:var(--verde-claro); }

/* --------------------------------------------------------------------------
   Carrusel de capturas
   -------------------------------------------------------------------------- */
/* Ocupa toda la rejilla: con un max-width propio más estrecho se quedaba
   pegado a la izquierda y sobraban ~345px a su derecha. */
.slider-wrap { max-width:none; }
.slider {
  position:relative; overflow:hidden; border:1px solid var(--gray-80);
  aspect-ratio:16/9;   /* sin max-height: recortaba el 16:9 por arriba */
  cursor:grab; touch-action:pan-y;   /* el arrastre horizontal es nuestro; el scroll vertical, del navegador */
}
.slider.arrastrando { cursor:grabbing; }
.slider-images {
  /* El ancho sale del número de láminas, que declara la pista con
     --laminas. Antes iba cableado a 5 y añadir una captura lo rompía. */
  display:flex; width:calc(var(--laminas, 5) * 100%); height:100%;
  transform:translateX(0); will-change:transform;
  transition:transform .42s var(--ease);
}
.slider-images.sin-transicion { transition:none; }
.slider-images img {
  width:calc(100% / var(--laminas, 5)); height:100%;
  object-fit:cover; object-position:top center;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.slider-dots { display:flex; gap:var(--sp-02); margin-top:var(--sp-05); }
/* El punto se ve de 10px pero el área de toque es de 26px: en el móvil
   un blanco de 10px es inalcanzable. */
.slider-dot {
  width:26px; height:26px; padding:8px; border:none; cursor:pointer;
  background:rgba(255,255,255,.3); background-clip:content-box;
  transition:background var(--dur) var(--ease);
}
.slider-dot:hover { background:rgba(255,255,255,.55); background-clip:content-box; }
.slider-dot[aria-current="true"] { background:var(--verde-claro); background-clip:content-box; }
.slider-dot:focus-visible { outline:2px solid var(--verde-claro); outline-offset:-2px; }

/* --------------------------------------------------------------------------
   Comparativa y capturas
   -------------------------------------------------------------------------- */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); }
.compare > div { background:var(--background); padding:var(--sp-07); }
.band .compare > div { background:var(--white); }
.compare h3 { font-size:1rem; font-weight:600; margin-bottom:var(--sp-05); }
.compare ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-04); }
.compare li { display:flex; gap:var(--sp-04); font-size:.875rem; letter-spacing:.16px; }
.compare .mk { flex:none; width:1rem; font-weight:600; }
.compare .antes .mk { color:var(--text-helper); }
.compare .despues .mk { color:var(--interactive); }

/* Dos columnas que se apilan; iba como estilo en línea y por eso no
   respondía: los estilos en línea ganan a cualquier media query. */
.dos-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-10); align-items:start; }

figure.shot { margin:0; }
figure.shot img { border:1px solid var(--border-subtle); width:100%; }
figure.shot figcaption { margin-top:var(--sp-04); font-size:.875rem; letter-spacing:.16px; color:var(--text-helper); }

/* Bloque de llamada a la acción, según cta-block de @carbon/ibmdotcom-styles:
   fondo normal, sin relleno de color ni barra lateral. Lo que lo separa del
   texto de alrededor es una regla y el espaciado, no una caja. */
.bloque-cta {
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-07); align-items:end;
  border-top:1px solid var(--border-subtle); padding-top:var(--sp-08);
}
.bloque-cta .sec-label { margin-bottom:var(--sp-03); }
.bloque-cta h3 { font-size:1.25rem; line-height:1.4; font-weight:400; margin-bottom:var(--sp-04); }
.bloque-cta p { font-size:1rem; line-height:1.5; color:var(--text-secondary); max-width:44rem; }
.bloque-cta > div:last-child { padding-bottom:var(--sp-01); }

/* --------------------------------------------------------------------------
   Prosa de artículos — el contenido original entra tal cual aquí
   -------------------------------------------------------------------------- */
.prosa { max-width:var(--prosa); }
/* body-02 de Carbon: 16px / 1.5, sin tracking, en text-primary. El 18/1.6
   gris anterior se leía como blog, no como documentación de IBM. */
.prosa p { margin-bottom:var(--sp-05); font-size:1rem; line-height:1.5; color:var(--text-primary); }
/* El primer párrafo hace de entradilla */
.prosa > p:first-child, .prosa > .legal + p:first-of-type { font-size:1.25rem; line-height:1.4; font-weight:300; }
/* heading-04: 28px / 1.28572 / 400. Carbon nunca subraya un titular con una
   regla; además chocaba con el borde superior de la primera tarjeta. */
.prosa h2 { font-size:1.75rem; line-height:1.28572; font-weight:400; margin:var(--sp-10) 0 var(--sp-05); padding:0; border:0; }
.prosa > h2:first-child { margin-top:0; }
/* heading-03: 20px / 1.4 / 400 — no existe un token de 20px en semibold */
.prosa h3 { font-size:1.25rem; line-height:1.4; font-weight:400; margin:var(--sp-08) 0 var(--sp-03); }
/* Listas con los marcadores de Carbon: raya (–) para las simples, cuadradito
   (▪) para las anidadas y número con punto para las ordenadas. Siempre fuera
   del flujo del texto, para que las líneas que dan la vuelta queden alineadas
   con la primera y no bajo el marcador. Valores de @carbon/styles/list. */
.prosa ul, .prosa ol { list-style:none; margin:var(--sp-05) 0 var(--sp-06); padding:0; }
.prosa ul { margin-inline-start:var(--sp-05); }
.prosa ol { margin-inline-start:var(--sp-06); counter-reset:item; }
.prosa li { margin-bottom:0; font-size:1rem; line-height:1.5; color:var(--text-primary); position:relative; }
.prosa ul > li::before {
  content:"\002013"; position:absolute;
  inset-inline-start:calc(-1 * var(--sp-05)); color:var(--text-helper);
}
.prosa ol > li::before {
  content:counter(item) "."; counter-increment:item; position:absolute;
  inset-inline-start:-1.5rem; color:var(--text-helper); font-variant-numeric:tabular-nums;
}
.prosa ul ul, .prosa ol ol { margin-block:var(--sp-04); margin-inline-start:2rem; }
.prosa ul ul > li { padding-inline-start:var(--sp-02); }
.prosa ul ul > li::before { content:"\0025AA\00FE0E"; inset-inline-start:calc(-1 * var(--sp-04)); }
.prosa ol ol { list-style:lower-latin; }
.prosa ol ol > li::before { content:none; }

/* Lista estructurada: pares etiqueta/valor separados por reglas, como la
   structured list de Carbon. Sustituye a los párrafos con negrita al inicio. */
.prosa .datos {
  display:grid; grid-template-columns:minmax(7rem, 13rem) 1fr;
  margin:var(--sp-06) 0 var(--sp-08);
}
.aviso a { display:inline-block; margin-top:var(--sp-04); font-size:.875rem; letter-spacing:.16px; }
.prosa .datos dt {
  padding:var(--sp-05) var(--sp-06) var(--sp-05) 0; margin:0;
  font-size:1rem; font-weight:600; color:var(--text-primary);
  border-bottom:1px solid var(--border-subtle);
}
.prosa .datos dd {
  padding:var(--sp-05) 0; margin:0; font-size:1rem; color:var(--text-secondary);
  border-bottom:1px solid var(--border-subtle);
}

/* Documento legal: el número de sección vive en el margen, no dentro del
   titular. Mismo patrón que los pasos de la guía DGII. */
.prosa .legal { counter-reset:seccion; border-top:1px solid var(--border-subtle); }
.prosa .legal section {
  counter-increment:seccion;
  display:grid; grid-template-columns:3rem 1fr; gap:var(--sp-05);
  padding-block:var(--sp-08); border-bottom:1px solid var(--border-subtle);
}
.prosa .legal section > * { grid-column:2; min-width:0; }
.prosa .legal section::before {
  content:counter(seccion,decimal-leading-zero); grid-column:1; grid-row:1;
  font-size:1.25rem; font-weight:300; color:var(--interactive);
  font-variant-numeric:tabular-nums; line-height:1.5;
}
.prosa .legal section h2 { margin:0 0 var(--sp-05); padding:0; border:0; font-size:1.25rem; line-height:1.4; font-weight:600; }
.prosa .legal section > *:last-child { margin-bottom:0; }

/* Mosaicos dentro de la columna de texto: se ajustan solos al ancho
   disponible en vez de forzar tres columnas que quedarían apretadas. */
.prosa .tiles-contacto { grid-template-columns:repeat(auto-fit, minmax(10.5rem, 1fr)); margin:var(--sp-06) 0 0; }
.prosa .tiles-contacto .tile { min-height:9rem; padding:var(--sp-05); }
.prosa .tiles-contacto h3 { font-size:1rem; font-weight:600; margin:0; }
.prosa .tiles-contacto .tile-foot { font-size:.875rem; letter-spacing:.16px; padding-top:var(--sp-04); }

/* Inline notification de Carbon. Tokens de components/notification/
   _inline-notification.scss y themes/_notification-tokens.scss:
   fondo #fcf4d6 (no layer-01), contorno de 1px al 40%, icono relleno de 20px
   en el color de soporte, título heading-compact-01 y cuerpo body-compact-01. */
.aviso {
  position:relative; display:grid; grid-template-columns:auto 1fr;
  background:#fcf4d6; border-left:3px solid var(--warning);
  padding:0 var(--sp-05) 0 0; min-height:3rem; max-width:46rem;
  margin:var(--sp-06) 0 var(--sp-08);
}
.aviso a { display:inline-block; margin-top:var(--sp-04); font-size:.875rem; letter-spacing:.16px; }
.aviso::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--warning); border-left:0; opacity:.4;
}
.aviso .ic { color:var(--warning); margin:14px var(--sp-05) 0 13px; }
.aviso > div:last-child { padding:15px 0; }
.aviso h3 {
  margin:0 var(--sp-02) 0 0; font-size:.875rem; line-height:1.28572;
  letter-spacing:.16px; font-weight:600; color:var(--text-primary);
}
.aviso p { margin:0; font-size:.875rem; line-height:1.28572; letter-spacing:.16px; color:var(--text-primary); }
/* La cuenta va como etiqueta dentro del titular del aviso, con cifras de
   ancho fijo para que no baile al cambiar de día. */
.aviso .cuenta {
  display:inline-block; margin-left:var(--sp-04);
  background:var(--gray-100); color:#fff; font-weight:400;
  font-size:.75rem; padding:2px var(--sp-03); vertical-align:2px;
  font-variant-numeric:tabular-nums;
}
.aviso .cuenta.vencido { background:var(--error); }
.strip .cuenta.vencido { color:#fd8b90; }

/* Tag de Carbon (components/tag/_tag.scss): border-radius 16px — es una
   PÍLDORA, no un rectángulo —, alto mínimo 24px, ancho mínimo 32px,
   label-01 (12px/1.33/0.32px). No existe un tag de marca sólido con texto
   blanco: los colores salen de themes/_tag-tokens.scss. */
.prosa .tag-ahora, .aviso .cuenta {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:1.5rem; min-width:2rem; padding:0 var(--sp-03);
  border-radius:1rem; font-size:.75rem; line-height:1.33333; letter-spacing:.32px;
  vertical-align:middle; white-space:nowrap;
}
.prosa .tag-ahora { background:#a7f0ba; color:#0e6027; margin-left:var(--sp-03); }
.aviso .cuenta { background:var(--gray-80); color:#fff; margin-left:var(--sp-03); font-variant-numeric:tabular-nums; }
.aviso .cuenta.vencido { background:#ffd7d9; color:#a2191f; }
/* Variante de lista estructurada con la etiqueta en la columna izquierda */
.prosa .datos dt small { display:block; font-weight:400; color:var(--text-helper); font-size:.75rem; letter-spacing:.32px; }

/* Documento largo sobre la rejilla 2x. Carbon no tiene «ancho de prosa»:
   tiene columnas. El texto ocupa 9 de 16 y el índice las 5 últimas, fijo al
   desplazarse — el patrón «On this page» de la documentación de IBM.
   El desplazamiento interior de 16px replica el margen de columna del grid
   (_css-grid.scss: gutter 32px / 2), que es lo que hace que el texto de
   Carbon arranque a 32px del borde y no a 16. */
.grid-doc { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); column-gap:var(--sp-07); }
.grid-doc .prosa { grid-column:1 / span 9; max-width:none; padding-inline:var(--sp-05) 0; }
.doc-nav {
  grid-column:12 / span 5; align-self:start;
  position:sticky; top:calc(var(--nav-h) + var(--sp-07));
}
.doc-nav .indice { margin:0; }
.doc-nav .indice ol { columns:1; }
@media (max-width:66rem) {
  .grid-doc { display:block; }
  .grid-doc .prosa { padding-inline:0; }
  .doc-nav { position:static; margin-bottom:var(--sp-09); }
  .doc-nav .indice ol { columns:2; }
}

/* Índice del documento */
.indice { margin:0 0 var(--sp-10); }
.indice h2 { font-size:1rem; font-weight:600; margin:0 0 var(--sp-04); padding:0; border:0; }
/* El marcador va DENTRO de la caja, no en desplazamiento negativo: en dos
   columnas un marcador negativo se sale de la columna y desaparece. */
.indice ol { counter-reset:idx; columns:2; column-gap:var(--sp-08); margin:0; margin-inline-start:0; padding:0; list-style:none; }
.indice li {
  counter-increment:idx; position:relative; padding-inline-start:var(--sp-07);
  margin-bottom:0; padding-block:var(--sp-02);
  font-size:.875rem; line-height:1.28572; letter-spacing:.16px; break-inside:avoid;
}
.indice li::before {
  content:counter(idx,decimal-leading-zero); position:absolute; inset-inline-start:0;
  color:var(--text-helper); font-variant-numeric:tabular-nums;
}
.indice a { text-decoration:none; }
.indice a:hover { text-decoration:underline; }

.prosa strong { font-weight:600; color:var(--text-primary); }

/* Texto destacado — el patrón real de IBM.
   Carbon core no tiene componente para esto; vive en @carbon/ibmdotcom-styles
   (components/quote/_quote.scss). Y no lleva ni fondo, ni caja, ni barra de
   color: el peso lo hace la tipografía. `quotation-01` es Plex SERIF a 20px
   regular /1.3, y a partir de md pasa a `quotation-02`, serif de 32px en peso
   300 /1.25 (@carbon/type/_styles.scss:463 y 496). La comilla va en serif,
   colgada fuera del texto, y debajo cierra una regla fina en border-strong. */
.prosa .cita {
  position:relative; margin:var(--sp-09) 0;
  padding:0 var(--sp-07) var(--sp-07) var(--sp-07);
  border-bottom:1px solid var(--border-strong);
  font-family:'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  font-size:1.25rem; font-weight:400; line-height:1.3; letter-spacing:0;
  color:var(--text-primary);
}
@media (min-width:42rem) {
  .prosa .cita { font-size:2rem; font-weight:300; line-height:1.25; padding-bottom:var(--sp-09); }
}
.prosa .cita::before {
  content:"\201C"; position:absolute; inset-inline-start:.6rem; top:0;
  font-family:'IBM Plex Serif', Georgia, serif;
  font-size:inherit; line-height:inherit; font-weight:inherit; color:var(--text-primary);
}
.prosa .cita p { margin:0; font:inherit; color:inherit; }

/* Tarjetas numeradas del contenido original */
.prosa .indicator-card, .prosa .pillar-card, .prosa .step-card {
  display:grid; grid-template-columns:3rem 1fr; gap:var(--sp-05);
  padding-block:var(--sp-07); border-top:1px solid var(--border-subtle); margin:0;
}
.prosa .indicator-card:last-of-type, .prosa .pillar-card:last-of-type, .prosa .step-card:last-of-type {
  border-bottom:1px solid var(--border-subtle);
}
.prosa .indicator-card > *:not(.indicator-number),
.prosa .pillar-card    > *:not(.pillar-number),
.prosa .step-card      > *:not(.step-number) { grid-column:2; min-width:0; }
.prosa .indicator-number, .prosa .pillar-number, .prosa .step-number {
  grid-column:1; grid-row:1; display:block; width:auto; height:auto; background:none;
  font-size:1.5rem; font-weight:300; color:var(--interactive);
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.prosa .indicator-card h3, .prosa .pillar-card h3, .prosa .step-card h3 { margin:0 0 var(--sp-03); font-size:1.25rem; line-height:1.4; font-weight:400; }
.prosa .indicator-card p, .prosa .pillar-card p, .prosa .step-card p { margin-bottom:0; font-size:1rem; color:var(--text-secondary); }


.prosa .comparison-table { width:100%; border-collapse:collapse; margin:var(--sp-08) 0; font-size:.875rem; letter-spacing:.16px; }
.prosa .comparison-table th, .prosa .comparison-table td {
  text-align:left; padding:var(--sp-05); border-bottom:1px solid var(--border-subtle);
  /* Carbon alinea arriba: con celdas de varias líneas, el centrado del
     navegador deja los textos flotando a alturas distintas. */
  vertical-align:top;
}
.prosa .comparison-table thead th { background:var(--layer-01); font-weight:600; color:var(--text-primary); font-size:.875rem; letter-spacing:.16px; }

.prosa .feature-list { list-style:none; margin:var(--sp-06) 0; }
.prosa .feature-list li { display:flex; gap:var(--sp-04); padding-block:var(--sp-04); border-bottom:1px solid var(--border-subtle); margin:0; font-size:1rem; }
.prosa .check { color:var(--interactive); flex:none; }
.prosa .screenshot-container { margin:var(--sp-08) 0; }
.prosa .screenshot-container img { border:1px solid var(--border-subtle); width:100%; }
.tabla-scroll { overflow-x:auto; }

/* --------------------------------------------------------------------------
   Cierre y pie
   -------------------------------------------------------------------------- */
.closer { background:var(--ac-80); color:var(--ac-20); }
.closer .sec-label, .closer .eyebrow { color:var(--verde-claro); }
.closer a:not(.btn) { color:var(--verde-claro); }
/* Botón blanco: sobre el campo de acento, el verde de marca solo daría
   3.86:1 y dejaría de leerse como botón. */
.closer .btn-primary { background:#fff; color:var(--ac-80); }
.closer .btn-primary:hover { background:var(--ac-10); color:var(--ac-90); }
.closer .grid { padding-block:var(--sp-11); }
.closer h2 { color:#fff; max-width:24ch; }
.closer p { margin-top:var(--sp-05); max-width:44rem; }
.closer .actions { margin-top:var(--sp-08); display:flex; gap:1px; flex-wrap:wrap; }

.foot { background:var(--gray-90); color:#c6c6c6; font-size:.875rem; letter-spacing:.16px; }
.foot .grid { padding-block:var(--sp-09); display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--sp-08); }
.foot img { height:22px; width:auto; margin-bottom:var(--sp-05); }
.foot h4 { color:#fff; font-size:.875rem; letter-spacing:.16px; font-weight:600; margin-bottom:var(--sp-04); }
.foot ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-03); }
.foot a { color:#c6c6c6; text-decoration:none; }
.foot a:hover { color:#fff; text-decoration:underline; }
.foot .legal { border-top:1px solid var(--gray-70); font-size:.75rem; color:#8d8d8d; }
.foot .legal .grid { display:flex; justify-content:space-between; gap:var(--sp-05); flex-wrap:wrap; padding-block:var(--sp-05); grid-template-columns:none; }

/* --------------------------------------------------------------------------
   Adaptación
   -------------------------------------------------------------------------- */
@media (max-width:66rem) {
  .dos-col { grid-template-columns:1fr; gap:var(--sp-08); }
  .hero-split { grid-template-columns:1fr; gap:var(--sp-08); }
  .hero-form { max-width:30rem; }
  .tiles-4 { grid-template-columns:repeat(2,1fr); }
  .foot .grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:42rem) {
  .dos-col { grid-template-columns:1fr; gap:var(--sp-08); }
  /* Las capturas densas se leen fatal a media pantalla: en móvil se sacan
     del relleno de .grid y ocupan todo el ancho de la pantalla.
     Va como figure.shot-bleed porque figure.shot (0,1,1) le gana a
     .shot-bleed (0,1,0) por especificidad, esté donde esté en el archivo. */
  figure.shot { margin-inline:calc(-1 * var(--sp-05)); }
  figure.shot img { border-left:0; border-right:0; }
  figure.shot figcaption { padding-inline:var(--sp-05); }
  .tiles-2, .tiles-3, .tiles-4 { grid-template-columns:1fr; }
  .stats, .stats-3 { grid-template-columns:repeat(2,1fr); }
  .compare { grid-template-columns:1fr; }
  .bloque-cta { grid-template-columns:1fr; gap:var(--sp-05); }
  .foot .grid { grid-template-columns:1fr; }
  .shell nav { display:none; }
  .shell-tel { display:none; }
  /* Sin menú ni teléfono sobra sitio en la barra: el logotipo crece para
     que se lea. 26px dentro de una barra de 48px deja aire suficiente. */
  .shell-logo img { height:26px; }
  .hero .grid { padding-block:var(--sp-10); }
  .btn { min-width:0; width:100%; }
  .hero .actions, .closer .actions { flex-direction:column; }
  .prosa .timeline-item, .prosa .indicator-card, .prosa .pillar-card, .prosa .step-card,
  .defitem, .step { grid-template-columns:1fr; gap:var(--sp-03); }
  /* Mi regla .prosa .tiles-contacto tiene más peso que .tiles-3, así que hay
     que nombrarla aquí o se queda en dos columnas apretadas. */
  .prosa .tiles-contacto { grid-template-columns:1fr; }
  .prosa .datos { grid-template-columns:1fr; }
  .prosa .datos dt { border-bottom:0; padding:var(--sp-05) 0 var(--sp-02); }
  .prosa .datos dd { padding-top:0; }
  .indice ol { columns:1; }
  .prosa .legal section { grid-template-columns:1fr; gap:var(--sp-03); }
  .prosa .legal section > *, .prosa .legal section::before { grid-column:1; }
  .prosa .indicator-number, .prosa .pillar-number, .prosa .step-number,
  .defitem .ic, .step::before { grid-column:1; }
  .prosa .indicator-card > *, .prosa .pillar-card > *, .prosa .step-card > *,
  .defitem > *, .step > * { grid-column:1; }
}
@media (prefers-reduced-motion:reduce) { *{animation:none!important;transition:none!important} html{scroll-behavior:auto} }
@media print { .shell,.strip,.closer,.hero-form{display:none!important} }

/* --------------------------------------------------------------------------
   Arquetipos del Mapa del Talento
   27 fichas con código, nombre, descripción y ángulo ciego. Se descartó la
   tabla: cuatro columnas de texto largo obligan a desplazamiento lateral en
   móvil, que es donde está el 73% del tráfico.
   -------------------------------------------------------------------------- */
.arqs { display:grid; gap:0; margin:var(--sp-07) 0; }
.arq {
  display:grid; grid-template-columns:9.5rem 1fr; gap:var(--sp-05);
  padding-block:var(--sp-06); border-top:1px solid var(--border-subtle);
}
.arqs .arq:last-child { border-bottom:1px solid var(--border-subtle); }
.arq .cod {
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.8125rem;
  color:var(--ac-70); letter-spacing:.32px; padding-top:.15rem;
}
.arq .cod b { display:block; color:var(--text-helper); font-weight:400; margin-bottom:var(--sp-02); }
.arq h4 { font-size:1rem; font-weight:600; margin:0 0 var(--sp-03); }
.arq p { font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); margin:0; }
.arq .ciego {
  margin-top:var(--sp-04); padding-left:var(--sp-05);
  border-left:2px solid var(--ac-20); color:var(--text-helper); font-size:.8125rem;
}
.arq .ciego b { color:var(--ac-70); font-weight:600; }
@media (max-width:42rem) {
  .arq { grid-template-columns:1fr; gap:var(--sp-03); }
  .arq .cod { display:flex; gap:var(--sp-04); align-items:baseline; }
  .arq .cod b { margin:0; }
}

/* Los tres vectores: tabla compacta que sí cabe */
.vectores td:first-child, .vectores th:first-child { white-space:nowrap; font-weight:600; }
.vectores .vc { font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.75rem; color:var(--ac-70); display:block; letter-spacing:.32px; }

/* Los grupos de arquetipos son subdivisiones de una sección, no secciones
   propias: si se marcan como <section> el contador del documento los numera
   aparte y aparece un número suelto en medio. */
.grupo-arq { margin-top:var(--sp-09); }
.grupo-arq h3 { font-size:1.25rem; font-weight:400; margin-bottom:var(--sp-02); }
.grupo-arq > .meta { color:var(--ac-70); margin-bottom:var(--sp-05); }

/* --------------------------------------------------------------------------
   Correcciones de la auditoría del 5-sep-2026 sobre /mapa-del-talento/
   -------------------------------------------------------------------------- */

/* El índice iba al FINAL del documento en móvil: con display:block el orden
   del DOM manda y `order` no aplica. El 73% del tráfico no lo veía hasta
   haber recorrido 23 pantallas. */
@media (max-width:66rem) {
  /* display:grid es imprescindible: la regla anterior pone display:block y
     con eso `order` no hace nada y el índice se queda al final del DOM. */
  .grid-doc { display:grid; grid-template-columns:minmax(0,1fr); column-gap:0; }
  .grid-doc .prosa { grid-column:auto; padding-inline:0; }
  .doc-nav { grid-column:auto; order:-1; position:static; margin-bottom:var(--sp-09); }
  /* A dos columnas, una lista anidada se parte y se sale del contenedor. */
  .doc-nav .indice > ol > li { break-inside:avoid; }
  .doc-nav .indice ol ol { columns:1; }
}

/* Tablas comparativas en móvil: con desplazamiento lateral la cuarta columna
   —la que compara con nuestra metodología— quedaba fuera de pantalla y sin
   pista visual. Carbon no reflowea tablas, pero para celdas de prosa larga
   ibm.com apila por fila. El data-th lleva el encabezado a cada celda. */
@media (max-width:42rem) {
  .prosa .comparison-table.vectores.apila,
  .prosa .comparison-table.vectores.apila tbody,
  .prosa .comparison-table.vectores.apila tr,
  .prosa .comparison-table.vectores.apila td { display:block; }
  .prosa .comparison-table.apila thead { position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .prosa .comparison-table.apila tr { padding-block:var(--sp-05);
    border-bottom:1px solid var(--border-subtle); }
  .prosa .comparison-table.apila td { padding:var(--sp-03) 0; border:0; }
  .prosa .comparison-table.apila td:first-child { padding:0 0 var(--sp-03);
    font-size:1rem; font-weight:600; color:var(--text-primary); }
  .prosa .comparison-table.apila td:not(:first-child)::before {
    content:attr(data-th); display:block; margin-bottom:var(--sp-01);
    font-size:.75rem; line-height:1.33333; letter-spacing:.32px; color:var(--text-helper); }
  .vectores td:first-child { white-space:normal; }
}

/* El aviso sin icono ni titular quedaba con el texto pegado al borde: las
   reglas de relleno viven en .aviso .ic y .aviso > div:last-child. */
.aviso > p:only-child { grid-column:1 / -1; padding:15px 0 15px var(--sp-05); }

/* «· Puro» y «· Integrador» computaban igual que el nombre del arquetipo. */
.arq .marca-arq { font-weight:400; font-size:.875rem; letter-spacing:.16px;
  color:var(--text-helper); white-space:nowrap; }

/* Un h2 de 20px no sostiene un documento de 16.000px. Carbon usa heading-04
   (28/36/400) para títulos de documento largo. Acotado a .grid-doc para no
   tocar las páginas legales, que son cortas. */
.grid-doc .legal section h2 { font-size:1.75rem; line-height:1.28572;
  font-weight:400; margin-bottom:var(--sp-06); }
.grupo-arq { margin-top:var(--sp-10); padding-top:var(--sp-07);
  border-top:1px solid var(--border-strong); }
.grupo-arq h3 { margin-top:0; }

/* Tamaños y alturas de línea que no estaban en la escala de Carbon:
   13px no existe, y el line-height:1.5 del body se filtraba a todo el
   texto de 14px, que en Carbon va siempre a 18 o a 20. */
.arq .cod { font-size:.875rem; line-height:1.42857; }
.arq .ciego { font-size:.875rem; line-height:1.28572; }
.vectores .vc { line-height:1.33333; }
.prosa .comparison-table th { line-height:1.28572; }
.prosa .comparison-table td { line-height:1.42857; }
.hero .meta, .sec-label { line-height:1.28572; }
.prosa .meta { font-size:.875rem; line-height:1.28572; letter-spacing:.16px;
  color:var(--text-helper); }
.grupo-arq > .meta { color:var(--ac-70); }

/* La tabla conserva su margen inferior dentro de .tabla-scroll, así que
   sumaba 80px antes de la regla de sección. */
.legal section > .tabla-scroll:last-child .comparison-table,
.legal section > .arqs:last-child { margin-bottom:0; }

/* Índice: subentradas de los grupos y estado activo */
.indice ol ol { margin:var(--sp-02) 0 0; padding:0; }
.indice ol ol li { padding-inline-start:var(--sp-06); font-size:.75rem;
  line-height:1.33333; letter-spacing:.32px; }
.indice ol ol li::before { content:none; }
.indice li a[aria-current="true"] { color:var(--text-primary); font-weight:600; }

/* --------------------------------------------------------------------------
   Mapa del Talento — la matriz 3×3 como recurso visual (5-sep-2026)
   Un código como VIS-INI-IND es una posición en la cuadrícula: una celda por
   vector (Rol, Momento, Forma) en una de tres columnas (Innovación, Gestión,
   Acción). El mismo dibujo aparece a tres escalas: la matriz del hero (grupo
   de tiles sobre gray-100), el glifo de cabecera de cada grupo (columna
   dominante encendida) y el glifo de cada ficha (su combinación exacta).
   El color de la celda encendida es el púrpura de campo; el verde sigue
   reservado a enlaces y botones.
   -------------------------------------------------------------------------- */

/* Hero de documento con bloque lateral: misma rejilla de 16 columnas que
   .grid-doc, para que la matriz caiga sobre las columnas del índice. */
.hero-doc .grid { display:grid; grid-template-columns:repeat(16,minmax(0,1fr));
  column-gap:var(--sp-07); row-gap:var(--sp-09); align-items:center; }
.hero-doc .hero-txt { grid-column:1 / span 9; min-width:0; }
.hero-doc .mapa-hero { grid-column:11 / span 6; min-width:0; margin:0; }
@media (max-width:66rem) {
  .hero-doc .grid { grid-template-columns:minmax(0,1fr); row-gap:var(--sp-08); }
  .hero-doc .hero-txt, .hero-doc .mapa-hero { grid-column:auto; }
}

/* La matriz: grupo de tiles (1px de canal, superficie gray-90 sobre gray-100) */
.mapa-matriz { display:grid; grid-template-columns:auto repeat(3,minmax(0,1fr)); gap:1px;
  font-size:.75rem; line-height:1.33333; letter-spacing:.32px; }
.mapa-matriz .mm-col { padding:0 var(--sp-04) var(--sp-03); color:var(--gray-40); }
.mapa-matriz .mm-fila { padding:var(--sp-04) var(--sp-05) var(--sp-04) 0; color:var(--gray-30);
  align-self:center; font-weight:600; }
.mapa-matriz .mm-c { display:flex; flex-direction:column; gap:var(--sp-01);
  background:var(--gray-90); color:var(--gray-40); padding:var(--sp-04);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.mapa-matriz .mm-c b { font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:.875rem; line-height:1.28572; letter-spacing:.32px; color:var(--gray-30);
  transition:color var(--dur) var(--ease); }
.mapa-matriz .mm-c.on { background:var(--ac-70); color:var(--ac-20); }
.mapa-matriz .mm-c.on b { color:#fff; }

/* Pie de la matriz: número, código y nombre del arquetipo dibujado */
.mapa-cap { display:flex; flex-wrap:wrap; gap:var(--sp-03) var(--sp-05); align-items:baseline;
  margin-top:var(--sp-05); font-size:.875rem; line-height:1.28572; letter-spacing:.16px;
  color:var(--gray-50); font-variant-numeric:tabular-nums; }
.mapa-cap .mapa-n b { font-weight:400; color:var(--gray-30); }
.mapa-cap a { color:var(--verde-claro); text-decoration:none; }
.mapa-cap a:hover { color:#fff; text-decoration:underline; }
.mapa-cap code { font-family:'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.32px;
  margin-inline-end:var(--sp-03); }

/* Glifo: la matriz en miniatura. Celdas apagadas en border-subtle,
   encendidas en el púrpura de campo. */
.glifo { display:block; flex:none; width:2rem; height:2rem; }
.glifo rect { fill:var(--gray-20); }
.glifo rect.on { fill:var(--ac-70); }

/* Ficha: glifo, número y código en la columna izquierda */
.arq .cod { display:flex; gap:var(--sp-04); align-items:flex-start; padding-top:0; }
.arq .cod > span { display:flex; flex-direction:column; }
.arq .cod b { margin-bottom:0; }
/* Llegada por ancla (#VIS-INI-IND): la ficha destino se marca como campo */
.arq:target { background:var(--ac-10); margin-inline:calc(-1 * var(--sp-05)); padding-inline:var(--sp-05); }
@media (max-width:42rem) {
  .arq .cod > span { flex-direction:row; gap:var(--sp-04); align-items:baseline; }
}

/* Cabecera de grupo: la columna dominante encendida junto al titular */
.grupo-cab { display:flex; gap:var(--sp-05); align-items:flex-start; margin-bottom:var(--sp-05); }
.grupo-cab .glifo { width:3rem; height:3rem; }
.grupo-cab h3 { margin:0 0 var(--sp-02); }
.grupo-cab .meta { color:var(--ac-70); margin:0; }

/* Índice de los 27 códigos, una columna por dominancia */
.cod-indice { margin:var(--sp-07) 0 0; padding-top:var(--sp-05); border-top:1px solid var(--border-subtle); }
.cod-indice > .meta { margin-bottom:var(--sp-04); }
.cod-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--sp-07); }
.cod-indice h4 { font-size:.875rem; line-height:1.28572; letter-spacing:.16px; font-weight:600; margin:0 0 var(--sp-03); }
.cod-indice h4 a { color:var(--text-primary); text-decoration:none; }
.cod-indice h4 a:hover { text-decoration:underline; }
.prosa .cod-indice ol { list-style:none; margin:0; padding:0; counter-reset:none; }
.prosa .cod-indice li { padding-block:var(--sp-01); font-size:.75rem; line-height:1.33333; letter-spacing:.32px; }
.prosa .cod-indice li::before { content:none; }
.cod-indice li a { display:flex; gap:var(--sp-03); font-family:'IBM Plex Mono',ui-monospace,monospace;
  text-decoration:none; font-variant-numeric:tabular-nums; }
.cod-indice li a b { font-weight:400; color:var(--text-helper); }
.cod-indice li a:hover { text-decoration:underline; }
@media (max-width:42rem) {
  .cod-cols { column-gap:var(--sp-05); }
}

/* La última fila de la tabla lleva su propio borde inferior y la sección
   lleva el suyo: quedaban dos líneas a 41px una de otra. La de la sección
   es la que estructura el documento, así que la tabla cede la suya. */
.prosa .legal section .comparison-table tbody tr:last-child td { border-bottom:0; }
/* Al apilar en móvil el borde lo pone la FILA, no la celda. */
.prosa .legal section .comparison-table.apila tbody tr:last-child { border-bottom:0; }

/* La primera columna de la tabla de vectores lleva el nombre del vector y su
   descripción. La descripción NO es un código: con .vc salía en monoespaciada
   púrpura y, con el nowrap de la celda, sin partir y desbordando la tabla. */
.vectores td:first-child { white-space:normal; }
.vectores .vd {
  display:block; margin-top:var(--sp-02); font-weight:400;
  font-size:.875rem; line-height:1.28572; letter-spacing:.16px;
  color:var(--text-secondary);
}
.vectores td:first-child { min-width:11rem; }
@media (max-width:42rem) { .vectores td:first-child { min-width:0; } }

/* La tabla comparativa se apila por debajo de 66rem. Con el texto literal
   del PDF, cuatro columnas en menos de 900px dan celdas de 130px y quince
   líneas: se lee peor apiladas que comparadas de lado. Por encima de 66rem
   el documento pasa a 12 columnas y la tabla vuelve a ser tabla. */
@media (max-width:66rem) {
.prosa .comparison-table.apila:not(.vectores),
.prosa .comparison-table.apila:not(.vectores) tbody,
.prosa .comparison-table.apila:not(.vectores) tr,
.prosa .comparison-table.apila:not(.vectores) td { display:block; }
.prosa .comparison-table.apila:not(.vectores) thead {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.prosa .comparison-table.apila:not(.vectores) tr {
  padding-block:var(--sp-06); border-bottom:1px solid var(--border-subtle);
}
.prosa .comparison-table.apila:not(.vectores) td { padding:var(--sp-04) 0; border:0; }
.prosa .comparison-table.apila:not(.vectores) td:first-child {
  padding:0 0 var(--sp-04); font-size:1.25rem; line-height:1.4;
  font-weight:400; color:var(--text-primary);
}
.prosa .comparison-table.apila:not(.vectores) td:not(:first-child)::before {
  content:attr(data-th); display:block; margin-bottom:var(--sp-02);
  font-size:.75rem; line-height:1.33333; letter-spacing:.32px;
  text-transform:uppercase; color:var(--ac-70);
}
}

/* --------------------------------------------------------------------------
   Mapa del Talento — el documento sobre las 16 columnas (5-sep-2026, 2.ª ronda)
   Antes: prosa en 9 columnas, índice fijo en las 5 últimas, y media rejilla
   vacía durante 15.000px. Ahora sigue el «Table of contents» de Carbon for
   IBM.com: el índice va a la IZQUIERDA en 4 columnas y el cuerpo ocupa las
   12 restantes. Dentro del cuerpo, cada sección es a su vez una rejilla de
   12: el número en la primera, la prosa en las 8 siguientes (640px en xlg,
   la medida de lectura de Carbon) y los componentes estructurados —tablas,
   lista estructurada, fichas— en las 11 que quedan (892px). Todo ancho es
   un número de columnas; ningún max-width.
   -------------------------------------------------------------------------- */
@media (min-width:66.0625rem) {
  /* grid-row explícito: el índice va después en el DOM y, sin él, la
     colocación automática lo mandaba a una segunda fila bajo el texto. */
  .grid-doc-toc .doc-nav { grid-column:1 / span 4; grid-row:1; }
  .grid-doc-toc .prosa { grid-column:5 / span 12; grid-row:1; padding-inline:0; }
  .grid-doc-toc .legal section {
    grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--sp-07);
  }
  .grid-doc-toc .legal section::before { grid-column:1; }
  .grid-doc-toc .legal section > * { grid-column:2 / span 8; }
  .grid-doc-toc .legal section > .tabla-scroll,
  .grid-doc-toc .legal section > .datos,
  .grid-doc-toc .legal section > .grupo-arq { grid-column:2 / -1; }
  /* El grupo de arquetipos repite la rejilla de 11 para que su texto de
     entrada siga en 8 columnas y solo las fichas usen las 11. */
  .grid-doc-toc .grupo-arq {
    display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); column-gap:var(--sp-07);
  }
  .grid-doc-toc .grupo-arq > * { grid-column:1 / span 8; min-width:0; }
  .grid-doc-toc .grupo-arq > .arqs { grid-column:1 / -1; }

  /* 27 fichas en dos columnas. La ficha pasa a una sola columna interna
     (glifo, número y código en la cabecera; nombre y texto debajo), que es
     la misma disposición que ya tenía en móvil. Las reglas horizontales
     corren continuas de lado a lado: el canal de 32px se hace con relleno
     interior, no con column-gap, para que no se corten. */
  .grid-doc-toc .arqs { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:0; }
  .grid-doc-toc .arqs .arq:nth-child(odd)  { padding-right:var(--sp-05); }
  .grid-doc-toc .arqs .arq:nth-child(even) { padding-left:var(--sp-05); }
  .grid-doc-toc .arqs .arq:last-child { border-bottom:0; }
  .grid-doc-toc .arqs { border-bottom:1px solid var(--border-subtle); }
  .grid-doc-toc .arq { grid-template-columns:minmax(0,1fr); gap:var(--sp-03); }
  .grid-doc-toc .arq .cod > span { flex-direction:row; gap:var(--sp-04); align-items:baseline; }
  .grid-doc-toc .arq:target { margin-inline:0; }

  /* Tablas: con 892px, la comparativa vuelve a ser una data table de cuatro
     columnas. La primera se ajusta a su contenido; la columna del Mapa del
     Talento se pinta como campo (púrpura de campo, nunca verde: el verde es
     acción). El encabezado es fijo, como el sticky header de la data table
     de Carbon; para que funcione, el envoltorio deja de recortar y la tabla
     usa bordes separados (con collapse el borde no acompaña a la celda). */
  .grid-doc-toc .tabla-scroll { overflow:visible; }
  .grid-doc-toc .comparison-table { border-collapse:separate; border-spacing:0; }
  .grid-doc-toc .comparison-table thead th { position:sticky; top:var(--nav-h); z-index:1; }
  .grid-doc-toc .comparison-table:not(.vectores) th:first-child,
  .grid-doc-toc .comparison-table:not(.vectores) td:first-child {
    /* 2 de las 11 columnas de la rejilla (más el canal que las sigue); las
       tres metodologías se reparten las 9 restantes, a 3 cada una. */
    width:calc((100% - 10 * var(--sp-07)) / 11 * 2 + var(--sp-07)); font-weight:600;
  }
  .grid-doc-toc .comparison-table:not(.vectores) th:last-child,
  .grid-doc-toc .comparison-table:not(.vectores) td:last-child { background:var(--ac-10); }
  .grid-doc-toc .comparison-table:not(.vectores) thead th:last-child { background:var(--ac-20); }
}

/* Entre 42rem y 66rem la prosa corría a todo el ancho: 113 caracteres por
   línea a 1024px, el ancho de una tableta apaisada y de un portátil pequeño.
   Carbon usa 8 columnas en esa franja; la prosa ocupa 5 y se mantiene entre
   47 y 77 caracteres en todo el tramo. Sin max-width inventados. */
@media (min-width:42rem) and (max-width:66rem) {
  .grid-doc { display:grid; grid-template-columns:repeat(8, minmax(0,1fr));
              column-gap:var(--sp-07); }
  .grid-doc .prosa { grid-column:1 / span 5; padding-inline:0; }
  .grid-doc .doc-nav { grid-column:1 / -1; order:-1; position:static;
                       margin-bottom:var(--sp-09); }
  .grid-doc .doc-nav .indice ol { columns:2; }
  .grid-doc .doc-nav .indice > ol > li { break-inside:avoid; }
  .grid-doc .doc-nav .indice ol ol { columns:1; }
}