/* ═══ /sistema · la página comercial de Pa Pronto OS+ ═══════════════════════
   Solo tokens de sistema.css: ni un color ni una medida inventados aquí.
   Prefijo `os-` para no chocar con ninguna hoja de la casa. Móvil primero:
   se mide a 375, 402 y 440. */

.os-pagina { padding-bottom: var(--e7); }
.os-pagina section { padding-block: var(--e6); scroll-margin-top: 5rem; }
.os-pagina h2 { font-family: var(--fuente-titulo); font-size: var(--t-h1); line-height: var(--renglon-titular); margin: var(--e1) 0 var(--e3); text-wrap: balance; }
.os-pagina h3 { font-family: var(--fuente-titulo); font-size: var(--t-h3); line-height: var(--renglon-medio); margin: 0 0 var(--e1); }
.os-pagina p { line-height: var(--renglon-cuerpo); margin: 0 0 var(--e3); }
.os-pagina a:not(.boton) { color: var(--acento); text-underline-offset: .2em; }
.os-entrada { color: var(--texto-suave); font-size: var(--t-lede); line-height: var(--renglon-medio); max-width: 62ch; }
.os-prosa { max-width: var(--ancho-texto); }
.os-prosa strong { color: var(--texto); }

/* ── Héroe ─────────────────────────────────────────────────────────────── */
.os-heroe { display: grid; gap: var(--e5); align-items: center; padding-block: var(--e6) var(--e5); }
.os-heroe h1 { font-family: var(--fuente-titulo); font-size: var(--t-display); line-height: var(--renglon-titular); margin: var(--e2) 0 var(--e3); text-wrap: balance; }
.os-heroe h1 em { font-style: normal; color: var(--acento); }
.os-botones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.os-cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); margin: var(--e5) 0 0; padding: 0; list-style: none; }
.os-cifras li { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-caja); padding: var(--e3); }
.os-cifras b { display: block; font-family: var(--fuente-titulo); font-size: var(--t-h2); color: var(--acento); line-height: 1; }
.os-cifras span { font-size: var(--t-micro); color: var(--texto-suave); }

/* ── Las pantallas de ejemplo (ilustraciones hechas con la hoja) ────────── */
.os-pantalla { margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-3); overflow: hidden; }
.os-pantalla-barra { display: flex; align-items: center; gap: var(--e1); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borde); background: var(--superficie-alta); font-size: var(--t-micro); color: var(--texto-suave); }
.os-pantalla-barra i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--borde); }
.os-pantalla-barra b { margin-left: var(--e1); font-family: var(--fuente-datos); font-weight: 500; }
.os-pantalla-cuerpo { padding: var(--e3); display: grid; gap: var(--e2); }
.os-pantalla figcaption { padding: var(--e2) var(--e3); border-top: 1px solid var(--borde); font-size: var(--t-pie); color: var(--texto-suave); }

.os-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.os-mes span { aspect-ratio: 1; border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--borde); position: relative; }
.os-mes span[data-e]::after { content: ""; position: absolute; inset: 22%; border-radius: 3px; background: var(--n300); }
.os-mes span[data-e="aprobada"]::after { background: var(--acento-fondo); }
.os-mes span[data-e="publicada"]::after { background: var(--area-diseno); }
.os-mes span[data-e="cambios"]::after { background: var(--area-marketing); }
.os-leyenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin: 0; padding: 0; list-style: none; font-size: var(--t-pie); color: var(--texto-suave); }
.os-leyenda li::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; background: var(--n300); }
.os-leyenda .l-aprobada::before { background: var(--acento-fondo); }
.os-leyenda .l-publicada::before { background: var(--area-diseno); }
.os-leyenda .l-cambios::before { background: var(--area-marketing); }

.os-pieza { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e3); align-items: start; }
.os-pieza img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radio); }
.os-pieza p { margin: 0 0 var(--e1); font-size: var(--t-micro); line-height: 1.45; }
.os-pieza .os-meta { font-family: var(--fuente-datos); color: var(--texto-suave); font-size: var(--t-pie); }
.os-fila-botones { display: flex; gap: var(--e1); flex-wrap: wrap; }
.os-ficha { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--e2); border-radius: var(--radio-pastilla); font-size: var(--t-pie); font-weight: 600; border: 1px solid var(--borde); background: var(--superficie-alta); color: var(--texto); }
.os-ficha-si { background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo); border-color: transparent; }

.os-barras { display: grid; gap: var(--e1); margin: 0; padding: 0; list-style: none; font-size: var(--t-pie); }
.os-barras li { display: grid; grid-template-columns: 6.5rem 1fr 3rem; gap: var(--e2); align-items: center; color: var(--texto-suave); }
.os-barras i { display: block; height: .6rem; border-radius: var(--radio-pastilla); background: var(--acento-fondo); width: var(--w); }
.os-barras b { font-family: var(--fuente-datos); color: var(--texto); text-align: right; font-weight: 600; }

/* ── Índice ────────────────────────────────────────────────────────────── */
.os-indice { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: var(--e4); }
.os-indice ol { margin: var(--e2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e1) var(--e4); counter-reset: i; }
.os-indice li { counter-increment: i; }
.os-indice a { display: flex; gap: var(--e2); min-height: 2.75rem; align-items: center; text-decoration: none; color: var(--texto) !important; border-bottom: 1px solid var(--borde); }
.os-indice a::before { content: counter(i, decimal-leading-zero); font-family: var(--fuente-datos); color: var(--acento); font-size: var(--t-micro); }
.os-indice a:hover { color: var(--acento) !important; }

/* ── Rejillas de tarjetas ──────────────────────────────────────────────── */
.os-rejilla { display: grid; gap: var(--e3); margin: var(--e4) 0 0; padding: 0; list-style: none; }
.os-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: var(--e4); box-shadow: var(--sombra-1); }
.os-tarjeta p { margin: 0; color: var(--texto-suave); font-size: var(--t-base); line-height: 1.6; }
.os-tarjeta .os-num { font-family: var(--fuente-datos); font-size: var(--t-micro); color: var(--acento); display: block; margin-bottom: var(--e1); }
.os-modulo { border-top: 3px solid var(--tono, var(--acento-fondo)); }
.os-modulo small { display: block; margin-top: var(--e2); font-size: var(--t-pie); color: var(--texto-suave); font-family: var(--fuente-datos); }
.t-marketing { --tono: var(--area-marketing); } .t-multimedia { --tono: var(--area-multimedia); }
.t-diseno { --tono: var(--area-diseno); } .t-uxui { --tono: var(--area-uxui); }
.t-desarrollo { --tono: var(--area-desarrollo); } .t-btl { --tono: var(--area-btl); }

/* ── El recorrido de una pieza ─────────────────────────────────────────── */
.os-recorrido { margin: var(--e5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e5); counter-reset: paso; }
.os-paso { display: grid; gap: var(--e4); align-items: center; counter-increment: paso; }
.os-paso-texto { position: relative; padding-left: 3.75rem; }
.os-paso-texto::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo); font-family: var(--fuente-titulo); font-weight: 700; }
.os-paso-texto ul { margin: var(--e2) 0 0; padding-left: 1.1rem; color: var(--texto-suave); line-height: 1.6; }
.os-paso-foto { margin: 0; }
.os-paso-foto img { width: 100%; height: auto; max-height: 26rem; object-fit: cover; border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-2); }
.os-paso-foto figcaption { font-size: var(--t-pie); color: var(--texto-suave); margin-top: var(--e1); }

/* ── La cadena de un cambio ────────────────────────────────────────────── */

