/* Hallmark · shape: custom (sitio multipágina sobre escenario nocturno: escenas reales de farmacias y almacenes con la pantalla real de PSERP flotando encima, muro de íconos joya, red del ecosistema, mosaico editorial de lugares, páginas de área, producto, industria, servicio, ayuda, empresa, contacto, legales y la página de funciones con capturas comentadas) · genre: modern-minimal · theme: custom · job: sign up (contáctanos) · idea: "PSERP visto donde se usa: la farmacia y el almacén reales y, flotando encima, la pantalla real del sistema, sobre un escenario marino donde los íconos de apps brillan como joyas" · vibe: "nocturno, preciso, con gente real y luz roja"
 * paper: oklch(15.5% 0.042 262) marino casi negro, con perla oklch(96.8% 0.004 262) en una o dos secciones por página · accent: oklch(52.46% 0.2019 23.7), el rojo de la marca (#C4162A), y oklch(71.38% 0.1804 18.4) (#FF6B76) sobre oscuro · display: Geist 600 (OFL, autoalojada, D50) · body: Inter 400/700 (marca D41/D42) · hero: escena, titular a la izquierda y a la derecha la foto de una farmacia con clientes con la pantalla real del mostrador de PSERP encima · nav: barra de vidrio oscuro con logotipo, siete secciones con mega-menú de íconos en Aplicaciones y el botón Contáctanos · footer: mapa completo del sitio en columnas sobre marino, contacto y créditos de las fotos (lo pide el brief) · imagery: photographs 8 (3 de Zublime y 5 de Wikimedia Commons con crédito), sin tratamiento; product samples 13 capturas reales de PSERP (D53, D54); íconos de apps de la marca; logos reales del ecosistema · signature: la escena real con la pantalla de PSERP flotando encima, que se desliza con un leve paralaje, y la pantalla comentada con marcadores en Funciones
 * axes: dark/grotesk-sans/warm · posture: Full palette (escenario marino nocturno, perla para respirar, señal roja, íconos de color en mosaicos de porcelana, fotos a todo color) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: V, extiende la v4 aprobada sin rediseñar (Edgar la eligió); lo nuevo son las pantallas reales de PSERP en lugar de las dibujadas, la página de funciones con marcadores y las plantillas internas que repiten el mismo ritmo oscuro y perla */
/* Hallmark · waive 29 · la luz fría que sigue al cursor y la línea roja del horizonte vienen de la v4 que Edgar aprobó por su escenario oscuro · un solo halo frío por sección y una línea, nunca detrás del texto corrido */
/* Hallmark · waive 42 · nav de siete secciones con mega-menú y botón, pie con el mapa completo del sitio · el brief de PSERP pide ese menú completo y el pie con el mapa del sitio en todas las páginas */
/* Hallmark · waive 59 · la barra para filtrar las aplicaciones y el índice de las cinco tareas van pegados al encabezado de su página · son los botones que filtran el catálogo y los enlaces a cada tarea, no una sección aparte (en inglés: the apps filter bar and the index of the five tasks) */
/* Hallmark · waive 79 · bajo el texto del hero queda la foto de la farmacia con la pantalla del mostrador encima, que llega hasta el pliegue · el render no cuenta como contenido la foto y la captura flotante */
/* Hallmark · waive 83 · seis fotos en el mosaico de Ecosistema · Edgar pidió que cada producto sea un lugar con gente, con su foto grande; las demás páginas quedan bajo un tercio */
/* Hallmark · dismissed 58 · el conteo suma el mega-menú, el mapa completo del sitio en el pie y, en los legales, el texto de ejemplo que pide el brief; las pantallas del cuerpo quedan cerca de 80 palabras */
/* Hallmark · dismissed 25 · las medidas cortas son ledes de una sola oración junto a su título o frases de una línea bajo un ícono, no prosa corrida */
/* Hallmark · dismissed 59 · Inicio lleva las secciones que pide la v4 en su orden (hero, áreas, farmacias, ecosistema, pantallas, distribuidoras, industrias, servicios y cierre) */
/* Hallmark · answered F15 · dos huecos de columna a propósito: 32px en retículas y 96px entre texto y foto en las escenas, para que la pantalla flotante tenga aire */
/* Hallmark · dismissed 3 · las palomitas de .feat-list--3 no son mosaicos de ícono: son la marca de lista de cada función del producto, en tres columnas iguales porque son seis funciones del mismo peso */
/* Hallmark · waive 77 · franjas cortas de enlaces al pie del contenido (Se conecta con, Para quién, Cómo se contrata, Otros servicios, Otros textos legales) y la barra del filtro de Aplicaciones · son navegación entre páginas del sitio grande que pide el brief, no secciones que necesiten masa */
/* Hallmark · waive 78 · en las listas de Industrias y Servicios, en Contacto y en los legales los títulos de fila van a 22-36px · son entradas de una lista o cláusulas de un documento, no secciones de una página de venta */
/* Hallmark · waive 49b · en Inicio, el nombre de servicio «Desarrollos a la medida» puede ocupar dos líneas a 1280 px · es el título de un bloque de servicio, no un botón ni un enlace de menú */
/* Hallmark · answered F4 · el segundo botón de cada hero es de contorno (fondo transparente y filo de 1px); el único relleno es Contáctanos */
/* Hallmark · answered F20 · en Funciones, la lista de áreas relacionadas se acomoda al ancho y el producto del ecosistema puede bajar solo a la siguiente línea */
/* Hallmark · answered F7 · las píldoras de .tramo-ln b, .enlace-ln b, .estado y .resuelve li son etiquetas de datos que viajan entre productos y de estado de una guía, no cajas de contenido */
/* Hallmark · answered F24 · los menús desplegables y el aviso de cookies flotan sobre el marino: el filo de 1px los separa del fondo oscuro y la sombra los eleva sobre la página */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Base de la página ---------- */
html { scrollbar-color: var(--night-muted) var(--night-paper); scroll-padding-top: calc(var(--nav-h) + var(--space-lg)); }
body[data-page="aplicaciones"] { scroll-padding-top: calc(var(--nav-h) + var(--space-3xl)); }
body { background: var(--night-paper); color: var(--night-ink); caret-color: var(--night-accent); }
main { background: var(--night-paper); }
::selection { background: color-mix(in oklab, var(--color-accent) 34%, transparent); color: var(--night-ink); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }
a { color: var(--color-link); }
a:hover { color: var(--color-ink); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.section { padding-block: var(--section-gap-s); }
.section-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.section-head p { color: var(--color-muted); font-size: var(--text-lead); max-width: 52ch; }
h2 { letter-spacing: -0.03em; line-height: 1.04; }
h3 { letter-spacing: -0.015em; }

/* Superficies: la nocturna es la base; perla para respirar (una o dos por página). Cada una cambia papel y tinta en la misma regla. */
.night, .night-2 {
  --color-paper: var(--night-paper); --color-paper-2: var(--night-paper-2); --color-paper-3: var(--night-paper-3);
  --color-ink: var(--night-ink); --color-ink-2: var(--night-ink-2); --color-muted: var(--night-muted);
  --color-rule: var(--night-rule); --color-focus: var(--night-focus); --color-link: var(--night-link);
  background: var(--color-paper); color: var(--color-ink);
}
.night-2 { --color-paper: var(--night-paper-2); --color-paper-2: var(--night-paper-3); background: var(--night-paper-2); }
.night.grad { background: var(--grad-night); }
.light { background: var(--color-paper); color: var(--color-ink); }

/* Luz que sigue al cursor (las variables las mueve el script; sin script queda fija). */
.lit { position: relative; isolation: isolate; }
.lit::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(640px circle at calc(var(--mx, 72) * 1%) calc(var(--my, 28) * 1%), var(--glow-cursor), transparent 70%); }

