/* ==========================================================================
   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;

  /* Las tres dominancias del Mapa del Talento: azul, teal y magenta de Carbon.
     Viven en :root porque aparecen en dos sitios —la tabla de vectores y los
     grupos de arquetipos— y deben ser el mismo color en ambos. */
  --dom-inn-10:#edf5ff; --dom-inn-20:#d0e2ff; --dom-inn-70:#0043ce;
  --dom-ges-10:#d9fbfb; --dom-ges-20:#9ef0f0; --dom-ges-70:#007d79;
  --dom-acc-10:#fff0f7; --dom-acc-20:#ffd6e8; --dom-acc-70:#9f1853;

  --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; }
/* Los titulares fluidos de Carbon cambian de tamaño POR ESCALÓN en cada
   punto de corte, no de forma continua: un clamp() daba 38,5px a 1024 y
   32,6px a 390, tamaños que no existen en la escala. fluid-heading-06:
   32/1.25 · 36/1.22 · 42/1.199. fluid-heading-05: 28/1.28572 · 32/1.25. */
.t-h1      { font-size:2rem; line-height:1.25; font-weight:300; }
.t-h2      { font-size:1.75rem; line-height:1.28572; font-weight:400; }
@media (min-width:42rem) {
  .t-h1 { font-size:2.25rem; line-height:1.22; }
  .t-h2 { font-size:2rem; line-height:1.25; }
}
@media (min-width:66.0625rem) { .t-h1 { font-size:2.625rem; line-height:1.199; } }
.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; line-height:1.28572; 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; line-height:1.42857; 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; line-height:1.28572; 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; line-height:1.28572; 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); }
/* El bloque nacio con `h3 + p`. Donde el titular es un .t-h2 -contacto- no
   traia margen y el parrafo quedaba pegado al titulo. */
.bloque-cta .t-h2 { margin-bottom:var(--sp-05); }
/* Acotado a la columna de texto: suelto alcanzaba tambien la nota del
   formulario y la subia de 12px/helper a 16px/secondary. */
.bloque-cta > div:first-child p { font-size:1rem; line-height:1.5; color:var(--text-secondary); max-width:44rem; }
.bloque-cta > div:first-child p + p { margin-top:var(--sp-05); }
/* La tarjeta del formulario trae su propio padding: si esta regla la alcanza,
   se queda sin relleno inferior y la nota toca el borde blanco. */
.bloque-cta > div:last-child:not(.hero-form) { padding-bottom:var(--sp-01); }
/* `align-items:end` alinea abajo una columna derecha corta -- el enlace de la
   landing de facturacion-- y ahi es lo que toca. Cuando a la derecha hay un
   formulario, mucho mas alto, esa misma regla hunde el texto: en contacto
   dejaba 387px de vacio encima del titular. Ahi mandan desde arriba. */
.bloque-cta.con-form { align-items:start; grid-template-columns:1fr 25rem; gap:var(--sp-09); }
/* Dentro de una .band la franja ya separa: el filete de arriba sobra. */
.band .bloque-cta { border-top:0; padding-top:0; }

/* --------------------------------------------------------------------------
   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; line-height:1.42857; 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; }
/* De primera en .prosa su margin-top se suma al salto del .sec-head y deja
   88px donde el resto del sitio usa 48. */
.prosa > .tabla-scroll:first-child .comparison-table { margin-top:0; }
/* «Tipo de caso» y «Tiempo de respuesta» se partian en dos lineas y dejaban
   la cabecera desalineada con las celdas. Solo esta tabla: las del Mapa del
   Talento tienen cuatro columnas y ahi partir es lo correcto. */
.prosa .tabla-soporte thead th { white-space:nowrap; }

/* --------------------------------------------------------------------------
   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; line-height:1.28572; 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; line-height:1.33333; 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; }
  /* .con-form tiene mas especificidad y las media queries no suman:
     sin nombrarla aqui, la columna de 25rem sobrevive en movil y
     desborda la pantalla. */
  .bloque-cta, .bloque-cta.con-form { 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:.875rem; line-height:1.42857;
  color:var(--ac-70); letter-spacing:.32px;
}
.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; line-height:1.42857; 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:.875rem; line-height:1.28572;
}
.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(--text-secondary); 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. */

/* 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; line-height:1.28572; 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. */
.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); }

/* 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:400;
  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(--text-secondary); 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; }
/* En móvil tres columnas dan 98px y «01 VIS-INI-IND» mide 109: el código se
   partía en dos líneas. Un bloque por dominancia, cada lista a dos columnas. */
.cod-indice li a { white-space:nowrap; }
@media (max-width:42rem) {
  .cod-cols { grid-template-columns:minmax(0,1fr); row-gap:var(--sp-05); }
  .prosa .cod-indice ol { columns:2; column-gap:var(--sp-05); }
  .prosa .cod-indice li { break-inside:avoid; }
}

/* 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; }

/* 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,
.prosa .comparison-table.apila tbody,
.prosa .comparison-table.apila tr,
.prosa .comparison-table.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-06); border-bottom:1px solid var(--border-subtle);
}
.prosa .comparison-table.apila td { padding:var(--sp-04) 0; border:0; }
.prosa .comparison-table.apila 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 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;
  color:var(--text-helper);
}
.vectores td:first-child { min-width:0; }
}

/* --------------------------------------------------------------------------
   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; }
  /* Todo lo que no es prosa ocupa las 11 columnas. La lista va aquí y no
     en cada bloque: los tres ejemplos perdieron el ancho al envolverse en
     .bloque-tinte, y el índice de códigos y el pie de la foto nunca lo
     tuvieron. Un escalón de 246px contra el bloque de al lado. */
  .grid-doc-toc .legal section > .bloque-foto,
  .grid-doc-toc .legal section > .bf-pie,
  .grid-doc-toc .legal section > .credito,
  .grid-doc-toc .legal section > .tabla-scroll,
  .grid-doc-toc .legal section > .datos,
  .grid-doc-toc .legal section > .bloque-tinte,
  .grid-doc-toc .legal section > .cod-indice,
  .grid-doc-toc .legal section > .grupo-arq { grid-column:2 / -1; }
  /* El grupo ya no es una rejilla de 11: la cabecera, su párrafo y las
     fichas ocupan el ancho completo, así que ese nivel no repartía nada.
     Un nivel de anidamiento menos: 16 → 12 → 2 → 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; }
}

/* --------------------------------------------------------------------------
   Dobles líneas: el bloque cede su borde cuando la regla de sección ya cierra
   -------------------------------------------------------------------------- */