/* ── Aliados ───────────────────────────────────────────────────────────── */
.os-aliado h3 { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); align-items: center; }
.os-estado { font-family: var(--fuente-datos); font-size: var(--t-pie); font-weight: 600; padding: .15rem .6rem; border-radius: var(--radio-pastilla); border: 1px solid var(--borde); color: var(--texto-suave); white-space: nowrap; }
.os-estado.e-vivo { border-color: var(--acento); color: var(--acento); }
.os-aliado ul { margin: var(--e2) 0 0; padding-left: 1.1rem; color: var(--texto-suave); line-height: 1.6; }
.os-marcas { font-size: var(--t-pie); color: var(--texto-suave); max-width: var(--ancho-texto); margin-top: var(--e4); }

/* ── El arquitecto ─────────────────────────────────────────────────────── */
.os-arquitecto { display: grid; gap: var(--e5); align-items: start; }
.os-retrato { margin: 0; }
.os-retrato img { width: 100%; height: auto; border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-3); }
.os-retrato figcaption { font-size: var(--t-pie); color: var(--texto-suave); margin-top: var(--e1); }
.os-cita { margin: var(--e4) 0; padding: var(--e3) var(--e4); border-left: 3px solid var(--acento); background: var(--superficie); border-radius: 0 var(--radio-caja) var(--radio-caja) 0; font-family: var(--fuente-titulo); font-size: var(--t-h3); line-height: var(--renglon-medio); }
.os-linea { margin: var(--e4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.os-linea li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--e3); padding-bottom: var(--e2); border-bottom: 1px solid var(--borde); }
.os-linea time, .os-linea .os-anio { font-family: var(--fuente-datos); color: var(--acento); font-weight: 600; }

/* ── Casos ─────────────────────────────────────────────────────────────── */
.os-casos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); margin: var(--e4) 0 0; padding: 0; list-style: none; }
.os-casos a { display: block; position: relative; border-radius: var(--radio-caja); overflow: hidden; text-decoration: none; }
.os-casos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .4s ease; }
.os-casos a:hover img { transform: scale(1.04); }
.os-casos span { position: absolute; inset: auto 0 0 0; padding: var(--e4) var(--e2) var(--e2); background: linear-gradient(transparent, rgba(28, 30, 38, .85)); color: #fff; font-weight: 600; font-size: var(--t-micro); }

/* ── Sustento legal ────────────────────────────────────────────────────── */
.os-legal { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: var(--e4); }
.os-legal dl { display: grid; gap: var(--e2) var(--e4); margin: var(--e3) 0; }
.os-legal dt { font-family: var(--fuente-datos); font-size: var(--t-pie); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .08em; }
.os-legal dd { margin: 0 0 var(--e2); }
.os-documentos { display: grid; gap: var(--e2); margin: var(--e4) 0 0; padding: 0; list-style: none; }
.os-documentos a { display: block; min-height: 100%; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio-caja); text-decoration: none; background: var(--fondo); }
.os-documentos a:hover { border-color: var(--acento); }
.os-documentos b { display: block; color: var(--texto); font-family: var(--fuente-titulo); }
.os-documentos span { color: var(--texto-suave); font-size: var(--t-micro); }
.os-actualizado { font-family: var(--fuente-datos); font-size: var(--t-pie); color: var(--texto-suave); }

.os-cierre { text-align: center; }
.os-cierre .os-botones { justify-content: center; }
.os-cierre img { width: 9rem; height: auto; margin: 0 auto var(--e3); display: block; }

@media (min-width: 700px) {
  .os-cifras { grid-template-columns: repeat(4, 1fr); }
  .os-indice ol { grid-template-columns: repeat(2, 1fr); }
  .os-rejilla { grid-template-columns: repeat(2, 1fr); }
  .os-casos { grid-template-columns: repeat(3, 1fr); }
  .os-documentos { grid-template-columns: repeat(2, 1fr); }
  .os-legal dl { grid-template-columns: 12rem 1fr; }
  .os-legal dd { margin: 0; }
}
@media (min-width: 1000px) {
  .os-heroe { grid-template-columns: 1.1fr .9fr; }
  .os-rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .os-paso { grid-template-columns: 1fr 1fr; }
  .os-paso:nth-child(even) .os-paso-texto { order: 2; }
  .os-arquitecto { grid-template-columns: .8fr 1.2fr; }
  .os-retrato { position: sticky; top: 6rem; }
  .os-documentos { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .os-casos img { transition: none; } }

/* ── Las cuatro razones · registro y redes en una pantalla ─────────────── */
.os-razon .os-num { text-transform: uppercase; letter-spacing: var(--letra-antetitulo); }
.os-doble { display: grid; gap: var(--e4); margin-top: var(--e5); align-items: start; }
.os-bitacora { margin: 0; padding: 0; list-style: none; display: grid; }
.os-bitacora li { display: grid; grid-template-columns: 5.2rem 1fr; gap: var(--e2); padding: var(--e2) 0; border-bottom: 1px solid var(--borde); font-size: var(--t-micro); line-height: 1.45; }
.os-bitacora li:last-child { border-bottom: 0; }
.os-bitacora time { font-family: var(--fuente-datos); color: var(--acento); font-size: var(--t-pie); }
.os-bitacora span { color: var(--texto-suave); }
.os-bitacora b { color: var(--texto); }
.os-redes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.os-redes li { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-caja); padding: var(--e2); display: grid; gap: 2px; min-width: 0; }
.os-redes small { font-family: var(--fuente-datos); font-size: var(--t-pie); color: var(--texto-suave); }
.os-redes b { font-family: var(--fuente-titulo); font-size: var(--t-h2); line-height: 1; color: var(--texto); }
.os-redes span { font-size: var(--t-pie); color: var(--texto-suave); }
.os-redes em { font-style: normal; font-size: var(--t-pie); color: var(--acento); margin-top: var(--e1); }
@media (min-width: 1000px) { .os-doble { grid-template-columns: 1fr 1fr; } }
/* En teléfono las tres redes van en renglones: en tres columnas «publicaciones» no cabía a 375. */
@media (max-width: 520px) {
  .os-redes { grid-template-columns: 1fr; }
  .os-redes li { grid-template-columns: 5.5rem auto 1fr; align-items: baseline; column-gap: var(--e2); }
  .os-redes em { grid-column: 2 / -1; margin-top: 0; }
}

/* ═══ versión 3 ═══════════════════════════════════════════════════════════ */

/* ── La base comercial: seis pasos en fila, la auditoría resaltada ─────── */
.os-embudo { margin: var(--e5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.os-embudo li { position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-caja); padding: var(--e3) var(--e3) var(--e3) 4rem; }
.os-embudo p { margin: 0; color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.55; }
.os-embudo-n { position: absolute; left: var(--e3); top: var(--e3); width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--borde); font-family: var(--fuente-titulo); font-weight: 700; color: var(--acento); background: var(--fondo); }
.os-embudo-eje { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset, var(--sombra-2); }
.os-embudo-eje .os-embudo-n { background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo); border-color: transparent; }