/* ---------- Controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 var(--hairline-light-2), 0 8px 20px -10px var(--glow-red); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule); box-shadow: none; }
.btn--quiet:hover { background: var(--color-paper-2); color: var(--color-ink); }
.night .btn--quiet, .night-2 .btn--quiet { border-color: var(--hairline-light-2); }
.night .btn--quiet:hover, .night-2 .btn--quiet:hover { background: var(--hairline-light); }
.btn--nav { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.textlink { color: var(--color-link); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.textlink:hover { text-decoration-color: var(--color-accent); color: var(--color-ink); }
.night .textlink:hover, .night-2 .textlink:hover { text-decoration-color: var(--night-accent); }
.textlink:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } .btn:active { transform: none; } }

/* ---------- Navegación ---------- */
.site-nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); height: var(--nav-h); background: color-mix(in oklab, var(--night-paper) 84%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--hairline-light); }
.site-nav .container { display: flex; align-items: center; gap: var(--space-xl); height: 100%; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; border-radius: var(--space-2xs); }
.brand img { height: 30px; width: auto; }
.brand:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 4px; }
.nav-links { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; flex: 1; }
.nav-links > li { position: relative; }
.nav-item { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-input); background: transparent; color: var(--night-ink-2); font: 400 var(--text-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav-item:hover, .has-menu:hover > .nav-item, .has-menu:focus-within > .nav-item { background: var(--hairline-light); color: var(--night-ink); }
.nav-item:active { background: var(--hairline-light-2); }
.nav-item:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.nav-item[aria-current="page"] { color: var(--night-ink); box-shadow: inset 0 -2px 0 var(--night-accent); border-radius: 0; }
.nav-item svg { width: 12px; height: 12px; transition: transform var(--dur-short) var(--ease-out); }
.has-menu:hover > .nav-item svg, .has-menu:focus-within > .nav-item svg { transform: rotate(180deg); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-md); }
.menu { display: none; position: absolute; top: calc(100% + var(--space-xs)); left: 0; z-index: var(--z-dropdown); min-width: 280px; padding: var(--space-md); border: 1px solid var(--hairline-light); border-radius: var(--radius-card); background: var(--night-paper-2); color: var(--night-ink); box-shadow: var(--shadow-float); }
.has-menu:hover > .menu, .has-menu:focus-within > .menu { display: block; }
.has-menu.is-closed > .menu { display: none; }
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--space-sm)); height: var(--space-sm); }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.menu a { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); color: var(--night-ink); text-decoration: none; font-size: var(--text-sm); }
.menu a:hover { background: var(--hairline-light); color: var(--night-ink); }
.menu a:focus-visible { outline: 2px solid var(--night-focus); outline-offset: -2px; }
.menu a span { display: block; color: var(--night-muted); font-size: var(--text-xs); }
.menu--mega { position: fixed; left: 50%; top: calc(var(--nav-h) - var(--space-2xs)); transform: translateX(-50%); width: min(1180px, calc(100% - 2 * var(--gutter))); padding: var(--space-xl); }
.mega { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.15fr); gap: var(--space-xl); }
.mega-apps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-sm) !important; }
.mega-apps a { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs); }
.mega-apps .jewel { --j: 40px; }
.mega-side { display: grid; align-content: start; gap: var(--space-md); padding-left: var(--space-xl); border-left: 1px solid var(--hairline-light); }
.mega-side h2 { font-size: var(--text-md); letter-spacing: -0.01em; color: var(--night-ink-2); }
.mega-eco a { display: flex; align-items: center; gap: var(--space-sm); }
.mega-foot { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--hairline-light); }
.mega-foot a { padding: var(--space-xs) 0; font-weight: 700; color: var(--night-link); }
.m-nav { display: none; margin-left: auto; }
.m-nav > summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--hairline-light-2); border-radius: var(--radius-input); color: var(--night-ink); font-size: var(--text-md); cursor: pointer; list-style: none; }
.m-nav > summary::-webkit-details-marker { display: none; }
.m-nav > summary:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.m-panel summary svg { width: 14px; height: 14px; flex-shrink: 0; }
.m-panel details[open] > summary svg { transform: rotate(180deg); }
.m-nav:not([open]) .m-panel { display: none; }
.m-panel { position: absolute; left: 0; right: 0; top: var(--nav-h); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; padding: var(--space-md) var(--gutter) var(--space-xl); background: var(--night-paper); border-bottom: 1px solid var(--hairline-light); color: var(--night-ink); }
.m-panel ul { list-style: none; margin: 0; padding: 0; }
.m-panel > ul > li { border-bottom: 1px solid var(--hairline-light); }
.m-panel details summary, .m-panel > ul > li > a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; color: var(--night-ink); font-size: var(--text-lg); text-decoration: none; cursor: pointer; list-style: none; }
.m-panel details summary::-webkit-details-marker { display: none; }
.m-panel details ul { padding-bottom: var(--space-md); display: grid; gap: var(--space-2xs); }
.m-panel details ul a { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; color: var(--night-ink-2); text-decoration: none; }
.m-panel details ul .jewel { --j: 32px; }
.m-panel a:focus-visible, .m-panel summary:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.m-panel .btn { width: 100%; margin-top: var(--space-lg); }

/* Migas de pan. */
.crumbs { padding-top: var(--space-lg); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-muted); }
.crumbs a { color: var(--color-ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--color-ink); }
.crumbs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Íconos de apps como joyas y placas de logos ---------- */
.jewel { --j: 88px; display: grid; place-items: center; flex-shrink: 0; width: var(--j); height: var(--j); border-radius: var(--radius-tile); background: var(--grad-tile); box-shadow: var(--tile-shadow), inset 0 1px 0 var(--tile-edge), inset 0 -1px 0 var(--shade-light); }
.jewel img { width: 64%; height: 64%; }
.light .jewel { box-shadow: var(--tile-shadow-light), inset 0 1px 0 var(--tile-edge), inset 0 -1px 0 var(--shade-light); }
.plate { display: inline-grid; place-items: center; justify-self: start; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); background: var(--grad-tile); box-shadow: var(--tile-shadow-light), inset 0 1px 0 var(--tile-edge); }
.night .plate, .night-2 .plate { box-shadow: var(--tile-shadow), inset 0 1px 0 var(--tile-edge); }
.plate img { height: 28px; width: auto; }
.plate--l img { height: 36px; }
.plate--s img { height: 22px; }
.plate--hub { padding: var(--space-md) var(--space-lg); border-radius: 18px; }
.plate--hub img { height: 40px; }

/* ---------- Fotos y escenas ---------- */
.foto { position: relative; overflow: hidden; border-radius: var(--radius-photo); background: var(--night-paper-3); outline: 1px solid var(--photo-edge); outline-offset: -1px; }
.light .foto { background: var(--color-paper-3); outline-color: var(--photo-edge-light); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--z, 1)); transform-origin: var(--o, var(--pos, 50% 50%)); }
/* La escena: la foto con gente y, flotando encima, la pantalla real de PSERP. */
.scene { position: relative; isolation: isolate; }
.scene-photo { position: absolute; inset: 0; }
.scene-photo .foto { height: 100%; }
.float-screen { position: absolute; z-index: 2; width: var(--w, 520px); perspective: 1600px; pointer-events: none; }
.screen-tilt { transform: rotateY(-9deg) rotateX(4deg); transform-origin: 100% 100%; }
.float-screen .captura { box-shadow: var(--shadow-float), 0 0 0 1px var(--hairline-light-2); }

/* ---------- Capturas reales de PSERP: borde fino y sombra suave, nunca deformadas ---------- */
.captura { position: relative; margin: 0; border-radius: var(--radius-screen); background: var(--cap-bg); box-shadow: var(--shadow-float-light), 0 0 0 1px var(--photo-edge-light); }
.night .captura, .night-2 .captura { box-shadow: var(--shadow-float), 0 0 0 1px var(--hairline-light-2); }
.captura > img { display: block; width: 100%; height: auto; border-radius: inherit; }

/* ---------- Hero de Inicio: la farmacia con clientes y la caja encima ---------- */
.hero { position: relative; overflow: clip; min-height: min(calc(100svh - var(--nav-h)), 820px); display: grid; align-items: center; padding-block: var(--space-xl) var(--space-2xl); }
.hero-grid { align-items: center; row-gap: var(--space-xl); }
.hero-copy { grid-column: 1 / span 5; position: relative; z-index: var(--z-raised); display: grid; gap: var(--space-lg); }
.hero-copy h1 { font-size: clamp(2.6rem, 3.3vw + 0.9rem, 4rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 12ch; }
.hero-copy .lead { color: var(--color-muted); max-width: 34ch; }
.hero-copy .actions { margin-top: var(--space-xs); }
.scene--hero { grid-column: 6 / span 7; height: clamp(420px, calc(100svh - var(--nav-h) - 200px), 600px); }
.fs-hero { --w: 560px; right: calc(-1 * var(--space-xl)); bottom: calc(-1 * var(--space-2xl)); }
.horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--night-accent) 30%, var(--night-accent) 70%, transparent); opacity: 0.8; pointer-events: none; }
.horizon::after { content: ""; position: absolute; left: 20%; right: 20%; top: -18px; height: 36px; background: radial-gradient(50% 50% at 50% 50%, var(--glow-red), transparent 70%); filter: blur(10px); }

/* ---------- Muro de aplicaciones ---------- */
.wall { padding-block: var(--space-3xl) var(--section-gap); }
.wall-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.wall-head p { color: var(--color-muted); font-size: var(--text-lead); max-width: 40ch; }
.wall-head .textlink { display: inline-block; margin-top: var(--space-md); }
.apps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); margin: 0; padding: 0; list-style: none; }
.app-link { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-xs); border-radius: var(--radius-card); color: var(--color-ink); text-align: center; text-decoration: none; font-size: var(--text-sm); line-height: 1.3; }
.app-link .jewel { transition: transform var(--dur-short) var(--ease-out); }
.app-link:hover { color: var(--color-ink); }
.app-link:hover .jewel { transform: translateY(-4px); }
.app-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.app-link span { hyphens: auto; overflow-wrap: break-word; min-width: 0; max-width: 100%; }
/* Palabras con guion que no se parten en etiquetas angostas (E-commerce); ver "cortes" en contenido/<idioma>/comun.json. */
.nw { white-space: nowrap; }
.apps-more { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: var(--gap-columns); align-items: center; margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--hairline-light); }
.apps-more h3 { font-size: var(--text-xl); color: var(--color-ink-2); }
.apps--s { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-lg) var(--space-sm); }
.apps--s .jewel { --j: 60px; }
.apps--s .app-link { font-size: var(--text-xs); }
@media (prefers-reduced-motion: reduce) { .app-link .jewel { transition: none; } .app-link:hover .jewel { transform: none; } }

/* ---------- Escenas con foto (texto al lado) ---------- */
.escena-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.escena-grid--foto-izq .escena-foto { grid-column: 1 / span 5; }
.escena-grid--foto-izq .escena-texto { grid-column: 7 / span 6; }
.escena-grid--foto-der .escena-texto { grid-column: 1 / span 4; }
.escena-grid--foto-der .scene { grid-column: 5 / span 8; }
.escena-foto { margin: 0; }
.escena-foto--retrato .foto { aspect-ratio: 525 / 680; }
.escena-texto { display: grid; gap: var(--space-lg); align-content: center; }
.escena-texto h2 { font-size: var(--text-section); max-width: 14ch; }
.escena-texto .lead { color: var(--color-muted); max-width: 40ch; }
.beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.beneficios li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.beneficios h3 { font-size: var(--text-lg); letter-spacing: -0.01em; margin-bottom: var(--space-2xs); }
.beneficios p { color: var(--color-muted); font-size: var(--text-sm); max-width: 30ch; }
.enlaces { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xs); }
.hechos { display: grid; margin: var(--space-xs) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.hechos li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-muted); }
.hechos strong { color: var(--color-ink); }
.scene--almacen { height: 560px; }
.fs-almacen { --w: 380px; right: calc(-1 * var(--space-xl)); bottom: calc(-1 * var(--space-2xl)); }
.escena--almacen { overflow: clip; padding-bottom: var(--section-gap); }

/* ---------- Ecosistema en corto (Inicio): cinco productos enchufados a la base de PSERP ---------- */
.bus { margin: 0; display: grid; }
.bus-nodes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.bus-node { display: grid; justify-items: center; }
.bus-node a { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-sm); border-radius: var(--radius-card); color: var(--color-ink-2); font-size: var(--text-sm); text-align: center; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.bus-node a:hover { background: var(--hairline-light); color: var(--color-ink); }
.bus-node a:active { background: var(--hairline-light-2); }
.bus-node a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bus-node .plate { min-height: 56px; }
.bus-node i { position: relative; display: block; width: 2px; height: var(--space-2xl); overflow: hidden; background: var(--night-rule); }
.bus-node i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--night-accent); opacity: 0; transform: translateY(-100%); }
.bus-node:hover i::after, .bus-node:focus-within i::after { opacity: 1; animation: pulso 1.1s var(--ease-in-out) infinite; }
.bus-node:hover i, .bus-node:focus-within i { background: color-mix(in oklab, var(--night-accent) 45%, var(--night-rule)); }
@keyframes pulso { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
.bus-bar { display: flex; align-items: center; gap: var(--space-xl); padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card); background: var(--night-paper-3); box-shadow: inset 0 1px 0 var(--hairline-light-2), 0 0 0 1px var(--hairline-light); }
.bus-bar p { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 52ch; }
@media (prefers-reduced-motion: reduce) { .bus-node:hover i::after, .bus-node:focus-within i::after { animation: none; transform: none; height: 100%; } .bus-node a { transition: none; } }

/* ---------- Conmutador de pantallas ---------- */
.switch-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-2xl); padding: var(--space-2xs); border-radius: 14px; background: var(--night-paper-2); box-shadow: 0 0 0 1px var(--hairline-light); width: fit-content; }
.switch-tabs [role="tab"] { min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-input); background: transparent; color: var(--night-muted); font: 700 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.switch-tabs [role="tab"]:hover { color: var(--night-ink); }
.switch-tabs [role="tab"]:active { background: var(--night-paper-3); }
.switch-tabs [role="tab"]:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.switch-tabs [role="tab"][aria-selected="true"] { background: var(--night-paper-3); color: var(--night-ink); box-shadow: inset 0 1px 0 var(--hairline-light-2); }
.panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.panel + .panel { margin-top: var(--space-3xl); }
.js .panel + .panel { margin-top: 0; }
.panel-stage { position: relative; display: grid; place-items: center; perspective: 1800px; }
.panel-stage .screen-tilt { width: 100%; transform: rotateY(-7deg) rotateX(3deg); transform-origin: 50% 50%; }
.panel-copy { display: grid; gap: var(--space-lg); align-content: center; }
.panel-copy h3 { font-size: var(--text-3xl); letter-spacing: -0.03em; line-height: 1.08; max-width: 18ch; }
.panel-copy ul { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.panel-copy li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-sm); align-items: start; color: var(--color-ink); }
.panel-copy li svg { width: 20px; height: 20px; margin-top: var(--space-3xs); color: var(--night-accent); }

/* ---------- Industrias ---------- */
.giros { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.giro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.giro h3 { font-size: var(--text-3xl); letter-spacing: -0.03em; }
.giro p { color: var(--color-muted); max-width: 34ch; }
.giro-apps { display: flex; gap: var(--space-sm); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.giro-apps .jewel { --j: 56px; }
.giro-apps .textlink { margin-left: var(--space-md); }

/* ---------- Servicios ---------- */
.servicios { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.servicios-head { display: grid; align-content: start; gap: var(--space-lg); }
.servicios-head p { color: var(--color-muted); font-size: var(--text-lead); max-width: 30ch; }
.serv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; }
.serv div { padding-top: var(--space-lg); border-top: 1px solid var(--color-ink-2); }
.serv dt { font: 600 var(--text-2xl)/1.15 var(--font-display); letter-spacing: -0.025em; margin-bottom: var(--space-sm); }
.serv dd { margin: 0; color: var(--color-muted); max-width: 34ch; }

/* ---------- Cierre ---------- */
.close { position: relative; overflow: clip; padding-block: var(--section-gap) var(--section-gap-s); text-align: left; }
.close-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.close h2 { font-size: var(--text-display-s); max-width: 16ch; }
.close-side { display: grid; gap: var(--space-lg); justify-items: start; }
.close-side p { color: var(--color-muted); }

/* ---------- Pie con el mapa del sitio ---------- */
.site-foot { padding-block: var(--space-3xl) var(--space-xl); border-top: 1px solid var(--hairline-light); }
.foot-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap-columns); }
.foot-brand { display: grid; align-content: start; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.foot-brand img { height: 30px; width: auto; }
.foot-brand a { color: var(--color-ink); }
.foot-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.foot-map h2 { font-size: var(--text-md); letter-spacing: -0.01em; color: var(--color-ink); margin-bottom: var(--space-sm); }
.foot-map ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.foot-map a { display: inline-block; padding: var(--space-3xs) 0; color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; }
.foot-map a:hover { color: var(--color-ink); text-decoration: underline; }
.foot-map a:focus-visible, .foot-bottom a:focus-visible, .foot-brand a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.foot-bottom { display: grid; gap: var(--space-sm); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--hairline-light); color: var(--color-muted); font-size: var(--text-sm); }
.foot-credits { font-size: var(--text-xs); max-width: 110ch; }
.foot-credits a { color: var(--color-muted); }
.foot-credits a:hover { color: var(--color-ink); }

/* ---------- Páginas internas ---------- */
.page-hero { position: relative; overflow: clip; padding-block: 0 var(--space-2xl); }

/* Aplicaciones: banda con la farmacia, el título sobre un velo marino y el tablero flotando. */
.banda { position: relative; margin-top: var(--space-lg); height: 440px; isolation: isolate; }
.banda-photo { position: absolute; inset: 0; }
.banda-photo .foto { height: 100%; }
.banda-photo .foto::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-strong) 40%, var(--veil-mid) 54%, var(--veil-none) 72%); }
.banda-copy { position: absolute; z-index: 3; left: var(--space-2xl); top: 50%; transform: translateY(-50%); width: min(540px, 46%); display: grid; gap: var(--space-lg); }
.banda-copy h1 { font-size: var(--text-display-s); max-width: 14ch; letter-spacing: -0.04em; line-height: 1.02; }
.banda-copy .lead { color: var(--night-ink-2); max-width: 36ch; }
.fs-banda { --w: 380px; right: var(--space-2xl); bottom: calc(-1 * var(--space-lg)); }
.search { display: flex; gap: var(--space-xs); max-width: 440px; }
.search label { flex: 1; }
.search input { width: 100%; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--night-muted); border-radius: var(--radius-input); background: var(--night-paper-2); color: var(--night-ink); font-size: var(--text-md); caret-color: var(--night-accent); }
.search input::placeholder { color: var(--night-muted); }
.search input:hover { border-color: var(--night-ink-2); }
.search input:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.search input:disabled { opacity: 0.55; cursor: not-allowed; }

/* Filtro y catálogo. */
.filterbar { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: color-mix(in oklab, var(--night-paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--hairline-light); }
.filterbar .container { display: flex; align-items: center; gap: var(--space-md); min-height: 68px; }
.chips { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; padding-block: var(--space-xs); }
.chips button { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--hairline-light-2); border-radius: var(--radius-pill); background: transparent; color: var(--night-ink-2); font: 400 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.chips button:hover { border-color: var(--night-ink-2); color: var(--night-ink); }
.chips button:active { background: var(--night-paper-3); }
.chips button:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.chips button[aria-pressed="true"] { border-color: var(--night-ink); background: var(--night-ink); color: var(--night-paper); font-weight: 700; }
.chip-n { color: inherit; opacity: 0.7; font-variant-numeric: tabular-nums; }
.count { margin-left: auto; color: var(--night-muted); font-size: var(--text-sm); white-space: nowrap; }
.catalog { padding-block: var(--space-3xl) var(--section-gap-s); }
.group { padding-block: var(--space-2xl); border-top: 1px solid var(--night-rule); }
.group:first-child { border-top: 0; padding-top: 0; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--gap-columns); margin-bottom: var(--space-xl); }
.group-head h2 { font-size: clamp(2rem, 1.6vw + 1.25rem, 2.75rem); }
.group-head p { color: var(--night-muted); max-width: 44ch; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.tiles--incl { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles--eco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-md); height: 100%; padding: var(--space-md); border-radius: var(--radius-card); background: color-mix(in oklab, var(--night-paper-2) 70%, transparent); box-shadow: inset 0 0 0 1px var(--hairline-light); color: var(--night-ink); text-decoration: none; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.tile .jewel { --j: 64px; }
.tiles--incl .tile .jewel { --j: 52px; }
.tiles--eco .tile { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; gap: var(--space-sm); }
.tiles--eco .tile .plate { min-height: 56px; }
.t-copy { display: grid; gap: var(--space-3xs); min-width: 0; }
.t-name { font: 600 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.015em; }
.t-desc { color: var(--night-muted); font-size: var(--text-sm); line-height: 1.4; }
.tile:hover { transform: translateY(-4px); background: var(--night-paper-3); box-shadow: inset 0 0 0 1px var(--hairline-light-2), inset 0 1px 0 var(--hairline-light-2), 0 18px 36px -18px var(--shade-1); color: var(--night-ink); }
.tile:active { transform: translateY(-1px); }
.tile:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.tile:target { box-shadow: inset 0 0 0 2px var(--night-accent); }
@media (min-width: 64rem) {
  .js .tiles:not(.tiles--eco) .t-desc { display: none; }
  .js .tiles:not(.tiles--eco) .tile:hover .t-desc, .js .tiles:not(.tiles--eco) .tile:focus-visible .t-desc { display: block; animation: aparece var(--dur-short) var(--ease-out); }
  .tiles:not(.tiles--eco) .tile { min-height: 96px; }
}
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.empty { padding: var(--space-2xl) 0; color: var(--night-muted); }
.empty b { color: var(--night-ink); }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover, .tile:active { transform: none; } .js .tiles .tile:hover .t-desc, .js .tiles .tile:focus-visible .t-desc { animation: none; } }

/* Arma tu paquete. */
.paquetes { display: grid; gap: var(--space-lg); margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.paquete { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.paquete h3 { font-size: var(--text-xl); }
.combo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.combo li { position: relative; display: grid; justify-items: start; gap: var(--space-xs); font-size: var(--text-sm); line-height: 1.3; color: var(--color-ink); }
.combo li + li::before { content: "+"; position: absolute; left: calc(-1 * var(--space-lg)); top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xl); line-height: 1; }

/* Ecosistema: encabezado con la red. */
.eco-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-top: var(--space-xl); }
.eco-head h1 { font-size: var(--text-display-s); max-width: 13ch; letter-spacing: -0.04em; line-height: 1.02; }
.eco-head-side { display: grid; gap: var(--space-lg); justify-items: start; }
.eco-head-side .lead { color: var(--color-muted); max-width: 34ch; }
.red { position: relative; margin: var(--space-lg) 0 0; height: 440px; }
.red-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.red .ln { stroke: var(--night-line); stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; }
.red .ln-run { stroke: var(--night-accent); stroke-width: 2.5; fill: none; stroke-dasharray: 8 10; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity var(--dur-short) var(--ease-out); }
.red .ln-run.is-on { opacity: 1; animation: corre 1.1s linear infinite; }
@keyframes corre { to { stroke-dashoffset: -36; } }
.red-hub { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: var(--space-sm); text-align: center; }
.red-hub .plate { justify-self: center; box-shadow: var(--tile-shadow), 0 0 0 6px color-mix(in oklab, var(--night-paper) 70%, transparent), inset 0 1px 0 var(--tile-edge); }
.red-hub small { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-input); background: color-mix(in oklab, var(--night-paper-2) 88%, transparent); color: var(--night-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.red-nodes { margin: 0; padding: 0; list-style: none; }
.red-node { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: var(--space-xs); text-align: center; }
.red-node button { display: grid; place-items: center; padding: var(--space-2xs); border: 0; border-radius: 12px; background: transparent; cursor: pointer; transition: transform var(--dur-short) var(--ease-out); }
.red-node button:hover { transform: translateY(-3px); }
.red-node button:active { transform: translateY(0); }
.red-node button:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.red-node .plate { min-height: 60px; padding-inline: var(--space-md); }
.red-node .plate img { height: 30px; }
.red-node p { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); color: var(--night-muted); max-width: 20ch; transition: opacity var(--dur-short) var(--ease-out); }
.red-node .rol { color: var(--night-ink-2); }
.red-node .dato { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.red-node.is-on .plate { box-shadow: var(--tile-shadow), 0 0 0 2px var(--night-accent), inset 0 1px 0 var(--tile-edge); }
.red-node.is-on .rol { color: var(--night-ink); font-weight: 700; }
.red-node .plate { transition: filter var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.red.has-focus .red-node:not(.is-on) .plate { filter: brightness(0.62) saturate(0.7); }
.red.has-focus .red-node:not(.is-on) p { opacity: 0.6; }
.red-pill { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--night-paper); box-shadow: 0 0 0 1px var(--night-accent); color: var(--night-ink); font-size: var(--text-xs); white-space: nowrap; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.js .red-pill { opacity: 0; }
.js .red-pill.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .red .ln-run.is-on { animation: none; } .red-node button, .red-node button:hover { transition: none; transform: none; } }

/* Ecosistema: mosaico editorial de lugares (cada producto con su foto y su gente). */
.fila { display: grid; gap: var(--gap-columns); align-items: start; }
.fila + .fila { margin-top: var(--space-3xl); }
.fila--a { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.fila--b { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fila--c { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fila--a .lugar:nth-child(2), .fila--c .lugar:nth-child(2) { margin-top: var(--space-3xl); }
.fila--b .lugar:nth-child(2) { margin-top: var(--space-4xl); }
.lugar { display: grid; gap: var(--space-lg); scroll-margin-top: calc(var(--nav-h) + var(--space-lg)); }
.lugar-foto { position: relative; isolation: isolate; height: 420px; }
.lugar-foto .foto { height: 100%; }
.lugar--posblime .lugar-foto { height: 520px; }
.lugar--pharmastore .lugar-foto { height: 540px; }
.lugar--warehouse .lugar-foto { height: 400px; }
.lugar--symfonet .lugar-foto { height: 400px; }
.lugar--salud .lugar-foto { height: 460px; }
.fs-lugar { --w: 360px; right: var(--space-md); bottom: var(--space-md); }
.lugar-texto { display: grid; gap: var(--space-sm); justify-items: start; }
.lugar-texto h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.12; max-width: 22ch; margin-top: var(--space-2xs); }
.lugar-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--gap-columns); margin: 0; font-size: var(--text-sm); width: 100%; max-width: 560px; }
.lugar-datos dt { color: var(--night-muted); }
.lugar-datos dd { margin: 0; color: var(--night-ink-2); }

/* Ecosistema: el recorrido de un pedido en una franja. */
.ruta-wrap { --paso: 1; }
.ruta { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.ruta::before, .ruta::after { content: ""; position: absolute; top: 22px; left: calc(100% / 12); right: calc(100% / 12); height: 2px; background: var(--night-rule); }
.ruta::after { background: var(--night-accent); transform-origin: 0 50%; transform: scaleX(calc((var(--paso) - 1) / 5)); transition: transform var(--dur-long) var(--ease-out); }
.paso { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: var(--space-sm); padding: 0 var(--space-xs) var(--space-md); border-radius: var(--radius-card); color: var(--night-ink-2); font-size: var(--text-sm); line-height: 1.35; text-align: center; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.paso:hover { background: var(--hairline-light); color: var(--night-ink); }
.paso-n { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--night-paper-2); box-shadow: 0 0 0 2px var(--night-rule); color: var(--night-ink-2); font: 600 var(--text-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.paso-n:hover { background: var(--night-paper-3); }
.paso-n:active { background: var(--night-rule); }
.paso-n:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 3px; }
.paso[data-done] .paso-n { box-shadow: 0 0 0 2px var(--night-accent); color: var(--night-ink); }
.paso.is-on .paso-n { background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent), 0 0 0 6px color-mix(in oklab, var(--color-accent) 30%, transparent); color: var(--color-accent-ink); }
.paso.is-on { color: var(--night-ink); }
.paso-t { max-width: 18ch; text-wrap: balance; }
.paso .plate { min-height: 40px; }
.tramo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; margin-top: var(--space-xl); padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card); background: var(--night-paper-3); box-shadow: inset 0 1px 0 var(--hairline-light-2); }
.tramo-red { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); }
.tramo-ln { position: relative; display: grid; place-items: center; height: 40px; overflow: hidden; }
.tramo-ln::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: color-mix(in oklab, var(--night-accent) 60%, var(--night-rule)); }
.tramo-ln i { position: absolute; left: 0; top: 50%; width: 100%; height: 8px; margin-top: calc(-1 * var(--space-2xs)); animation: viaja 1.8s var(--ease-in-out) infinite; }
.tramo-ln i::after { content: ""; position: absolute; right: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--night-accent); }
.tramo-ln b { position: relative; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--night-paper-3); color: var(--night-ink); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.tramo[data-solo] .tramo-ln, .tramo[data-solo] .tramo-b { visibility: hidden; }
.tramo p { color: var(--night-ink-2); font-size: var(--text-lg); max-width: 44ch; }
@keyframes viaja { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .tramo-ln i { animation: none; transform: translateX(-46%); } .ruta::after { transition: none; } .paso, .paso-n { transition: none; } }

/* Ecosistema: qué gana cada quien (sección clara). */
.roles-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.roles-head { display: grid; gap: var(--space-md); }
.roles-head p { color: var(--color-muted); font-size: var(--text-lead); max-width: 30ch; }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.roles li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink-2); }
.roles h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; margin-bottom: var(--space-xs); }
.roles p { color: var(--color-muted); max-width: 32ch; }

/* ============================================================
   Sitio completo: piezas nuevas sobre la v4
   ============================================================ */

/* ---------- Plantilla común ---------- */
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--s { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-input); color: var(--night-ink-2); font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.lang:hover { background: var(--hairline-light); color: var(--night-ink); }
.lang:active { background: var(--hairline-light-2); }
.lang:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.menu--end { left: auto; right: 0; }
.menu .mega-dest { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: var(--space-sm); border-radius: var(--radius-card); background: var(--night-paper-3); box-shadow: inset 0 0 0 1px var(--hairline-light-2); color: var(--night-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.menu .mega-dest:hover { background: color-mix(in oklab, var(--night-paper-3) 70%, var(--night-line)); color: var(--night-ink); }
.menu .mega-dest:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.menu .mega-dest-img { display: block; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--hairline-light-2); }
.mega-dest-img img { display: block; width: 100%; height: auto; }
.menu .mega-dest-t { display: grid; gap: var(--space-3xs); color: var(--night-ink); font-size: var(--text-sm); }
.mega-dest-t b { font: 600 var(--text-md)/1.2 var(--font-display); letter-spacing: -0.01em; }
.menu .mega-dest-t span { color: var(--night-muted); font-size: var(--text-xs); line-height: 1.4; }
.m-panel > .lang { margin-top: var(--space-md); }
.page-hero .crumbs { padding-top: var(--space-lg); }

/* ---------- Pie: contacto y mapa completo ---------- */
.foot-brand h2 { margin-top: var(--space-sm); font-size: var(--text-md); letter-spacing: -0.01em; color: var(--color-ink); }
.foot-contacto { display: grid; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; }
.foot-contacto a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; color: var(--color-ink); text-decoration: none; }
.foot-contacto a:hover { text-decoration: underline; color: var(--color-ink); }
.foot-contacto svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--night-accent); }
.foot-apps { grid-column: span 1; }
.foot-apps ul { grid-template-columns: repeat(auto-fill, 40px); gap: var(--space-sm); max-width: 196px; }
.foot-apps a { display: inline-flex; padding: 0; border-radius: var(--radius-tile); transition: transform var(--dur-short) var(--ease-out); }
.foot-apps a:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .foot-apps a { transition: none; } .foot-apps a:hover { transform: none; } }

/* ---------- Aviso de cookies (propio, no modal: no tapa el contenido) ---------- */
.cookies { position: fixed; z-index: var(--z-modal); left: var(--space-md); right: var(--space-md); bottom: var(--space-md); max-width: 1040px; max-height: calc(100dvh - 2 * var(--space-md)); margin-inline: auto; overflow-y: auto; padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card); background: var(--night-paper-2); box-shadow: var(--shadow-float), 0 0 0 1px var(--hairline-light-2); color: var(--night-ink); }
.cookies-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md) var(--space-xl); align-items: center; }
.cookies h2 { max-width: none; margin-bottom: var(--space-2xs); font-size: var(--text-xl); letter-spacing: -0.02em; }
.cookies p { max-width: 62ch; color: var(--night-ink-2); font-size: var(--text-sm); }
.cookies-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: flex-end; }
.cookies-prefs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--gap-columns); padding-top: var(--space-md); border-top: 1px solid var(--hairline-light); }
.pref { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.pref input { width: 22px; height: 22px; margin: var(--space-3xs) 0 0; accent-color: var(--color-accent); cursor: pointer; }
.pref input:disabled { cursor: not-allowed; }
.pref input:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.pref label { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); cursor: pointer; }
.pref label span { color: var(--night-muted); }
.pref input:disabled + label { cursor: default; }
body.has-cookies { padding-bottom: var(--cookies-h, 0px); }

/* WhatsApp flotante, solo en celular y tableta. */
.wa-float { display: none; }
.wa-float:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 3px; }

/* ---------- Encabezados de página interna ---------- */
.fhero-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-top: var(--space-xl); }
.fhero-head h1 { max-width: 15ch; font-size: var(--text-display-s); letter-spacing: -0.04em; line-height: 1.02; }
.fhero-head .lead { max-width: 40ch; color: var(--color-muted); }
.fhero-head .actions { margin-top: var(--space-lg); }
.nota-demo { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Funciones principales ---------- */
.indice { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: color-mix(in oklab, var(--night-paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--hairline-light); }
.indice-chips { display: flex; gap: var(--space-xs); margin: 0; padding: var(--space-sm) 0; overflow-x: auto; scrollbar-width: none; list-style: none; }
.indice-chips a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md) 0 var(--space-xs); border: 1px solid var(--hairline-light-2); border-radius: var(--radius-pill); color: var(--night-ink-2); font-size: var(--text-sm); white-space: nowrap; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.indice-chips a:hover { border-color: var(--night-ink-2); color: var(--night-ink); }
.indice-chips a:active { background: var(--night-paper-3); }
.indice-chips a:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.indice-chips a[aria-current="true"] { border-color: var(--night-ink); background: var(--night-ink); color: var(--night-paper); font-weight: 700; }
.chip-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--night-paper-3); color: var(--night-ink); font: 600 var(--text-sm)/1 var(--font-display); }
.indice-chips a[aria-current="true"] .chip-num { background: var(--color-accent); color: var(--color-accent-ink); }
.tarea { scroll-margin-top: calc(var(--nav-h) + 64px); }
.tarea-head { display: grid; grid-template-columns: auto minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.tarea-n { align-self: start; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-2xl)/1 var(--font-display); }
.tarea-tit h2 { max-width: 16ch; }
.tarea-quien { margin-top: var(--space-xs); color: var(--color-muted); }
.tarea-frase { max-width: 24ch; color: var(--color-ink-2); font: 600 var(--text-2xl)/1.2 var(--font-display); letter-spacing: -0.02em; }
.tarea-main { display: grid; gap: var(--space-xl); align-items: center; }
.captura--marcas { overflow: visible; }
.marca { position: absolute; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-accent); color: var(--marca-ink); font: 700 var(--text-sm)/1 var(--font-body); text-decoration: none; box-shadow: 0 0 0 3px var(--marca-ring), 0 6px 14px -4px var(--shade-1); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.marca:hover, .marca.is-on { transform: translate(-50%, -50%) scale(1.14); color: var(--marca-ink); box-shadow: 0 0 0 3px var(--marca-ring), 0 0 0 10px color-mix(in oklab, var(--color-accent) 32%, transparent); }
.marca:active { transform: translate(-50%, -50%) scale(1); }
.marca:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.marcas { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.marcas li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: var(--space-sm); border-radius: var(--radius-input); color: var(--color-ink-2); scroll-margin-top: calc(var(--nav-h) + 80px); transition: background-color var(--dur-short) var(--ease-out); }
.marcas li.is-on, .marcas li:target { background: var(--color-paper-2); color: var(--color-ink); }
.marca-n { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: var(--color-accent); color: var(--marca-ink); font: 700 var(--text-xs)/1 var(--font-body); }
.despues { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-lg) var(--gap-columns); align-items: start; margin-top: var(--space-3xl); }
.despues h3, .rel h3 { font-size: var(--text-xl); color: var(--color-ink-2); }
.despues-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.despues-grid--uno { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.despues-grid li { display: grid; gap: var(--space-md); align-content: start; }
.despues-grid p { max-width: 48ch; color: var(--color-muted); font-size: var(--text-sm); }
.rel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: var(--space-md) var(--gap-columns); align-items: center; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.rel-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin: 0; padding: 0; list-style: none; }
.rel-list .app-link { display: inline-flex; align-items: center; gap: var(--space-sm); text-align: left; }
.rel-prod { display: inline-flex; border-radius: var(--radius-input); }
.rel-prod:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .marca, .marcas li { transition: none; } .marca:hover, .marca.is-on { transform: translate(-50%, -50%); } }

