/* Druppify · Red de metro · origen (v3) · sitio completo — componentes de las páginas.
   Se carga en TODAS las páginas, después de metro.css. Hereda sus tokens (colores, tipografías,
   --ease, --contenedor) y no redefine ninguno de metro.css: agrega lo que el sitio completo necesita.

   Índice
     1. Plantilla de línea: el color de la página sale de <body data-linea>
     2. Navegación: página actual y panel «El próximo paso»
     3. (sin uso: la brecha ilustrativa se retiró el 11-oct; los gráficos viven en graficos.css)
     4. Cifras dentro de frases (.cifras-frase) y dato suelto (.dato)
     5. Plantilla de línea: «El costo de no hacer nada» y «Cómo funciona» con su galería
     6. Formulario por pasos (form.pasos-form) y campos (.campo, .control, .opcion, .casilla)
     7. Pestañas (.pestanas)
     8. Prosa a 68 ch (.prosa) y artículo (.articulo)
     9. Documento legal (.documento)
    10. Modal (dialog.modal)
    11. Panel navy de las etapas (.proximo)
    12. Ajustes del kit de pantallas (pantallas.css no se edita desde una página)
    13. Celular
   Movimiento: solo la curva de la casa (var(--ease)); solo transform, opacity y clip-path. Todo
   estado oculto cuelga de .movimiento-listo (comun.js), así que sin JS o con movimiento reducido
   cada componente queda en su estado final. Texto funcional ≥ 11 px. */

/* ================= 1 · Plantilla de línea ================= */
/* El color de cada página de línea (botón primario, riel, tira móvil, cierre) y la línea
   discontinua de Sense viven en metro.css («.pagina-linea[data-linea]»). */

/* Trazo de cada línea sobre papel para gráficos: el mismo tono, un paso más oscuro donde el de marca
   no llega a 3:1 sobre blanco (3PL, Freight, Delivery y Sense). En oscuro, el color sobre navy. */