/* ── Productos por giro ───────────────────────────────────────────────── */
.os-productos { margin: var(--e5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e3); }
.os-producto { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--tono, var(--acento-fondo)); border-radius: var(--radio-tarjeta); padding: var(--e4); display: grid; gap: var(--e1); align-content: start; box-shadow: var(--sombra-1); }
.os-producto-cab { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); align-items: center; justify-content: space-between; }
.os-giro { font-family: var(--fuente-datos); font-size: var(--t-pie); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
.os-producto h3 { font-size: var(--t-h2); margin: var(--e1) 0 0; }
.os-producto p { margin: 0; color: var(--texto-suave); line-height: 1.6; }
.os-producto small { font-size: var(--t-pie); color: var(--texto-suave); margin-top: var(--e1); }

/* ── La trastienda: tres tramos, ocho estaciones ───────────────────────── */
.os-tramos-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e1); margin: var(--e4) 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 4.2rem); z-index: 2; background: var(--velo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: var(--e1); border-radius: var(--radio-pastilla); border: 1px solid var(--borde); }
.os-tramos-nav a { display: flex; gap: .4rem; align-items: center; justify-content: center; min-height: 2.75rem; border-radius: var(--radio-pastilla); text-decoration: none; font-weight: 600; font-size: var(--t-micro); color: var(--texto) !important; }
.os-tramos-nav a:hover, .os-tramos-nav a:focus-visible { background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo) !important; }
.os-tramos-nav b { font-family: var(--fuente-datos); color: var(--acento); }
.os-tramos-nav a:hover b, .os-tramos-nav a:focus-visible b { color: inherit; }
.os-tramos { display: grid; gap: var(--e3); }
.os-tramo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: var(--e4); scroll-margin-top: 9rem; }
.os-tramo > header { border-bottom: 1px solid var(--borde); padding-bottom: var(--e3); margin-bottom: var(--e3); }
.os-tramo > header h3 { font-size: var(--t-h2); margin: .15rem 0 var(--e1); }
.os-tramo > header p { margin: 0; color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.55; }
.os-tramo-n { font-family: var(--fuente-datos); font-size: var(--t-pie); text-transform: uppercase; letter-spacing: var(--letra-antetitulo); color: var(--acento); }
.os-via { margin: 0; padding: 0; list-style: none; display: grid; }
.os-via li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--e2); position: relative; padding-bottom: var(--e3); }
.os-via li:last-child { padding-bottom: 0; }
.os-via li:not(:last-child)::before { content: ""; position: absolute; left: 1.25rem; top: 2.5rem; bottom: 0; width: 2px; background: var(--borde); transform: translateX(-1px); }
.os-nodo { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--borde); background: var(--fondo); font-family: var(--fuente-titulo); font-weight: 700; position: relative; z-index: 1; }
.os-via b { display: block; font-family: var(--fuente-titulo); line-height: 1.3; padding-top: .45rem; }
.os-via div > span { display: block; color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.55; margin-top: .2rem; }
.os-via em { display: block; width: fit-content; margin: .3rem 0 0 !important; font-style: normal; font-family: var(--fuente-datos); font-size: var(--t-pie); font-weight: 600; padding: .1rem .55rem; border-radius: var(--radio-pastilla); background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo); vertical-align: 1px; }
.os-via .os-firma .os-nodo { background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento-fondo) 25%, transparent); }
.os-nota-ia { border-top: 3px solid var(--acento-fondo); }
.os-nota-ia .os-num { text-transform: uppercase; letter-spacing: var(--letra-antetitulo); }

/* ── El arquitecto: su trabajo en cuatro fotos ─────────────────────────── */
.os-galeria { margin: var(--e4) 0 var(--e1); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e1); }
.os-galeria img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radio-caja); display: block; }
.os-meta { font-family: var(--fuente-datos); color: var(--texto-suave); font-size: var(--t-pie); }

/* ── Empresas: la tabla comprobable ────────────────────────────────────── */
.os-tabla-caja { overflow-x: auto; margin-top: var(--e4); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.os-tabla { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--t-micro); }
.os-tabla th, .os-tabla td { text-align: left; padding: var(--e3); border-bottom: 1px solid var(--borde); vertical-align: top; line-height: 1.5; }
.os-tabla thead th { font-family: var(--fuente-datos); font-size: var(--t-pie); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); font-weight: 600; background: var(--superficie-alta); }
.os-tabla tbody th { font-family: var(--fuente-titulo); font-size: var(--t-base); }
.os-tabla tr:last-child td { border-bottom: 0; }
.os-pendiente, .os-fila-pendiente td { color: var(--texto-suave); font-family: var(--fuente-datos); font-size: var(--t-pie); }

@media (min-width: 700px) {
  .os-embudo { grid-template-columns: repeat(2, 1fr); }
  .os-productos { grid-template-columns: repeat(2, 1fr); }
  .os-galeria { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
  .os-embudo { grid-template-columns: repeat(3, 1fr); }
  .os-tramos { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .os-tramos-nav { position: static; max-width: 30rem; }
  .os-productos li:first-child { grid-column: 1 / -1; }
}

/* ═══ versión 4 · por qué, cómo, qué ═══════════════════════════════════════ */
.os-circulo { display: grid; gap: var(--e2); padding: var(--e3); }
.os-circulo a { display: grid; grid-template-columns: 2.75rem 1fr; column-gap: var(--e2); align-items: center; min-height: 3.5rem; padding: var(--e2) var(--e3); border: 1px solid var(--borde); border-radius: var(--radio-caja); text-decoration: none; background: var(--fondo); color: var(--texto) !important; }
.os-circulo a:hover, .os-circulo a:focus-visible { border-color: var(--acento); }
.os-circulo span { grid-row: 1 / 3; font-family: var(--fuente-titulo); font-size: var(--t-h2); color: var(--acento); }
.os-circulo b { font-family: var(--fuente-titulo); font-size: var(--t-h3); }
.os-circulo em { font-style: normal; font-size: var(--t-pie); color: var(--texto-suave); }

.os-parte { margin-top: var(--e7); padding-block: var(--e6); border-top: 1px solid var(--borde); position: relative; scroll-margin-top: 5rem; }
.os-parte-n { font-family: var(--fuente-datos); color: var(--acento); letter-spacing: var(--letra-antetitulo); font-size: var(--t-micro); }
.os-pagina .os-parte-t { font-size: var(--t-display); margin: 0 0 var(--e2); color: var(--acento); }
.os-parte p { font-size: var(--t-lede); line-height: var(--renglon-medio); max-width: 48ch; margin: 0; }

.os-motivo { max-width: 60ch; padding: var(--e2) var(--e3); border-left: 3px solid var(--acento); background: var(--superficie); border-radius: 0 var(--radio-caja) var(--radio-caja) 0; color: var(--texto-suave); font-size: var(--t-base); line-height: 1.55; }
.os-motivo b { color: var(--acento); font-family: var(--fuente-datos); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-pie); margin-right: .35rem; }
.os-sub { margin-top: var(--e6) !important; margin-bottom: var(--e3) !important; font-size: var(--t-h2) !important; }

.os-creencias { margin: var(--e4) 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.os-creencias li { font-family: var(--fuente-titulo); font-size: var(--t-h3); line-height: var(--renglon-medio); padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio-caja); background: var(--superficie); }
.os-creencias b { color: var(--acento); }

.os-contraste { display: grid; gap: var(--e3); margin: var(--e4) 0; }
.os-contraste-col { border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: var(--e4); background: var(--superficie); display: grid; align-content: start; gap: var(--e2); }
.os-contraste-si { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.os-pila { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e1); }
.os-pila li { padding: var(--e2) var(--e3); border-radius: var(--radio); background: var(--fondo); border: 1px dashed var(--borde); font-size: var(--t-micro); color: var(--texto-suave); }
.os-contraste-si .os-pila li { background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo); border: 0; font-weight: 600; font-size: var(--t-base); padding: var(--e4) var(--e3); }
.os-contraste-pie { margin: 0 !important; font-family: var(--fuente-datos); font-size: var(--t-pie); color: var(--texto-suave); }

.os-hechos { margin: 0 0 var(--e3); padding: 0; list-style: none; display: grid; gap: var(--e1); }
.os-hechos li { padding: var(--e2) 0; border-bottom: 1px solid var(--borde); color: var(--texto-suave); line-height: 1.5; }
.os-hechos b { color: var(--texto); }