/* ---------- Página de área, producto, industria y empresa: encabezado con escena ---------- */
.ahero { padding-bottom: var(--space-3xl); }
.ahero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-3xl); align-items: center; margin-top: var(--space-xl); }
.ahero-copy { display: grid; gap: var(--space-lg); justify-items: start; }
.ahero-tit { display: flex; align-items: center; gap: var(--space-lg); }
.ahero-copy h1 { max-width: 13ch; font-size: var(--text-display-s); letter-spacing: -0.04em; line-height: 1.02; }
.ahero-copy .lead { max-width: 40ch; color: var(--color-muted); }
.ahero-escena { position: relative; }
.ahero-cap { perspective: 1600px; }
.ahero-cap .screen-tilt { transform: rotateY(-8deg) rotateX(3deg); transform-origin: 50% 50%; }
.ahero-foto .foto { aspect-ratio: 4 / 3; }
.orbita { position: relative; width: 100%; max-width: 640px; aspect-ratio: 7 / 5; margin-inline: auto; }
.orbita-lineas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbita-lineas line { stroke: var(--night-line); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.orbita-centro, .orbita-sat { position: absolute; transform: translate(-50%, -50%); }
.orbita-centro { left: 50%; top: 50%; }
.orbita-centro .jewel { box-shadow: var(--tile-shadow), 0 0 0 10px color-mix(in oklab, var(--night-paper) 70%, transparent), 0 24px 60px -18px var(--glow-red), inset 0 1px 0 var(--tile-edge); }

.feat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.feat-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feat-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-md); align-items: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.feat-list svg { width: 22px; height: 22px; margin-top: var(--space-3xs); color: var(--color-accent); }
.night .feat-list svg, .night-2 .feat-list svg { color: var(--night-accent); }
.feat-list h3 { margin-bottom: var(--space-xs); font-size: var(--text-xl); letter-spacing: -0.015em; }
.feat-list p { max-width: 48ch; color: var(--color-muted); }

.accion-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-3xl); align-items: center; }
.accion-copy { display: grid; gap: var(--space-md); justify-items: start; }
.accion-copy h2 { font-size: var(--text-section); }
.accion-copy p { max-width: 40ch; color: var(--color-muted); }
.accion-cap { display: block; border-radius: var(--radius-screen); }
.accion-cap .captura { transition: transform var(--dur-short) var(--ease-out); }
.accion-cap:hover .captura { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .accion-cap .captura { transition: none; } .accion-cap:hover .captura { transform: none; } }

.conecta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.conecta-grupo h3 { margin-bottom: var(--space-lg); font-size: var(--text-lg); color: var(--color-ink-2); }
.apps--con { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prod-links { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.prod-link { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xs); border-radius: var(--radius-card); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.prod-link:hover { background: var(--hairline-light); color: var(--color-ink); }
.prod-link:active { background: var(--hairline-light-2); }
.prod-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.prod-link .plate { min-width: 156px; min-height: 52px; }

/* Producto: cómo se conecta con PSERP. */
.phero .plate--l { margin-bottom: var(--space-2xs); }
.pcon-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--space-3xl); align-items: center; }
.pcon-copy { display: grid; gap: var(--space-lg); }
.pcon-copy .lead { color: var(--color-ink-2); }
.pcon-red { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--night-paper-3); box-shadow: inset 0 1px 0 var(--hairline-light-2); }
.pcon-red h3 { font-size: var(--text-lg); color: var(--night-ink-2); }
.enlace { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); }
.enlace-ln { position: relative; display: grid; place-items: center; min-height: 44px; overflow: hidden; }
.enlace-ln::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: color-mix(in oklab, var(--night-accent) 60%, var(--night-rule)); }
.enlace-ln i { position: absolute; left: 0; top: 50%; width: 100%; height: 8px; margin-top: calc(-1 * var(--space-2xs)); animation: viaja 1.8s var(--ease-in-out) infinite; }
.enlace-ln i::after { content: ""; position: absolute; right: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--night-accent); }
.enlace-ln b { position: relative; max-width: 100%; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--night-paper-3); color: var(--night-ink); font-size: var(--text-xs); text-align: center; }
@media (prefers-reduced-motion: reduce) { .enlace-ln i { animation: none; transform: translateX(-46%); } }
.checks { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.checks svg { width: 20px; height: 20px; margin-top: var(--space-3xs); color: var(--color-accent); }
.night .checks svg, .night-2 .checks svg { color: var(--night-accent); }
.checks--grande { gap: 0; border-top: 1px solid var(--color-rule); }
.checks--grande li { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); font-size: var(--text-lg); }
.panel-rol { color: var(--color-muted); }
.panel-copy .textlink { justify-self: start; }

/* Industria: retos, apps y un día típico. */
.giro h3 a, .giro-t a, .serv-fila h2 a { color: inherit; text-decoration: none; }
.giro h3 a:hover, .giro-t a:hover, .serv-fila h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; color: inherit; }
.giro h3 a:focus-visible, .giro-t a:focus-visible, .serv-fila h2 a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.giro-t { font-size: var(--text-3xl); letter-spacing: -0.03em; }
.retos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: reto; }
.retos li { counter-increment: reto; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-md); row-gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.retos li::before { content: counter(reto); grid-row: 1 / span 2; color: var(--night-accent); font: 600 var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.retos h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; }
.retos p { max-width: 46ch; color: var(--color-muted); }
.apps--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dia { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.dia::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--color-rule); }
.dia li { position: relative; display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-xl); }
.dia li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-paper); box-shadow: inset 0 0 0 3px var(--color-accent); }
.dia-hora { color: var(--color-ink); font: 600 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dia h3 { font-size: var(--text-lg); }
.dia p { color: var(--color-muted); font-size: var(--text-sm); }
.otras { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md) var(--space-xl); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.otras h3 { font-size: var(--text-lg); }
.otras ul { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: 0; padding: 0; list-style: none; }

/* Servicios. */
.serv-filas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.serv-fila { display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-sm) var(--gap-columns); align-items: center; padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.serv-n { color: var(--night-accent); font: 600 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.serv-fila h2 { font-size: var(--text-3xl); letter-spacing: -0.03em; }
.serv-fila p { max-width: 52ch; color: var(--color-muted); }
.serv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.serv dt a { color: inherit; text-decoration: none; }
.serv dt a:hover { text-decoration: underline; text-decoration-thickness: 2px; color: inherit; }
.serv dt a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.incluye-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-3xl); align-items: start; }
.incluye-grid h2 { max-width: 14ch; }
.incluye-sub { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-lead); }
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.pasos li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 2px solid var(--night-rule); }
.paso-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--night-paper-3); box-shadow: 0 0 0 2px var(--night-accent); color: var(--night-ink); font: 600 var(--text-lg)/1 var(--font-display); }
.pasos h3 { font-size: var(--text-xl); }
.pasos p { color: var(--color-muted); }
.contratar-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg) var(--gap-columns); align-items: start; }
.contratar-copy { display: grid; gap: var(--space-lg); }
.contratar-copy .lead { color: var(--color-ink-2); }
.otros-sec { padding-block: var(--space-2xl); }
.otros-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md) var(--space-2xl); }
.otros-row h2 { font-size: var(--text-xl); }
.otros-row ul { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: 0; padding: 0; list-style: none; }

