/* EL SITIO PÚBLICO DE NONE — «darkroom gallery wall» (25 sep 2026)
*
* Cuarta referencia del dueño (DESIGN (5).md, el sistema de Aker) y el
* encargo: «ahora probemos con esta web, usemos estos videos, analiza que
* no se vean cortados».
*
* QUÉ ES ESTE SISTEMA, en una línea: paredes blancas, tipografía enorme
* en peso 300, y una imagen a sangre por sección haciendo todo el
* trabajo. Lo contrario de gritar. La firma es que el MISMO tipo de letra
* dice el titular de 130 px y el cuerpo de 15 px: una sola voz, hablando
* bajo.
*
* QUÉ CAMBIA DE VERDAD respecto a la versión de ayer: se va el serif, se
* van los radios de 24 px, se van las sombras, y la imagen deja de ser
* una captura flotando para ser VIDEO a sangre. Las capturas del producto
* no desaparecen —siguen siendo lo honesto— pero pasan a la rejilla de
* tarjetas, que es donde esta referencia las pone.
*
* CUATRO ADAPTACIONES, dichas para que él las pueda revertir:
*
* 1. PROXIMA NOVA → INTER. La referencia admite «Montserrat o Nunito
* Sans» como sustituto; None ya tiene Inter vendida en
* /vendor/inter y la CSP no admite Google Fonts. Inter tiene el peso
* 300, que es lo único que este sistema de verdad necesita.
*
* 2. LORA SE VA. No está vendida, y la propia referencia dice que su
* firma es que una sola familia cargue con todo. Menos cien
* kilobytes en la primera visita de alguien que todavía no es
* cliente.
*
* 3. EMBER (#b75928) NO SE USA. Es el único acento cromático de Aker,
* pero el dueño ya decidió sobre esta misma página que «el acento es
* NEGRO, no naranja: el naranja es de Entrepreneur y la portada es
* de None entero». Su decisión gana sobre la referencia. El sistema
* queda monocromo, y el único color de la página son los cuatro
* filos de los pilares, que ya era regla.
*
* 4. LA FOTOGRAFÍA ES VIDEO. Lo pidió él. Todo lo que la referencia
* dice de la fotografía —a sangre, desaturada, sin radio en el hero,
* 8 px en tarjeta— se aplica igual.
*
* LOS NOMBRES DE LAS VARIABLES NO CAMBIAN, solo sus valores: las otras
* seis páginas públicas leen de aquí, y renombrar obligaría a tocar seis
* hojas para no cambiar ni una decisión.
*/
:root {
/* ── Color. Monocromo, y en serio ────────────────────────────────── */
--sitio-papel: #ffffff; /* Paper — el lienzo */
--sitio-tinta: #000000; /* Ink — texto, filos, todo lo que manda */
--sitio-char: #1c1c1c; /* Char — la píldora oscura, la tarjeta oscura */
--sitio-midnight: #070707; /* Midnight — el velo sobre el video */
--sitio-bruma: #e5e4e4; /* Mist — la tarjeta clara, el hilo del borde */
--sitio-hueso: #e5e4e4; /* mismo Mist: las bandas dejan de estar teñidas */
--sitio-niebla: #fafafa; /* un respiro, casi imperceptible */
--sitio-ceniza: #8d8d8d; /* Smoke — la etiqueta de sección */
--sitio-pizarra: #666666; /* Pewter — el texto de apoyo */
--sitio-humo: #8d8d8d; /* marcadores de posición */
--sitio-filo: #e5e4e4; /* el hilo, y es Mist */
/* EL MISMO HILO, CON EL NOMBRE CON EL QUE SE ESCRIBIO. `inicio.css` y
`catalogo.css` lo llaman `--sitio-linea` en diecisiete sitios -filos
de ficha, rejilla de sectores, pestanas, acordeon- y la variable no
existia: una variable sin definir invalida la declaracion entera, asi
que esos bordes NO SE PINTABAN y nadie veia un error. De ahi que la
portada se viera plana (25 sep 2026). */
--sitio-linea: #e5e4e4;
/* Se quedan definidos porque las otras páginas los nombran. En este
sistema no hay acento cromático: los dos apuntan a lo neutro. */
--sitio-durazno: #e5e4e4;
--sitio-sepia: #000000;
/* ── Las dos voces son la misma ──────────────────────────────────── */
--sitio-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
/* Definido por compatibilidad con las páginas que lo nombran; aquí no
se usa: la referencia manda una sola familia. */
--sitio-serif: var(--sitio-sans);
/* ── Forma. Ocho para todo, ochenta para lo pulsable ─────────────── */
--sitio-radio: 8px; /* tarjetas e imágenes: ocho, ni cero ni dieciséis */
--sitio-radio-chico: 8px;
--sitio-radio-flotante: 8px;
--sitio-pildora: 80px; /* la curva firma del sistema */
--sitio-insignia: 1584px; /* SOLO píldoras de navegación y etiquetas */
/* SIN SOMBRAS. La profundidad la da el video y el contraste de
superficie, nunca un box-shadow. Se deja el nombre en `none` porque
alguna hoja lo nombra. */
--sitio-elevacion: none;
}
body.sitio {
margin: 0;
padding: 0;
background: var(--sitio-papel);
color: var(--sitio-tinta);
font-family: var(--sitio-sans);
font-feature-settings: "ss01" on;
-webkit-font-smoothing: antialiased;
display: block;
text-align: left;
/* Los 100vw de las bandas no pueden abrir scroll horizontal. */
overflow-x: clip;
}
/* ── LA VOZ: peso 300 incluso cuando grita ──────────────────────────
Es la decisión que define este sistema. Un titular de 130 px en peso
300 con el interletrado apretado se lee como algo tallado, no como un
anuncio. Poner 600 aquí lo convertiría en otra web cualquiera. */
.sitio h1, .sitio h2, .sitio h3 {
font-family: var(--sitio-sans);
color: var(--sitio-tinta);
margin: 0;
text-wrap: balance;
text-transform: none;
}
.sitio h1 { font-weight: 300; font-size: clamp(34px, 5.2vw, 62px); line-height: 1.1; letter-spacing: -0.025em; }
.sitio h2 { font-weight: 300; font-size: clamp(28px, 4vw, 48px); line-height: 1.15; letter-spacing: -0.02em; }
.sitio h3 { font-weight: 400; font-size: clamp(20px, 1.8vw, 22px); line-height: 1.25; letter-spacing: -0.02em; }
.sitio h1 em, .sitio h2 em { font-style: normal; color: var(--sitio-pizarra); }
.sitio p { margin: 0; }
/* El cuerpo NO se centra y NO pasa de ~600 px: es una regla del sistema,
no una preferencia. */
.sitio .cuerpo { font-size: 15px; line-height: 1.5; letter-spacing: 0.01em; color: var(--sitio-tinta); max-width: 600px; }
.sitio .apoyo { font-size: 15px; line-height: 1.5; letter-spacing: 0.01em; color: var(--sitio-pizarra); max-width: 600px; }
.sitio .subida { font-size: 18px; line-height: 1.5; letter-spacing: 0.01em; color: var(--sitio-tinta); max-width: 600px; }
/* La etiqueta de sección: 12 px, gris humo, a la izquierda y ENCIMA del
título. Nunca centrada. */
.sitio .micro { font-size: 12px; font-weight: 400; color: var(--sitio-ceniza); letter-spacing: 0.01em; margin: 0; text-transform: none; }
.sitio .menuda { font-size: 13px; line-height: 1.5; color: var(--sitio-pizarra); }
/* HIPERVÍNCULOS NEGROS (dueño, 4 oct 2026 — cambio 1 de docs/29): los
enlaces de texto corrido salían con el azul del navegador y morado al
visitarse («Ver NAP por dentro», «la documentación»). Tinta siempre,
visitado incluido; los botones-píldora y las tarjetas tienen lo suyo. */
.sitio p a, .sitio li a, .sitio td a, .sitio figcaption a,
.sitio p a:visited, .sitio li a:visited, .sitio td a:visited, .sitio figcaption a:visited {
color: var(--sitio-tinta);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Sobre banda oscura, el mismo criterio en papel. */
.sitio .banda-oscura p a, .sitio .banda-oscura li a,
.sitio .banda-oscura p a:visited, .sitio .banda-oscura li a:visited { color: var(--sitio-papel); }
/* ── La barra: una píldora oscura arriba a la derecha ───────────────
La referencia pide una sola píldora Char flotando sobre la imagen. Se
queda fija porque la portada es larga y el contacto está al final. */
.sitio .nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 20;
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
padding: calc(20px + env(safe-area-inset-top, 0px)) clamp(20px, 3vw, 32px) 20px;
pointer-events: none;
}
.sitio .nav > * { pointer-events: auto; }
.sitio .nav .marca-sitio {
display: inline-flex; align-items: center; gap: 9px;
color: var(--sitio-papel); text-decoration: none;
font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
}
/* El grupo de la derecha: el boton y el menu, juntos. */
.sitio .nav .acciones-nav { display: flex; align-items: center; gap: 6px; }
.sitio .nav .abre-menu { color: var(--sitio-papel); }
/* Sobre el video la pildora se invierte, como las del hero. */
.sitio .nav .pildora { background: var(--sitio-papel); color: var(--sitio-tinta); }
.sitio .nav .pildora:hover { background: var(--sitio-bruma); }
.sitio .pildora.chica { min-height: 40px; padding: 0 18px; }
.sitio .nav ul {
display: flex; gap: 2px; list-style: none; margin: 0; padding: 4px 6px;
align-items: center;
background: var(--sitio-char); border-radius: var(--sitio-insignia);
}
.sitio .nav a.enlace-nav {
color: var(--sitio-papel); text-decoration: none;
font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
padding: 9px 14px; border-radius: var(--sitio-insignia);
}
.sitio .nav a.enlace-nav:hover { background: rgba(255, 255, 255, 0.16); }
/* PASADO EL VIDEO, LA BARRA SE VA. Sobre la fotografía flota, que es lo
que pide la referencia; sobre el papel TAPABA TEXTO —en la captura, la
píldora se comía «cuánto hay en el cajón»— porque el contenido está
centrado a 1200 y la píldora vive en la esquina. Una barra fija que
tapa lo que hay que leer no es chrome mínimo: es un estorbo.
Se va con una transición, y todos sus enlaces siguen en el pie.
Para volver a dejarla puesta basta con quitar estas tres líneas. */
.sitio .nav { transition: opacity 0.25s ease-out, visibility 0.25s; }
/* LA BARRA SE QUEDA (25 sep 2026). Se escondia al salir del video —era
el patron de Aker, donde la barra solo estorbaba— pero desde que el
menu vive ahi, esconderla deja el catalogo entero inalcanzable a
partir del segundo pantallazo. Lo que cambia es el bando: sobre el
video va en blanco y sin fondo; sobre el papel, en tinta y con el
fondo del papel, para que se lea encima de lo que va pasando. */
.sitio.sobre-papel .nav {
background: var(--sitio-papel);
border-bottom: 1px solid var(--sitio-bruma);
}
.sitio.sobre-papel .nav .marca-sitio,
.sitio.sobre-papel .nav .abre-menu { color: var(--sitio-tinta); }
.sitio.sobre-papel .nav .pildora { background: var(--sitio-char); color: var(--sitio-papel); }
/* ── Lo pulsable: texto con flecha, y rara vez un relleno ───────────
La acción por omisión de este sistema NO lleva fondo: es una palabra y
una flecha. El relleno oscuro se guarda para el momento de más énfasis
de la página, que aquí es «Contratar». */
.sitio .pildora, .sitio .fantasma {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 24px; border-radius: var(--sitio-pildora);
font-family: var(--sitio-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.sitio .pildora { background: var(--sitio-char); color: var(--sitio-papel); }
.sitio .pildora:hover { background: var(--sitio-midnight); }
.sitio .fantasma { background: transparent; color: var(--sitio-tinta); border-color: var(--sitio-tinta); }
.sitio .fantasma:hover { background: var(--sitio-bruma); }
/* Sobre el video las dos se invierten. */
.sitio .sobre-video .pildora { background: var(--sitio-papel); color: var(--sitio-tinta); }
.sitio .sobre-video .pildora:hover { background: var(--sitio-bruma); }
.sitio .sobre-video .fantasma { color: var(--sitio-papel); border-color: rgba(255, 255, 255, 0.7); }
.sitio .sobre-video .fantasma:hover { background: rgba(255, 255, 255, 0.14); }
/* El enlace con flecha: la forma normal de actuar en este sistema. */
.sitio a.texto-enlace {
display: inline-flex; align-items: center; gap: 10px;
color: var(--sitio-tinta); text-decoration: none;
font-size: 15px; font-weight: 400; letter-spacing: 0.01em;
}
.sitio a.texto-enlace::after { content: "\2192"; font-size: 16px; }
.sitio a.texto-enlace:hover { text-decoration: underline; text-underline-offset: 5px; }
.sitio .sobre-video a.texto-enlace, .sitio .banda-oscura a.texto-enlace { color: var(--sitio-papel); }
/* ── Las secciones ─────────────────────────────────────────────────
Ochenta de hueco entre bandas, mil doscientos de ancho para el texto,
y a sangre solo la imagen. */
.sitio main { display: block; width: 100%; max-width: none; text-align: left; margin: 0; padding: 0; }
.sitio main > section { display: block; max-width: none; }
.sitio .seccion { padding: clamp(56px, 7vw, 80px) 0; }
.sitio .banda-niebla { background: var(--sitio-niebla); }
.sitio .banda-hueso { background: var(--sitio-bruma); }
.sitio .banda-oscura { background: var(--sitio-char); color: var(--sitio-papel); }
.sitio .banda-oscura h1, .sitio .banda-oscura h2, .sitio .banda-oscura h3,
.sitio .banda-oscura .cuerpo, .sitio .banda-oscura .subida { color: var(--sitio-papel); }
.sitio .banda-oscura .apoyo, .sitio .banda-oscura .micro { color: var(--sitio-bruma); }
.sitio .ancho { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 32px); }
.sitio .raya { height: 0; border: 0; border-top: 1px solid var(--sitio-filo); margin: 0; }
/* ── Las tarjetas: ocho de radio, sin sombra y sin borde ───────────── */
.sitio figure { margin: 0; }
.sitio .tarjeta { background: var(--sitio-bruma); border: 0; border-radius: var(--sitio-radio); padding: clamp(24px, 3vw, 40px); }
.sitio .tarjeta-oscura { background: var(--sitio-char); color: var(--sitio-papel); border-radius: var(--sitio-radio); padding: clamp(24px, 3vw, 40px); }
.sitio .tarjeta-oscura h2, .sitio .tarjeta-oscura h3 { color: var(--sitio-papel); }
.sitio .tarjeta-oscura .micro, .sitio .tarjeta-oscura .apoyo { color: var(--sitio-bruma); }
/* La de acento ya no es de acento: este sistema no tiene. Se queda como
la tarjeta clara para que las páginas que la nombran no se rompan. */
.sitio .tarjeta-acento { background: var(--sitio-bruma); color: var(--sitio-tinta); border-radius: var(--sitio-radio); padding: clamp(24px, 3vw, 40px); }
.sitio .tarjeta-acento h2, .sitio .tarjeta-acento h3, .sitio .tarjeta-acento p { color: var(--sitio-tinta); }
/* La captura del producto: ocho de radio y NADA de sombra. */
.sitio .pantalla { background: var(--sitio-papel); border-radius: var(--sitio-radio); overflow: hidden; display: block; }
.sitio .pantalla img { display: block; width: 100%; height: auto; }
/* ── LA ETIQUETA CON NÚMERO ─────────────────────────────────────────
«01 Invest» de la referencia: el número en gris humo a 12 px, la
palabra a 18 px, y un hilo encima de cada renglón. */
.sitio .numerada { list-style: none; margin: 0; padding: 0; }
.sitio .numerada li { display: flex; gap: 20px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--sitio-filo); }
.sitio .numerada .num { font-size: 12px; color: var(--sitio-ceniza); flex: 0 0 28px; }
.sitio .numerada .que { font-size: 18px; font-weight: 400; }
/* ── La insignia ──────────────────────────────────────────────────── */
.sitio .insignia {
display: inline-flex; align-items: center;
/* QUE NO SE ESTIRE. Dentro de una columna flexible -la entrada del
hero lo es- un hijo se estira al ancho del contenedor aunque sea
`inline-flex`, y la pildora salia como una barra de lado a lado con
el texto en una esquina. */
align-self: flex-start;
padding: 7px 14px; border-radius: var(--sitio-insignia);
background: var(--sitio-bruma); color: var(--sitio-tinta);
font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
}
.sitio .sobre-video .insignia { background: rgba(255, 255, 255, 0.18); color: var(--sitio-papel); }
.sitio :focus-visible { outline: 2px solid var(--sitio-tinta); outline-offset: 3px; }
.sitio .sobre-video :focus-visible, .sitio .banda-oscura :focus-visible { outline-color: var(--sitio-papel); }
/* ── El pie ───────────────────────────────────────────────────────── */
.sitio .pie-sitio { max-width: 1200px; margin: 0 auto; padding: 40px clamp(20px, 3vw, 32px) 64px; border-top: 1px solid var(--sitio-filo); display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: baseline; }
.sitio .pie-sitio a { color: var(--sitio-pizarra); text-decoration: none; font-size: 13px; }
.sitio .pie-sitio a:hover { color: var(--sitio-tinta); text-decoration: underline; text-underline-offset: 4px; }
.sitio .pie-sitio .legal { font-size: 12px; color: var(--sitio-ceniza); width: 100%; }
.sitio .credito { color: var(--sitio-tinta); }
/* EL ENLACE DE SALTAR: comun a todas las publicas, no de la portada.
Vivia en inicio.css y Negocios nacio sin el, asi que el enlace salia
VISIBLE arriba a la izquierda en vez de aparecer solo con el
tabulador. */
.saltar { position: absolute; left: -9999px; top: 0; z-index: 30; }
.saltar:focus { left: 12px; top: 12px; padding: 12px 18px; border-radius: var(--sitio-pildora); background: var(--sitio-tinta); color: var(--sitio-papel); text-decoration: none; font-weight: 500; }
/* ══════════════════════════════════════════════════════════════════════
* LO QUE CUELGA DE LA PORTADA SE LEE EN EL MISMO PAPEL
*
* Las seis públicas —planes, privacidad, términos, cookies, estado y
* desarrolladores— leen `--crema`, `--negro`, `--agrupado` y `--linea` de
* none.css. Se les da aquí el valor de ESTE sistema y las seis cambian a
* la vez; reescribir seis hojas dejaría cinco copias de la misma
* decisión.
* ══════════════════════════════════════════════════════════════════ */
body.sitio.planes {
--crema: var(--sitio-papel);
--superficie: var(--sitio-papel);
--agrupado: var(--sitio-bruma);
--pulsable: var(--sitio-bruma);
--gris: var(--sitio-bruma);
--negro: var(--sitio-tinta);
--secundario: var(--sitio-pizarra);
--linea: var(--sitio-filo);
}
/* Sus títulos hablan con la misma voz que la portada: peso 300 y el
interletrado apretado. Es lo que hace que se sientan del mismo sitio. */
body.sitio.planes h1, body.sitio.planes h2 {
font-family: var(--sitio-sans); font-weight: 300; letter-spacing: -0.025em;
}
body.sitio.planes .plan.destacado { background: var(--sitio-char); color: var(--sitio-papel); }
body.sitio.planes .boton.acento, body.sitio.planes .boton.negro {
background: var(--sitio-char); color: var(--sitio-papel); border-radius: var(--sitio-pildora);
}
body.sitio.planes .lema, body.sitio.planes .nota, body.sitio.planes .familia > .tenue,
body.sitio.planes .cierre .tenue, body.sitio.planes .incluye p, body.sitio.planes .pie,
body.sitio.planes .vigencia, body.sitio.planes .tabla th { color: var(--sitio-pizarra); }
body.sitio.planes .clave { border-left-color: var(--sitio-tinta); }
/* ══════════════════════════════════════════════════════════════════════
* EL PIE GRANDE (25 sep 2026)
*
* De la referencia: todo el catálogo en columnas, la empresa y lo legal.
* Lo arma `pie-sitio.js` desde `/negocios.json`, el mismo sitio del que
* come el menú, así que los 27 módulos no están escritos en ninguna
* página.
*
* `pie-grande` la pone el guion DESPUÉS de haber pintado las columnas.
* Sin ella, el pie de siempre —seis enlaces y la línea legal— se queda
* tal cual: si el guion no carga, nadie se queda sin privacidad, sin
* ayuda ni sin términos.
* ══════════════════════════════════════════════════════════════════ */
/* A LA IZQUIERDA. `main` de none.css centra por herencia y el pie salia
con las siete columnas centradas, que en un pie se lee como un error.
Es el mismo tropiezo que la cabecera de la pagina de invitacion el 7
sep: una etiqueta centrada encima de una lista alineada deja la
columna rota. */
.sitio .pie-sitio.pie-grande { display: block; padding-top: clamp(40px, 6vw, 72px); }
.sitio .pie-columnas, .sitio .columna-pie, .sitio .pie-grande .legal { text-align: left; }
.sitio .pie-columnas {
display: grid; gap: clamp(22px, 3vw, 40px);
grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
padding-bottom: clamp(28px, 4vw, 44px);
margin-bottom: clamp(20px, 3vw, 32px);
border-bottom: 1px solid var(--sitio-filo);
}
.sitio .columna-pie .titulo-columna {
margin: 0 0 12px;
font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--sitio-tinta);
padding-bottom: 8px;
/* El filo del pilar, como en el menú y en Negocios: el color se usa de
filo, nunca de bloque. SOUL no lleva: es una capa, no un pilar. */
border-bottom: 2px solid var(--pilar, var(--sitio-filo));
}
.sitio .columna-pie[data-pilar="entrepreneur"] { --pilar: #E8631A; }
.sitio .columna-pie[data-pilar="scholastic"] { --pilar: #1259B8; }
.sitio .columna-pie[data-pilar="financial"] { --pilar: #1F8A5B; }
.sitio .columna-pie[data-pilar="meta"] { --pilar: #6A3FD1; }
.sitio .columna-pie[data-pilar="soul"] { --pilar: var(--sitio-tinta); }
.sitio .columna-pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sitio .columna-pie a {
display: block; padding: 5px 0;
color: var(--sitio-pizarra); text-decoration: none; font-size: 13px;
}
.sitio .columna-pie a:hover { color: var(--sitio-tinta); text-decoration: underline; text-underline-offset: 4px; }
/* EL MISMO PIE EN TODAS LAS PAGINAS (dueno, 25 sep 2026: «el pie lo
quiero igual en todos lados»). Los enlaces sueltos de siempre sobran en
cuanto estan las columnas, y en las legales ademas hacian que el pie se
viera distinto del de la portada. La linea legal NO se toca: es la que
nombra a la empresa. */
.sitio .pie-grande > a,
.sitio .pie-grande > br { display: none; }
.sitio .pie-sitio.pie-grande .legal { width: auto; }
/* LA LÍNEA DE LA EMPRESA, IGUAL EN LAS DIEZ. En las legales y en Estado
iba suelta detrás de un `
` —y en tres de ellas decía otra cosa—, así
que ni se podía esconder ni se leía igual. Ahora es el mismo `` en todas y aquí se le da la misma letra. */
.sitio .pie-grande .legal { margin: 0; font-size: 12px; color: var(--sitio-ceniza); }
/* El pie grande en las páginas legales y en Estado: la misma caja que en
la portada. */
.sitio .pie.pie-grande {
max-width: 1200px; margin: 0 auto;
padding: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 32px) 64px;
border-top: 1px solid var(--sitio-filo);
text-align: left;
}
.sitio .pie.pie-grande .pie-columnas { margin-bottom: clamp(18px, 2.5vw, 26px); }
/* La barra de la quinta versión: enlaces de sección, la llamada a la
acción y el acceso de clientes. En un teléfono solo quedan la llamada y
el menú; los enlaces viven dentro del menú. */
.sitio .nav .enlace-nav {
border: 0; background: transparent; width: auto; padding: 0 10px;
min-height: 40px; cursor: pointer;
font-family: var(--sitio-sans); font-size: 13px; font-weight: 500;
color: var(--sitio-papel); text-decoration: none;
display: inline-flex; align-items: center;
}
.sitio .nav .enlace-nav:hover { text-decoration: underline; text-underline-offset: 5px; }
.sitio.sobre-papel .nav .enlace-nav { color: var(--sitio-tinta); }
.sitio .nav .entrar { opacity: 0.75; }
.sitio .nav .entrar:hover { opacity: 1; }
.sitio .solo-angosto { display: none; }
@media (max-width: 860px) {
.sitio .solo-ancho { display: none; }
/* NOMBRANDO EL ENLACE, o no gana. `.sitio .nav .enlace-nav` lleva
`display: inline-flex` con tres clases y la de arriba solo tiene dos;
una consulta de medios no anade especificidad, asi que los enlaces se
quedaban puestos y empujaban la pildora y el boton del menu fuera de
la pantalla (25 sep 2026). */
.sitio .nav .enlace-nav.solo-ancho { display: none; }
.sitio .solo-angosto { display: inline-flex; }
/* Con poco ancho, «Solicitar demostración» no cabe entero. */
.sitio .nav .pildora.chica { padding: 0 14px; font-size: 12px; }
.sitio .nav .entrar { display: none; }
}