.os-cifras-6 { margin-top: var(--e4); }
.os-dominios li { grid-template-columns: minmax(0, 11rem) 1fr 3.2rem; font-size: var(--t-micro); min-height: 1.75rem; }
.os-dominios i { height: .8rem; }
.os-dominios span { color: var(--texto); }

.os-matriz { min-width: 46rem; }
.os-matriz td { text-align: center; font-size: 1.15rem; line-height: 1; vertical-align: middle; }
.os-matriz thead th { text-align: center; }
.os-matriz thead th:first-child, .os-matriz tbody th { text-align: left; font-family: var(--fuente-cuerpo); font-size: var(--t-micro); font-weight: 600; }
.m-si { color: var(--acento); } .m-medio { color: var(--texto-suave); } .m-no { color: var(--borde); }
.m-os { background: color-mix(in srgb, var(--acento-fondo) 12%, transparent); }
.os-matriz thead .m-os { color: var(--acento); }

.os-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1); }
.os-chips li { padding: .4rem .8rem; border-radius: var(--radio-pastilla); border: 1px solid var(--borde); background: var(--superficie); font-size: var(--t-micro); line-height: 1.35; }

.os-mas { margin-top: var(--e2); }
.os-mas summary { cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--acento); font-weight: 600; font-size: var(--t-micro); }
.os-mas ul { margin-top: 0 !important; }