.legal section > .faq { border-top:0; }
.legal section > .faq details:last-child { border-bottom:0; }
.legal .grupo-arq:last-child .arqs .arq:last-child { border-bottom:0; }
.legal .grupo-arq:last-child .arqs .arq:nth-last-child(2) { border-bottom:0; }

/* --------------------------------------------------------------------------
   Ritmo de color en el cuerpo
   Mismo recurso que la portada: tinte --ac-10 de fondo con el contenido en
   blanco encima. Tras el hero negro había 11.000px seguidos sin un salto.
   -------------------------------------------------------------------------- */

/* Las tres cabeceras de grupo parten el tramo más largo — 5.200px de fichas */
.grupo-cab {
  background:var(--ac-10);
  padding:var(--sp-06) var(--sp-06) var(--sp-06) var(--sp-05);
  margin-bottom:var(--sp-07);
}
.grupo-arq { border-top:0; padding-top:0; margin-top:var(--sp-10); }

/* El índice de códigos, como bloque propio. Capa neutra (layer-01): es un
   contenedor, no habla del Mapa. */
.cod-indice {
  background:var(--layer-01);
  padding:var(--sp-06) var(--sp-05);
  margin-block:var(--sp-08);
}

/* Los tres ejemplos del protocolo */
.legal section .datos.ejemplos {
  background:var(--layer-01);
  padding:var(--sp-06) var(--sp-05);
  margin-block:var(--sp-07);
}

/* En la tabla de vectores las tres columnas SON las tres dominancias: el
   código de cada una lleva su color, el mismo que luego pinta su grupo. La
   primera columna es un encabezado de fila y va sin campo, como en la data
   table de Carbon. */
.vectores td:nth-child(2) .vc { color:var(--dom-inn-70); }
.vectores td:nth-child(3) .vc { color:var(--dom-ges-70); }
.vectores td:nth-child(4) .vc { color:var(--dom-acc-70); }

/* El titular va DENTRO del recuadro, no flotando encima: si el bloque es una
   unidad, su nombre forma parte de ella. Capa neutra: el púrpura queda para
   lo que es el Mapa en sí (matriz, su columna en la comparativa, la foto y
   el cierre); los contenedores del cuerpo van en layer-01. */
.bloque-tinte {
  background:var(--layer-01);
  padding:var(--sp-06) var(--sp-05);
  margin-block:var(--sp-07);
}
.bloque-tinte > h3:first-child { margin-top:0; }
/* .legal section .datos.ejemplos lleva un tipo (section) y ganaba a esta
   regla: el margen de 32px se colaba y el bloque cerraba con 80px de aire
   abajo contra 24 arriba. */
.legal .bloque-tinte .datos.ejemplos { background:transparent; padding:0; margin:0; }

/* Lo mismo en los grupos de arquetipos: la cabecera y el párrafo que la
   explica son una unidad, así que comparten el campo. */
.grupo-cab { margin-bottom:0; padding-bottom:var(--sp-05); }
.grupo-cab + p {
  background:var(--ac-10);
  margin:0 0 var(--sp-07);
  padding:0 var(--sp-06) var(--sp-06) var(--sp-05);
}

/* El arrastre horizontal es nuestro; el desplazamiento vertical, del navegador */
.mapa-matriz { touch-action:pan-y; cursor:grab; user-select:none; }
.mapa-matriz:active { cursor:grabbing; }

/* Fotografía en documentos: a todo el ancho del bloque, en duotono del
   púrpura de marca. Es el tratamiento del IBM Design Language, y resuelve
   que una foto de archivo traiga sus propios colores. */
.foto-doc { margin:var(--sp-08) 0; }
.foto-doc img { display:block; width:100%; height:auto; }
.foto-doc figcaption {
  margin-top:var(--sp-04); font-size:.875rem; line-height:1.28572;
  letter-spacing:.16px; color:var(--text-helper);
}

/* El logo de IMS abre la línea legal: la marca del producto ya está arriba
   en el pie; abajo firma la empresa. */
.foot .legal .grid { align-items:center; }
.legal-ims { display:flex; align-items:center; }
.legal-ims img { display:block; height:22px; width:auto; opacity:.75; }

/* Texto e imagen como un solo rectángulo: el campo teñido y la foto comparten
   altura y se tocan sin canal, así que se leen como una pieza. En móvil se
   apilan, que es donde un texto denso a media columna no cabría. */
.bloque-foto { margin:var(--sp-07) 0 var(--sp-04); }
.bloque-foto .bf-txt { background:var(--ac-10); padding:var(--sp-06) var(--sp-05); }
.bloque-foto .bf-txt p { margin:0; }
.bloque-foto .bf-img { margin:0; }
.bloque-foto .bf-img img { display:block; width:100%; height:auto; }
.prosa .bf-pie { font-size:.875rem; line-height:1.28572; letter-spacing:.16px;
                 color:var(--text-helper); margin-bottom:var(--sp-07); }

/* La foto se mantiene rectangular (16:9) y ocupa todo el ancho disponible.
   Apilada bajo el texto teñido y sin canal entre ambos, el conjunto sigue
   leyéndose como una sola pieza. */
@media (min-width:66.0625rem) {
  .bloque-foto .bf-txt { padding:var(--sp-07) var(--sp-07) var(--sp-07) var(--sp-06); }
}

/* Flechas de la matriz — botón de icono de Carbon: 40px de área, sin fondo,
   el estado se marca con la capa, no con color. */
.mapa-nav { display:flex; gap:1px; margin-top:var(--sp-05); }
.mapa-flecha {
  width:40px; height:40px; display:inline-flex; align-items:center;
  justify-content:center; border:0; cursor:pointer; padding:0;
  background:rgba(255,255,255,.10); color:#f4f4f4;
  transition:background var(--dur) var(--ease);
}
.mapa-flecha:hover { background:rgba(255,255,255,.22); }
.mapa-flecha:active { background:rgba(255,255,255,.30); }
.mapa-flecha:focus-visible { outline:2px solid var(--ac-20); outline-offset:-2px; }
.mapa-flecha[data-paso="-1"] svg { transform:rotate(180deg); }

/* El icono alusivo de cada dominancia, a la derecha de su cabecera. A 48px,
   el mismo tamaño que el glifo de la izquierda y el de los pictogramas de
   Carbon; en el tono de la dominancia, sin opacidad (Carbon no atenúa
   iconos: el color ya es el token). */
.grupo-cab { display:flex; align-items:center; gap:var(--sp-05); }
.grupo-cab > div { flex:1; min-width:0; }
.dom-ic { flex:none; width:48px; height:48px; }
@media (max-width:42rem) { .dom-ic { width:32px; height:32px; } }

/* --------------------------------------------------------------------------
   Un color por dominancia
   El PDF colorea las tres columnas; aquí se hace igual pero con familias de
   Carbon que no chocan con nada semántico: el verde es la acción, el rojo el
   error y el amarillo el aviso. Quedan púrpura, teal y magenta.
   Todos los fondos dan 16:1 con el texto y el acento pasa AA sobre el suyo.
   -------------------------------------------------------------------------- */
/* Azul y no púrpura: el púrpura es el acento de toda la página y competía
   con la dominancia. Con azul, cada uno hace su trabajo. */
#g1 { --d-10:var(--dom-inn-10); --d-20:var(--dom-inn-20); --d-70:var(--dom-inn-70); }   /* Innovación */
#g2 { --d-10:var(--dom-ges-10); --d-20:var(--dom-ges-20); --d-70:var(--dom-ges-70); }   /* Gestión */
#g3 { --d-10:var(--dom-acc-10); --d-20:var(--dom-acc-20); --d-70:var(--dom-acc-70); }   /* Acción */

/* El grupo entero comparte el tono: es lo que los reúne al recorrer la página */
.grupo-arq[id] { background:var(--d-10); }
.grupo-arq[id] > .grupo-cab { background:var(--d-20); }
.grupo-arq[id] > .grupo-cab + p { background:var(--d-20); }
.grupo-arq[id] .grupo-cab .meta { color:var(--text-secondary); }
.grupo-arq[id] .dom-ic { fill:var(--d-70); }
.grupo-arq[id] .glifo .on { fill:var(--d-70); }
.grupo-arq[id] .arq .cod { color:var(--d-70); }
.grupo-arq[id] .arq .glifo .on { fill:var(--d-70); }
.grupo-arq[id] .arq .ciego { border-left-color:var(--d-20); }
.grupo-arq[id] .arq .ciego b { color:var(--d-70); }
.grupo-arq[id] .arq:target { background:var(--d-20); }

/* El bloque necesita respirar dentro de su campo */
.grupo-arq[id] { padding:0 0 var(--sp-07); }
.grupo-arq[id] > .arqs { padding:0 var(--sp-05); }

/* La franja de edad sobre la foto: campo sólido con tipografía encima, que es
   como IBM pone texto sobre imagen — nunca directamente sobre la fotografía,
   donde la legibilidad depende de lo que haya detrás. Anclado abajo a la
   izquierda, lejos del sujeto. */
.bf-img { position:relative; }
.bf-edad {
  position:absolute; left:0; bottom:0; background:var(--ac-80); color:#fff;
  padding:var(--sp-05) var(--sp-06) var(--sp-05) var(--sp-05);
}
.bf-rango {
  display:block; font-size:2.25rem; line-height:1.22; font-weight:300;
  letter-spacing:0; font-variant-numeric:tabular-nums;
}
.bf-rango i { font-style:normal; color:var(--ac-20); padding:0 .1em; }
.bf-et {
  display:block; margin-top:var(--sp-02); font-size:.75rem; line-height:1.33333;
  letter-spacing:.32px; color:var(--ac-20);
}
@media (min-width:66.0625rem) {
  .bf-rango { font-size:3rem; line-height:1.17; }
}
@media (max-width:34rem) {
  .bf-edad { padding:var(--sp-04) var(--sp-05); }
  .bf-rango { font-size:1.75rem; line-height:1.28572; }
  .bf-et { font-size:.75rem; }
}

/* El logo de IMS en el hero de Nosotros: la empresa firma la página que habla
   de ella. A la derecha del titular, alineado abajo con él. */
.hero-marca { display:flex; align-items:flex-end; gap:var(--sp-07); }
.hero-marca > div { flex:1; min-width:0; }
/* El logo viene en tinta oscura; sobre el hero negro se invierte por CSS en
   vez de mantener un segundo archivo que se desincronice. */
.hero-ims { flex:none; width:165px; height:auto; opacity:.9; }
@media (max-width:42rem) {
  .hero-marca { flex-direction:column; align-items:flex-start; gap:var(--sp-06); }
  .hero-ims { width:120px; }
}

/* .lede a 18px heredaba el 1.5 del cuerpo (27px); Carbon lo lleva a 24.
   (El <ol> mide 24px menos que los párrafos a propósito: es sangría francesa,
   los números cuelgan y quedan alineados con el borde del texto.) */
.lede { line-height:1.33333; }

/* El ángulo ciego sin regla vertical: veintisiete líneas repetidas eran ruido.
   Lo separa la tipografía — rótulo propio en el tono de la dominancia y el
   texto en el gris de apoyo — que es como Carbon distingue una nota. */
.arq .ciego {
  border-left:0; padding-left:0; margin-top:var(--sp-05);
  font-size:.875rem; line-height:1.28572; letter-spacing:.16px;
  color:var(--text-helper);
}
.arq .ciego b {
  display:block; margin-bottom:var(--sp-02); font-weight:400;
  font-size:.75rem; line-height:1.33333; letter-spacing:.32px;
}

/* Equilibrio de las líneas.
   «balance» reparte el texto para que las líneas queden parejas y ninguna
   quede sola con dos palabras: sirve en bloques cortos —titulares, notas,
   descripciones de arquetipo— y los navegadores lo limitan a unas seis
   líneas, así que no se aplica a la prosa larga.
   Para esa, «pretty», que solo evita la huérfana final sin recomponer el
   párrafo entero. Donde el navegador no los soporta, se ignoran. */
.arq p, .arq .ciego, .arq .marca-arq,
.grupo-cab .meta, .lede,
figcaption, .pie, .nota, .tarjeta p, .bf-pie, .cod-indice {
  text-wrap:balance;
}
.prosa p, .prosa li, .comparison-table td { text-wrap:pretty; }

/* El Mapa del Talento lleva en recursos el mismo púrpura que lo identifica
   dentro de su propia página, para que se reconozca antes de abrirlo.
   El hover sube al tono siguiente de la escala en vez de ir a layer-01,
   que lo devolvería al gris de los demás. */
a.tile.tile-mapa { background:var(--ac-10); }
a.tile.tile-mapa:hover { background:var(--ac-20); }
.tile-mapa .sec-label, .tile-mapa .tile-foot { color:var(--ac-70); }

/* Las descripciones de arquetipo empataban en peso con «.prosa p» y se
   quedaban con su «pretty»; son cortas y les toca «balance». */
.arq p, .arq .ciego { text-wrap:balance; }

/* Crédito de un término de terceros. Va en el cuerpo del documento, no al
   pie de página, porque solo aplica a esta sección; y en el gris de apoyo
   con una regla superior fina, que es como Carbon separa una nota de su
   texto sin darle el peso de un párrafo más. */
.prosa .credito {
  margin:0 0 var(--sp-07); padding-top:var(--sp-04);
  border-top:1px solid var(--border-subtle);
  font-size:.75rem; line-height:1.33333; letter-spacing:.32px;
  color:var(--text-helper); text-wrap:pretty; max-width:44rem;
}
.prosa .credito b { font-weight:600; color:var(--text-secondary); }
.prosa .credito cite { font-style:italic; }

/* Cuando la nota sigue a una tabla, la regla ya la puso el borde inferior de
   la tabla: dibujar otra da la doble línea de siempre. */
.comparison-table + .credito, .tabla-scroll + .credito { border-top:0; padding-top:0; }

/* ==========================================================================
   Impresión
   El documento en papel, no la página web impresa. Cinco cosas lo rompían:
   la rejilla de 16 columnas dejaba el texto en tiras de tres palabras, el
   acordeón de preguntas salía cerrado —la sección 07 entera se perdía—, los
   bloques se partían a mitad, y el hero y el pie gastaban una plana de tinta
   negra cada uno.
   Los colores de dominancia sí se conservan: codifican a qué grupo pertenece
   cada arquetipo, no son adorno. Son tonos 10 de la escala, casi blancos, y
   el rótulo va además en el color del texto, así que la pieza sigue leyéndose
   si la impresora descarta los fondos.
   ========================================================================== */
@page { size:Letter; margin:16mm 15mm 18mm; }