/* Ayuda. */
.hhero-in { display: grid; gap: var(--space-lg); justify-items: start; max-width: 780px; margin-top: var(--space-xl); }
.hhero-in h1 { font-size: var(--text-display-s); letter-spacing: -0.04em; line-height: 1.02; }
.hhero-in .lead { color: var(--color-muted); }
.search--l { width: 100%; max-width: 640px; }
.search--l input { min-height: 52px; font-size: var(--text-lg); }
.hhero-in .count { margin-left: 0; }
.hhero-in .empty { padding: 0; }
.temas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.tema { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-md); border-radius: var(--radius-card); background: color-mix(in oklab, var(--night-paper-2) 70%, transparent); box-shadow: inset 0 0 0 1px var(--hairline-light); }
.guias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.guia { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--night-rule); }
.guia h3 { font-size: var(--text-xl); }
.guia p { color: var(--color-muted); }
.estado { justify-self: start; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--hairline-light-2); color: var(--night-ink-2); font-size: var(--text-xs); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg) var(--gap-columns); align-items: start; }
.faqs { border-top: 1px solid var(--color-rule); }
.faq { border-bottom: 1px solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-sm); font: 600 var(--text-lg)/1.3 var(--font-display); letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; color: var(--color-accent); font: 400 var(--text-2xl)/1 var(--font-body); transition: transform var(--dur-short) var(--ease-out); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-ink-2); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq p { max-width: 65ch; padding-bottom: var(--space-lg); color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Empresa. */
.pares-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-ink-2); color: var(--color-muted); font-size: var(--text-sm); }
.pares { margin: 0; padding: 0; list-style: none; }
.pares li { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--gap-columns); align-items: start; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.par-reto { max-width: 32ch; font: 600 var(--text-xl)/1.3 var(--font-display); letter-spacing: -0.015em; }
.par-fun { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-lg); }
.par-fun svg { width: 22px; height: 22px; margin-top: var(--space-2xs); color: var(--color-accent); }
.pares-cierre { max-width: 56ch; margin-top: var(--space-xl); color: var(--color-ink-2); font-size: var(--text-lead); }
.roles--night li { border-top-color: var(--night-rule); }
.resolvemos { display: grid; gap: var(--space-xl); }
.resuelve { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.resuelve li { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--hairline-light-2); color: var(--night-ink); font-size: var(--text-lg); }
.eco-fila { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.eco-fila a { display: inline-flex; border-radius: var(--radius-input); transition: transform var(--dur-short) var(--ease-out); }
.eco-fila a:hover { transform: translateY(-3px); }
.eco-fila a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.mueve-texto { max-width: 30ch; color: var(--night-ink); font: 600 var(--text-2xl)/1.3 var(--font-display); letter-spacing: -0.02em; }
.escena-foto--ancha .foto { aspect-ratio: 4 / 3; }
@media (prefers-reduced-motion: reduce) { .eco-fila a { transition: none; } .eco-fila a:hover { transform: none; } }

/* Contacto. */
.contacto-sec { padding-bottom: var(--section-gap-l); }
.contacto-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
.contacto-form { display: grid; gap: var(--space-md); }
.contacto-form h2, .contacto-canales h2 { font-size: var(--text-2xl); }
.contacto-form > p { color: var(--color-muted); }
.tally { min-height: 220px; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--night-paper-2); box-shadow: inset 0 0 0 1px var(--hairline-light); }
.tally-frame { display: block; width: 100%; min-height: 560px; border: 0; border-radius: var(--radius-input); background: transparent; }
/* Con el formulario de Tally cargado, la tarjeta pasa a fondo claro: Tally pinta su texto oscuro y así se lee bien. */
.tally:has(.tally-frame) { background: var(--color-paper); box-shadow: 0 1px 0 var(--hairline-light); }
.tally-aviso { display: grid; gap: var(--space-lg); }
.tally-aviso p { max-width: 46ch; color: var(--night-ink-2); font-size: var(--text-lg); }
.contacto-priv { font-size: var(--text-sm); }
.contacto-canales { display: grid; gap: var(--space-md); }
.canal { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--night-paper-2); box-shadow: inset 0 0 0 1px var(--hairline-light); color: var(--night-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.canal:hover { background: var(--night-paper-3); color: var(--night-ink); }
.canal:active { background: var(--night-rule); }
.canal:focus-visible { outline: 2px solid var(--night-focus); outline-offset: 2px; }
.canal-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--color-accent); color: var(--color-accent-ink); }
.canal-ico svg { width: 26px; height: 26px; }
.canal-t { display: grid; gap: var(--space-3xs); min-width: 0; }
.canal-t b { overflow-wrap: anywhere; font: 600 var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.015em; }
.canal-t span { color: var(--night-muted); font-size: var(--text-sm); }
.contacto-zub { display: grid; gap: var(--space-sm); margin-top: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--night-rule); color: var(--night-muted); font-size: var(--text-sm); }
.contacto-zub img { width: auto; height: 28px; }
.contacto-zub b { display: block; color: var(--night-ink); }

/* Legales. */
.lhero { padding-bottom: var(--space-2xl); }
.doc-sec { padding-bottom: var(--section-gap-l); }
.doc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--space-3xl); align-items: start; }
.doc-aside { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); display: grid; gap: var(--space-lg); justify-items: start; }
.doc-body { max-width: 70ch; border-top: 1px solid var(--color-rule); }
.clausula { border-bottom: 1px solid var(--color-rule); scroll-margin-top: calc(var(--nav-h) + var(--space-lg)); }
.clausula summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-sm); cursor: pointer; list-style: none; }
.clausula summary::-webkit-details-marker { display: none; }
.clausula summary::after { content: "+"; flex-shrink: 0; color: var(--color-accent); font: 400 var(--text-2xl)/1 var(--font-body); transition: transform var(--dur-short) var(--ease-out); }
.clausula[open] summary::after { transform: rotate(45deg); }
.clausula summary:hover h2 { color: var(--color-ink-2); }
.clausula summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.clausula h2 { max-width: none; font-size: var(--text-xl); letter-spacing: -0.015em; }
.clausula-txt { display: grid; gap: var(--space-sm); padding-bottom: var(--space-lg); }
.clausula-txt p, .clausula-txt li { color: var(--color-ink-2); }
.clausula-txt ul { display: grid; gap: var(--space-2xs); margin: 0; padding-left: 1.25em; }
@media (prefers-reduced-motion: reduce) { .clausula summary::after { transition: none; } }
.borrador { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-paper-2); box-shadow: inset 4px 0 0 var(--color-accent); color: var(--color-ink); }
.borrador span { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }

/* 404. */
.e404 { min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-3xl) var(--section-gap-s); }
.e404-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.e404 h1 { max-width: 13ch; margin-bottom: var(--space-lg); font-size: var(--text-display-s); letter-spacing: -0.04em; line-height: 1.02; }
.e404 .lead { margin-bottom: var(--space-lg); color: var(--color-muted); }
.e404-links h2 { margin-bottom: var(--space-md); font-size: var(--text-lg); }
.e404-links ul { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.apps--404 { grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: var(--space-3xl); }

/* Aplicaciones: la foto de Edgar ocupa la parte derecha de la banda, sin estirarse a todo el ancho. */
.banda-photo { left: 36%; }
.banda-photo .foto::after { background: linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-mid) 16%, var(--veil-none) 38%); }