@media (min-width: 700px) {
  .os-circulo { grid-template-columns: repeat(2, 1fr); }
  .os-cifras-6 { grid-template-columns: repeat(3, 1fr); }
  .os-creencias { grid-template-columns: repeat(3, 1fr); }
  .os-contraste { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
  .os-pila { grid-template-columns: repeat(2, 1fr); }
  .os-contraste-si .os-pila { grid-template-columns: 1fr; height: 100%; }
}
@media (min-width: 1000px) {
  .os-circulo { grid-template-columns: repeat(2, 1fr); }
  .os-cifras-6 { grid-template-columns: repeat(6, 1fr); }
  .os-dominios { grid-template-columns: repeat(2, 1fr); column-gap: var(--e5); }
}
@media (max-width: 520px) { .os-dominios li { grid-template-columns: 1fr 3.2rem; } .os-dominios span { grid-column: 1 / -1; } }

/* ═══ versión 5 · menos texto, más dibujo ══════════════════════════════════ */
.os-ic { width: 1.5rem; height: 1.5rem; flex: none; color: var(--acento); }
.os-ic-g { width: 2.25rem; height: 2.25rem; margin-bottom: var(--e2); }
.os-ic-s { width: 1rem; height: 1rem; vertical-align: -2px; margin-right: .35rem; }

/* la órbita */
.os-orbita { margin: 0; max-width: 34rem; width: 100%; justify-self: center; }
.os-orbita svg { width: 100%; height: auto; display: block; font-family: var(--fuente-cuerpo); }
.os-orbita text { fill: var(--texto); font-size: 15px; font-weight: 600; }
.os-orbita .orb-sub { fill: var(--texto-suave); font-size: 12px; font-weight: 400; }
.os-orbita .orb-anillo { fill: none; stroke: var(--borde); stroke-width: 2; }
.os-orbita .orb-anillo-2 { stroke-dasharray: 3 7; stroke-width: 1.5; }
.os-orbita .orb-arco { fill: none; stroke: var(--acento); stroke-width: 2.5; }
.os-orbita .orb-punta { fill: var(--acento); }
.os-orbita .orb-centro circle { fill: var(--acento-fondo); }
.os-orbita .orb-centro text { fill: var(--acento-texto-sobre-fondo); font-family: var(--fuente-titulo); font-size: 19px; font-weight: 700; }
.os-orbita .orb-centro .orb-sub { fill: var(--acento-texto-sobre-fondo); opacity: .8; }
.os-orbita .orb-nodo circle { fill: var(--superficie); stroke: var(--borde); stroke-width: 2; }
.os-orbita .orb-nodo svg { color: var(--acento); }
.os-orbita .orb-nodo text { font-size: 13px; }
.os-orbita .orb-n { fill: var(--acento); font-family: var(--fuente-datos); font-size: 11px; font-weight: 700; }
.os-orbita .orb-sello rect { fill: var(--superficie-alta); stroke: var(--borde); }
.os-orbita .orb-sello text { font-size: 12px; font-family: var(--fuente-datos); fill: var(--texto-suave); }

/* la diferencia */
.os-dif { display: grid; gap: var(--e3); margin: var(--e4) 0; }
.os-dif-col { margin: 0; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--superficie); padding: var(--e3); }
.os-dif-si { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.os-dif-col svg { width: 100%; height: auto; display: block; font-family: var(--fuente-cuerpo); }
.os-dif-col figcaption { display: grid; gap: .15rem; margin-top: var(--e2); }
.os-dif-col figcaption b { font-family: var(--fuente-titulo); font-size: var(--t-h3); }
.os-dif-col figcaption span { color: var(--texto-suave); font-size: var(--t-micro); font-family: var(--fuente-datos); }
.dif-lineas line { stroke: var(--area-marketing); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.dif-cajas rect { fill: var(--fondo); stroke: var(--borde); stroke-dasharray: 3 3; }
.dif-cajas text { fill: var(--texto-suave); font-size: 12px; }
.dif-marca circle { fill: var(--superficie-alta); stroke: var(--area-marketing); stroke-width: 2; }
.dif-marca text { fill: var(--texto); font-size: 12px; font-weight: 700; font-family: var(--fuente-titulo); }
.dif-marca-si circle { fill: var(--acento-fondo); stroke: none; }
.dif-marca-si text { fill: var(--acento-texto-sobre-fondo); font-size: 14px; }
.dif-orden line { stroke: var(--acento); stroke-width: 2; opacity: .6; }
.dif-orden circle { fill: var(--superficie); stroke: var(--acento); stroke-width: 2; }
.dif-orden svg { color: var(--acento); }
.dif-orden text { fill: var(--texto); font-size: 12px; font-weight: 600; }

.os-llave { display: flex; gap: var(--e2); align-items: flex-start; margin: var(--e4) 0 0; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio-caja); background: var(--superficie); max-width: var(--ancho-texto); line-height: 1.5; color: var(--texto-suave); }
.os-llave b { color: var(--texto); }

/* rejillas de iconos */
.os-iconos { margin: var(--e4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.os-iconos li { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: var(--e2); align-items: start; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio-caja); background: var(--superficie); }
.os-iconos .os-ic { grid-row: 1 / 3; width: 2rem; height: 2rem; }
.os-iconos b { font-family: var(--fuente-titulo); line-height: 1.3; }
.os-iconos span { color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.45; }

/* el riel de pasos */
.os-riel-pasos { margin: var(--e4) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e1); position: relative; counter-reset: rp; }
.os-riel-pasos::before { content: ""; position: absolute; left: 10%; right: 10%; top: 1.6rem; height: 2px; background: var(--borde); }
.os-riel-pasos li { counter-increment: rp; position: relative; }
.os-riel-pasos a { display: grid; justify-items: center; gap: .4rem; text-decoration: none; color: var(--texto) !important; font-size: var(--t-pie); font-weight: 600; text-align: center; min-height: 2.75rem; }
.os-riel-pasos .os-ic { width: 3.2rem; height: 3.2rem; padding: .8rem; border-radius: 50%; background: var(--superficie); border: 2px solid var(--borde); position: relative; }
.os-riel-pasos a:hover .os-ic, .os-riel-pasos a:focus-visible .os-ic { border-color: var(--acento); }
.os-riel-pasos li::after { content: counter(rp); position: absolute; top: -.3rem; left: calc(50% + .9rem); font-family: var(--fuente-datos); font-size: var(--t-pie); font-weight: 700; color: var(--acento-texto-sobre-fondo); background: var(--acento-fondo); border-radius: 50%; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; }

@media (min-width: 700px) {
  .os-dif { grid-template-columns: 1fr 1fr; }
  .os-iconos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .os-iconos-4 { grid-template-columns: repeat(4, 1fr); }
  .os-iconos-4 li { grid-template-columns: 1fr; }
  .os-iconos-4 .os-ic { grid-row: auto; margin-bottom: var(--e1); }
}
@media (max-width: 520px) { .os-riel-pasos a span { font-size: .7rem; } .os-riel-pasos .os-ic { width: 2.6rem; height: 2.6rem; padding: .6rem; } }
/* El índice en cuatro tarjetas: sin el contador del índice viejo y con cada cosa en su celda. */
.os-circulo a::before { content: none; }
.os-circulo a { grid-template-rows: auto auto; align-content: center; }
.os-circulo span { grid-column: 1; grid-row: 1 / 3; }
.os-circulo b, .os-circulo em { grid-column: 2; }

/* ═══ versión 6 · el encabezado respira y las flechas se mueven ═══════════ */
.os-heroe { gap: var(--e5) var(--e6); align-items: center; }
.os-heroe h1 { font-size: var(--t-h1); margin: var(--e2) 0 var(--e2); }
.os-pagina .os-h2-heroe { font-size: var(--t-display); line-height: var(--renglon-titular); margin: 0 0 var(--e3); }
.os-pagina .os-h2-heroe em { font-style: normal; color: var(--acento); }
.os-orbita { max-width: 100%; }
.os-orb-sellos { display: flex; flex-wrap: wrap; gap: var(--e1); justify-content: center; margin-top: var(--e2); }
.os-orb-sellos span { font-family: var(--fuente-datos); font-size: var(--t-pie); color: var(--texto-suave); padding: .35rem .8rem; border-radius: var(--radio-pastilla); border: 1px solid var(--borde); background: var(--superficie-alta); white-space: normal; text-align: center; }
.os-cifras-franja { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 0; margin: var(--e2) 0 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.os-cifras-franja li { background: none; border: 0; border-radius: 0; padding: var(--e3) var(--e2); display: flex; align-items: baseline; gap: var(--e2); border-bottom: 1px solid var(--borde); }
.os-cifras-franja li:last-child { border-bottom: 0; }
.os-cifras-franja b { font-size: var(--t-h1); }
.os-cifras-franja span { font-size: var(--t-base); color: var(--texto-suave); line-height: 1.3; }
/* las flechas corren y el anillo exterior gira; si la persona pidió menos movimiento, no se mueve nada */
@media (prefers-reduced-motion: no-preference) {
  .os-orbita .orb-arco { stroke-dasharray: 6 10; animation: orb-correr 1.6s linear infinite; }
  .os-orbita .orb-anillo-2 { transform-origin: 260px 260px; animation: orb-girar 80s linear infinite; }
  .os-orbita .orb-nodo circle { animation: orb-latir 4s ease-in-out infinite; }
  .os-orbita .orb-nodo:nth-child(odd) circle { animation-delay: 2s; }
}
@keyframes orb-correr { to { stroke-dashoffset: -32; } }
@keyframes orb-girar { to { transform: rotate(360deg); } }
@keyframes orb-latir { 0%, 100% { stroke: var(--borde); } 50% { stroke: var(--acento); } }
@media (min-width: 700px) {
  .os-cifras-franja { grid-template-columns: repeat(4, 1fr); }
  .os-cifras-franja li { border-bottom: 0; border-right: 1px solid var(--borde); flex-direction: column; gap: .15rem; }
  .os-cifras-franja li:last-child { border-right: 0; }
}
@media (min-width: 1000px) { .os-heroe { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1400px) { .os-cifras-franja li { flex-direction: row; align-items: baseline; } }

/* ═══ versión 7 · el índice alineado y la barra flotante ═══════════════════ */
.os-circulo a { grid-template-columns: 2.75rem 1.5rem 1fr; grid-template-rows: auto auto; column-gap: var(--e2); row-gap: .2rem; align-items: center; }
.os-circulo span { grid-column: 1; grid-row: 1; line-height: 1; }
.os-circulo .os-ic { grid-column: 2; grid-row: 1; width: 1.5rem; height: 1.5rem; }
.os-circulo b { grid-column: 3; grid-row: 1; line-height: 1.1; }
.os-circulo em { grid-column: 2 / -1; grid-row: 2; }

.os-flotante { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem); transform: translateX(-50%); z-index: 40; display: flex; gap: .25rem; padding: .3rem; border-radius: var(--radio-pastilla); background: var(--vidrio); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--borde); box-shadow: var(--sombra-3); max-width: calc(100vw - 2rem); }
.os-flotante[hidden] { display: none; }
.os-flotante a { display: grid; grid-template-columns: auto auto; column-gap: .4rem; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border-radius: var(--radio-pastilla); text-decoration: none; color: var(--texto) !important; font-size: var(--t-micro); font-weight: 600; white-space: nowrap; }
.os-flotante span { display: none; font-family: var(--fuente-datos); font-size: var(--t-pie); color: var(--acento); }
.os-flotante .os-ic { width: 1.25rem; height: 1.25rem; }
.os-flotante b { font-weight: 600; }
.os-flotante a.es-actual { background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo) !important; }
.os-flotante a.es-actual .os-ic, .os-flotante a.es-actual span { color: inherit; }
.os-flotante a:hover:not(.es-actual), .os-flotante a:focus-visible { background: var(--superficie-alta); }
@media (max-width: 520px) { .os-flotante a { padding: 0 .65rem; } .os-flotante b { font-size: .72rem; } }
@media (min-width: 700px) { .os-flotante span { display: inline; } .os-flotante a { grid-template-columns: auto auto auto; } }
@media (prefers-reduced-motion: no-preference) { .os-flotante { animation: flot-sube .25s ease-out; } }
@keyframes flot-sube { from { opacity: 0; transform: translate(-50%, .5rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 1400px) { .os-circulo { grid-template-columns: repeat(4, 1fr); } }

/* ═══ versión 8 · «Por qué» corto ═════════════════════════════════════════ */
.os-decisiones { margin-top: var(--e3); }
.os-decisiones li { padding: var(--e2) var(--e3); }
.os-hitos { margin: var(--e4) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e1); position: relative; }
.os-hitos::before { content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: 2px; background: var(--borde); }
.os-hitos li { display: grid; gap: .3rem; padding-top: var(--e3); position: relative; font-size: var(--t-pie); line-height: 1.3; color: var(--texto-suave); min-width: 0; }
.os-hitos li::before { content: ""; position: absolute; top: 0; left: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--acento-fondo); border: 3px solid var(--fondo); }
.os-hitos b { font-family: var(--fuente-datos); color: var(--acento); font-size: var(--t-micro); }
.os-galeria { margin-top: var(--e3); }
.os-arquitecto .os-prosa p:first-child { margin-top: 0; }
@media (max-width: 520px) { .os-hitos { grid-template-columns: repeat(2, 1fr); row-gap: var(--e3); } .os-hitos::before { display: none; } .os-hitos li { padding-top: 0; padding-left: 1.5rem; } }
/* El retrato no ocupa una pantalla entera en teléfono. */
.os-retrato img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
@media (max-width: 999px) { .os-retrato { max-width: 18rem; } }

/* ═══ versión 9 · la diferencia como una sola animación que se ordena ═════ */
.os-dif-anim { margin: var(--e4) 0; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--superficie); padding: var(--e3); }
.os-dif-anim svg { width: 100%; height: auto; display: block; font-family: var(--fuente-cuerpo); overflow: visible; }
.os-dif-anim figcaption { display: grid; gap: var(--e2); margin-top: var(--e2); }
.os-dif-anim figcaption p { margin: 0; color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.5; min-height: 2.4em; }
.os-dif-anim figcaption b { color: var(--texto); font-family: var(--fuente-titulo); }
.os-dif-botones { display: flex; gap: var(--e1); }
.os-dif-botones button { min-height: 2.75rem; padding: 0 var(--e3); border-radius: var(--radio-pastilla); border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); font: 600 var(--t-micro)/1 var(--fuente-cuerpo); cursor: pointer; }
.os-dif-botones button[aria-pressed="true"] { background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo); border-color: transparent; }
.os-dif-botones button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* los dos pies: se ve el del estado vigente */
.os-dif-anim .os-dif-orden, .os-dif-anim[data-estado="orden"] .os-dif-caos { display: none; }
.os-dif-anim[data-estado="orden"] .os-dif-orden { display: block; }
/* las líneas */
.dl-caos line { stroke: var(--area-marketing); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .75; transition: opacity .6s; }
.dl-orden line { stroke: var(--acento); stroke-width: 2; opacity: 0; transition: opacity .8s .6s; }
.dl-anillo { fill: none; stroke: var(--borde); stroke-width: 2; opacity: 0; transition: opacity .8s .6s; }
[data-estado="orden"] .dl-caos line { opacity: 0; transition: opacity .4s; }
[data-estado="orden"] .dl-orden line { opacity: .6; }
[data-estado="orden"] .dl-anillo { opacity: 1; }
/* la marca */
.dm-caos { fill: var(--superficie-alta); stroke: var(--area-marketing); stroke-width: 2; transition: opacity .5s; }
.dm-orden { fill: var(--acento-fondo); opacity: 0; transform: scale(.4); transform-origin: 320px 215px; transition: opacity .6s .5s, transform .9s .5s cubic-bezier(.2,.8,.2,1); }
.dm-t { fill: var(--acento-texto-sobre-fondo); font-family: var(--fuente-titulo); font-size: 16px; font-weight: 700; opacity: 0; transition: opacity .5s .9s; }
.dm-q { fill: var(--area-marketing); font-family: var(--fuente-titulo); font-size: 22px; font-weight: 700; transition: opacity .3s; }
[data-estado="orden"] .dm-caos, [data-estado="orden"] .dm-q { opacity: 0; }
[data-estado="orden"] .dm-orden { opacity: 1; transform: scale(1); }
[data-estado="orden"] .dm-t { opacity: 1; }
/* los ocho lugares: dos cuerpos, una posición por estado */
.dn { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d); }
[data-estado="orden"] .dn { transform: translate(var(--ox), var(--oy)) rotate(0deg); }
.dn-caos rect { fill: var(--fondo); stroke: var(--borde); stroke-dasharray: 3 3; }
.dn-caos text { fill: var(--texto-suave); font-size: 12px; }
.dn-caos svg { color: var(--texto-suave); }
.dn-caos { transition: opacity .4s; }
.dn-orden { opacity: 0; transition: opacity .5s .8s; }
.dn-orden circle { fill: var(--superficie); stroke: var(--acento); stroke-width: 2; }
.dn-orden svg { color: var(--acento); }
.dn-orden text { fill: var(--texto); font-size: 12px; font-weight: 600; }
[data-estado="orden"] .dn-caos { opacity: 0; }
[data-estado="orden"] .dn-orden { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-estado="caos"] .dn-caos { animation: dn-tiembla 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * -8); }
  [data-estado="caos"] .dl-caos line { animation: dl-parpadea 3s ease-in-out infinite; }
}
@keyframes dn-tiembla { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(3px, -4px); } 65% { transform: translate(-3px, 3px); } }
@keyframes dl-parpadea { 0%, 100% { opacity: .75; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dn, .dn-caos, .dn-orden, .dl-caos line, .dl-orden line, .dl-anillo, .dm-caos, .dm-orden, .dm-t, .dm-q { transition: none; } }
/* En teléfono el dibujo se encoge a la mitad: los rótulos suben de cuerpo para seguir leyéndose. */
@media (max-width: 700px) { .dn-caos text, .dn-orden text { font-size: 15px; } .dm-t { font-size: 18px; } }

/* Los rótulos de la figura, con cuerpo: caben en su caja y se leen sobre las líneas. */
.dn-caos text { font-size: 14px; font-weight: 600; fill: var(--texto); }
.dn-orden text { font-size: 14px; font-weight: 700; paint-order: stroke; stroke: var(--superficie); stroke-width: 4px; stroke-linejoin: round; }
.dm-t { font-size: 18px; }
@media (max-width: 700px) { .dn-caos text, .dn-orden text { font-size: 17px; } .dm-t { font-size: 21px; } }

/* ═══ la tarjeta de credenciales: una quinta razón, a lo ancho ═══════════ */
.os-pagina .os-llave { display: grid; grid-template-columns: 4rem 1fr; gap: var(--e3) var(--e4); align-items: start; margin: var(--e3) 0 0; padding: var(--e4); max-width: none; border: 1px solid var(--acento); box-shadow: 0 0 0 1px var(--acento) inset, var(--sombra-2); border-radius: var(--radio-tarjeta); background: var(--superficie); color: var(--texto); line-height: inherit; }
.os-llave-ic { width: 4rem; height: 4rem; padding: .9rem; border-radius: 50%; background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo); }
.os-pagina .os-llave h3 { font-size: var(--t-h2); margin: .2rem 0 var(--e2); }
.os-pagina .os-llave p { margin: 0 0 var(--e3); color: var(--texto-suave); max-width: 60ch; }
.os-pagina .os-llave .antetitulo { margin: 0; }
.os-llave-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1); }
.os-llave-chips li { padding: .45rem .9rem; border-radius: var(--radio-pastilla); border: 1px solid var(--borde); background: var(--fondo); font-weight: 600; font-size: var(--t-micro); }
.os-llave-chips .os-llave-cero { border-color: var(--acento); color: var(--acento); font-family: var(--fuente-datos); }
@media (max-width: 520px) { .os-pagina .os-llave { grid-template-columns: 1fr; } .os-llave-ic { width: 3.25rem; height: 3.25rem; padding: .7rem; } }

/* ═══ versión 10 · jerarquía de lectura ══════════════════════════════════ */
/* 1 · las tres portadas de parte, enormes y con aire */
.os-parte { margin-top: var(--e8); padding-block: var(--e7) var(--e5); border-top: 0; }
.os-parte-n { display: block; font-size: var(--t-base); letter-spacing: .3em; margin-bottom: var(--e2); }
.os-pagina .os-parte-t { font-size: clamp(3.5rem, 2rem + 7vw, 8rem); line-height: .95; letter-spacing: -.02em; margin: 0 0 var(--e4); }
.os-parte p { font-size: var(--t-h2); line-height: 1.3; font-family: var(--fuente-titulo); font-weight: 600; color: var(--texto); max-width: 24ch; }
/* 2 · los títulos de sección suben un escalón; el antetítulo baja */
.os-pagina section { padding-block: var(--e7); }
.os-pagina h2 { font-size: var(--t-display); line-height: var(--renglon-titular); letter-spacing: -.01em; margin: var(--e2) 0 var(--e4); max-width: 22ch; }
.os-pagina .antetitulo { font-size: var(--t-pie); opacity: .85; }
/* 3 · el «Por qué» es la frase de entrada, grande y ligera, no una caja */
.os-pagina .os-motivo { max-width: 46ch; padding: 0 0 0 var(--e4); border-left: 3px solid var(--acento); background: none; border-radius: 0; color: var(--texto); font-size: var(--t-lede); line-height: var(--renglon-medio); margin: 0 0 var(--e5); }
.os-pagina .os-motivo b { display: block; margin: 0 0 .35rem; font-size: var(--t-pie); letter-spacing: .14em; }
/* 4 · franjas: una sección sí y otra no, sobre superficie */
.os-banda { position: relative; }
.os-banda::before { content: ""; position: absolute; inset: 0 -50vw; left: 50%; transform: translateX(-50%); width: 100vw; background: var(--superficie); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); z-index: -1; opacity: .7; }
.os-banda .os-tarjeta, .os-banda .os-iconos li, .os-banda .os-producto, .os-banda .os-tramo, .os-banda .os-legal, .os-banda .os-tabla-caja, .os-banda .os-pantalla, .os-banda .os-dif-anim, .os-banda .os-aliado { background: var(--fondo); }
/* 5 · dentro de las tarjetas, el título manda y el cuerpo cede */
.os-tarjeta h3, .os-iconos b, .os-producto h3 { font-size: var(--t-h3); }
.os-tarjeta p, .os-iconos span, .os-producto p { font-size: var(--t-micro); color: var(--texto-suave); }
.os-razon .os-ic-g { width: 2.75rem; height: 2.75rem; }
.os-razon .os-num { font-size: .72rem; }
/* 6 · los subtítulos internos (h3 de sección) con cuerpo medio */
.os-sub, .os-pagina #empresas > h3 { font-size: var(--t-h2) !important; }
/* 7 · la ficha técnica y el sustento, en voz baja */
#ficha dd, #legal dd, #legal li { font-size: var(--t-micro); }
@media (min-width: 1000px) { .os-pagina section { padding-block: var(--e8); } }
/* La portada de parte se apila a la izquierda (una regla general de cabeceras la repartía a los lados). */
.os-pagina .os-parte { display: grid; grid-template-columns: 1fr; justify-items: start; align-items: start; gap: 0; }
/* La barra de tramos deja de flotar: con la barra de partes al pie ya es demasiado. */
.os-tramos-nav { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* El arquitecto: la foto y el texto van lado a lado desde tableta, no solo en pantallas anchas. */
@media (min-width: 760px) {
  .os-arquitecto { grid-template-columns: minmax(14rem, 18rem) 1fr; gap: var(--e5); align-items: start; }
  .os-retrato { max-width: none; position: static; }
}
@media (min-width: 1200px) { .os-arquitecto { grid-template-columns: minmax(18rem, 24rem) 1fr; } }

/* El arquitecto, en tres filas: foto y texto · la cita a lo ancho · las tres decisiones a lo ancho. */
.os-arquitecto-v2 { display: grid; grid-template-columns: 1fr; gap: var(--e4); }
.os-arquitecto-v2 .os-arq-cita { margin: 0; }
.os-arquitecto-v2 .os-arq-decisiones { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--e2); }
.os-arquitecto-v2 .os-arq-decisiones li { grid-template-columns: 2.25rem 1fr; }
.os-arquitecto-v2 .os-arq-mas { margin: 0; }
@media (min-width: 760px) {
  .os-arquitecto-v2 { grid-template-columns: minmax(14rem, 18rem) 1fr; align-items: start; }
  .os-arquitecto-v2 .os-arq-cita, .os-arquitecto-v2 .os-arq-decisiones, .os-arquitecto-v2 .os-arq-mas { grid-column: 1 / -1; }
  .os-arquitecto-v2 .os-arq-decisiones { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) { .os-arquitecto-v2 { grid-template-columns: minmax(18rem, 24rem) 1fr; } }

/* ═══ versión 12 · quince módulos con su Lottie ═══════════════════════════ */
.os-grupo-cab { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e5); }
.os-grupo-cab .os-sub { margin: 0 !important; }
.os-modulos-l { margin: var(--e3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.os-modulo-l { display: grid; grid-template-columns: 4.5rem 1fr; grid-template-rows: auto auto auto auto; column-gap: var(--e3); row-gap: .15rem; align-items: start; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--superficie); min-width: 0; }
.os-modulo-l .os-lottie { grid-row: 1 / 5; width: 4.5rem; height: 4.5rem; border-radius: var(--radio-caja); background: var(--fondo); overflow: hidden; }
.os-modulo-l .os-busca { font-family: var(--fuente-datos); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.os-modulo-l h3 { font-size: var(--t-h3); margin: 0; }
.os-modulo-l p { margin: 0; font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.5; }
.os-modulo-l small { font-size: var(--t-pie); color: var(--texto-suave); margin-top: .35rem; }
.os-banda .os-modulo-l { background: var(--fondo); }
.os-banda .os-modulo-l .os-lottie { background: var(--superficie); }
@media (min-width: 700px) { .os-modulos-l { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .os-modulos-l { grid-template-columns: repeat(3, 1fr); } .os-modulo-l { grid-template-columns: 1fr; padding: var(--e4); } .os-modulo-l .os-lottie { grid-row: auto; width: 5.5rem; height: 5.5rem; margin-bottom: var(--e2); } }

/* ═══ versión 13 · el color del área en cada módulo ══════════════════════ */
.t-marketing { --tono: var(--area-marketing); --tono-texto: var(--area-marketing-texto); }
.t-multimedia { --tono: var(--area-multimedia); --tono-texto: var(--area-multimedia-texto); }
.t-diseno { --tono: var(--area-diseno); --tono-texto: var(--area-diseno-texto); }
.t-uxui { --tono: var(--area-uxui); --tono-texto: var(--area-uxui-texto); }
.t-desarrollo { --tono: var(--area-desarrollo); --tono-texto: var(--area-desarrollo-texto); }
.t-btl { --tono: var(--area-btl); --tono-texto: var(--area-btl-texto); }
.os-modulo-l { border-left: 4px solid var(--tono, var(--acento-fondo)); }
.os-modulo-l .os-busca { color: var(--tono-texto, var(--acento)); }
.os-modulo-l .os-lottie { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tono, var(--acento-fondo)) 35%, transparent) inset; }
.os-area { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; margin: .15rem 0 .35rem; font-family: var(--fuente-datos); font-size: var(--t-pie); color: var(--texto-suave) !important; text-decoration: none; }
.os-area::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tono); }
.os-area:hover { color: var(--texto) !important; text-decoration: underline; }
.os-areas { margin: var(--e4) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1); }
.os-areas a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; padding: 0 .9rem; border-radius: var(--radio-pastilla); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto) !important; text-decoration: none; font-size: var(--t-micro); font-weight: 600; }
.os-areas a::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tono); }
.os-areas a:hover { border-color: var(--tono); }
/* El Lottie abarca todas las filas de la tarjeta, tenga las que tenga. */
.os-modulo-l { grid-template-rows: auto; grid-auto-rows: auto; }
.os-modulo-l .os-lottie { grid-row: 1 / -1; }
.os-modulo-l > :not(.os-lottie) { grid-column: 2; }
@media (min-width: 1100px) { .os-modulo-l > :not(.os-lottie) { grid-column: 1; } .os-modulo-l .os-lottie { grid-row: auto; } }