@media print {
  /* Lo que no es el documento */
  .shell, .strip, .closer, .hero-form, .foot, body > footer,
  .mapa-nav, .mapa-cap, .tile-foot, .link-arrow { display:none !important; }

  html, body { background:#fff !important; color:#000 !important; }
  body { font-size:11pt; line-height:1.45; }

  /* La rejilla de documento se desmonta: en 216 mm no hay dieciséis columnas
     que repartir, y mantenerlas confinaba el texto a una cuarta parte. */
  .grid, .grid-doc, .legal > section, .grupo-arq {
    display:block !important; max-width:none !important;
    padding-inline:0 !important; margin-inline:0 !important; }
  .grid-doc-toc > *, .legal > *, .legal section > * { grid-column:auto !important; }
  .prosa, .legal { max-width:none !important; }

  /* El índice vive al final del marcado —en pantalla lo coloca la rejilla a
     la izquierda—, así que en papel caía tras las preguntas frecuentes. La
     columna flexible lo devuelve a su sitio: delante, en su propia hoja. */
  .grid-doc-toc { display:flex !important; flex-direction:column;
    max-width:none !important; padding-inline:0 !important; }
  .doc-nav { order:-1; break-after:page; }
  .doc-nav .indice a { color:#000 !important; }

  /* Medida de lectura. A todo el ancho de la caja son 110 caracteres por
     línea; el ojo pierde el renglón al volver. */
  .prosa p, .prosa li, .prosa dd, .lede { max-width:78ch; }

  /* Las fichas siguen en dos columnas: las anchuras fijas de pantalla no
     caben en 186 mm y desbordaban la caja. */
  .arqs { grid-template-columns:1fr 1fr !important; }
  .arq { display:block !important; }

  /* El chevron del acordeón no significa nada en papel */
  .faq summary::after { display:none !important; }

  /* Hero en negativo: el mismo contenido sin la plana de tinta. La matriz se
     queda —es el catálogo de los nueve valores— pero sin el arquetipo
     resaltado, que en pantalla es el fotograma de un carrusel y en papel
     sería un ejemplo elegido al azar. */
  .hero, .hero .grid { background:#fff !important; color:#000 !important; padding-block:0 !important; }
  .hero h1, .hero .lede, .hero .eyebrow, .hero .meta, .hero p { color:#000 !important; }
  .hero .eyebrow, .hero .meta { color:#525252 !important; }
  .mm-c, .mm-c.on { background:#fff !important; color:#000 !important; border:1px solid #a8a8a8 !important; }
  .mm-c b { color:#000 !important; }
  .mapa-hero { break-inside:avoid; }

  /* El acordeón se abre: cerrado, la sección 07 no existe en papel.
     La primera regla vale en Chrome reciente, la segunda en el resto, y el
     guion de la página las respalda con beforeprint. */
  details::details-content { content-visibility:visible !important; block-size:auto !important; }
  .faq details > *:not(summary) { display:block !important; }
  .faq summary { list-style:none; font-weight:600; }
  .faq summary::-webkit-details-marker, .faq summary svg { display:none !important; }
  .faq details { break-inside:avoid; }

  /* Nada se parte por la mitad */
  /* «.bloque-foto» queda fuera a propósito: texto largo más foto pasa de
     media hoja, y mantenerlo entero empujaba toda la plana anterior. */
  .arq, .tarjeta, .credito, .bloque-tinte, .cod-indice,
  figure, tr, .grupo-cab, blockquote, li { break-inside:avoid; }
  h1, h2, h3, h4, .grupo-cab, .sec-label, .eyebrow { break-after:avoid; }
  /* El número de sección se muda al titular. En pantalla lo coloca la
     rejilla en el margen; sin rejilla quedaba como una línea suelta delante
     del h2 y la paginación los separaba —«02» al pie de una hoja y su
     título en la siguiente—, que es lo que obligaba a abrir hoja por
     sección y dejaba planas a un cuarto. Colgado del h2 es el título, y un
     título no se parte. */
  .prosa .legal section::before { content:none !important; }
  .prosa .legal section h2::before {
    content:counter(seccion,decimal-leading-zero) "\2003";
    font-weight:300; color:#525252; font-variant-numeric:tabular-nums; }

  .breadcrumb { display:none !important; }
  .migas, .breadcrumb, nav[aria-label="Ruta"] { display:none !important; }

  /* Los enlaces pierden el color: en papel no llevan a ninguna parte, y el
     verde impreso en gris se confunde con una errata. */
  a, a code { color:inherit !important; text-decoration:none !important; }

  /* Que la impresora no descarte los fondos que llevan información */
  .grupo-arq[id], .grupo-arq[id] *, .bloque-tinte, .cod-indice, .comparison-table,
  .comparison-table * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* Las notas al pie tienen que leerse en papel: el gris de pantalla a 12 px
     imprime al límite. */
  .credito, .bf-pie, figcaption { color:#3d3d3d !important; font-size:8.5pt; }

  .bf-img img { max-height:88mm; width:auto; object-fit:cover; }
  .bf-edad { -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  .tabla-scroll { overflow:visible !important; }
  .comparison-table { font-size:9pt; }

  /* Quien reciba el papel debe saber de dónde salió, aunque el navegador
     imprima sin cabeceras. */
  .print-pie { display:block !important; margin-top:var(--sp-07);
    padding-top:var(--sp-04); border-top:1px solid #a8a8a8;
    font-size:8.5pt; color:#3d3d3d; }
}
.print-pie { display:none; }

/* --------------------------------------------------------------------------
   Actualizaciones
   Una entrada por versión, con el código en el margen. Sin etiquetas de tipo:
   casi todo lo que se publica son funciones nuevas, así que clasificarlas no
   separaba nada. Lo que sitúa cada cambio es el módulo, escrito con palabras.

   El tono lo fija la versión y no el módulo, para que cada entrega se lea como
   un bloque: pintado por área, un mismo bloque salía con dos o tres colores y
   parecía tres cosas sueltas. Cuatro tonos que se turnan; con siete versiones,
   dos del mismo color nunca quedan juntas.
   -------------------------------------------------------------------------- */
.act { border-top:1px solid var(--border-subtle); padding:var(--sp-09) 0; }
.act:first-of-type { border-top:0; padding-top:0; }
.act:last-of-type { padding-bottom:0; }

/* La cabecera acompaña a su versión mientras se lee y el siguiente artículo la
   empuja al llegar: así una captura de pantalla de cualquier punto sale con la
   versión a la que pertenece. Es «sticky» puro, sin guion: cada cabecera se
   pega solo dentro de su propio artículo, que es justo el comportamiento
   pedido. El desplazamiento se detiene bajo la barra de navegación, que mide
   48px más su filete. */
.act-cab { position:sticky; top:calc(3rem + 1px); z-index:2;
           display:grid; gap:var(--sp-02);
           background:var(--background);
           padding-block:var(--sp-04) var(--sp-06);
           margin-top:calc(-1 * var(--sp-04)); }
/* La Mono se carga solo en 400: pedir 600 hacía que el navegador engordara la
   regular, y el número de versión era el único glifo fabricado de la página. */
.act-cab h2 { font-family:'IBM Plex Mono',monospace; font-size:1.25rem; line-height:1.4;
              font-weight:400; letter-spacing:0; color:var(--text-primary); margin:0; }
.act-fecha { color:var(--text-helper); font-size:.875rem; line-height:1.42857;
             letter-spacing:.16px; margin:0; }
.act-tit { font-size:1.125rem; line-height:1.33333; color:var(--text-secondary);
           margin:var(--sp-04) 0 0; max-width:56ch; text-wrap:balance; }

.act-lista { list-style:none; margin:var(--sp-08) 0 0; padding:0;
             display:grid; gap:var(--sp-08); }
.act-lista > li { display:grid; gap:var(--sp-03); }
/* El código es un enlace a sí mismo: así «mira el 132» se puede mandar como
   facturabreve.com/actualizaciones/#132 y la página abre en ese punto. En
   reposo no se distingue del texto —sería ruido quince veces repetido— y se
   subraya al pasar por encima o al recibir el foco.
   El margen de desplazamiento evita que el punto quede debajo de la barra de
   navegación y de la cabecera de versión, que también está fija. */
.act-cod { font-family:'IBM Plex Mono',monospace; font-size:.875rem; line-height:1.42857;
           letter-spacing:.32px; margin:0; text-decoration:none; justify-self:start;
           scroll-margin-top:9rem; }
.act-cod:hover, .act-cod:focus-visible { text-decoration:underline; }

.solo-lectores { position:absolute; width:1px; height:1px; overflow:hidden;
                 clip:rect(0 0 0 0); white-space:nowrap; }
.act-mod { display:inline-block; justify-self:start; font-size:.75rem; line-height:1.33333;
           letter-spacing:.32px; padding:var(--sp-01) var(--sp-03); margin:0 0 var(--sp-03); }
.act-lista h3 { font-size:1rem; font-weight:600; line-height:1.375; margin:0 0 var(--sp-03); }
/* body-02 en tinta primaria, la misma pareja que la prosa del Mapa del Talento:
   a 14px y en gris secundario el texto se leía como una nota al pie, cuando es
   el contenido de la página. La medida va sobre el propio párrafo —en el
   contenedor, «ch» se calcula con los 16px heredados y salían 93 caracteres por
   línea— y a 16px estos 64ch dan unos 75. */
.act-lista p:last-child { font-size:1rem; line-height:1.5; letter-spacing:0;
                          color:var(--text-primary); margin:0; max-width:64ch;
                          text-wrap:pretty; }

.act[data-tono="a"] .act-cod, .act[data-tono="a"] .act-mod { color:#0043ce; }
.act[data-tono="b"] .act-cod, .act[data-tono="b"] .act-mod { color:#005d5d; }
.act[data-tono="c"] .act-cod, .act[data-tono="c"] .act-mod { color:#9f1853; }
.act[data-tono="d"] .act-cod, .act[data-tono="d"] .act-mod { color:var(--ac-70); }
.act[data-tono="a"] .act-mod { background:#edf5ff; }
.act[data-tono="b"] .act-mod { background:#d9fbfb; }
.act[data-tono="c"] .act-mod { background:#fff0f7; }
.act[data-tono="d"] .act-mod { background:var(--ac-10); }

/* Sin la columna del margen, el código en línea propia se leía como un rótulo
   suelto delante del titular. Va con el módulo, en la misma línea. */
@media (max-width:66rem) {
  /* «inline-block» y no «inline»: un elemento en línea ignora
     scroll-margin-top, y al abrir un enlace #132 el punto quedaba debajo de la
     cabecera de versión, que también está fija. */
  .act-cod { display:inline-block; }
  .act-cod::after { content:"\00a0\00a0"; }
  .act-lista > li > .act-cod { margin-bottom:calc(-1 * var(--sp-03)); }
}

@media (min-width:66.0625rem) {
  /* El código y el número de versión comparten la columna del margen, así que
     todo el texto arranca en la misma vertical. 8rem + --sp-07 cae sobre la
     tercera columna de la rejilla de 16. */
  .act { padding:var(--sp-10) 0; }
  .act-cab, .act-lista > li {
    display:grid; grid-template-columns:8rem 1fr; gap:var(--sp-07); align-items:baseline;
  }
  .act-cab h2 { grid-column:1; }
  .act-fecha { grid-column:2; }
  .act-tit { margin-left:calc(8rem + var(--sp-07)); }
  /* El título gobierna su lista: si lo separara de ella lo mismo que separa un
     avance del siguiente, sería un avance más. */
  .act-lista { margin-top:var(--sp-10); gap:var(--sp-09); }
}

/* --------------------------------------------------------------------------
   Huecos de imagen (solo en la maqueta)
   Rectángulo con aspa, como en un boceto de interfaz, y un número único para
   poder hablar de cada sitio sin describirlo. No se emiten en producción.
   -------------------------------------------------------------------------- */
.hueco { margin:var(--sp-07) 0; }
.hueco-caja { position:relative; background:var(--layer-01);
              border:1px solid var(--border-strong); display:grid; place-items:center; }
.hueco-caja svg { position:absolute; inset:0; width:100%; height:100%; }
.hueco-caja line { stroke:var(--border-strong); stroke-width:.4; vector-effect:non-scaling-stroke; }
.hueco-n { position:relative; font-family:'IBM Plex Mono',monospace; font-size:3rem;
           line-height:1; font-weight:600; color:var(--text-primary);
           background:var(--layer-01); padding:var(--sp-03) var(--sp-05); }
.hueco figcaption { font-size:.875rem; line-height:1.42857; letter-spacing:.16px;
                    color:var(--text-secondary); margin-top:var(--sp-04); }
.hueco figcaption b { font-family:'IBM Plex Mono',monospace; font-weight:600;
                      color:var(--text-primary); margin-right:var(--sp-03); }
.hueco figcaption i { font-family:'IBM Plex Mono',monospace; font-style:normal;
                      color:var(--text-helper); margin-left:var(--sp-03); }

/* Imagen de cabecera de sección, al ancho de la rejilla y no al de la columna
   de texto. Sin la regla, el <figure> conserva los 40px de margen del
   navegador y la imagen queda desalineada del titular que va debajo. */
.img-ancha { margin:0 0 var(--sp-06); }
.img-ancha img { display:block; width:100%; height:auto; }

/* Módulos numerados de un programa. El número va en el margen, como el código
   de las actualizaciones: la lista se lee como un temario y no como viñetas. */
.modulos { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-07); }
.modulos > li { display:grid; gap:var(--sp-03); }
.mod-n { font-family:'IBM Plex Mono',monospace; font-size:1.25rem; line-height:1.4;
         font-weight:400; color:var(--interactive); }
.modulos h3 { font-size:1.125rem; font-weight:600; line-height:1.33333; margin:0 0 var(--sp-03); }
.modulos p { font-size:1rem; line-height:1.5; color:var(--text-secondary); margin:0; max-width:64ch;
             text-wrap:pretty; }
.cita { font-size:1.125rem; line-height:1.33333; font-weight:300; color:var(--text-primary);
        margin:0; text-wrap:pretty; }

@media (min-width:66.0625rem) {
  .modulos > li { grid-template-columns:4rem 1fr; gap:var(--sp-06); align-items:baseline; }
}

/* Correcciones de la página de capacitación.
   Las alturas de línea venían heredadas del 1.5 del cuerpo y no existen en la
   escala: 14 va a 18, 20 a 28, 18 a 24. */
.hero .eyebrow { line-height:1.28572; }
.tile h3 { line-height:1.4; }
.sec-head .t-body-lg { line-height:1.33333; }
.closer .lede { font-size:1.125rem; }

/* El número del módulo no es un enlace ni una categoría: es la posición en el
   temario. El verde del sitio significa acción, así que aquí decoraría. */
.mod-n { color:var(--text-helper); }

/* Sin la columna del margen, el número en línea propia se lee como un rótulo
   suelto delante del titular. Misma corrección que en Actualizaciones. */
@media (max-width:66rem) {
  .modulos > li { grid-template-columns:2.5rem 1fr; gap:0 var(--sp-04);
                  grid-template-areas:"n t" ". p"; }
  .mod-n { grid-area:n; }
  .modulos > li > div { grid-area:t / t / p / p; }
}

/* Los dos módulos opcionales van dentro del temario, que es lo que son. En el
   margen llevan la palabra en vez del número, para que se distingan sin
   necesidad de una sección aparte. */
.mod-op { font-size:.75rem; letter-spacing:.32px; line-height:1.33333; }
/* Un botón a mitad de página: entre el hero y el cierre había ocho pantallas
   sin nada que pulsar. */
.actions-medio { margin-top:var(--sp-09); }

/* Galería de fotografías. Rejilla de proporción fija con el canal de un píxel
   que el sitio usa entre mosaicos: sin marcos, sin radios y sin sombras, las
   fotos forman un bloque y no seis objetos sueltos. */
.galeria { display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
           background:var(--border-subtle); }
.galeria figure { margin:0; }
.galeria img { display:block; width:100%; aspect-ratio:3 / 2; object-fit:cover; }
.galeria .img-ancha { margin:0; }
/* Pie corto bajo cada foto: dice qué se está viendo sin competir con ella. */
.galeria figcaption { font-size:.75rem; letter-spacing:.32px; color:var(--text-helper);
                      background:var(--background); padding:var(--sp-03) var(--sp-04) var(--sp-04); }
/* En la maqueta, los huecos ocupan la misma casilla que ocuparán las fotos. */
.galeria .hueco { margin:0; }
.galeria .hueco figcaption { padding:var(--sp-03) var(--sp-04) var(--sp-04);
                             background:var(--background); margin-top:0; font-size:.75rem;
                             line-height:1.33333; }
.galeria .hueco-caja { border:0; }
@media (max-width:66rem)   { .galeria { grid-template-columns:repeat(2,1fr); } }
@media (max-width:31.9rem) { .galeria { grid-template-columns:1fr; } }

/* Las dos láminas del propio material del curso, a sangre y a media pantalla
   cada una. Van sin caja ni padding: su fondo oscuro ya las separa de lo que
   viene antes y después, y a todo el ancho el texto de dentro se lee. Se
   apilan por debajo de 42rem, donde media pantalla dejaría el texto ilegible. */
.laminas { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-04);
           background:var(--gray-100); }
.laminas figure { margin:0; }
.laminas img { display:block; width:100%; height:auto; }
@media (max-width:41.9rem) {
  /* Apiladas, la separación es la misma: una junta horizontal en vez de vertical. */
  .laminas { grid-template-columns:1fr; }
}

/* Correcciones de la segunda revisión.
   «.modulos { margin:0 }» empataba en especificidad con «.sec-head + *» y le
   ganaba por orden: el temario quedaba pegado a su cabecera, a 0 px, cuando el
   resto del sitio separa 48. */
.modulos { margin-block:var(--sp-09) 0; }

/* «.tile p» fija el tamaño y no la altura, así que heredaba el 1.5 del cuerpo:
   14/21, que no existe en la escala. Alcanza a todos los mosaicos del sitio. */
.tile p { line-height:1.42857; }
.tile .sec-label { margin:0; }
.galeria figcaption { line-height:1.33333; }

/* «Opcional» mide 60 px en mono de 12 y la columna estrecha da 40: se comía el
   titular. Bajo 66 rem ocupa su propia fila, como la etiqueta de módulo en
   Actualizaciones. */
@media (max-width:66rem) {
  .modulos > li:has(.mod-op) { grid-template-columns:1fr; grid-template-areas:"n" "p"; }
  .mod-op { margin-bottom:var(--sp-02); }
}

/* A 390 la galería ocupaba 2,4 pantallas. Las dos primeras comparten
   composición —sala, espaldas, pantalla al fondo—, así que son las que se
   retiran; quedan las cuatro que muestran cosas distintas. */
@media (max-width:31.9rem) {
  .galeria > figure:nth-child(-n+2) { display:none; }
}

/* Bloque de autoridad de la portada: texto e imagen como una sola pieza, con
   el mismo canal de un píxel que separa los mosaicos. La imagen cubre su mitad
   a la altura que le fije el texto, de modo que no hay que elegir proporción. */
.autoridad { display:grid; grid-template-columns:1fr 1fr; gap:1px;
             background:var(--border-subtle); }
.aut-txt { background:var(--background); padding:var(--sp-07); }
.aut-txt h2 { margin:var(--sp-03) 0 var(--sp-05); }
.aut-txt p { max-width:52ch; }
.aut-txt .t-body-lg { margin-bottom:var(--sp-05); }
.aut-enlace { margin:var(--sp-06) 0 0; }
.aut-img { margin:0; }
.aut-img img { display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:41.5rem) {
  .autoridad { grid-template-columns:1fr; }
  .aut-img img { aspect-ratio:3 / 2; }
}

/* --------------------------------------------------------------------------
   Menú en móvil
   Bajo 42rem el menú desaparecía sin sustituto: las cinco secciones del sitio
   solo se alcanzaban desde el pie, a 9.300 px de scroll en la landing. Se
   resuelve con «details» nativo —sin guion, con teclado, y funciona aunque
   falle todo lo demás—: en escritorio el resumen se oculta y el menú vuelve a
   ser la fila de siempre.
   -------------------------------------------------------------------------- */
.shell-menu > summary { display:none; }
.shell-menu { display:flex; align-items:stretch; align-self:stretch; }
.shell-menu > nav a { height:calc(100% + 1px); }
.shell-menu::details-content { content-visibility:visible; block-size:auto; }
.shell-menu > nav { display:flex; }

@media (max-width:41.5rem) {
  .shell nav { display:none; }          /* la regla vieja, ahora con sustituto */
  .shell-menu:not([open])::details-content { content-visibility:hidden; }
  .shell-menu { display:block; margin-inline-start:auto; }
  .shell-menu > summary {
    display:grid; place-items:center; width:3rem; height:3rem;
    color:#f4f4f4; cursor:pointer; list-style:none;
  }
  .shell-menu > summary::-webkit-details-marker { display:none; }
  .shell-menu > summary:hover { background:var(--gray-80); }
  .shell-menu[open] > summary { background:var(--gray-80); }
  /* El panel cuelga de la barra y ocupa el ancho entero: en 390 px un menú
     lateral no gana nada y complica el foco. */
  .shell-menu[open] nav {
    display:flex; flex-direction:column; height:auto;
    position:absolute; inset:3rem 0 auto 0; z-index:99;
    background:var(--gray-100); border-top:1px solid var(--gray-80);
  }
  .shell-menu nav a {
    padding:var(--sp-05); color:#f4f4f4; text-decoration:none;
    border-bottom:1px solid var(--gray-80); font-size:.875rem; letter-spacing:.16px;
  }
  .shell-menu nav a[aria-current="page"] { box-shadow:inset 3px 0 0 var(--verde); }
  .shell-in { position:relative; }
}

/* Puente de una guía a su formulario. Va sobre «layer-01» y no en color: es una
   salida ofrecida a media lectura, no una llamada que interrumpa el texto. */
.prosa .puente { background:var(--layer-01); padding:var(--sp-06);
                 margin:var(--sp-07) 0; max-width:none; }
.prosa .puente p { margin:0; max-width:60ch; }
.prosa .puente p + p { margin-top:var(--sp-05); }
.prosa .puente b { font-weight:600; }

/* La franja de la landing genérica es un puente, no un aviso: lleva a la
   página de e-CF mientras las consultas de la DGII sigan cayendo aquí. */
.strip-puente .grid { display:flex; align-items:center; gap:var(--sp-05); flex-wrap:wrap; }
.strip-puente a { margin-inline-start:auto; color:inherit; font-weight:600;
                  text-decoration:none; white-space:nowrap; }
.strip-puente a:hover { text-decoration:underline; }
@media (max-width:41.5rem) { .strip-puente a { margin-inline-start:0; } }

/* Última versión: prueba de que el producto se mueve, puesta donde se decide. */
.ver-linea { font-size:.875rem; line-height:1.42857; letter-spacing:.16px;
             color:var(--text-helper); margin:var(--sp-06) 0 0; }
.ver-linea b { font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--text-primary); }

/* «Entrar» en la barra: la puerta del cliente que ya tiene Breve. Va discreta
   —quien la busca sabe que existe— y separada del botón verde, que es para
   quien todavía no es cliente. */
/* «Entrar» tenia el mismo tratamiento que el telefono -gris #c6c6c6, mismo
   tamano y padding-, asi que una accion se leia como un dato. Se corrige al
   patron documentado de Carbon: «Header action height, width: 48/3», es decir
   altura completa de la barra, a ras y sin contorno; el estado lo marca el
   fondo en hover, igual que los enlaces de navegacion. La jerarquia queda en
   el color del texto: el telefono en secundario, «Entrar» en primario.
   Un boton flotante con contorno dentro del header NO es Carbon. */
.shell-entrar {
  display:flex; align-items:center; height:100%; padding-inline:var(--sp-05);
  font-size:.875rem; line-height:1.28572; letter-spacing:.16px;
  color:#f4f4f4; text-decoration:none; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.shell-entrar:hover { background:rgba(141,141,141,.16); color:#fff; text-decoration:none; }
/* La suma natural de la barra son 962px. Entre 848 y 960 los elementos
   partian en dos lineas dentro de los 48px de alto. El telefono se retira
   primero -esta en las tarjetas de contacto y en el pie- y el acceso
   despues; lo que quede, nunca se parte. */
.shell nav a, .shell-tel, .shell-cta, .shell-entrar { white-space:nowrap; }
@media (max-width:64rem) { .shell-tel { display:none; } }
@media (max-width:56rem) { .shell-entrar { display:none; } }

/* El «Entrar» del panel móvil duplica el de la barra, que se oculta bajo
   53rem: cada uno aparece donde el otro no está. */
.shell nav .nav-entrar { display:none; }
@media (max-width:41.5rem) {
  /* En blanco, no en verde: el verde del panel es el indicador de pagina
     activa y competian. Se separa por posicion, con un divisor. */
  .shell-menu nav .nav-entrar { display:block; color:#f4f4f4;
                                margin-top:var(--sp-03);
                                border-top:1px solid var(--gray-70); }
}

/* En las páginas de empresa la barra lleva el logotipo de IMS, que es más
   ancho y bajo que el de Breve: sin esto se vería a la mitad de tamaño. */
.shell-logo img[alt="IMS"] { height:22px; }
@media (max-width:41.5rem) { .shell-logo img[alt="IMS"] { height:20px; } }

/* La descripción del pie ocupa dos o tres líneas: «balance» las reparte para
   que ninguna quede con dos palabras sueltas. */
.foot .grid > div > p { text-wrap:balance; }

/* Los párrafos del cierre son de dos o tres líneas y van centrados en su
   columna: «balance» evita que la última quede con dos palabras sueltas. */
.closer p { text-wrap:balance; }