@media (min-width: 64.01rem) {
  .js .tarea-main { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 75rem) {
  .nav-links .nav-item { padding: 0 var(--space-xs); }
  .site-nav .container { gap: var(--space-md); }
  .apps .jewel { --j: 72px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles--incl, .tiles--eco { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-hero { --w: 480px; }
}
@media (max-width: 88rem) and (min-width: 64.01rem) { .fs-hero { --w: 480px; } }
@media (max-width: 64rem) {
  .nav-links, .nav-cta { display: none; }
  .m-nav { display: block; }
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-3xl); }
  .hero-copy, .scene--hero { grid-column: 1 / -1; }
  .scene--hero { height: auto; aspect-ratio: 747 / 600; margin-right: var(--space-md); }
  .fs-hero { --w: 52%; right: calc(-1 * var(--space-md)); bottom: calc(-1 * var(--space-xl)); }
  .wall-head, .panel, .servicios, .close-inner, .foot-top, .apps-more, .eco-head, .roles-grid { grid-template-columns: minmax(0, 1fr); }
  .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .apps--s { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .escena-grid { row-gap: var(--space-xl); }
  .escena-grid--foto-izq .escena-foto, .escena-grid--foto-izq .escena-texto, .escena-grid--foto-der .escena-texto, .escena-grid--foto-der .scene { grid-column: 1 / -1; }
  .escena-grid--foto-izq .escena-foto { max-width: 520px; }
  .scene--almacen { height: auto; aspect-ratio: 858 / 560; margin-right: var(--space-md); }
  .fs-almacen { --w: 40%; right: calc(-1 * var(--space-md)); bottom: calc(-1 * var(--space-xl)); }
  .bus-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-md); }
  .bus-node i { display: none; }
  .bus-bar { margin-top: var(--space-lg); }
  .giro { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .giro-apps { justify-content: flex-start; }
  .panel-stage { min-height: 0; }
  .foot-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .banda { height: auto; display: grid; gap: var(--space-xl); }
  .banda-photo { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .banda-photo .foto::after { display: none; }
  .banda-copy { position: relative; left: auto; top: auto; transform: none; width: 100%; }
  .fs-banda { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles--incl, .tiles--eco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fila--a, .fila--b, .fila--c { grid-template-columns: minmax(0, 1fr); }
  .fila .lugar + .lugar { margin-top: var(--space-2xl); }
  .fila--a .lugar:nth-child(2), .fila--c .lugar:nth-child(2) { margin-top: var(--space-2xl); }
  .lugar-foto, .lugar--posblime .lugar-foto, .lugar--pharmastore .lugar-foto, .lugar--warehouse .lugar-foto, .lugar--symfonet .lugar-foto, .lugar--salud .lugar-foto { height: auto; aspect-ratio: 4 / 3; }
  .lugar--pharmastore .lugar-foto { aspect-ratio: 4 / 4.2; }
  .fs-lugar { --w: 46%; }
  /* La red se apila: PSERP arriba y los cinco productos en lista, con el dato que comparte cada uno. */
  .red { height: auto; display: grid; gap: var(--space-lg); margin-top: var(--space-2xl); }
  .red-lines, .red-pill { display: none; }
  .red-hub { position: relative; left: auto !important; top: auto !important; transform: none; justify-items: start; text-align: left; }
  .red-hub .plate { justify-self: start; }
  .red-nodes { position: relative; display: grid; gap: var(--space-sm); padding-left: var(--space-xl); }
  .red-nodes::before { content: ""; position: absolute; left: var(--space-sm); top: 0; bottom: var(--space-lg); width: 2px; background: var(--night-rule); }
  .red-node { position: relative; left: auto !important; top: auto !important; transform: none; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: var(--space-md); text-align: left; }
  .red-node::before { content: ""; position: absolute; left: calc(-1 * var(--space-xl) + var(--space-sm)); top: 50%; width: var(--space-lg); height: 2px; background: var(--night-rule); }
  .red-node.is-on::before { background: var(--night-accent); }
  .red-node p { max-width: none; }
  .red-node .dato { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; color: var(--night-muted); }
  .red.has-focus .red-node:not(.is-on) .plate { filter: none; }
  .red.has-focus .red-node:not(.is-on) p { opacity: 1; }
  .tramo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  :root { --nav-h: 64px; }
  .hero-copy h1 { font-size: 2.6rem; }
  .scene--hero { margin-right: var(--space-sm); }
  .fs-hero { --w: 62%; right: calc(-1 * var(--space-sm)); bottom: calc(-1 * var(--space-xl)); }
  .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--space-2xs); }
  .apps .jewel { --j: 64px; }
  .app-link { font-size: var(--text-xs); padding: var(--space-2xs); }
  .apps--s { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .apps--s .jewel { --j: 52px; }
  .beneficios { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .scene--almacen { margin-right: var(--space-sm); }
  .fs-almacen { --w: 44%; right: calc(-1 * var(--space-sm)); bottom: calc(-1 * var(--space-lg)); }
  .bus-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
  .bus-node:last-child { grid-column: 1 / -1; }
  .combo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combo li:nth-child(3)::before { display: none; }
  .bus-bar { flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); }
  .switch-tabs { width: 100%; }
  .serv, .roles { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .tiles, .tiles--incl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
  .tiles--eco { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .tiles:not(.tiles--eco) .tile { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-sm); padding: var(--space-sm); }
  .tiles:not(.tiles--eco) .tile .jewel { --j: 52px; }
  .t-name { font-size: var(--text-md); }
  .tiles--eco .tile { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .foot-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filterbar .count { display: none; }
  .giro h3, .panel-copy h3 { font-size: var(--text-2xl); }
  .banda-copy h1, .eco-head h1 { font-size: 2.5rem; }
  .lugar-datos { grid-template-columns: minmax(0, 1fr); }
  .fs-lugar { --w: 52%; right: var(--space-sm); bottom: var(--space-sm); }
  /* El recorrido se vuelve vertical y corto. */
  .ruta { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .ruta::before, .ruta::after { top: 22px; bottom: 22px; left: 30px; right: auto; width: 2px; height: auto; }
  .ruta::after { transform-origin: 50% 0; transform: scaleY(calc((var(--paso) - 1) / 5)); }
  .paso { grid-template-columns: 44px auto minmax(0, 1fr); justify-items: start; align-items: center; gap: var(--space-sm); padding: var(--space-2xs) var(--space-xs); text-align: left; }
  .paso-t { max-width: none; }
  .tramo { padding: var(--space-lg); }
  .tramo-red { gap: var(--space-sm); }
  .tramo-ln b { display: none; }
  .tramo p { font-size: var(--text-md); }
}
@media (max-width: 24rem) { .foot-map { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Responsivo de las piezas nuevas ---------- */
@media (max-width: 75rem) {
  .feat-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .temas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .serv-fila { grid-template-columns: 48px minmax(0, 1fr); }
  .serv-fila p { grid-column: 2 / 3; }
  .apps--404 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 64rem) {
  .fhero-head, .ahero-grid, .conecta-grid, .pcon-grid, .accion-grid, .incluye-grid, .contratar-grid, .faq-grid, .contacto-grid, .doc, .e404-in, .despues, .rel { grid-template-columns: minmax(0, 1fr); }
  .tarea-head { grid-template-columns: auto minmax(0, 1fr); }
  .tarea-frase { grid-column: 1 / -1; }
  .ahero-cap .screen-tilt { transform: none; }
  .apps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guias, .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .serv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-aside { position: static; }
  .dia { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: var(--space-xl); }
  .dia::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .dia li { padding: 0 0 var(--space-lg); }
  .dia li::before { left: calc(-1 * var(--space-xl)); top: 4px; }
  .banda-photo { left: 0; }
  .wa-float { position: fixed; z-index: var(--z-sticky); right: var(--space-md); bottom: var(--space-md); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--night-paper-3); color: var(--night-ink); box-shadow: var(--shadow-float), 0 0 0 1px var(--hairline-light-2); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
  .wa-float svg { width: 20px; height: 20px; color: var(--night-accent); }
  .wa-float:hover { background: var(--night-rule); color: var(--night-ink); }
  .has-cookies .wa-float, body[data-page="contacto"] .wa-float { display: none; }
}
@media (max-width: 40rem) {
  .feat-list, .feat-list--3, .temas, .guias, .pasos, .serv, .retos { grid-template-columns: minmax(0, 1fr); }
  .apps--con { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cookies { left: 0; right: 0; bottom: 0; max-height: 64dvh; padding: var(--space-md); border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .cookies-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .cookies h2 { font-size: var(--text-lg); }
  .cookies-actions { justify-content: stretch; }
  .cookies-actions .btn { flex: 1 1 auto; }
  .cookies-prefs { grid-template-columns: minmax(0, 1fr); }
  .tarea-n { width: 44px; height: 44px; font-size: var(--text-xl); }
  .tarea-frase { font-size: var(--text-xl); }
  .marca { width: 24px; height: 24px; font-size: var(--text-xs); box-shadow: 0 0 0 2px var(--marca-ring), 0 4px 10px -4px var(--shade-1); }
  .despues-grid { grid-template-columns: minmax(0, 1fr); }
  .ahero-tit { gap: var(--space-md); }
  .ahero-tit .jewel { --j: 56px !important; }
  .ahero-copy h1, .fhero-head h1, .hhero-in h1, .e404 h1 { font-size: 2.4rem; }
  .orbita-sat .jewel { --j: 52px !important; }
  .orbita-centro .jewel { --j: 96px !important; }
  .serv-fila { grid-template-columns: 36px minmax(0, 1fr); }
  .serv-fila p, .serv-fila .textlink { grid-column: 2 / -1; }
  .serv-fila h2, .giro-t { font-size: var(--text-2xl); }
  .serv dt { font-size: var(--text-xl); }
  .pares-head { display: none; }
  .pares li { grid-template-columns: minmax(0, 1fr); }
  .tally { padding: var(--space-lg); }
  .canal { padding: var(--space-md); }
  .canal-t b { font-size: var(--text-lg); }
  .enlace { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .enlace-ln { width: 100%; }
  .pcon-red { padding: var(--space-lg); }
  .apps--404 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Página de privacidad: presenta el aviso vigente de Zublime y lo abre en otra ventana (D55). */
.aviso-externo { display: grid; gap: 1.25rem; max-width: 60ch; }
.aviso-externo p { margin: 0; }