/* ── v14 · clientes por tarjeta y la línea del tiempo del sistema ── */
.os-clientes { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: var(--e2); grid-template-columns: 1fr; }
@media (min-width: 700px) { .os-clientes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .os-clientes { grid-template-columns: repeat(3, 1fr); } }
.os-cliente { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: var(--e3) var(--e4); display: grid; gap: .3rem; align-content: start; }
.os-cliente h3 { margin: 0; font-size: var(--t-h3); }
.os-pagina .os-cliente p { margin: 0; }
.os-cliente-giro { color: var(--texto-suave); font-size: var(--t-micro); }
.os-cliente-serv { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .4rem; }
.os-cliente-serv span { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--borde); font-family: var(--fuente-datos); font-size: var(--t-pie); color: var(--tono-texto); }
.os-cliente-serv span::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--tono); }
.os-cliente-plan { margin-top: .6rem !important; padding-top: .7rem; border-top: 1px dashed var(--borde); font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.5; }
.os-cliente-plan b { font-family: var(--fuente-titulo); font-size: var(--t-base); color: var(--texto); }
.os-sub { margin-top: var(--e6); }
.os-linea { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e4); position: relative; }
.os-linea li { display: block; position: relative; padding-left: 3rem; border: 0; }
.os-linea li::before { content: ""; position: absolute; left: .95rem; top: .5rem; bottom: calc(-1 * var(--e4)); width: 2px; background: var(--borde); }
.os-linea li:last-child::before { display: none; }
.os-linea li::after { content: ""; position: absolute; left: .45rem; top: .25rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px var(--fondo); }
.os-linea li:last-child::after { animation: hito-latir 2.4s ease-in-out infinite; }
@keyframes hito-latir { 0%, 100% { box-shadow: 0 0 0 4px var(--fondo); } 50% { box-shadow: 0 0 0 4px var(--fondo), 0 0 0 9px var(--acento-fondo); } }
.os-linea time { display: block; white-space: nowrap; font-family: var(--fuente-datos); font-size: var(--t-pie); text-transform: uppercase; letter-spacing: var(--letra-antetitulo); color: var(--acento); }
.os-linea h3 { margin: .2rem 0 .4rem; font-size: var(--t-h3); line-height: 1.25; }
#desarrollo .os-cifras-franja b { white-space: nowrap; }
.os-pagina .os-linea p { margin: 0; color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.6; max-width: 60ch; }
@media (min-width: 1000px) {
  .os-linea { grid-template-columns: repeat(5, 1fr); gap: var(--e3); }
  .os-linea li { padding-left: 0; padding-top: 2.4rem; }
  .os-linea h3 { font-size: var(--t-base); }
  .os-linea li::before { left: 0; right: calc(-1 * var(--e3)); top: .55rem; bottom: auto; width: auto; height: 2px; }
  .os-linea li::after { left: 0; top: 0; }
}
.os-metodo { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e2); grid-template-columns: 1fr; }
@media (min-width: 800px) { .os-metodo { grid-template-columns: repeat(3, 1fr); } }
.os-metodo li { display: grid; grid-template-columns: auto 1fr; gap: .2rem var(--e2); align-items: start; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.os-metodo .os-ic { grid-row: 1 / 3; width: 2.5rem; height: 2.5rem; padding: .6rem; border-radius: 50%; background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo); }
.os-metodo b { font-family: var(--fuente-titulo); font-size: var(--t-base); }
.os-metodo span { color: var(--texto-suave); font-size: var(--t-micro); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .os-linea li:last-child::after { animation: none; } }

/* ── v15 · las preguntas a lo ancho ──
   pagina.css compone #preguntas en dos columnas (titular a la izquierda,
   acordeón a la derecha) para las páginas que llevan <header>; aquí el
   titular va arriba y el acordeón ocupa todo el ancho, en dos columnas
   desde 900 px. */
.os-pagina #preguntas { display: block; }
.os-pagina #preguntas .preguntas { max-width: none; margin: var(--e4) 0 0; gap: var(--e2); }
@media (min-width: 900.02px) {
  .os-pagina #preguntas .preguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ── v19 · el cierre en pila: Auditoría en verde, «ó», Conversemos ── */
.os-cierre .os-botones-pila { flex-direction: column; align-items: center; gap: var(--e2); }
.os-cierre .os-o { font-family: var(--fuente-titulo); font-size: var(--t-h3); color: var(--texto-suave); line-height: 1; }

/* ── v20 · la llamada a la acción del cierre, con presencia ──
   Dos opciones apiladas sobre un halo del verde de la casa; la principal
   (Auditoría) lleva una onda que sale del botón cada 2,4 s. Sin colores
   nuevos: todo es color-mix de los tokens del manual. */
/* El resplandor del cierre mide 120vw en pantallas angostas y se salía de la página por la derecha: 16 px de desplazamiento horizontal a 1024. `clip` (no `hidden`) no crea contenedor de desplazamiento, así que lo fijo y lo pegajoso de dentro siguen funcionando. */
.os-pagina { overflow-x: clip; }
.os-cierre { position: relative; isolation: isolate; }
.os-cierre::before { content: ""; position: absolute; left: 50%; top: 55%; width: min(60rem, 120vw); height: 30rem; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%); }
.os-cta { display: grid; justify-items: center; gap: var(--e3); margin-top: var(--e5); }
.os-cta-opcion { display: grid; justify-items: center; gap: 1rem; }
.os-cta .boton { font-family: var(--fuente-titulo); font-size: var(--t-h3); padding: 1.15rem 2.6rem; min-width: min(22rem, 100%); min-height: 64px; gap: .8rem; letter-spacing: .01em; }
.os-cta .boton .os-ic { width: 1.5rem; height: 1.5rem; color: currentColor; }
.os-cta-principal { position: relative; }
.os-cta-principal::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid var(--acento); opacity: 0; pointer-events: none; animation: cta-onda 2.4s ease-out infinite; }
@keyframes cta-onda { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.32); opacity: 0; } }
.os-cta-nota { font-family: var(--fuente-datos); font-size: var(--t-pie); color: var(--texto-suave); max-width: 32ch; text-align: center; line-height: 1.5; }
.os-cta-o { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e2); width: min(22rem, 100%); color: var(--texto-suave); }
.os-cta-o::before, .os-cta-o::after { content: ""; height: 1px; background: var(--borde); }
.os-cta-o i { font-style: normal; font-family: var(--fuente-titulo); font-size: var(--t-h3); line-height: 1; }
@media (prefers-reduced-motion: reduce) { .os-cta-principal::after { animation: none; } }

/* ── v22 · el héroe en una sola columna, con niveles de lectura ──
   Antes el H1 y el H2 pesaban igual y el círculo competía con el texto en dos
   columnas (6-oct, 23:30: «todo embarrado, sin niveles»). Ahora: antetítulo,
   H1 grande, H2 como subtítulo, entrada, botones; y el círculo solo, centrado,
   en su propia fila. */
.os-heroe, .os-heroe { grid-template-columns: 1fr !important; gap: var(--e5); align-items: start; }
.os-heroe > div:first-child { max-width: 58rem; }
.os-heroe h1 { font-size: var(--t-display); line-height: var(--renglon-titular); margin: var(--e2) 0 var(--e3); max-width: 24ch; text-wrap: balance; }
.os-pagina .os-h2-heroe { font-family: var(--fuente-titulo); font-size: var(--t-h2); font-weight: 600; line-height: 1.25; color: var(--texto-suave); margin: 0 0 var(--e3); max-width: 34ch; text-wrap: balance; }
.os-pagina .os-h2-heroe em { font-style: normal; font-weight: 700; color: var(--acento); }
.os-heroe .os-entrada { max-width: 60ch; }
.os-heroe .os-orbita { grid-column: 1; width: min(32rem, 100%); max-width: 32rem; margin: var(--e3) auto 0; justify-self: center; }
.os-heroe .os-orb-sellos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); margin-top: var(--e3); }
.os-heroe .os-cifras-franja { margin-top: var(--e3); }
@media (min-width: 1000px) {
  .os-heroe h1 { font-size: var(--t-display); }
  .os-heroe .os-orbita { width: min(36rem, 100%); max-width: 36rem; }
}