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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   Mosaicos — la canaleta de 1px dibuja la retícula
   -------------------------------------------------------------------------- */
.tiles { display:grid; gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); }
.tiles-2 { grid-template-columns:repeat(2,1fr); }
.tiles-3 { grid-template-columns:repeat(3,1fr); }
.tiles-4 { grid-template-columns:repeat(4,1fr); }
.tile {
  background:var(--background); padding:var(--sp-06);
  display:flex; flex-direction:column; gap:var(--sp-03); min-height:11rem;
}
.tile h3 { font-size:1.25rem; font-weight:400; }
.tile p { font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); }
.tile .tile-foot { margin-top:auto; padding-top:var(--sp-05); }
.tile-ic { color:var(--interactive); margin-bottom:var(--sp-02); }
.band .tile { background:var(--white); }
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); }
.band .stat { background:var(--layer-01); }
.stat .n { font-size:2.5rem; line-height:1.1; font-weight:300; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.stat .t { font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); margin-top:var(--sp-02); }

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   Carrusel de capturas
   -------------------------------------------------------------------------- */
.slider-wrap { max-width:64rem; }
.slider {
  position:relative; overflow:hidden; border:1px solid var(--gray-80);
  aspect-ratio:16/9; max-height:34rem;
  cursor:grab; touch-action:pan-y;   /* el arrastre horizontal es nuestro; el scroll vertical, del navegador */
}
.slider.arrastrando { cursor:grabbing; }
.slider-images {
  display:flex; width:500%; height:100%;
  transform:translateX(0); will-change:transform;
  transition:transform .42s var(--ease);
}
.slider-images.sin-transicion { transition:none; }
.slider-images img {
  width:20%; 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); }

.callout {
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-06); align-items:center;
  background:var(--layer-01); border-left:3px solid var(--interactive); padding:var(--sp-07);
}
.band .callout { background:var(--white); }
.callout .tag { font-size:.75rem; background:var(--interactive); color:#fff; padding:var(--sp-02) var(--sp-04); white-space:nowrap; }
.callout h3 { font-size:1.125rem; font-weight:600; margin-bottom:var(--sp-03); }
.callout p { font-size:.875rem; letter-spacing:.16px; }
.callout .cuenta { font-variant-numeric:tabular-nums; color:var(--text-primary); margin-top:var(--sp-03); }

/* --------------------------------------------------------------------------
   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);
}
.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. */
.prosa .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);
}
.prosa .aviso::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--warning); border-left:0; opacity:.4;
}
.prosa .aviso .ic { color:var(--warning); margin:14px var(--sp-05) 0 13px; }
.prosa .aviso > div:last-child { padding:15px 0; }
.prosa .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);
}
.prosa .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. */
.prosa .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;
}
.prosa .aviso .cuenta.vencido { background:var(--error); }
.strip .cuenta.vencido, .callout .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, .prosa .aviso .cuenta, .callout .tag, .sf-ecf .tag, .resource-badge {
  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); }
.prosa .aviso .cuenta { background:var(--gray-80); color:#fff; margin-left:var(--sp-03); font-variant-numeric:tabular-nums; }
.prosa .aviso .cuenta.vencido { background:#ffd7d9; color:#a2191f; }
.callout .tag, .sf-ecf .tag { background:#a7f0ba; color:#0e6027; }
/* 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; }
.prosa .update-date { font-size:.875rem; letter-spacing:.16px; color:var(--text-secondary); margin-bottom:var(--sp-08); }

/* 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 .timeline { border-top:1px solid var(--border-subtle); margin:var(--sp-08) 0; }
.prosa .timeline-item {
  display:grid; grid-template-columns:10rem 1fr; gap:var(--sp-05);
  padding-block:var(--sp-06); border-bottom:1px solid var(--border-subtle);
}
.prosa .timeline-date { color:var(--interactive); font-size:.875rem; letter-spacing:.16px; font-variant-numeric:tabular-nums; }
.prosa .timeline-text { color:var(--text-secondary); font-size:.875rem; letter-spacing:.16px; }

.prosa .comparison-table { width:100%; border-collapse:collapse; margin:var(--sp-08) 0; font-size:.875rem; letter-spacing:.16px; }
.prosa .comparison-table th, .prosa .comparison-table td {
  text-align:left; padding:var(--sp-05); border-bottom:1px solid var(--border-subtle);
}
.prosa .comparison-table thead th { background:var(--layer-01); font-weight:600; color:var(--text-primary); font-size:.875rem; letter-spacing:.16px; }

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

/* --------------------------------------------------------------------------
   Cierre y pie
   -------------------------------------------------------------------------- */
.closer { background:var(--gray-100); color:#c6c6c6; }
.closer .grid { padding-block:var(--sp-11); }
.closer h2 { color:#fff; max-width:24ch; }
.closer p { margin-top:var(--sp-05); max-width:44rem; }
.closer .actions { margin-top:var(--sp-08); display:flex; gap:1px; flex-wrap:wrap; }

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

/* --------------------------------------------------------------------------
   Adaptación
   -------------------------------------------------------------------------- */
@media (max-width:66rem) {
  .dos-col { grid-template-columns:1fr; gap:var(--sp-08); }
  .hero-split { grid-template-columns:1fr; gap:var(--sp-08); }
  .hero-form { max-width:30rem; }
  .tiles-4 { grid-template-columns:repeat(2,1fr); }
  .foot .grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:42rem) {
  .dos-col { grid-template-columns:1fr; gap:var(--sp-08); }
  /* Las capturas densas se leen fatal a media pantalla: en móvil se sacan
     del relleno de .grid y ocupan todo el ancho de la pantalla.
     Va como figure.shot-bleed porque figure.shot (0,1,1) le gana a
     .shot-bleed (0,1,0) por especificidad, esté donde esté en el archivo. */
  figure.shot { margin-inline:calc(-1 * var(--sp-05)); }
  figure.shot img { border-left:0; border-right:0; }
  figure.shot figcaption { padding-inline:var(--sp-05); }
  .tiles-2, .tiles-3, .tiles-4 { grid-template-columns:1fr; }
  .stats, .stats-3 { grid-template-columns:repeat(2,1fr); }
  .compare, .callout { grid-template-columns:1fr; align-items:start; }
  .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} }