[data-linea="workforce"] { --l-curva: #2b59ff; }
[data-linea="retail"] { --l-curva: #7a3ff2; }
[data-linea="3pl"] { --l-curva: #009b70; }
[data-linea="freight"] { --l-curva: #c47600; }
[data-linea="delivery"] { --l-curva: #d63a71; }
[data-linea="sense"] { --l-curva: #0b8fb0; }
html[data-theme="dark"] [data-linea] { --l-curva: var(--l); }

/* ================= 2 · Navegación ================= */
.nav__enlace[aria-current] { box-shadow: inset 0 -2px 0 var(--tinta); border-radius: 8px 8px 0 0; }
.mega__linea[aria-current="page"] { background: color-mix(in srgb, var(--l) 9%, transparent); box-shadow: inset 3px 0 0 var(--l); }
.cajon__lineas a[aria-current="page"] { background: color-mix(in srgb, var(--l) 9%, transparent); box-shadow: inset 3px 0 0 var(--l); }
.cajon__enlaces a[aria-current] { box-shadow: inset 3px 0 0 var(--tinta); padding-left: 12px; }
.pie__lista a[aria-current], .pie__respaldo a[aria-current] { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.24em; }

/* Panel «El próximo paso» del mega menú: reemplaza «Una sola red» (La red y Precios quedan fuera) */
.mega__accion strong { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.mega__accion .icono { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.mega__accion:hover .icono, .mega__accion:focus-visible .icono { transform: translate(2px, -2px); }
.mega__paso .mega__propuesta a:first-child { box-shadow: inset 3px 0 0 var(--tinta); }

/* ================= 4 · Cifras dentro de frases ================= */
/* Una fila de cifras reales dentro de su frase (sin plantilla de métricas), abierta por un filete y
   cerrada por su línea de fuente. Nunca junto a un cliente, cadena, tienda, rol o rubro. */
.cifras-frase { margin-top: clamp(36px, 4vw, 56px); }
.cifras-frase__lista { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(24px, 2.6vw, 44px); border-top: 1px solid var(--tinta); }
.cifra-frase { display: grid; align-content: start; gap: 12px; padding: 22px 0 6px; }
.cifra-frase__lineas { display: flex; gap: 6px; }
.cifra-frase__lineas .insignia { width: 24px; height: 24px; font-size: 0.7rem; }
.cifra-frase__texto { font: 600 clamp(1.08rem, 1rem + 0.35vw, 1.3rem)/1.4 var(--f-display); font-stretch: 102%; letter-spacing: -0.006em; color: var(--tinta); max-width: 30ch; }
.cifra-frase__texto b { font-weight: 750; font-stretch: 100%; font-variant-numeric: tabular-nums; font-size: 1.16em; letter-spacing: -0.015em; }
.cifras-frase__fuente { margin-top: 18px; max-width: 64ch; font: 500 0.8125rem/1.5 var(--f-texto); color: var(--tinta-3); }
.cifras-frase__fuente b { font-weight: 650; color: var(--tinta-2); }
@media (min-width: 600px) { .cifras-frase__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cifras-frase--cuatro .cifras-frase__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* En columna (al lado de un gráfico): una frase bajo otra, separadas por un filete */
.cifras-frase--columna .cifras-frase__lista { grid-template-columns: minmax(0, 1fr); }
.cifras-frase--columna .cifra-frase + .cifra-frase { border-top: 1px solid var(--borde); }
@media (min-width: 600px) and (max-width: 1199px) {
  .cifras-frase--columna .cifras-frase__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras-frase--columna .cifra-frase + .cifra-frase { border-top: 0; }
}
/* Sobre el tablero navy */
.cifras-frase--tablero .cifras-frase__lista { border-top-color: var(--tablero-borde); }
.cifras-frase--tablero .cifra-frase__texto { color: #ffffff; }
.cifras-frase--tablero .cifras-frase__fuente { color: var(--tablero-tinta-2); }
.cifras-frase--tablero .cifras-frase__fuente b { color: #ffffff; }
.cifras-frase--tablero .insignia--sense { color: #ffffff; border-color: var(--c-sense); }
.cifras-frase--tablero .cifra-frase + .cifra-frase { border-color: var(--tablero-borde); }

/* Un dato suelto con su fuente, dentro de un texto (p. ej. V10 en «Verificar sin papeleo») */
.dato { margin-top: 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--tinta); max-width: 38rem; }
.dato__frase { display: block; font: 600 1.04rem/1.45 var(--f-display); font-stretch: 102%; color: var(--tinta); }
.dato__frase b { font-weight: 750; font-stretch: 100%; font-variant-numeric: tabular-nums; }
.dato__fuente { display: block; margin-top: 6px; font: 500 0.78rem/1.45 var(--f-texto); color: var(--tinta-3); }

/* ================= 5 · Plantilla de línea ================= */
/* «Cómo funciona»: las seis capacidades son el mapa de tira (.paradas) y cada una lleva a su
   captura en la galería de abajo (data-ir-cap); la sexta baja a Druppify Sense. */
.paradas .parada__enlace { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.3s var(--ease); padding-bottom: 1px; }
.paradas .parada__enlace:hover, .paradas .parada__enlace[aria-current="true"] { background-size: 100% 2px; }
.paradas .parada__enlace .icono { display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -1px; transition: transform 0.25s var(--ease); }
.paradas .parada__enlace:hover .icono { transform: translateY(3px); }
.paradas .parada:has(.parada__enlace[aria-current="true"])::before { background: var(--estacion-trazo); }
.capacidades .galeria-est { margin-top: clamp(48px, 5vw, 80px); }

/* Líneas sin módulo: en el andén de la apertura va la vista de diseño, soldada a la banda (sin borde
   superior ni radio arriba) */
.anden--fijo .diseno { border-top-width: 0; border-radius: 0 0 14px 14px; }
/* Capacidades con una vista de diseño fija al lado (sin galería): mapa de tira a 5 de 12 y la vista
   a 7 de 12, el ancho en que el kit no se deforma. --diseno: una vista (no la app) en la columna
   angosta de la plantilla. */
.capacidades__vista { min-width: 0; }
@media (min-width: 961px) {
  .capacidades__grid--vista { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .capacidades__vista { position: sticky; top: calc(var(--cab) + 32px); }
}
.capacidades__app--diseno { justify-items: stretch; }
.capacidades__app--diseno > .diseno { width: 100%; }
/* Galería sin app al lado: la principal a todo el ancho y las dos secundarias debajo */
@media (min-width: 960px) {
  .galeria-est.galeria-est--abajo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .galeria-est--abajo > .galeria__escenario > :first-child { grid-column: 1 / -1; grid-row: 1; }
  .galeria-est--abajo > .galeria__escenario > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .galeria-est--abajo > .galeria__escenario > :nth-child(3) { grid-column: 2; grid-row: 2; }
}
/* Tablero de «La prueba»: letreros en flaps que parten por palabra (nunca a mitad de palabra), con
   la celda un poco más alta para que las tildes de Á y Ó no se corten */
.flap--palabras { flex-wrap: wrap; gap: 6px 0.6rem; }
.flap__palabra { display: inline-flex; gap: 4px; }
.flap--palabras.flap--cjk { column-gap: 4px; } /* chino: cada carácter es su «palabra», con el aire de las celdas */
.flap--palabras.flap--cjk .flap__c { width: 1.12em; } /* un hanzi es cuadrado: no cabe en la celda de una letra latina */
.flap--palabras.flap--letras .flap__c { height: 1.36em; }
/* Tres filas iguales; y, sin video al lado, el tablero no se estira a todo el contenedor */
.tablero-wf--tres .tablero-wf__filas { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.tablero-wf--tres .tablero-wf__fila:last-child dt { color: #ffffff; }
.tablero-wf--solo { max-width: 70rem; }
/* Cuatro filas (La prueba de Workforce: volumen, año, red verificada y liquidación) */
.tablero-wf--cuatro .tablero-wf__filas { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.tablero-wf--cuatro .tablero-wf__fila { padding-block: clamp(18px, 1.9vw, 30px); }
.tablero-wf--solo .tablero-wf__fila dt { max-width: 40rem; }
@media (max-width: 960px) { .tablero-wf--tres .tablero-wf__filas, .tablero-wf--cuatro .tablero-wf__filas { grid-template-rows: none; } }

/* ================= 6 · Formulario por pasos ================= */
:root { --error: #b42318; }
html[data-theme="dark"] { --error: #ffa197; }
.pasos-form { display: grid; gap: 28px; min-width: 0; }
.pasos-form__avance { font: 650 0.78rem/1.3 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
/* Indicador: un mapa de tira de tres estaciones; la actual se rellena, las hechas también */
.pasos-form__indicador { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); padding-top: 30px; }
.pasos-form__indicador::before { content: ""; position: absolute; top: 9px; left: 11px; right: 11px; height: 6px; border-radius: 3px; background: var(--borde-fuerte); }
.pasos-form__indicador li { position: relative; font: 600 0.84rem/1.3 var(--f-texto); color: var(--tinta-3); }
.pasos-form__indicador li::before {
  content: ""; position: absolute; top: -30px; left: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--estacion-relleno); box-shadow: inset 0 0 0 4px var(--borde-fuerte);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pasos-form__indicador li:nth-child(n + 2) { text-align: center; }
.pasos-form__indicador li:nth-child(n + 2)::before { left: calc(50% - 11px); }
.pasos-form__indicador li:last-child { text-align: right; }
.pasos-form__indicador li:last-child::before { left: auto; right: 0; }
.pasos-form__indicador li.is-actual, .pasos-form__indicador li.is-hecho { color: var(--tinta); }
.pasos-form__indicador li.is-actual::before { box-shadow: inset 0 0 0 4px var(--l, var(--tinta)); }
.pasos-form__indicador li.is-hecho::before { background: var(--l, var(--tinta)); box-shadow: inset 0 0 0 4px var(--l, var(--tinta)); }
.pasos-form__paso { display: grid; gap: 22px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pasos-form__paso[hidden] { display: none; }
.pasos-form__paso > legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font: 700 clamp(1.3rem, 1.1rem + 0.6vw, 1.62rem)/1.25 var(--f-display); font-stretch: 104%; letter-spacing: -0.012em; color: var(--tinta); }
.pasos-form__paso > legend + * { clear: both; }
.pasos-form__fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 720px) { .pasos-form__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pasos-form__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 6px; }
.pasos-form__anuncio { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.movimiento-listo .pasos-form.is-pasos .pasos-form__paso:not([hidden]) { animation: paso-entra 0.5s var(--ease) both; }
@keyframes paso-entra { from { opacity: 0; transform: translate(-12px, 0); } }
/* Sin JS, los tres pasos se ven a la vez y los botones de avance no hacen falta */
html:not(.js) [data-pasos-siguiente], html:not(.js) [data-pasos-atras] { display: none; }

.campo { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo__etiqueta, .campo > label, .campo > legend { padding: 0; font: 600 0.95rem/1.4 var(--f-texto); color: var(--tinta); }
.campo__obligatorio { color: var(--tinta-3); font-weight: 500; }
.campo__ayuda { font-size: 0.86rem; line-height: 1.45; color: var(--tinta-3); }
.control {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--borde-fuerte); border-radius: 10px;
  background: var(--superficie); color: var(--tinta); font: 400 1rem/1.4 var(--f-texto);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.control::placeholder { color: var(--tinta-3); opacity: 1; }
.control:hover { border-color: var(--tinta-3); }
.control:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-color: var(--tinta); border-radius: 10px; }
textarea.control { min-height: 140px; padding: 12px 14px; resize: vertical; }
select.control {
  appearance: none; padding-right: 42px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
.control[aria-invalid="true"], .opciones[aria-invalid="true"] .opcion { border-color: var(--error); }
.campo__error { display: flex; align-items: flex-start; gap: 8px; font: 600 0.88rem/1.4 var(--f-texto); color: var(--error); }
.campo__error::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; background: radial-gradient(circle, currentColor 0 2px, transparent 2.5px); }
.campo__error[hidden] { display: none; }
/* Opciones con título y descripción (casillas o radios) */
.opciones { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.opciones > legend { padding: 0; margin-bottom: 10px; font: 600 0.95rem/1.4 var(--f-texto); color: var(--tinta); }
.opcion {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px 16px; border: 1.5px solid var(--borde-fuerte); border-radius: 12px; background: var(--superficie); cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.opcion:hover { border-color: var(--tinta-3); }
.opcion:has(input:checked) { border-color: var(--tinta); background: var(--superficie-2); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcion input, .casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
html[data-theme="dark"] .opcion input, html[data-theme="dark"] .casilla input { accent-color: #f3f5fb; }
.opcion input:focus-visible, .casilla input:focus-visible { outline: none; }
.opcion__titulo { display: block; font: 650 1rem/1.35 var(--f-display); font-stretch: 102%; color: var(--tinta); }
.opcion__texto { display: block; margin-top: 2px; font-size: 0.9rem; line-height: 1.45; color: var(--tinta-2); }
.casilla { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.95rem; line-height: 1.5; color: var(--tinta-2); cursor: pointer; }
.casilla:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 4px; border-radius: 6px; }
.campo--trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= 7 · Pestañas ================= */
/* La pestaña activa gana el trazo de 4 px de su línea (data-linea en el botón) o navy. */
.pestanas { min-width: 0; }
.pestanas__lista { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borde); }
.pestanas__tab {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px 0 10px;
  border: 0; border-radius: 10px 10px 0 0; background: none;
  font: 650 0.98rem/1.2 var(--f-display); font-stretch: 104%; color: var(--tinta-2);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.pestanas__tab .insignia { width: 26px; height: 26px; font-size: 0.7rem; }
.pestanas__tab::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 4px; border-radius: 2px 2px 0 0;
  background: var(--l, var(--tinta)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.pestanas__tab:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--tinta); }
.pestanas__tab[aria-selected="true"] { color: var(--tinta); }
.pestanas__tab[aria-selected="true"]::after { transform: none; }
.pestanas__tab:focus-visible { outline-offset: -3px; border-radius: 10px; }
/* Sense va después de las cinco, tras un separador discontinuo */
.pestanas__tab--capa { margin-left: 10px; }
.pestanas__tab--capa::before { content: ""; position: absolute; left: -8px; top: 12px; bottom: 12px; border-left: 2px dashed var(--borde-fuerte); }
.pestanas__panel { padding-top: clamp(22px, 2.4vw, 32px); }
/* Variante vertical (aria-orientation="vertical" en la lista): desde 1000 px cada línea es una fila
   como en el mega menú y Sense va debajo de las cinco, tras un trazo discontinuo; la activa gana el
   fondo de su color y la barra interna de 3 px. Bajo 1000 px, una grilla de 2 × 3 (3 × 2 desde
   600 px), con Sense en la última celda y su borde discontinuo: las seis se ven siempre. */
.pestanas--vertical { display: grid; gap: 24px; }
.pestanas--vertical .pestanas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-bottom: 0; }
@media (min-width: 600px) { .pestanas--vertical .pestanas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pestanas--vertical .pestanas__tab {
  width: 100%; min-height: 52px; padding: 0 14px 0 12px; justify-content: flex-start; text-align: left;
  border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie); font-size: 1rem;
}
.pestanas--vertical .pestanas__tab .insignia { width: 28px; height: 28px; font-size: 0.75rem; }
.pestanas--vertical .pestanas__tab::after {
  left: -1px; right: auto; top: 9px; bottom: 9px; width: 3px; height: auto; border-radius: 0 2px 2px 0;
  transform: scaleY(0); transform-origin: center;
}
.pestanas--vertical .pestanas__tab:hover { background: color-mix(in srgb, var(--tinta) 5%, var(--superficie)); }
.pestanas--vertical .pestanas__tab[aria-selected="true"] { border-color: var(--l); background: color-mix(in srgb, var(--l) 10%, var(--superficie)); }
.pestanas--vertical .pestanas__tab[aria-selected="true"]::after { transform: none; }
.pestanas--vertical .pestanas__tab:focus-visible { outline-offset: 2px; }
.pestanas--vertical .pestanas__tab--capa { margin: 0; border-style: dashed; border-width: 1.5px; }
.pestanas--vertical .pestanas__tab--capa::before { content: none; }
.pestanas--vertical .pestanas__panel { padding-top: 0; }
@media (min-width: 1000px) {
  .pestanas--vertical { grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 88px); align-items: start; }
  .pestanas--vertical .pestanas__lista { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .pestanas--vertical .pestanas__tab { border: 0; background: none; font-size: 1.04rem; }
  .pestanas--vertical .pestanas__tab::after { left: 0; top: 10px; bottom: 10px; }
  .pestanas--vertical .pestanas__tab:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
  .pestanas--vertical .pestanas__tab[aria-selected="true"] { background: color-mix(in srgb, var(--l) 10%, var(--superficie)); }
  .pestanas--vertical .pestanas__tab--capa { margin-top: 18px; border: 0; }
  .pestanas--vertical .pestanas__tab--capa::before { content: ""; position: absolute; left: 12px; right: 12px; top: -11px; bottom: auto; border-left: 0; border-top: 2px dashed var(--borde-fuerte); }
}
.pestanas__panel:focus-visible { outline-offset: 6px; border-radius: 8px; }
.movimiento-listo .pestanas__panel:not([hidden]) { animation: aparece-panel 0.45s var(--ease) both; }
@keyframes aparece-panel { from { opacity: 0; transform: translateY(6px); } }

/* ================= 8 · Prosa y artículo ================= */
.prosa { max-width: 68ch; font-size: 1.0625rem; line-height: 1.7; color: var(--tinta-2); }
.prosa > * + * { margin-top: 1.05em; }
/* El salto a un título ya descuenta la cabecera con html { scroll-padding-top } (metro.css): aquí no
   se suma un scroll-margin-top (antes quedaba a ~190 px en vez de 96) */
.prosa h2 { margin-top: 2.1em; font: 700 clamp(1.45rem, 1.2rem + 0.8vw, 1.95rem)/1.2 var(--f-display); font-stretch: 104%; letter-spacing: -0.015em; color: var(--tinta); }
.prosa h3 { margin-top: 1.7em; font: 700 1.22rem/1.3 var(--f-display); font-stretch: 104%; color: var(--tinta); }
.prosa h4 { margin-top: 1.4em; font: 650 1.04rem/1.35 var(--f-texto); color: var(--tinta); }
.prosa :is(h2, h3, h4) + * { margin-top: 0.6em; }
.prosa > :first-child { margin-top: 0; }
.prosa strong, .prosa b { font-weight: 650; color: var(--tinta); }
.prosa ul { list-style: disc; padding-left: 1.3em; }
.prosa ol { list-style: decimal; padding-left: 1.45em; }
.prosa li + li { margin-top: 0.45em; }
.prosa li::marker { color: var(--tinta-3); }
.prosa blockquote { padding-left: 20px; border-left: 4px solid var(--l, var(--tinta)); font: 600 1.18rem/1.45 var(--f-display); font-stretch: 102%; color: var(--tinta); }
.prosa figure img { width: 100%; border-radius: 4px; }
.prosa figcaption { margin-top: 10px; font-size: 0.86rem; line-height: 1.45; color: var(--tinta-3); }
.prosa hr { margin-block: 2.4em; border: 0; border-top: 1px solid var(--borde); }
.prosa table { width: 100%; font-size: 0.95rem; line-height: 1.5; }
.prosa th, .prosa td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.prosa th { color: var(--tinta); font-weight: 650; }
.prosa .tabla-desliza { overflow-x: auto; }

.articulo { padding-block: clamp(40px, 5vw, 72px) var(--esp-seccion); }
.articulo__cabeza { max-width: 62rem; }
/* Titulares de 80–120 caracteres: tope de unos 30 ch, 3–4 renglones a 1440 */
.articulo__titulo { font: 700 clamp(1.95rem, 1.25rem + 2vw, 3.15rem)/1.08 var(--f-display); font-stretch: 102%; letter-spacing: -0.025em; max-width: 30ch; text-wrap: balance; }
.articulo__bajada { margin-top: 20px; max-width: 60ch; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem); line-height: 1.6; color: var(--tinta-2); }
/* Fecha, categoría y autor van DEBAJO del titular (sin rótulos sobre titulares) */
.articulo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 22px; font: 600 0.86rem/1.4 var(--f-texto); color: var(--tinta-3); }
.articulo__meta > * + *::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 18px; border-radius: 50%; background: var(--borde-fuerte); vertical-align: middle; transform: translateY(-1px); }
.articulo__portada { margin-top: clamp(28px, 3vw, 44px); }
/* Portada con tope de alto (a 1920 una 16:9 medía 945 px) y encuadre por foto en --pos; --pieza
   muestra entera una pieza oficial sobre su propio fondo (--pieza-fondo) */
.articulo__portada img { width: 100%; aspect-ratio: 16 / 9; max-height: min(76svh, 720px); object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: 4px; background: var(--superficie-2); }
.articulo__portada--pieza img { object-fit: contain; background: var(--pieza-fondo, #020e23); }
.movimiento-listo .articulo__portada img { animation: portada-baja 1s var(--ease) 0.15s backwards; }
@keyframes portada-baja { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.articulo__portada figcaption { margin-top: 10px; font-size: 0.82rem; line-height: 1.45; color: var(--tinta-3); }
.articulo__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: clamp(36px, 4vw, 56px); }
@media (min-width: 1100px) {
  .articulo__grid { grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 120px); align-items: start; }
  .articulo__lado { position: sticky; top: calc(var(--cab) + 32px); }
  /* El lado va primero en el HTML (en celular queda antes del cuerpo) y se coloca a la derecha */
  .articulo__grid > .articulo__lado { grid-column: 2; grid-row: 1; }
  .articulo__grid > .articulo__lado ~ .prosa { grid-column: 1; grid-row: 1; }
}
.mas-noticias { margin-top: var(--esp-seccion); padding-top: 28px; border-top: 1px solid var(--borde); }
.mas-noticias__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 32px; margin-top: 16px; }
@media (min-width: 900px) { .mas-noticias__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mas-noticias__lista a { display: grid; gap: 6px; padding: 14px 0; text-decoration: none; border-bottom: 1px solid var(--borde); }
.mas-noticias__lista a:hover .mas-noticias__titulo { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.mas-noticias__fecha { font: 600 0.82rem/1.3 var(--f-texto); color: var(--tinta-3); }
.mas-noticias__titulo { font: 650 1.06rem/1.35 var(--f-display); font-stretch: 102%; color: var(--tinta); }

/* ================= 9 · Documento legal ================= */
/* Índice como mapa de tira vertical: fijo y abierto desde 1000 px, plegable en celular. */
.documento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: clamp(32px, 4vw, 56px) var(--esp-seccion); }
.documento__fecha { margin-top: 14px; font: 500 0.92rem/1.45 var(--f-texto); color: var(--tinta-3); }
.documento__indice { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.documento__indice > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px;
  list-style: none; cursor: pointer; font: 650 0.78rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2);
}
.documento__indice > summary::-webkit-details-marker { display: none; }
.documento__indice > summary .icono { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.documento__indice[open] > summary .icono { transform: rotate(180deg); }
.documento__indice ol { position: relative; display: grid; gap: 0; padding: 4px 12px 14px 16px; }
.documento__indice ol::before { content: ""; position: absolute; left: 25px; top: 18px; bottom: 26px; width: 4px; border-radius: 2px; background: var(--borde-fuerte); }
.documento__indice a {
  position: relative; display: block; padding: 8px 8px 8px 30px; border-radius: 8px;
  font: 500 0.9rem/1.4 var(--f-texto); color: var(--tinta-2); text-decoration: none;
}
.documento__indice a::before {
  content: ""; position: absolute; left: 3px; top: 12px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--superficie); box-shadow: inset 0 0 0 3px var(--borde-fuerte); transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.documento__indice a:hover { color: var(--tinta); background: var(--superficie-2); }
.documento__indice a[aria-current="true"] { color: var(--tinta); font-weight: 650; }
.documento__indice a[aria-current="true"]::before { background: var(--tinta); box-shadow: inset 0 0 0 3px var(--tinta); }
.documento__cuerpo { min-width: 0; }
/* Celular y tableta: el índice queda fijo bajo la cabecera, plegado, y se abre sobre el texto. El
   índice y el cuerpo comparten la misma celda (así el índice tiene recorrido para quedar fijo en
   todo el documento) y el cuerpo deja arriba el alto del índice plegado. */
@media (max-width: 999.98px) {
  .documento { grid-template-areas: "doc"; --indice-alto: 48px; --indice-aire: 10px; }
  .documento > .documento__indice, .documento > .documento__cuerpo { grid-area: doc; }
  .documento__indice {
    position: sticky; top: calc(var(--cab) + var(--indice-aire)); z-index: 6; align-self: start;
    box-shadow: 0 0 0 var(--indice-aire) var(--fondo);
  }
  .documento__indice[open] { box-shadow: 0 0 0 var(--indice-aire) var(--fondo), var(--sombra-alta); }
  .documento__indice > summary { min-height: var(--indice-alto); }
  .documento__indice > nav {
    max-height: calc(100svh - var(--cab) - var(--indice-alto) - 3 * var(--indice-aire) - 16px);
    overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--borde);
  }
  .documento__indice > nav > ol { padding-top: 10px; }
  .documento__cuerpo { padding-top: calc(var(--indice-alto) + 2px + clamp(28px, 6vw, 40px)); }
  /* El título al que se salta queda bajo la cabecera (scroll-padding-top) y bajo el índice plegado */
  .documento__cuerpo :is(h2, h3) { scroll-margin-top: calc(var(--indice-alto) + 2 * var(--indice-aire) + 4px); }
}
@media (min-width: 1000px) {
  .documento { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .documento__indice { position: sticky; top: calc(var(--cab) + 24px); max-height: calc(100svh - var(--cab) - 48px); overflow-y: auto; border: 0; border-radius: 0; background: none; scrollbar-width: thin; overscroll-behavior: contain; }
  .documento__indice > summary { cursor: default; padding: 0 0 6px; min-height: 0; }
  .documento__indice > summary .icono { display: none; }
  .documento__indice ol { padding: 4px 0 8px; }
  .documento__indice ol::before { left: 9px; }
  .documento__indice a::before { background: var(--fondo); }
  .documento__indice a { padding-left: 32px; }
  .documento__indice a::before { left: 4px; }
}

/* ================= 10 · Modal ================= */
.modal {
  width: min(500px, calc(100% - 32px)); max-height: calc(100svh - 48px); margin: auto; padding: 0; border: 0; border-radius: 16px;
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-alta), 0 0 0 1px var(--borde);
}
.modal::backdrop { background: rgba(15, 20, 48, 0.56); }
.movimiento-listo .modal[open] { animation: modal-entra 0.5s var(--ease) both; }
.movimiento-listo .modal[open]::backdrop { animation: aparece 0.3s var(--ease) both; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.modal__cuerpo { position: relative; display: grid; justify-items: start; gap: 14px; padding: 34px 30px 30px; }
/* La estación terminal: un anillo con el visto bueno, en el color de la línea si la hay */
.modal__marca { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lb, var(--primario)); color: var(--lt, var(--primario-tinta)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lb, var(--primario)) 18%, transparent); }
.modal__marca .icono { width: 26px; height: 26px; }
.modal__titulo { margin-top: 8px; font: 700 clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem)/1.2 var(--f-display); font-stretch: 104%; letter-spacing: -0.015em; }
.modal__titulo:focus { outline: none; }
.modal__texto { color: var(--tinta-2); font-size: 1.04rem; line-height: 1.6; }
.modal__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.modal__cerrar { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); }
.modal__cerrar:hover { background: var(--superficie-2); }

/* ================= 11 · Panel navy de las etapas ================= */
/* Las tres etapas del cierre (.etapas de metro.css) sobre un panel navy (agenda-demo y contacto),
   con su título «El próximo paso» como h2 en la voz display, un paso sobre las etapas y sin
   versalitas ni tracking: nombra la columna, no es un antetítulo (revisión final, 11-oct). Si el
   panel o un ancestro trae data-linea, la vía toma el color de esa línea sobre navy. */
.proximo {
  position: relative; padding: clamp(26px, 2.6vw, 40px);
  border-radius: 16px; background: var(--cierre); color: #ffffff; box-shadow: var(--sombra-alta);
  --estacion-relleno: var(--cierre);
}
html[data-theme="dark"] .proximo { box-shadow: inset 0 0 0 1px var(--borde); }
.proximo__titulo { margin-bottom: 28px; font: 700 clamp(1.4rem, 1.16rem + 0.62vw, 1.72rem)/1.18 var(--f-display); font-stretch: 104%; letter-spacing: -0.014em; color: #ffffff; }
.proximo .etapas strong { color: #ffffff; font-size: clamp(1.12rem, 1rem + 0.35vw, 1.3rem); }
.proximo .etapas p { font-size: 0.98rem; line-height: 1.55; }
:is([data-linea] .proximo, .proximo[data-linea]) .etapas::before { background: var(--lc); transition: background-color 0.35s var(--ease); }

/* ================= 12 · Ajustes del kit compartido ================= */
/* La pantalla de Delivery en una columna angosta: se oculta la columna del folio (repite el comercio
   de la fila), como hace el kit con .ocultar-angosto en las otras pantallas */
@container (max-width: 420px) {
  .diseno .pantalla[data-line="delivery"] .tabla td.tenue:first-child { display: none; }
  /* «Cobertura multioperador» a 390: la barra cede ancho para que el estado («No cumple») no se corte */
  .diseno .pantalla .barra { min-width: 0; grid-template-columns: minmax(28px, 1fr) auto; gap: 6px; }
  .diseno .pantalla .tabla td, .diseno .pantalla .tabla th { padding-inline: 7px; }
  .diseno .pantalla .tabla td:first-child, .diseno .pantalla .tabla th:first-child { padding-left: 10px; }
}

/* ================= 12a · Lista de vía (.lista-via) =================
   Estaciones chicas sobre un trazo corto, como un mapa de tira vertical (transportistas, drupper).
   --detalle: título y texto por estación. --tablero: sobre el tablero navy del andén. */
.lista-via { position: relative; isolation: isolate; display: grid; gap: 18px; max-width: 36rem; padding-left: 42px; }
.lista-via::before { content: ""; position: absolute; z-index: -1; left: 8px; top: 10px; bottom: 10px; width: 6px; border-radius: 3px; background: var(--l); }
.lista-via li { position: relative; font-size: 1.08rem; line-height: 1.45; color: var(--tinta); font-weight: 500; }
.lista-via li::before {
  content: ""; position: absolute; left: -42px; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--estacion-relleno); box-shadow: inset 0 0 0 4px var(--estacion-trazo);
}
.movimiento-listo .lista-via::before { transition: clip-path 0.8s var(--ease); }
.movimiento-listo .lista-via:not(.is-visible)::before { clip-path: inset(0 0 100% 0 round 3px); }
.lista-via--detalle { gap: 26px; max-width: 40rem; }
.lista-via--detalle li::before { top: 2px; }
.lista-via--detalle h3 { font-size: 1.22rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.lista-via--detalle p { margin-top: 4px; max-width: 34rem; color: var(--tinta-2); font-size: 1rem; font-weight: 400; line-height: 1.55; }
.lista-via--tablero { gap: 20px; }
.lista-via--tablero::before { background: #f3f5fb; }
.lista-via--tablero li { color: #ffffff; }
.lista-via--tablero li::before { background: var(--tablero); box-shadow: inset 0 0 0 4px #f3f5fb; }
.lista-via--tablero h3 { color: #ffffff; font-size: 1.06rem; letter-spacing: -0.005em; }
.lista-via--tablero p { color: var(--tablero-tinta-2); font-size: 0.95rem; line-height: 1.5; }

/* ================= 12b · Vista de ejemplo del producto (.ejemplo) ================= */
/* Vista de ejemplo del producto (SmartPickup), la tercera leyenda de 09-origen (decisión 5): existe y
   opera, pero no hay captura. Lleva el kit con su sombra de ventana, sin el borde punteado de la vista
   de diseño (no es un diseño a futuro) y sin la barra de URL de la captura (no es una captura de la
   app). El punto lleno del color de la línea es el mismo de «En producción». */
.ejemplo { position: relative; margin: 0; min-width: 0; width: 100%; }
.ejemplo__rotulo {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 2px;
  font: 650 0.84rem/1.3 var(--f-display); font-stretch: 104%; color: var(--tinta-2);
}
.ejemplo__marca { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--l); }
.ejemplo .pantalla { --p-radio: 12px; }
@container (max-width: 660px) { .ejemplo .pantalla .ocultar-angosto { display: none; } }
@media (max-width: 719px) { .ejemplo .tabla td, .ejemplo .tabla th { padding-inline: 9px; } }

/* ================= 13 · Celular ================= */
@media (max-width: 719px) {
  .cifra-frase__texto { max-width: none; }
  .pestanas__tab { min-height: 46px; padding-inline: 8px 12px; font-size: 0.94rem; }
  .modal__cuerpo { padding: 30px 22px 24px; }
  .modal__acciones .boton { flex: 1 1 100%; }
  /* La fecha, la categoría y el autor de un artículo, en columna y sin puntos */
  .articulo__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .articulo__meta > * + *::before { display: none; }
}

@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }