sin hijos.
-------------------------------------------------------------------------- */
.srv { scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h)); }
.phead--srv .phead__title { font-size: var(--fs-h2); }
.phead__intro p + p { margin-top: 16px; }
/*
* 3) Lateral de plataformas con un número impar de elementos.
* En móvil el prototipo reparte .srv__scope-list en dos columnas, pensado
* para los seis ámbitos de SRV.01. Con cinco plataformas la última fila
* queda a medias y su hairline se corta por la mitad. El último elemento
* pasa a ocupar el ancho completo solo cuando la cuenta es impar: con un
* número par el comportamiento del prototipo no cambia.
*/
@media (max-width: 900px) {
.srv__scope-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* --------------------------------------------------------------------------
W12. RUTA DE NAVEGACIÓN
El prototipo no contempla breadcrumb: era una maqueta de una sola página.
La arquitectura jerárquica /servicios/ en el resto de fichas y dentro del par */
.channels__pair .channels__value { display: block; }
/* --------------------------------------------------------------------------
W50. HOME — DIAGRAMA DE ARQUITECTURA: RELLENO SECUENCIAL DE NODOS
Corrección del cliente: «Tiene una animación el puntito azul claro que va
desde arriba hasta abajo. Lo pondría que según pasa por cada cuadrado se
rellene».
SIN JAVASCRIPT. Se resuelve con keyframes sobre los nodos que ya existen
en el marcado. No se añade ningún script ni se toca nav-megamenu.js.
SINCRONÍA. El testigo de .arch__list::after recorre `top` de 12.5% a 87.5%
entre el 0% y el 88% de un ciclo de 5.5s. Los centros de las cuatro filas
caen exactamente en 12.5 · 37.5 · 62.5 · 87.5%, así que el instante en que
el testigo cruza cada nodo es:
N1 → 0% N3 → 58.7%
N2 → 29.3% N4 → 88%
Cada nodo se rellena en una rampa de ~4% (≈220 ms) alrededor de su
instante: sin destellos, sin glow y sin parpadeo. Los cuatro vuelven al
estado inicial entre el 94% y el 100%, de modo que el ciclo siguiente
arranca con el diagrama vacío.
TIMING LINEAL. El testigo se declaraba con var(--ease), un ease-out que
aplica a toda la interpolación de `top`: el punto bajaba deprisa y llegaba
frenando, y la correspondencia entre tiempo y posición dejaba de ser
lineal. Para que el relleno ocurra exactamente cuando el punto cruza el
nodo, el recorrido pasa a linear. Es parte de la corrección pedida, no un
cambio estético suelto, y se hace desde aquí: la regla del prototipo no se
edita.
COLOR. Relleno en --cyan #24c1b8. El testigo es --turquoise #31eeba, más
claro, así que sigue distinguiéndose del nodo que acaba de rellenar.
Ningún color nuevo.
-------------------------------------------------------------------------- */
.arch__list::after { animation-timing-function: linear; }
.arch__node {
animation: arch-node-1 5.5s linear infinite;
will-change: background-color;
}
.arch__row:nth-child(2) .arch__node { animation-name: arch-node-2; }
.arch__row:nth-child(3) .arch__node { animation-name: arch-node-3; }
.arch__row:nth-child(4) .arch__node { animation-name: arch-node-4; }
@keyframes arch-node-1 {
0% { background-color: var(--navy); }
4%, 94% { background-color: var(--cyan); }
100% { background-color: var(--navy); }
}
@keyframes arch-node-2 {
0%, 29% { background-color: var(--navy); }
33%, 94% { background-color: var(--cyan); }
100% { background-color: var(--navy); }
}
@keyframes arch-node-3 {
0%, 58% { background-color: var(--navy); }
62%, 94% { background-color: var(--cyan); }
100% { background-color: var(--navy); }
}
@keyframes arch-node-4 {
0%, 85% { background-color: var(--navy); }
89%, 94% { background-color: var(--cyan); }
100% { background-color: var(--navy); }
}
/*
* MOVIMIENTO REDUCIDO — obligatorio.
*
* El bloque 17 ya oculta el testigo y neutraliza las duraciones. Aquí se
* retira además la animación de los nodos y se fija el estado final
* comprensible: los cuatro niveles rellenos. El diagrama se entiende sin
* depender de ningún recorrido: no hay movimiento continuo de ningún tipo.
*
* Los cuatro selectores se repiten a propósito. Los de .arch__row:nth-child()
* tienen más especificidad que .arch__node, así que un único `.arch__node`
* aquí dejaría animation-name puesto en los nodos 2, 3 y 4: se verían
* correctos sólo porque el bloque 17 reduce la duración a 0.001ms, que es
* una coincidencia, no una garantía. Igualados los selectores, la animación
* queda realmente retirada en los cuatro.
*/
@media (prefers-reduced-motion: reduce) {
.arch__node,
.arch__row:nth-child(2) .arch__node,
.arch__row:nth-child(3) .arch__node,
.arch__row:nth-child(4) .arch__node {
animation: none;
background-color: var(--cyan);
will-change: auto;
}
}
/* --------------------------------------------------------------------------
W51. LOGOTIPO OFICIAL EN LA CABECERA
Entra assets/images/logo-catarsys.png y sale el wordmark tipográfico que
.brand b / .brand span venían resolviendo como placeholder. Esas dos
reglas dejan de tener elementos a los que aplicarse: no se editan, igual
que el resto de W1–W45.
EL ASSET. 342 × 342, opaco, sin canal alfa útil. El logotipo ocupa una
banda horizontal de 297 × 100 centrada en un lienzo cuadrado: el 29% del
alto. Mostrado tal cual dentro de la altura del header (76px / 62px), el
logotipo real quedaría en unos 12px y sería ilegible.
RECORTE DEL RELLENO, NO DEL LOGOTIPO. La caja se declara con la
proporción de la banda y object-fit: cover descarta el lienzo sobrante
por arriba y por abajo. cover escala de forma uniforme, así que las
proporciones del logotipo se conservan exactamente y no hay deformación
posible, sea cual sea la caja. El archivo no se toca.
object-position. La banda no está centrada en el lienzo: su centro cae en
el 47.81% del alto, no en el 50%. Con la imagen escalada al ancho de la
caja, el valor que deja la banda centrada es
P = (0.5 − 0.4781 · r) / (1 − r) ≈ 46.7% (r = ancho/alto de caja)
y resulta prácticamente constante para las dos cajas que usa el header,
así que un único valor sirve para escritorio y móvil.
SIN FILTROS. 0 filter, 0 mix-blend-mode, 0 opacity: los colores del
logotipo se imprimen tal como vienen en el archivo.
FOCO. El enlace de marca sigue recibiendo el :focus-visible global
(contorno turquesa, offset 3px). Al ser ahora una caja sólida, el
contorno se dibuja completo alrededor del logotipo.
-------------------------------------------------------------------------- */
/* El enlace pasa de dos piezas tipográficas a un único hijo */
.brand {
align-items: center;
gap: 0;
line-height: 0;
}
.brand__logo {
display: block;
width: 136px;
height: 46px;
object-fit: cover;
object-position: center 46.7%;
}
/* Header de 62px: la caja baja en proporción, el recorte no cambia */
@media (max-width: 900px) {
.brand__logo {
width: 112px;
height: 38px;
}
}
/* --------------------------------------------------------------------------
W52. CASOS DE ÉXITO — /casos-de-exito/ (CAS.01)
Página nueva de la pasada de correcciones de noviembre de 2026. Reutiliza
.phead, .related y .cta sin tocarlos. Añade dos piezas con namespace
propio:
.cases-figures Cifras bajo la cabecera: total de proyectos y reparto por
sector. Los números se calculan en la plantilla.
.cases Registro de fichas. Retícula de hairlines, no tarjetas:
cada ficha es una celda de la tabla, igual que los
registros técnicos del resto del sitio.
SUPERFICIE. .phead navy · .cases navy-900 · .related paper · .cta. La
misma adyacencia navy → navy-900 que ya usan W44 y W45. Ningún color
nuevo: los logotipos se apoyan en una placa blanca para que se lean tal
como el cliente los entrega, sobre cualquier fondo.
LOGOTIPOS. assets/images/casos/ —da el nombre accesible y recibe el foco de teclado— y un
pseudoelemento suyo cubre la fila para hacerla pulsable. El foco se dibuja
sobre ese pseudoelemento para que el recuadro coincida con el área que
realmente se pulsa, con el mismo grosor y color del foco global.
-------------------------------------------------------------------------- */
.related {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.related__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.related__ref {
margin-bottom: 54px;
color: var(--on-light-dim);
}
.related__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.related__head {
align-items: baseline;
margin-bottom: 62px;
}
.related__title {
grid-column: 1 / 6;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.related__intro {
grid-column: 6 / 11;
margin: 0;
font-size: 1rem;
line-height: 1.62;
text-wrap: pretty;
}
.related__list { border-top: 1px solid var(--line-dark); }
.related__row {
position: relative;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
align-items: start;
padding: 30px 0 32px;
border-bottom: 1px solid var(--line-dark);
}
/* El hairline se traza en cian, igual que en el índice del hub */
.related__row::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: var(--cyan);
transform: scaleX(0);
transform-origin: left;
transition: transform 320ms var(--ease);
}
.related__row:hover::after { transform: scaleX(1); }
.related__num {
grid-area: 1 / 1 / 2 / 2;
padding-top: 8px;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1;
letter-spacing: 0.1em;
color: var(--on-light-dim);
transition: color var(--t-fast) var(--ease);
}
.related__name {
grid-area: 1 / 2 / 2 / 6;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.22;
letter-spacing: -0.02em;
color: var(--navy);
}
/* El enlace se extiende sobre toda la fila sin romper la retícula */
.related__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.related__link:focus-visible { outline: none; }
.related__link:focus-visible::after {
outline: 2px solid var(--turquoise);
outline-offset: -2px;
}
/* Columnas 6 a 11: la misma medida de línea que el resto de la landing */
.related__desc {
grid-area: 1 / 6 / 2 / 11;
margin: 0;
padding-top: 3px;
font-size: 1rem;
line-height: 1.62;
text-wrap: pretty;
}
.related__go {
grid-area: 1 / 12 / 2 / 13;
justify-self: end;
padding-top: 7px;
color: var(--line-dark);
transition: color var(--t-fast) var(--ease),
transform var(--t-base) var(--ease);
}
.related__go svg { width: 15px; }
.related__row:hover .related__num { color: var(--navy); }
.related__row:hover .related__go {
color: var(--cyan);
transform: translateX(4px);
}
@media (max-width: 900px) {
.related { padding: 70px 0 76px; }
.related__ref { margin-bottom: 28px; }
.related__ref .ref__rule { display: none; }
.related__head {
margin-bottom: 32px;
row-gap: 16px;
}
.related__title,
.related__intro { grid-column: 1 / -1; }
.related__intro { font-size: 0.9375rem; }
.related__row {
grid-template-columns: auto minmax(0, 1fr);
column-gap: 14px;
padding: 22px 0 24px;
}
.related__num { grid-area: 1 / 1 / 2 / 2; padding-top: 6px; font-size: var(--fs-label-sm); }
.related__name { grid-area: 1 / 2 / 2 / 3; font-size: 1.0625rem; line-height: 1.24; }
.related__desc {
grid-area: 2 / 2 / 3 / 3;
margin-top: 10px;
padding-top: 0;
font-size: 0.9375rem;
line-height: 1.56;
color: var(--on-light-dim);
}
/* Sin hover, el indicador no aporta */
.related__go { display: none; }
}
/* --------------------------------------------------------------------------
W18. CIERRE DE LANDING — LLAMADA SECUNDARIA B2B
El cierre reutiliza íntegramente el componente aprobado .cta.cta--page:
superficie, referencia con punto, titular, banda de nota y botón. Nada de
eso se redefine aquí.
Lo único que el componente no contemplaba es una segunda llamada. La
arquitectura obliga a que las landings de servicio enlacen también a
/para-fabricantes-e-ingenierias/ (§5.1), pero ese destino habla a otro
comprador —OEM, ingeniería, integrador— y no puede competir con la
conversión principal de la página.
Se resuelve como una tercera banda bajo la del botón, separada por el
mismo hairline y alineada a sus mismas columnas, en un registro más bajo:
texto atenuado y enlace de texto con flecha, nunca un segundo botón.
-------------------------------------------------------------------------- */
.cta__b2b {
align-items: baseline;
margin-top: 38px;
padding-top: 32px;
border-top: 1px solid var(--line-soft);
}
.cta__b2b-text {
grid-column: 1 / 7;
max-width: 56ch;
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ink-500);
text-wrap: pretty;
}
/* Mismo eje que el botón: la acción secundaria cae bajo la principal */
.cta__b2b-link {
grid-column: 9 / 13;
justify-self: end;
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 0.9375rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.3;
color: var(--ink-100);
transition: color var(--t-fast) var(--ease);
}
.cta__b2b-link svg {
flex: none;
width: 14px;
transition: transform var(--t-base) var(--ease);
}
.cta__b2b-link:hover { color: var(--cyan); }
.cta__b2b-link:hover svg { transform: translateX(4px); }
@media (max-width: 900px) {
.cta__b2b {
margin-top: 28px;
padding-top: 24px;
row-gap: 18px;
}
.cta__b2b-text,
.cta__b2b-link { grid-column: 1 / -1; }
.cta__b2b-text { max-width: none; }
/* A la izquierda, como el resto del bloque en móvil */
.cta__b2b-link { justify-self: start; }
}
/* --------------------------------------------------------------------------
W19. FOCO DE TECLADO SOBRE SUPERFICIE CLARA — WCAG 1.4.11
CAUSA. El sistema dibuja el foco con --turquoise (#31eeba):
:focus-visible { outline: 2px solid var(--turquoise); } (línea 119)
Sobre navy da 12,75:1 y sobre navy-900 13,15:1, muy por encima del 3:1 que
exige WCAG 1.4.11 para un indicador no textual. Sobre las superficies
claras del sistema no llega:
turquoise vs --white → 1,49:1 ✗
turquoise vs --paper → 1,38:1 ✗
COLOR. Se usa --navy (#070e29), que ya es el color de marca y no necesita
token nuevo:
navy vs --white → 19,02:1 ✓
navy vs --paper → 17,56:1 ✓
Es además el color del propio texto de los enlaces en registro claro, así
que el recuadro lee como parte del componente y no como un elemento ajeno.
ALCANCE. Solo los contextos claros que HOY contienen elementos
focalizables, verificados uno a uno sobre el render de las tres páginas:
.idx /servicios/ 8 enlaces (.idx__link)
.related landings de servicio 3 enlaces (.related__link)
No se añaden selectores preventivos: .about y .sect en la Home, y .mod y
.recovery en las landings, son claras pero no contienen ningún elemento
focalizable. Si una iteración futura introduce uno, debe sumarse aquí.
El selector cuelga de la sección, no del enlace, para que cualquier
elemento focalizable que se añada dentro de esos dos contextos quede
cubierto sin tocar este bloque.
Las superficies oscuras —header, hero, .srv, .maint, .cta, pie— conservan
el turquoise heredado. Esta regla no las alcanza.
-------------------------------------------------------------------------- */
.idx :focus-visible,
.related :focus-visible { outline-color: var(--navy); }
/* --------------------------------------------------------------------------
W19.b FILA COMPLETA DE SERVICIOS RELACIONADOS
W17 apaga el outline del enlace y lo redibuja sobre su pseudoelemento, que
es el que cubre la fila entera: así el recuadro coincide con el área que
realmente se pulsa. Ese outline es otro elemento, de modo que la regla de
arriba no lo alcanza y hay que recolorearlo aquí.
Solo cambia el color. Grosor, offset y geometría siguen siendo los de W17,
que no se modifica. La regla anterior tampoco reactiva el outline del
—W17 lo deja en outline-style: none—, así que no hay recuadro duplicado.
-------------------------------------------------------------------------- */
.related__link:focus-visible::after { outline-color: var(--navy); }
/* --------------------------------------------------------------------------
W20. GESTIÓN DE ALARMAS — ALM.01
Contenido exclusivo de /servicios/hmi-scada/ según
docs/SITE-ARCHITECTURE.md §5.2, que destaca «gestión y centralización de
alarmas» como el argumento que sostiene el objetivo comercial de esa URL.
SUPERFICIE. La landing venía de .phead navy y .srv navy-900. Este bloque
recupera la alternancia sobre --paper, el mismo registro de lectura que ya
usan .about en la Home, .idx en el hub y .mod en Programación PLC. Ningún
color nuevo.
COMPOSICIÓN. Titular y entradilla enfrentados, y tres ejes en filas sobre
la retícula de 12 columnas. La numeración no es aquí una etiqueta mono
sino una cifra grande —el recurso de .about__datum-value en la Home—,
porque sobre superficie clara marca el recorrido de los tres ejes sin
necesidad de más elementos.
Namespace propio y no reutilización de .mod: aquel bloque pertenece a
Programación PLC y su composición responde a otro argumento. Comparten
sistema, no código. Sin elementos focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.alarms {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.alarms__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.alarms__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.alarms__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.alarms__head {
align-items: start;
margin-bottom: 76px;
}
.alarms__title {
grid-column: 1 / 7;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.alarms__intro { grid-column: 8 / 13; }
.alarms__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.alarms__intro p + p { margin-top: 18px; }
.alarms__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* Tres ejes: cifra, identificación y cuerpo sobre la retícula */
.alarms__list { border-top: 1px solid var(--line-dark); }
.alarms__row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
align-items: start;
padding: 38px 0 40px;
border-bottom: 1px solid var(--line-dark);
}
/* Cifra grande, no etiqueta: el recurso del índice de datos de S.02 */
.alarms__num {
grid-column: 1 / 2;
font-size: 2rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1;
letter-spacing: -0.025em;
color: var(--on-light-dim);
}
.alarms__id { grid-column: 2 / 6; }
.alarms__name {
font-size: 1.3125rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--navy);
text-wrap: balance;
}
.alarms__meta {
margin: 12px 0 0;
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-light-dim);
}
/* Columnas 6 a 11: la misma medida de línea que el resto del sistema */
.alarms__body {
grid-column: 6 / 11;
margin: 0;
padding-top: 4px;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
@media (max-width: 900px) {
.alarms { padding: 70px 0 76px; }
.alarms__ref { margin-bottom: 28px; }
.alarms__ref .ref__rule { display: none; }
.alarms__head {
margin-bottom: 36px;
row-gap: 22px;
}
.alarms__title,
.alarms__intro { grid-column: 1 / -1; }
.alarms__title { line-height: 1.1; }
.alarms__intro p { font-size: 0.9375rem; }
.alarms__intro p:first-child { font-size: 1.0625rem; }
.alarms__intro p + p { margin-top: 14px; }
.alarms__row {
grid-template-columns: auto minmax(0, 1fr);
column-gap: 16px;
padding: 24px 0 26px;
}
.alarms__num { grid-column: 1 / 2; font-size: 1.25rem; padding-top: 2px; }
.alarms__id { grid-column: 2 / 3; }
.alarms__name { font-size: 1.0625rem; line-height: 1.24; }
.alarms__meta { margin-top: 8px; }
/* El cuerpo pasa bajo la identificación, alineado con ella */
.alarms__body {
grid-column: 2 / 3;
margin-top: 12px;
padding-top: 0;
font-size: 0.9375rem;
line-height: 1.58;
}
}
/* --------------------------------------------------------------------------
W21. HISTÓRICOS, TENDENCIAS Y PARADAS — HST.01
Contenido exclusivo de /servicios/hmi-scada/ según
docs/SITE-ARCHITECTURE.md §5.2: «históricos, tendencias y contadores» y
«registro de causas de parada».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 · .alarms
paper. Este bloque vuelve al oscuro sobre --navy, que separa con claridad
el registro temporal del bloque de alarmas y devuelve la página a la
superficie con la que abre. Ningún color nuevo.
COMPOSICIÓN. Tres ejes en filas sobre la retícula de 12 columnas, con el
metadato POR ENCIMA del nombre —no debajo, como en .alarms o .maint—.
Leído de arriba abajo, cada fila abre con su etiqueta técnica y luego
nombra el eje: el orden de un registro, que es exactamente lo que el
bloque describe.
Namespace propio y no reutilización de .maint: aquel bloque pertenece a
Programación PLC. Comparten sistema, no código. Sin elementos
focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.history {
position: relative;
padding: 112px 0 124px;
background: var(--navy);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.history__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.history__ref {
margin-bottom: 56px;
color: var(--ink-400);
}
.history__ref .ref__rule { max-width: none; }
.history__head {
align-items: start;
margin-bottom: 76px;
}
.history__title {
grid-column: 1 / 6;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.history__intro { grid-column: 7 / 13; }
.history__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
color: var(--ink-300);
text-wrap: pretty;
}
.history__intro p + p { margin-top: 18px; }
.history__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
}
/* Tres ejes: etiqueta sobre nombre, como el encabezado de un registro */
.history__list { border-top: 1px solid var(--line); }
.history__row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
align-items: start;
padding: 36px 0 38px;
border-bottom: 1px solid var(--line);
}
.history__num {
grid-column: 1 / 2;
padding-top: 4px;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1;
letter-spacing: 0.1em;
color: var(--ink-500);
}
.history__id { grid-column: 2 / 6; }
.history__meta {
margin: 0 0 12px;
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-500);
}
.history__name {
font-size: 1.3125rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--ink-100);
text-wrap: balance;
}
/* Columnas 6 a 11: la misma medida de línea que el resto del sistema */
.history__body {
grid-column: 6 / 11;
margin: 0;
padding-top: 2px;
font-size: 1rem;
line-height: 1.66;
color: var(--ink-300);
text-wrap: pretty;
}
@media (max-width: 900px) {
.history { padding: 70px 0 76px; }
.history__ref { margin-bottom: 28px; }
.history__ref .ref__rule { display: none; }
.history__head {
margin-bottom: 36px;
row-gap: 22px;
}
.history__title,
.history__intro { grid-column: 1 / -1; }
.history__title { line-height: 1.1; }
.history__intro p { font-size: 0.9375rem; }
.history__intro p:first-child { font-size: 1.0625rem; }
.history__intro p + p { margin-top: 14px; }
.history__row {
grid-template-columns: auto minmax(0, 1fr);
column-gap: 16px;
padding: 24px 0 26px;
}
.history__num { grid-column: 1 / 2; padding-top: 3px; font-size: var(--fs-label-sm); }
.history__id { grid-column: 2 / 3; }
.history__meta { margin-bottom: 8px; }
.history__name { font-size: 1.0625rem; line-height: 1.24; }
/* El cuerpo pasa bajo la identificación, alineado con ella */
.history__body {
grid-column: 2 / 3;
margin-top: 12px;
padding-top: 0;
font-size: 0.9375rem;
line-height: 1.58;
}
}
/* --------------------------------------------------------------------------
W22. ESCALA DE SUPERVISIÓN — SUP.01
docs/SITE-ARCHITECTURE.md §5.2 asigna a /servicios/hmi-scada/, como
contenido exclusivo, «el continuo pantalla de máquina → supervisión de
planta». Este bloque lo representa.
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 · .alarms
paper · .history navy. Cierra sobre --white, la superficie clara que
todavía no usaba y que la distingue del paper de .alarms. Ningún color
nuevo.
COMPOSICIÓN. Tres etapas en fila unidas por tramos de hairline entre sus
marcas de registro. Es una ESCALA OPERATIVA, no una topología: los tramos
van de nodo a nodo y el último queda relleno para cerrar el recorrido. No
hay cajas, ni iconos, ni servidores, ni nada que sugiera arquitectura de
comunicaciones, que es de /servicios/integracion-de-sistemas/.
El conector se dibuja con un pseudoelemento de cada etapa que cruza el
medianil hasta la siguiente, de modo que la línea existe entre estaciones
y no como una regla continua bajo todas: así se lee el salto de escala.
Namespace propio, sin reutilizar .alarms ni .history. Sin elementos
focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.supervision {
position: relative;
padding: 112px 0 124px;
background: var(--white);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.supervision__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.supervision__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.supervision__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.supervision__head {
align-items: start;
margin-bottom: 84px;
}
.supervision__title {
grid-column: 1 / 7;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.supervision__intro { grid-column: 8 / 13; }
.supervision__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.supervision__intro p + p { margin-top: 18px; }
.supervision__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* Tres estaciones unidas por tramos de hairline */
.supervision__flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gutter);
}
.supervision__stage {
position: relative;
display: flex;
flex-direction: column;
padding-top: 40px;
}
/* Marca de registro; la última queda rellena: fin del recorrido */
.supervision__stage::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 9px;
height: 9px;
border: 1px solid var(--cyan);
background: var(--white);
}
.supervision__stage:last-child::before { background: var(--cyan); }
/* Tramo hasta la estación siguiente, cruzando el medianil */
.supervision__stage::after {
content: "";
position: absolute;
top: 4px;
left: 9px;
right: calc(-1 * var(--gutter));
height: 1px;
background: var(--line-dark);
}
.supervision__stage:last-child::after { display: none; }
.supervision__num {
display: block;
margin-bottom: 16px;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1;
letter-spacing: 0.1em;
color: var(--on-light-dim);
}
/* Dos líneas reservadas: los tres cuerpos arrancan a la misma altura */
.supervision__name {
min-height: 3.05rem;
margin-bottom: 14px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.22;
letter-spacing: -0.02em;
color: var(--navy);
}
.supervision__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
text-wrap: pretty;
}
/* Anclado al pie: las tres etiquetas arrancan en la misma línea */
.supervision__meta {
margin: 22px 0 0;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--line-dark-soft);
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.7;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--on-light-dim);
}
@media (max-width: 900px) {
.supervision { padding: 70px 0 76px; }
.supervision__ref { margin-bottom: 28px; }
.supervision__ref .ref__rule { display: none; }
.supervision__head {
margin-bottom: 38px;
row-gap: 22px;
}
.supervision__title,
.supervision__intro { grid-column: 1 / -1; }
.supervision__title { line-height: 1.1; }
.supervision__intro p { font-size: 0.9375rem; }
.supervision__intro p:first-child { font-size: 1.0625rem; }
.supervision__intro p + p { margin-top: 14px; }
/* Secuencia vertical: el tramo pasa a unir las estaciones por el costado */
.supervision__flow {
display: block;
column-gap: 0;
}
.supervision__stage {
display: block;
padding-top: 0;
padding-left: 26px;
padding-bottom: 30px;
}
.supervision__stage:last-child { padding-bottom: 0; }
.supervision__stage::before { top: 5px; left: 0; }
.supervision__stage::after {
top: 14px;
left: 4px;
right: auto;
bottom: 0;
width: 1px;
height: auto;
}
.supervision__num { margin-bottom: 10px; }
.supervision__name {
min-height: 0;
margin-bottom: 10px;
font-size: 1.0625rem;
}
.supervision__meta {
margin-top: 16px;
padding-top: 14px;
}
}
/* --------------------------------------------------------------------------
W23. MEJORA DE HMI EXISTENTES — HMI.01
docs/SITE-ARCHITECTURE.md §5.2 incluye «mejora de HMI existentes» entre el
contenido exclusivo de /servicios/hmi-scada/.
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 · .alarms paper
· .history navy · .supervision white. Cierra sobre --paper, encadenando
white → paper. Ningún color nuevo.
COMPOSICIÓN. Aquí el titular NO encabeza el bloque: ocupa un raíl
izquierdo, con su entradilla debajo, y los tres ejes se apilan a su
derecha. Es la única sección de la landing en la que el H2 convive en
horizontal con el contenido, y eso la separa de .alarms —que también es
clara pero encabeza y luego lista—.
Cada eje abre con una línea de registro: numeración a la izquierda y
etiqueta técnica a la derecha, sobre el mismo hairline. Después el nombre
y el texto. Sin comparaciones visuales, sin capturas, sin maquetas de
interfaz: el servicio es funcional, no estético.
Namespace propio, sin reutilizar .alarms. Sin elementos focalizables:
W19 no necesita cambios.
-------------------------------------------------------------------------- */
.hmi-improve {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.hmi-improve__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.hmi-improve__ref {
margin-bottom: 64px;
color: var(--on-light-dim);
}
.hmi-improve__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.hmi-improve__body { align-items: start; }
/* Raíl izquierdo: titular y entradilla */
.hmi-improve__aside { grid-column: 1 / 6; }
.hmi-improve__title {
margin-bottom: 30px;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.hmi-improve__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.hmi-improve__intro p + p { margin-top: 18px; }
.hmi-improve__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* Tres ejes apilados a la derecha del titular */
.hmi-improve__list {
grid-column: 7 / 12;
border-top: 1px solid var(--line-dark);
}
.hmi-improve__row {
padding: 32px 0 34px;
border-bottom: 1px solid var(--line-dark);
}
/* Línea de registro: numeración y etiqueta técnica sobre el mismo eje */
.hmi-improve__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin: 0 0 16px;
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-light-dim);
}
.hmi-improve__num { flex: none; letter-spacing: 0.1em; }
.hmi-improve__meta { text-align: right; }
.hmi-improve__name {
margin-bottom: 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.22;
letter-spacing: -0.02em;
color: var(--navy);
text-wrap: balance;
}
.hmi-improve__text {
margin: 0;
font-size: 1rem;
line-height: 1.64;
text-wrap: pretty;
}
@media (max-width: 900px) {
.hmi-improve { padding: 70px 0 76px; }
.hmi-improve__ref { margin-bottom: 28px; }
.hmi-improve__ref .ref__rule { display: none; }
.hmi-improve__body { row-gap: 36px; }
.hmi-improve__aside,
.hmi-improve__list { grid-column: 1 / -1; }
.hmi-improve__title {
margin-bottom: 20px;
line-height: 1.1;
}
.hmi-improve__intro p { font-size: 0.9375rem; }
.hmi-improve__intro p:first-child { font-size: 1.0625rem; }
.hmi-improve__intro p + p { margin-top: 14px; }
.hmi-improve__row { padding: 24px 0 26px; }
.hmi-improve__head {
gap: 14px;
margin-bottom: 12px;
}
.hmi-improve__name {
margin-bottom: 10px;
font-size: 1.0625rem;
line-height: 1.24;
}
.hmi-improve__text {
font-size: 0.9375rem;
line-height: 1.58;
}
}
/* --------------------------------------------------------------------------
W24. ESTADO ACTIVO — aria-current="location" EN NAVEGACIÓN ANCESTRAL
La navegación marca la página exacta con aria-current="page" y la sección
que contiene a la página actual con aria-current="location" (p. ej.
«Servicios» en /servicios/hmi-scada/). El prototipo solo dibuja el estado
activo para "page" (líneas 1308–1314 y W2), reglas congeladas.
Este bloque replica exactamente esas declaraciones para "location", sin
tocar los selectores originales. Mismos tokens, sin layout ni foco.
.foot__nav no tiene estado activo propio: no requiere equivalente.
-------------------------------------------------------------------------- */
.nav__link[aria-current="location"] { color: var(--white); }
.nav__link[aria-current="location"]::after {
transform: scaleX(1);
background: var(--cyan);
}
.nav-panel a[aria-current="location"] i { color: var(--cyan); }
.foot__legal a[aria-current="location"] { color: var(--ink-300); }
/* --------------------------------------------------------------------------
W25. INTEGRACIÓN MULTI-FABRICANTE — MFB.01
Contenido exclusivo de /servicios/integracion-de-sistemas/ según
docs/SITE-ARCHITECTURE.md §5.3: «arquitectura multi-fabricante», el
diferencial que fija el objetivo comercial de esa URL.
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900. Este bloque
abre la primera superficie clara sobre --paper. Ningún color nuevo.
COMPOSICIÓN. Titular y entradilla enfrentados sobre la retícula de 12
columnas. Debajo, los tres ejes cuelgan de un único bus: una hairline
continua a lo ancho y una derivación vertical hacia cada eje. Aquí sí
corresponde un trazado de comunicaciones —es la URL de integración—, pero
genérico: sin protocolos, equipos ni logos. El único acento cian es el
nodo del segundo eje, donde se decide la compatibilidad.
Se diferencia de .supervision (W22), que une estaciones por tramos
separados y cierra con marca rellena: allí se lee una escala; aquí, varios
equipos colgados de la misma arquitectura.
Namespace propio. Sin elementos focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.multivendor {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.multivendor__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.multivendor__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.multivendor__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.multivendor__head {
align-items: start;
margin-bottom: 88px;
}
.multivendor__title {
grid-column: 1 / 6;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.multivendor__intro { grid-column: 7 / 13; }
.multivendor__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.multivendor__intro p + p { margin-top: 18px; }
.multivendor__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* Bus: hairline continua; cada eje cuelga de él con su derivación */
.multivendor__flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding-top: 36px;
border-top: 1px solid var(--line-dark);
}
/*
* Cada eje ocupa tres filas compartidas (etiqueta, nombre, cuerpo): aunque
* una etiqueta o un nombre partan línea en anchos intermedios, las tres
* columnas siguen alineadas fila a fila.
*/
.multivendor__item {
position: relative;
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: 0;
}
.multivendor__item::before {
content: "";
position: absolute;
top: -36px;
left: 0;
width: 1px;
height: 24px;
background: var(--line-dark);
}
/* Único acento: nodo del eje de compatibilidad, centrado sobre el bus */
.multivendor__item:nth-child(2)::after {
content: "";
position: absolute;
top: -41px;
left: -4px;
width: 9px;
height: 9px;
background: var(--cyan);
}
/* Número y metadato apilados: el mismo patrón en los tres ejes y a todo ancho */
.multivendor__label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin: 0 0 18px;
font-family: var(--font-mono);
line-height: 1.5;
color: var(--on-light-dim);
}
.multivendor__num {
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.multivendor__meta {
font-size: var(--fs-label-sm);
letter-spacing: 0.06em;
text-transform: uppercase;
text-wrap: balance;
}
.multivendor__name {
margin-bottom: 14px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.22;
letter-spacing: -0.02em;
color: var(--navy);
text-wrap: balance;
}
.multivendor__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.62;
text-wrap: pretty;
}
@media (max-width: 900px) {
.multivendor { padding: 70px 0 76px; }
.multivendor__ref { margin-bottom: 28px; }
.multivendor__ref .ref__rule { display: none; }
.multivendor__head {
margin-bottom: 40px;
row-gap: 22px;
}
.multivendor__title,
.multivendor__intro { grid-column: 1 / -1; }
.multivendor__title { line-height: 1.1; }
.multivendor__intro p { font-size: 0.9375rem; }
.multivendor__intro p:first-child { font-size: 1.0625rem; }
.multivendor__intro p + p { margin-top: 14px; }
/* El bus pasa al costado: derivaciones horizontales hacia cada eje */
.multivendor__flow {
display: block;
padding-top: 0;
padding-left: 28px;
border-top: 0;
border-left: 1px solid var(--line-dark);
}
.multivendor__item {
display: block;
padding-bottom: 34px;
}
.multivendor__item:last-child { padding-bottom: 0; }
.multivendor__item::before {
top: 9px;
left: -28px;
width: 18px;
height: 1px;
}
.multivendor__item:nth-child(2)::after {
top: 5px;
left: -33px;
}
.multivendor__label { margin-bottom: 12px; }
.multivendor__name {
margin-bottom: 10px;
font-size: 1.0625rem;
}
}
/* --------------------------------------------------------------------------
W26. PROTOCOLOS Y CRITERIO DE SELECCIÓN — COM.01
Contenido exclusivo de /servicios/integracion-de-sistemas/ según
docs/SITE-ARCHITECTURE.md §5.3: «protocolos y cuándo usar cada uno». Las
fuentes no documentan un criterio individual por protocolo; el bloque
muestra los documentados y el criterio de selección que sí lo está.
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 ·
.multivendor paper. Este bloque vuelve al oscuro sobre --navy: panel
técnico tras la superficie clara. Ningún color nuevo.
COMPOSICIÓN. Matriz sobre la retícula de 12 columnas: a la izquierda, el
panel de protocolos como registro compacto de filas mono; en el centro, un
bus vertical abstracto con un único nodo cian; a la derecha, los tres
criterios de selección. El bus NO une protocolos entre sí ni con los
criterios: no representa ninguna arquitectura real.
Namespace propio. Sin elementos focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.comms {
position: relative;
padding: 112px 0 124px;
background: var(--navy);
color: var(--ink-300);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.comms__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.comms__ref {
margin-bottom: 56px;
color: var(--ink-400);
}
.comms__ref .ref__rule { max-width: none; }
.comms__head {
align-items: start;
margin-bottom: 84px;
}
.comms__title {
grid-column: 1 / 6;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.comms__intro { grid-column: 7 / 13; }
.comms__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
color: var(--ink-300);
text-wrap: pretty;
}
.comms__intro p + p { margin-top: 18px; }
.comms__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
}
/* Matriz: panel de protocolos · bus · criterios */
.comms__matrix { align-items: stretch; }
.comms__protocols { grid-column: 1 / 6; }
.comms__label {
margin: 0 0 14px;
color: var(--ink-500);
}
.comms__note {
margin: 0 0 22px;
font-size: 0.875rem;
line-height: 1.6;
color: var(--ink-400);
text-wrap: pretty;
}
/* Registro de protocolos: dos columnas de filas mono, sin fichas */
.comms__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
border-top: 1px solid var(--line);
}
.comms__protocol {
display: flex;
flex-direction: column;
gap: 8px;
padding: 15px 0 14px;
border-bottom: 1px solid var(--line);
}
.comms__protocol-name {
font-family: var(--font-mono);
font-size: 0.9375rem;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--ink-100);
}
/* Protocolo con función documentada: ocupa la fila completa */
.comms__protocol--detail {
grid-column: 1 / -1;
padding-top: 22px;
padding-bottom: 20px;
}
.comms__protocol-meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-500);
}
.comms__protocol-note {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ink-300);
text-wrap: pretty;
}
/* Bus vertical abstracto con un único nodo en su arranque */
.comms__bus {
position: relative;
grid-column: 6 / 7;
justify-self: center;
width: 1px;
background: var(--line);
}
.comms__bus::before {
content: "";
position: absolute;
top: 0;
left: -4px;
width: 9px;
height: 9px;
background: var(--cyan);
}
.comms__criteria {
grid-column: 7 / 13;
margin: 0;
border-top: 1px solid var(--line);
}
.comms__criterion {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
padding: 26px 0 28px;
border-bottom: 1px solid var(--line);
}
.comms__num {
padding-top: 3px;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1;
letter-spacing: 0.1em;
color: var(--ink-500);
}
.comms__meta {
margin: 0 0 10px;
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-500);
}
.comms__name {
margin-bottom: 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.22;
letter-spacing: -0.02em;
color: var(--ink-100);
text-wrap: balance;
}
.comms__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.62;
color: var(--ink-300);
text-wrap: pretty;
}
@media (max-width: 900px) {
.comms { padding: 70px 0 76px; }
.comms__ref { margin-bottom: 28px; }
.comms__ref .ref__rule { display: none; }
.comms__head {
margin-bottom: 40px;
row-gap: 22px;
}
.comms__title,
.comms__intro { grid-column: 1 / -1; }
.comms__title { line-height: 1.1; }
.comms__intro p { font-size: 0.9375rem; }
.comms__intro p:first-child { font-size: 1.0625rem; }
.comms__intro p + p { margin-top: 14px; }
.comms__protocols,
.comms__criteria { grid-column: 1 / -1; }
/* El bus pasa a hairline horizontal y hace de borde superior de los criterios */
.comms__bus {
grid-column: 1 / -1;
justify-self: stretch;
width: auto;
height: 1px;
margin: 44px 0 0;
}
.comms__bus::before {
top: -4px;
left: 0;
}
.comms__criteria { border-top: 0; }
.comms__criterion {
grid-template-columns: 34px minmax(0, 1fr);
padding: 22px 0 24px;
}
.comms__name {
margin-bottom: 10px;
font-size: 1.0625rem;
}
}
/* --------------------------------------------------------------------------
W27. AUTOMATIZACIÓN CON BASES DE DATOS, MES Y ERP — DAT.01
Contenido exclusivo de /servicios/integracion-de-sistemas/ según
docs/SITE-ARCHITECTURE.md §5.3: «conexión con bases de datos, MES y ERP».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 ·
.multivendor paper · .comms navy. Este bloque vuelve a claro sobre
--white, que la distingue del paper de .multivendor. Ningún color nuevo.
COMPOSICIÓN. Tres bandas horizontales a lo ancho de la retícula, una por
nivel: origen de la información, intercambio y sistemas de nivel superior.
Un montante vertical une las marcas de las tres bandas y cruza las
hairlines en ángulo recto; la marca del nivel de intercambio es el único
acento cian. Es una abstracción: no reproduce el diagrama N2–N4 de la Home
ni dibuja una arquitectura concreta.
Namespace propio. Sin elementos focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.dataflow {
position: relative;
padding: 112px 0 124px;
background: var(--white);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.dataflow__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.dataflow__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.dataflow__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.dataflow__head {
align-items: start;
margin-bottom: 84px;
}
.dataflow__title {
grid-column: 1 / 6;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.dataflow__intro { grid-column: 7 / 13; }
.dataflow__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.dataflow__intro p + p { margin-top: 18px; }
.dataflow__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* Tres bandas de nivel */
.dataflow__levels {
margin: 0;
border-top: 1px solid var(--line-dark);
}
.dataflow__level {
position: relative;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
align-items: start;
padding: 34px 0 38px;
border-bottom: 1px solid var(--line-dark);
}
/* Montante: une la marca de cada banda con la siguiente */
.dataflow__level::before {
content: "";
position: absolute;
top: 0;
bottom: -1px;
left: 4px;
width: 1px;
background: var(--line-dark);
}
.dataflow__level:first-child::before { top: 40px; }
.dataflow__level:last-child::before {
bottom: auto;
height: 40px;
}
/* Marca de nivel; la del intercambio es el único acento */
.dataflow__level::after {
content: "";
position: absolute;
top: 36px;
left: 0;
width: 9px;
height: 9px;
border: 1px solid var(--line-dark);
background: var(--white);
box-sizing: border-box;
}
.dataflow__level:nth-child(2)::after {
border-color: var(--cyan);
background: var(--cyan);
}
.dataflow__tag {
grid-column: 1 / 4;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0;
padding-left: 30px;
font-family: var(--font-mono);
line-height: 1;
color: var(--on-light-dim);
}
.dataflow__num {
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.dataflow__meta {
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.dataflow__name {
grid-column: 4 / 8;
font-size: 1.3125rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--navy);
text-wrap: balance;
}
.dataflow__body {
grid-column: 8 / 13;
margin: 0;
padding-top: 2px;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
@media (max-width: 900px) {
.dataflow { padding: 70px 0 76px; }
.dataflow__ref { margin-bottom: 28px; }
.dataflow__ref .ref__rule { display: none; }
.dataflow__head {
margin-bottom: 40px;
row-gap: 22px;
}
.dataflow__title,
.dataflow__intro { grid-column: 1 / -1; }
.dataflow__title { line-height: 1.1; }
.dataflow__intro p { font-size: 0.9375rem; }
.dataflow__intro p:first-child { font-size: 1.0625rem; }
.dataflow__intro p + p { margin-top: 14px; }
/* Las bandas se apilan; el montante sigue en el costado */
.dataflow__level {
display: block;
padding: 26px 0 30px 30px;
}
.dataflow__level:first-child::before { top: 32px; }
.dataflow__level:last-child::before { height: 32px; }
.dataflow__level::after { top: 28px; }
.dataflow__tag {
padding-left: 0;
margin-bottom: 14px;
}
.dataflow__name {
margin-bottom: 10px;
font-size: 1.0625rem;
line-height: 1.24;
}
.dataflow__body {
padding-top: 0;
font-size: 0.9375rem;
}
}
/* --------------------------------------------------------------------------
W28. DATOS DE MÁQUINAS ANTIGUAS — DAT.02
Contenido exclusivo de /servicios/integracion-de-sistemas/ según
docs/SITE-ARCHITECTURE.md §5.3: «obtener datos de máquinas antiguas»,
con Industria 4.0 e IIoT como contexto subordinado, nunca como enfoque.
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 ·
.multivendor paper · .comms navy · .dataflow white. Este bloque vuelve al
oscuro sobre --navy-900. Ningún color nuevo.
COMPOSICIÓN. Cabecera enfrentada y, debajo, dos zonas: a la izquierda un
registro de lectura con los ejemplos de información —filas mono con una
marca corta, como un listado de señales—; a la derecha los tres pasos,
unidos por un trazo vertical con una marca por paso. El único acento cian
es la marca del paso 02, donde se identifica la información disponible.
Cierra una franja de contexto, sin heading, para Industria 4.0 e IIoT.
Sin máquina dibujada, iconos ni fichas.
Namespace propio. Sin elementos focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.legacy-data {
position: relative;
padding: 112px 0 124px;
background: var(--navy-900);
color: var(--ink-300);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.legacy-data__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.legacy-data__ref {
margin-bottom: 56px;
color: var(--ink-400);
}
.legacy-data__ref .ref__rule { max-width: none; }
.legacy-data__head {
align-items: start;
margin-bottom: 84px;
}
.legacy-data__title {
grid-column: 1 / 6;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.legacy-data__intro { grid-column: 7 / 13; }
.legacy-data__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
color: var(--ink-300);
text-wrap: pretty;
}
.legacy-data__intro p + p { margin-top: 18px; }
.legacy-data__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
}
.legacy-data__body { align-items: start; }
/* Registro de lectura: ejemplos de información */
.legacy-data__signals { grid-column: 1 / 5; }
.legacy-data__signals-label {
margin: 0 0 16px;
color: var(--ink-500);
}
.legacy-data__signal-list {
margin: 0;
border-top: 1px solid var(--line);
}
.legacy-data__signal {
position: relative;
padding: 14px 0 13px 26px;
border-bottom: 1px solid var(--line-soft);
font-family: var(--font-mono);
font-size: 0.875rem;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--ink-100);
}
/* Marca de lectura: trazo corto antes de cada señal */
.legacy-data__signal::before {
content: "";
position: absolute;
top: calc(14px + 0.7em);
left: 0;
width: 14px;
height: 1px;
background: var(--ink-700);
}
.legacy-data__signals-note {
margin: 16px 0 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--ink-400);
text-wrap: pretty;
}
/* Pasos: trazo vertical con una marca por paso */
.legacy-data__steps {
grid-column: 6 / 13;
margin: 0;
padding-left: 34px;
}
.legacy-data__step {
position: relative;
padding-bottom: 44px;
}
.legacy-data__step:last-child { padding-bottom: 0; }
.legacy-data__step::before {
content: "";
position: absolute;
top: 6px;
bottom: -6px;
left: -30px;
width: 1px;
background: var(--line);
}
.legacy-data__step:last-child::before { display: none; }
.legacy-data__step::after {
content: "";
position: absolute;
top: 2px;
left: -34px;
width: 9px;
height: 9px;
border: 1px solid var(--ink-700);
background: var(--navy-900);
box-sizing: border-box;
}
.legacy-data__step:nth-child(2)::after {
border-color: var(--cyan);
background: var(--cyan);
}
.legacy-data__tag {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 0 14px;
font-family: var(--font-mono);
line-height: 1;
color: var(--ink-500);
}
.legacy-data__num {
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.legacy-data__meta {
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.legacy-data__name {
margin-bottom: 12px;
font-size: 1.3125rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--ink-100);
text-wrap: balance;
}
.legacy-data__text {
margin: 0;
max-width: 62ch;
font-size: 1rem;
line-height: 1.66;
color: var(--ink-300);
text-wrap: pretty;
}
/* Contexto subordinado: franja sin heading */
.legacy-data__context {
align-items: baseline;
margin-top: 84px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
.legacy-data__context-label {
grid-column: 1 / 5;
margin: 0;
color: var(--ink-500);
text-transform: none;
}
.legacy-data__context-text {
grid-column: 6 / 13;
margin: 0;
max-width: 62ch;
padding-left: 34px;
font-size: 0.9375rem;
line-height: 1.62;
color: var(--ink-400);
text-wrap: pretty;
}
@media (max-width: 900px) {
.legacy-data { padding: 70px 0 76px; }
.legacy-data__ref { margin-bottom: 28px; }
.legacy-data__ref .ref__rule { display: none; }
.legacy-data__head {
margin-bottom: 40px;
row-gap: 22px;
}
.legacy-data__title,
.legacy-data__intro { grid-column: 1 / -1; }
.legacy-data__title { line-height: 1.1; }
.legacy-data__intro p { font-size: 0.9375rem; }
.legacy-data__intro p:first-child { font-size: 1.0625rem; }
.legacy-data__intro p + p { margin-top: 14px; }
.legacy-data__body { row-gap: 44px; }
.legacy-data__signals,
.legacy-data__steps { grid-column: 1 / -1; }
/* Dos columnas de señales mientras el ancho lo permite */
.legacy-data__signal-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--gutter);
}
.legacy-data__step { padding-bottom: 34px; }
.legacy-data__name {
margin-bottom: 10px;
font-size: 1.0625rem;
line-height: 1.24;
}
.legacy-data__text { font-size: 0.9375rem; }
.legacy-data__context {
margin-top: 48px;
padding-top: 22px;
row-gap: 10px;
}
.legacy-data__context-label,
.legacy-data__context-text { grid-column: 1 / -1; }
.legacy-data__context-text { padding-left: 0; }
}
@media (max-width: 480px) {
.legacy-data__signal-list { display: block; }
}
/* --------------------------------------------------------------------------
W29. MARCO DE DECISIÓN DEL RETROFIT — DEC.01
Contenido exclusivo de /servicios/retrofit-maquinaria/ según
docs/SITE-ARCHITECTURE.md §5.4: «marco de decisión retrofit vs máquina
nueva» y «qué puede conservarse y qué debe renovarse».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900. Este bloque
abre la primera superficie clara sobre --paper. Ningún color nuevo.
COMPOSICIÓN. Titular y entradilla enfrentados. Debajo, los tres criterios
bajo un mismo trazo en corchete que abarca de lo que se conserva a lo que se
renueva; el criterio central —lo que limita la instalación— queda
enmarcado por dos hairlines verticales y marcado con el único nodo cian,
centrado sobre el trazo: es el punto donde se decide. No es un antes/después
ni un semáforo: ningún color distingue conservar de renovar.
En móvil el corchete pasa al costado izquierdo y el nodo acompaña al
criterio central.
Namespace propio. Sin elementos focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.retrofit-decision {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.retrofit-decision__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.retrofit-decision__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.retrofit-decision__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.retrofit-decision__head {
align-items: start;
margin-bottom: 92px;
}
.retrofit-decision__title {
grid-column: 1 / 6;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.retrofit-decision__intro { grid-column: 7 / 13; }
.retrofit-decision__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.retrofit-decision__intro p + p { margin-top: 18px; }
.retrofit-decision__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* Tres criterios bajo un mismo corchete */
.retrofit-decision__grid {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding-top: 52px;
}
/* Corchete: trazo superior con remates verticales en ambos extremos */
.retrofit-decision__grid::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 14px;
border: 1px solid var(--line-dark);
border-bottom: 0;
}
/* Filas compartidas: etiqueta, nombre y cuerpo alineados entre columnas */
.retrofit-decision__item {
position: relative;
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: 0;
}
/* Criterio central: enmarcado y marcado como punto de decisión */
.retrofit-decision__item:nth-child(2) {
padding: 0 28px;
border-left: 1px solid var(--line-dark-soft);
border-right: 1px solid var(--line-dark-soft);
}
.retrofit-decision__item:nth-child(2)::before {
content: "";
position: absolute;
top: -56px;
left: 50%;
width: 9px;
height: 9px;
background: var(--cyan);
transform: translateX(-50%);
}
.retrofit-decision__item:nth-child(2)::after {
content: "";
position: absolute;
top: -52px;
left: 50%;
width: 1px;
height: 34px;
background: var(--line-dark);
}
.retrofit-decision__label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 0 16px;
font-family: var(--font-mono);
line-height: 1;
color: var(--on-light-dim);
}
.retrofit-decision__num {
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.retrofit-decision__meta {
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.retrofit-decision__name {
margin-bottom: 14px;
font-size: 1.3125rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--navy);
text-wrap: balance;
}
.retrofit-decision__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.64;
text-wrap: pretty;
}
@media (max-width: 900px) {
.retrofit-decision { padding: 70px 0 76px; }
.retrofit-decision__ref { margin-bottom: 28px; }
.retrofit-decision__ref .ref__rule { display: none; }
.retrofit-decision__head {
margin-bottom: 40px;
row-gap: 22px;
}
.retrofit-decision__title,
.retrofit-decision__intro { grid-column: 1 / -1; }
.retrofit-decision__title { line-height: 1.1; }
.retrofit-decision__intro p { font-size: 0.9375rem; }
.retrofit-decision__intro p:first-child { font-size: 1.0625rem; }
.retrofit-decision__intro p + p { margin-top: 14px; }
/* El corchete pasa al costado: remates arriba y abajo */
.retrofit-decision__grid {
display: block;
padding: 4px 0 4px 34px;
}
.retrofit-decision__grid::before {
top: 0;
bottom: 0;
left: 0;
right: auto;
width: 14px;
height: auto;
border: 1px solid var(--line-dark);
border-right: 0;
}
.retrofit-decision__item {
display: block;
padding-bottom: 34px;
}
.retrofit-decision__item:last-child { padding-bottom: 0; }
.retrofit-decision__item:nth-child(2) {
padding: 28px 0 34px;
border-left: 0;
border-right: 0;
border-top: 1px solid var(--line-dark-soft);
border-bottom: 1px solid var(--line-dark-soft);
margin-bottom: 34px;
}
/* Nodo y derivación horizontal desde el corchete hacia el criterio central */
.retrofit-decision__item:nth-child(2)::before {
top: 29px;
left: -34px;
transform: translateX(-4px);
}
.retrofit-decision__item:nth-child(2)::after {
top: 33px;
left: -34px;
width: 24px;
height: 1px;
}
.retrofit-decision__label { margin-bottom: 12px; }
.retrofit-decision__name {
margin-bottom: 10px;
font-size: 1.0625rem;
line-height: 1.24;
}
}
/* --------------------------------------------------------------------------
W30. QUÉ PUEDE INCLUIR UN RETROFIT — RFT.01
Contenido exclusivo de /servicios/retrofit-maquinaria/ según
docs/SITE-ARCHITECTURE.md §5.4: «alcance completo de un retrofit».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 ·
.retrofit-decision paper. Este bloque vuelve al oscuro sobre --navy.
Ningún color nuevo.
COMPOSICIÓN. Mapa de intervención, no secuencia. Las cuatro áreas forman
una retícula 2×2 cerrada arriba y abajo por un hairline y dividida por un
trazado ortogonal común: el eje vertical actúa como bus, con una marca por
fila y una derivación corta hacia cada área. El único nodo cian se sitúa en
el cruce de los dos ejes: el sistema modernizado como conjunto. Sin fichas,
sin máquina dibujada y sin un color por área.
En móvil las áreas se apilan y el trazado pasa a un bus lateral que nace
en el nodo cian.
Namespace propio. Sin elementos focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.retrofit-scope {
position: relative;
padding: 112px 0 124px;
background: var(--navy);
color: var(--ink-300);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.retrofit-scope__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.retrofit-scope__ref {
margin-bottom: 56px;
color: var(--ink-400);
}
.retrofit-scope__ref .ref__rule { max-width: none; }
.retrofit-scope__head {
align-items: start;
margin-bottom: 84px;
}
.retrofit-scope__title {
grid-column: 1 / 6;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.retrofit-scope__intro { grid-column: 7 / 13; }
.retrofit-scope__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
color: var(--ink-300);
text-wrap: pretty;
}
.retrofit-scope__intro p + p { margin-top: 18px; }
.retrofit-scope__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
}
/* Mapa 2×2: marco superior e inferior; filas compartidas entre columnas */
.retrofit-scope__map {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.retrofit-scope__area {
position: relative;
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: 0;
padding: 48px 0 52px;
}
/* Trazado común: eje vertical (bus) y eje horizontal entre filas */
.retrofit-scope__area:nth-child(odd) {
padding-right: 64px;
border-right: 1px solid var(--line);
}
.retrofit-scope__area:nth-child(even) { padding-left: 64px; }
.retrofit-scope__area:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
/* Marca de fila sobre el bus */
.retrofit-scope__area:nth-child(odd)::before {
content: "";
position: absolute;
z-index: 1;
top: 50px;
right: -5px;
width: 9px;
height: 9px;
border: 1px solid var(--ink-700);
background: var(--navy);
box-sizing: border-box;
}
/* Nodo único: el cruce de los dos ejes */
.retrofit-scope__area:first-child::after {
content: "";
position: absolute;
z-index: 1;
right: -5px;
bottom: -5px;
width: 9px;
height: 9px;
background: var(--cyan);
}
.retrofit-scope__label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 0 16px;
font-family: var(--font-mono);
line-height: 1;
color: var(--ink-500);
}
/* Derivación corta desde el bus hacia cada área */
.retrofit-scope__label::before {
content: "";
position: absolute;
top: 54px;
width: 36px;
height: 1px;
background: var(--line);
}
.retrofit-scope__area:nth-child(odd) .retrofit-scope__label::before { right: 0; }
.retrofit-scope__area:nth-child(even) .retrofit-scope__label::before { left: 0; }
.retrofit-scope__num {
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.retrofit-scope__meta {
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.retrofit-scope__name {
margin-bottom: 14px;
font-size: 1.3125rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--ink-100);
text-wrap: balance;
}
.retrofit-scope__body {
margin: 0;
max-width: 62ch;
font-size: 0.9375rem;
line-height: 1.64;
color: var(--ink-300);
text-wrap: pretty;
}
@media (max-width: 900px) {
.retrofit-scope { padding: 70px 0 76px; }
.retrofit-scope__ref { margin-bottom: 28px; }
.retrofit-scope__ref .ref__rule { display: none; }
.retrofit-scope__head {
margin-bottom: 40px;
row-gap: 22px;
}
.retrofit-scope__title,
.retrofit-scope__intro { grid-column: 1 / -1; }
.retrofit-scope__title { line-height: 1.1; }
.retrofit-scope__intro p { font-size: 0.9375rem; }
.retrofit-scope__intro p:first-child { font-size: 1.0625rem; }
.retrofit-scope__intro p + p { margin-top: 14px; }
/* Bus lateral que nace en el nodo cian */
.retrofit-scope__map {
position: relative;
display: block;
padding: 0 0 0 34px;
border-top: 0;
border-bottom: 0;
}
.retrofit-scope__map::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 4px;
width: 1px;
background: var(--line);
}
.retrofit-scope__map::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 9px;
height: 9px;
background: var(--cyan);
}
.retrofit-scope__area,
.retrofit-scope__area:nth-child(odd),
.retrofit-scope__area:nth-child(even) {
display: block;
padding: 28px 0 32px;
border: 0;
}
.retrofit-scope__area + .retrofit-scope__area { border-top: 1px solid var(--line-soft); }
.retrofit-scope__area:last-child { padding-bottom: 0; }
.retrofit-scope__area:first-child::after { display: none; }
/* Marca por área sobre el bus */
.retrofit-scope__area:nth-child(odd)::before,
.retrofit-scope__area:nth-child(even)::before {
content: "";
position: absolute;
z-index: 1;
top: 30px;
right: auto;
left: -34px;
width: 9px;
height: 9px;
border: 1px solid var(--ink-700);
background: var(--navy);
box-sizing: border-box;
}
.retrofit-scope__label::before,
.retrofit-scope__area:nth-child(odd) .retrofit-scope__label::before,
.retrofit-scope__area:nth-child(even) .retrofit-scope__label::before {
top: 34px;
right: auto;
left: -25px;
width: 17px;
}
.retrofit-scope__label { margin-bottom: 12px; }
.retrofit-scope__name {
margin-bottom: 10px;
font-size: 1.0625rem;
line-height: 1.24;
}
}
/* --------------------------------------------------------------------------
W31. AMPLIACIÓN DE UNA MÁQUINA EXISTENTE — AMP.01
Contenido exclusivo de /servicios/retrofit-maquinaria/ según
docs/SITE-ARCHITECTURE.md §5.4: «ampliación de máquina con nuevos equipos».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 ·
.retrofit-decision paper · .retrofit-scope navy. Este bloque abre sobre
--white. Ningún color nuevo.
COMPOSICIÓN. Base existente + ampliación, no antes/después. Un trazo
continuo recorre la composición como la instalación que ya funciona; la
necesidad (01) y la adaptación (03) cuelgan de él con derivaciones
sólidas. Lo nuevo (02) se dibuja como un módulo en trazo discontinuo,
convención de plano para lo que se añade, unido a la base por una
derivación también discontinua. El único nodo cian marca el punto donde lo
nuevo se integra en lo existente. Sin máquina dibujada ni fichas.
En móvil el trazo base pasa al costado izquierdo y el módulo discontinuo
se deriva lateralmente desde él.
Namespace propio. Sin elementos focalizables: W19 no necesita cambios.
-------------------------------------------------------------------------- */
.machine-expansion {
position: relative;
padding: 112px 0 124px;
background: var(--white);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.machine-expansion__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.machine-expansion__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.machine-expansion__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.machine-expansion__head {
align-items: start;
margin-bottom: 92px;
}
.machine-expansion__title {
grid-column: 1 / 6;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.machine-expansion__intro { grid-column: 7 / 13; }
.machine-expansion__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.machine-expansion__intro p + p { margin-top: 18px; }
.machine-expansion__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* Trazo base: la instalación existente que continúa */
.machine-expansion__layout {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding-top: 52px;
}
.machine-expansion__layout::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--on-light-dim);
opacity: 0.45;
}
/* Filas compartidas: etiqueta, nombre y cuerpo alineados entre columnas */
.machine-expansion__item {
position: relative;
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: 0;
padding: 28px 0 28px;
}
/* Toma sobre la base y derivación sólida hacia el eje */
.machine-expansion__item::before {
content: "";
position: absolute;
z-index: 1;
top: -56px;
left: -4px;
width: 9px;
height: 9px;
border: 1px solid var(--on-light-dim);
background: var(--white);
box-sizing: border-box;
}
.machine-expansion__item::after {
content: "";
position: absolute;
top: -51px;
left: 0;
width: 1px;
height: 69px;
background: var(--line-dark);
}
/* Lo nuevo: módulo discontinuo, derivación discontinua y punto de integración */
.machine-expansion__item:nth-child(2) {
padding: 27px 28px 27px;
border: 1px dashed rgba(7, 14, 41, 0.34);
}
.machine-expansion__item:nth-child(2)::before {
top: -57px;
left: 24px;
border: 0;
background: var(--cyan);
}
.machine-expansion__item:nth-child(2)::after {
top: -52px;
left: 28px;
width: 0;
height: 52px;
border-left: 1px dashed rgba(7, 14, 41, 0.34);
background: none;
}
.machine-expansion__label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 0 16px;
font-family: var(--font-mono);
line-height: 1;
color: var(--on-light-dim);
}
.machine-expansion__num {
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.machine-expansion__meta {
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.machine-expansion__name {
margin-bottom: 14px;
font-size: 1.3125rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--navy);
text-wrap: balance;
}
.machine-expansion__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.64;
text-wrap: pretty;
}
@media (max-width: 900px) {
.machine-expansion { padding: 70px 0 76px; }
.machine-expansion__ref { margin-bottom: 28px; }
.machine-expansion__ref .ref__rule { display: none; }
.machine-expansion__head {
margin-bottom: 40px;
row-gap: 22px;
}
.machine-expansion__title,
.machine-expansion__intro { grid-column: 1 / -1; }
.machine-expansion__title { line-height: 1.1; }
.machine-expansion__intro p { font-size: 0.9375rem; }
.machine-expansion__intro p:first-child { font-size: 1.0625rem; }
.machine-expansion__intro p + p { margin-top: 14px; }
/* La base pasa al costado izquierdo */
.machine-expansion__layout {
display: block;
padding: 0 0 0 34px;
}
.machine-expansion__layout::before {
top: 0;
bottom: 0;
left: 4px;
right: auto;
width: 1px;
height: auto;
}
.machine-expansion__item {
display: block;
padding: 0 0 34px;
}
.machine-expansion__item:last-child { padding-bottom: 0; }
.machine-expansion__item::before {
top: 2px;
left: -34px;
}
.machine-expansion__item::after {
top: 6px;
left: -25px;
width: 17px;
height: 1px;
}
/* El módulo nuevo se deriva lateralmente desde la base */
.machine-expansion__item:nth-child(2) {
padding: 22px 20px 24px;
margin-bottom: 34px;
}
.machine-expansion__item:nth-child(2)::before {
top: 24px;
left: -35px;
}
.machine-expansion__item:nth-child(2)::after {
top: 28px;
left: -30px;
width: 29px;
height: 0;
border-left: 0;
border-top: 1px dashed rgba(7, 14, 41, 0.34);
}
.machine-expansion__label { margin-bottom: 12px; }
.machine-expansion__name {
margin-bottom: 10px;
font-size: 1.0625rem;
line-height: 1.24;
}
}
/* --------------------------------------------------------------------------
W32. CÓMO SE PLANTEA UNA MIGRACIÓN DE PLC — MIG.01
Contenido exclusivo de /servicios/migracion-plc/ según
docs/SITE-ARCHITECTURE.md §5.5: «método de migración».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900. Este bloque
abre la primera superficie clara sobre --paper, con el contraste fuerte
navy-900 → paper. Ningún color nuevo.
COMPOSICIÓN. Análisis de dependencias, no sustitución de un equipo por
otro. Los cuatro ejes cuelgan de un único bus técnico horizontal: el bus
cruza la composición completa, cada eje deriva de él por una caída corta y
una marca cuadrada señala el punto de toma. El único nodo cian está en el
tercer eje, donde el análisis se convierte en alcance de migración. No hay
fichas independientes, no hay dos PLC enfrentados y no hay un color por
eje: nada sugiere equivalencia ni reemplazo directo.
En móvil el bus gira a vertical sobre el costado izquierdo, los ejes se
apilan y cada marca acompaña a su eje; la geometría de escritorio no se
arrastra.
Namespace propio. Sin elementos focalizables: W19 y W24 no cambian.
-------------------------------------------------------------------------- */
.migration-method {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.migration-method__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.migration-method__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.migration-method__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
/* --- Titular y entradilla enfrentados --- */
.migration-method__head {
row-gap: 28px;
margin-bottom: 96px;
}
.migration-method__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.migration-method__intro { grid-column: 7 / 13; }
.migration-method__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.migration-method__intro p + p { margin-top: 18px; }
.migration-method__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* --- Bus horizontal con cuatro puntos de análisis --- */
.migration-method__map {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding: 0;
padding-top: 46px;
list-style: none;
}
/* El bus: un solo trazo que cruza la composición completa */
.migration-method__map::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--line-dark);
}
.migration-method__item {
position: relative;
padding-right: 20px;
}
/* Caída desde el bus hasta el eje */
.migration-method__item::before {
content: "";
position: absolute;
top: -46px;
left: 0;
width: 1px;
height: 46px;
background: var(--line-dark-soft);
}
/* Marca cuadrada en el punto de toma sobre el bus */
.migration-method__item::after {
content: "";
position: absolute;
top: -49px;
left: -2px;
width: 5px;
height: 5px;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--on-light-dim);
}
/* Único acento: donde el análisis se convierte en alcance de migración */
.migration-method__item:nth-child(3)::before { background: var(--cyan); }
.migration-method__item:nth-child(3)::after {
background: var(--cyan);
box-shadow: none;
}
.migration-method__label {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
color: var(--on-light-dim);
}
.migration-method__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.migration-method__meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.migration-method__name {
margin: 0 0 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--navy);
text-wrap: balance;
}
.migration-method__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.66;
text-wrap: pretty;
}
/* --- Tablet: dos columnas. La segunda fila toma su propio tramo de bus,
para que la marca cian del tercer eje no desaparezca --- */
@media (max-width: 1024px) {
.migration-method__map {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.migration-method__item:nth-child(n+3) {
margin-top: 60px;
padding-top: 46px;
border-top: 1px solid var(--line-dark);
}
/* La caída cuelga dentro del propio relleno; la marca se apoya en el borde */
.migration-method__item:nth-child(n+3)::before {
top: 0;
height: 46px;
}
.migration-method__item:nth-child(n+3)::after { top: -3px; }
}
/* --- Móvil: el bus gira a vertical sobre el costado --- */
@media (max-width: 900px) {
.migration-method { padding: 88px 0 96px; }
.migration-method__head {
row-gap: 20px;
margin-bottom: 64px;
}
.migration-method__title,
.migration-method__intro { grid-column: 1 / -1; }
.migration-method__map {
grid-template-columns: 1fr;
row-gap: 0;
padding-top: 0;
padding-left: 30px;
}
/* El bus pasa a vertical y recorre los cuatro ejes */
.migration-method__map::before {
top: 10px;
bottom: 10px;
left: 0;
right: auto;
width: 1px;
height: auto;
}
.migration-method__item,
.migration-method__item:nth-child(n+3) {
margin-top: 0;
padding: 0 0 40px;
border-top: 0;
}
.migration-method__item:last-child { padding-bottom: 0; }
/* Derivación corta desde el bus hacia cada eje */
.migration-method__item::before,
.migration-method__item:nth-child(n+3)::before {
display: block;
top: 10px;
left: -30px;
width: 18px;
height: 1px;
background: var(--line-dark-soft);
}
.migration-method__item::after,
.migration-method__item:nth-child(n+3)::after {
display: block;
top: 8px;
left: -32px;
}
.migration-method__item:nth-child(3)::before { background: var(--cyan); }
}
@media (max-width: 520px) {
.migration-method__map { padding-left: 24px; }
.migration-method__item::before,
.migration-method__item:nth-child(n+3)::before {
left: -24px;
width: 14px;
}
.migration-method__item::after,
.migration-method__item:nth-child(n+3)::after { left: -26px; }
.migration-method__name { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
W33. IMPACTO DE UNA MIGRACIÓN SOBRE LA PRODUCCIÓN — PRD.01
Contenido exclusivo de /servicios/migracion-plc/ según
docs/SITE-ARCHITECTURE.md §5.5: «minimización del impacto sobre producción».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 ·
.migration-method paper. Este bloque vuelve al oscuro sobre --navy.
Ningún color nuevo.
COMPOSICIÓN. Ventana de intervención, no cronograma. Un único trazado
recorre los tres criterios y da un escalón: discurre alto sobre los dos
primeros —lo que puede resolverse antes— y baja un peldaño en el tercero,
donde se interviene sobre la instalación. El único nodo cian se sitúa
exactamente en ese codo: marca el punto de intervención, no un resultado.
Las dos primeras tomas son marcas neutras. Sin fichas, sin escala temporal
y sin semáforo: la parada no se disimula, se señala.
En móvil el trazado gira a vertical sobre el costado, los criterios se
apilan y el codo se resuelve como una derivación marcada en el tercero.
Namespace propio. Sin elementos focalizables: W19 y W24 no cambian.
-------------------------------------------------------------------------- */
.production-impact {
position: relative;
padding: 112px 0 124px;
background: var(--navy);
color: var(--ink-300);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.production-impact__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.production-impact__ref {
margin-bottom: 56px;
color: var(--ink-500);
}
.production-impact__ref .ref__rule {
max-width: none;
background: var(--line);
}
/* --- Titular y entradilla enfrentados --- */
.production-impact__head {
row-gap: 28px;
margin-bottom: 104px;
}
.production-impact__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.production-impact__intro { grid-column: 7 / 13; }
.production-impact__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.production-impact__intro p + p { margin-top: 18px; }
.production-impact__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
}
/* --- Ventana de intervención: un trazado con un escalón --- */
.production-impact__map {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding: 0;
padding-top: 62px;
list-style: none;
}
/*
* Tramo alto: recorre los dos primeros criterios y llega hasta el codo.
* El codo cae en el inicio de la tercera columna: con tres columnas iguales
* y una calle de --gutter, ese punto es 2/3 del ancho más 2/3 de la calle.
*/
.production-impact__map::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(66.6667% + var(--gutter) * 2 / 3);
height: 1px;
background: var(--line);
}
/* Tramo bajo: desde el codo hasta el final */
.production-impact__map::after {
content: "";
position: absolute;
top: 40px;
left: calc(66.6667% + var(--gutter) * 2 / 3);
right: 0;
height: 1px;
background: var(--line);
}
.production-impact__item {
position: relative;
padding-right: 20px;
}
/* Tomas neutras de los dos primeros criterios sobre el tramo alto */
.production-impact__item:nth-child(-n+2)::before {
content: "";
position: absolute;
top: -62px;
left: 0;
width: 1px;
height: 62px;
background: var(--line-soft);
}
.production-impact__item:nth-child(-n+2)::after {
content: "";
position: absolute;
top: -65px;
left: -2px;
width: 5px;
height: 5px;
background: var(--navy);
box-shadow: inset 0 0 0 1px var(--ink-500);
}
/* Escalón del tercer criterio: baja del tramo alto al bajo y sigue */
.production-impact__item:nth-child(3)::before {
content: "";
position: absolute;
top: -62px;
left: 0;
width: 1px;
height: 62px;
background: linear-gradient(to bottom, var(--line), var(--cyan) 65%, var(--cyan));
}
/* Único acento: el punto de intervención, en el codo */
.production-impact__item:nth-child(3)::after {
content: "";
position: absolute;
top: -24px;
left: -2px;
width: 5px;
height: 5px;
background: var(--cyan);
}
.production-impact__label {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
color: var(--ink-500);
}
.production-impact__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.production-impact__meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.production-impact__name {
margin: 0 0 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--ink-100);
text-wrap: balance;
}
.production-impact__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.66;
text-wrap: pretty;
}
/* --- Móvil: el trazado gira a vertical y el codo pasa a derivación --- */
@media (max-width: 900px) {
.production-impact { padding: 88px 0 96px; }
.production-impact__ref { margin-bottom: 28px; }
.production-impact__head {
row-gap: 20px;
margin-bottom: 64px;
}
.production-impact__title,
.production-impact__intro { grid-column: 1 / -1; }
.production-impact__map {
grid-template-columns: 1fr;
padding-top: 0;
padding-left: 30px;
}
/* Un solo trazado vertical recorre los tres criterios */
.production-impact__map::before {
top: 10px;
bottom: 10px;
left: 0;
width: 1px;
height: auto;
}
.production-impact__map::after { display: none; }
.production-impact__item { padding: 0 0 40px; }
.production-impact__item:last-child { padding-bottom: 0; }
.production-impact__item:nth-child(-n+2)::before,
.production-impact__item:nth-child(3)::before {
top: 10px;
left: -30px;
width: 18px;
height: 1px;
background: var(--line-soft);
}
/* El codo se marca sobre el tercer criterio */
.production-impact__item:nth-child(3)::before { background: var(--cyan); }
.production-impact__item:nth-child(-n+2)::after,
.production-impact__item:nth-child(3)::after {
top: 8px;
left: -32px;
}
}
@media (max-width: 520px) {
.production-impact__map { padding-left: 24px; }
.production-impact__item:nth-child(-n+2)::before,
.production-impact__item:nth-child(3)::before {
left: -24px;
width: 14px;
}
.production-impact__item:nth-child(-n+2)::after,
.production-impact__item:nth-child(3)::after { left: -26px; }
.production-impact__name { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
W34. DIAGNÓSTICO DE FALLOS INTERMITENTES — DGN.01
Contenido exclusivo de /servicios/asistencia-tecnica/ según
docs/SITE-ARCHITECTURE.md §5.6: «método para fallos intermitentes
(registros de eventos, contadores de fallos, tendencias, mejora de
alarmas)».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900. Este bloque
abre la primera superficie clara sobre --paper, con el contraste fuerte
navy-900 → paper. Ningún color nuevo.
COMPOSICIÓN. Un fallo que aparece, deja evidencia y desaparece. La línea
base que recorre los cuatro ejes está interrumpida a propósito: la señal
no se observa de forma continua. Sobre ella hay dos pulsos ortogonales
—sube, se mantiene, baja— de anchura y altura distintas: el fallo vuelve,
pero no igual. Los cuatro tipos de evidencia cuelgan de esa misma línea
por una caída corta, como cuatro tomas del mismo registro: no son cuatro
servicios ni cuatro fichas independientes.
Trazados ortogonales, sin curvas: no es una señal biológica. Sin ejes,
sin escala, sin retícula y sin relleno: los pulsos están perfilados y son
dos, en posiciones irregulares sobre una base discontinua. No es un
gráfico de analítica.
ÚNICO ACENTO. Una marca cian en el flanco de subida del primer pulso: el
instante en que el fallo queda registrado. No señala acierto ni error, y
no hay segundo color. En móvil el pulso desaparece con el trazado
horizontal, así que el acento se traslada al primer eje —«registro de
incidencia»—, que es el mismo instante.
MÓVIL. El trazado horizontal se retira y la línea base gira a vertical
sobre el costado, manteniendo su interrupción; los ejes se apilan y
derivan de ella lateralmente. La geometría de escritorio no se arrastra y
no depende de coordenadas absolutas: los pulsos se sitúan en porcentaje
del propio trazado y la marca cian comparte ese porcentaje.
Namespace propio. Sin elementos focalizables: W19 y W24 no cambian.
-------------------------------------------------------------------------- */
.fault-diagnosis {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.fault-diagnosis__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.fault-diagnosis__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.fault-diagnosis__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
/* --- Titular y entradilla enfrentados --- */
.fault-diagnosis__head {
row-gap: 28px;
margin-bottom: 96px;
}
.fault-diagnosis__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.fault-diagnosis__intro { grid-column: 7 / 13; }
.fault-diagnosis__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.fault-diagnosis__intro p + p { margin-top: 18px; }
.fault-diagnosis__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* --- La señal: dos pulsos apoyados en la línea base del registro ---
El trazado no lleva línea propia: su borde inferior coincide con la línea
base, que la pinta .fault-diagnosis__map en su borde superior. Por eso
ambos elementos son contiguos en el flujo y no hace falta ninguna
coordenada compartida. */
.fault-diagnosis__trace {
position: relative;
display: block;
height: 58px;
}
/* Pulso largo: el fallo aparece, se mantiene y vuelve a caer */
.fault-diagnosis__trace::before {
content: "";
position: absolute;
bottom: 0;
left: 14%;
width: 13%;
height: 34px;
border: 1px solid var(--line-dark);
border-bottom: 0;
}
/* Pulso corto: reaparece más tarde, y no con la misma forma */
.fault-diagnosis__trace::after {
content: "";
position: absolute;
bottom: 0;
left: 58%;
width: 8%;
height: 21px;
border: 1px solid var(--line-dark);
border-bottom: 0;
}
/* Único acento: el instante en que el fallo queda registrado */
.fault-diagnosis__node {
position: absolute;
bottom: -2px;
left: 14%;
width: 5px;
height: 5px;
margin-left: -2px;
background: var(--cyan);
}
/* --- Cuatro tomas del mismo registro sobre una línea discontinua --- */
.fault-diagnosis__map {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding: 0;
padding-top: 46px;
list-style: none;
}
/* La línea base: interrumpida, porque la señal no se observa siempre */
.fault-diagnosis__map::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: repeating-linear-gradient(
to right,
var(--line-dark) 0 26px,
rgba(7, 14, 41, 0) 26px 38px
);
}
.fault-diagnosis__item {
position: relative;
padding-right: 20px;
}
/* Caída desde la línea base hasta el eje */
.fault-diagnosis__item::before {
content: "";
position: absolute;
top: -46px;
left: 0;
width: 1px;
height: 46px;
background: var(--line-dark-soft);
}
/* Marca cuadrada en el punto de toma */
.fault-diagnosis__item::after {
content: "";
position: absolute;
top: -49px;
left: -2px;
width: 5px;
height: 5px;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--on-light-dim);
}
.fault-diagnosis__label {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
color: var(--on-light-dim);
}
.fault-diagnosis__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.fault-diagnosis__meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.fault-diagnosis__name {
margin: 0 0 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--navy);
text-wrap: balance;
}
.fault-diagnosis__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.66;
text-wrap: pretty;
}
/* --- Tablet: dos columnas. La segunda fila toma su propio tramo de línea --- */
@media (max-width: 1024px) {
.fault-diagnosis__map {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fault-diagnosis__item:nth-child(n+3) {
margin-top: 60px;
padding-top: 46px;
background: repeating-linear-gradient(
to right,
var(--line-dark) 0 26px,
rgba(7, 14, 41, 0) 26px 38px
) top left / 100% 1px no-repeat;
}
.fault-diagnosis__item:nth-child(n+3)::before {
top: 0;
height: 46px;
}
.fault-diagnosis__item:nth-child(n+3)::after { top: -2px; }
}
/* --- Móvil: la línea base gira a vertical y el trazado se retira --- */
@media (max-width: 900px) {
.fault-diagnosis { padding: 88px 0 96px; }
.fault-diagnosis__ref { margin-bottom: 28px; }
.fault-diagnosis__head {
row-gap: 20px;
margin-bottom: 64px;
}
.fault-diagnosis__title,
.fault-diagnosis__intro { grid-column: 1 / -1; }
/* Los pulsos son geometría de escritorio: no se arrastran */
.fault-diagnosis__trace { display: none; }
.fault-diagnosis__map {
grid-template-columns: 1fr;
row-gap: 0;
padding-top: 0;
padding-left: 30px;
}
/* La línea base pasa a vertical, y sigue interrumpida */
.fault-diagnosis__map::before {
top: 10px;
bottom: 10px;
left: 0;
right: auto;
width: 1px;
height: auto;
background: repeating-linear-gradient(
to bottom,
var(--line-dark) 0 18px,
rgba(7, 14, 41, 0) 18px 26px
);
}
.fault-diagnosis__item,
.fault-diagnosis__item:nth-child(n+3) {
margin-top: 0;
padding: 0 0 40px;
background: none;
}
.fault-diagnosis__item:last-child { padding-bottom: 0; }
/* Derivación corta desde la línea base hacia cada eje */
.fault-diagnosis__item::before,
.fault-diagnosis__item:nth-child(n+3)::before {
top: 10px;
left: -30px;
width: 18px;
height: 1px;
background: var(--line-dark-soft);
}
.fault-diagnosis__item::after,
.fault-diagnosis__item:nth-child(n+3)::after {
top: 8px;
left: -32px;
}
/*
* El acento se traslada al primer eje: sin el trazado horizontal, el
* instante en que el fallo queda registrado es el registro de incidencia.
*/
.fault-diagnosis__item:first-child::before { background: var(--cyan); }
.fault-diagnosis__item:first-child::after {
background: var(--cyan);
box-shadow: none;
}
}
@media (max-width: 520px) {
.fault-diagnosis__map { padding-left: 24px; }
.fault-diagnosis__item::before,
.fault-diagnosis__item:nth-child(n+3)::before {
left: -24px;
width: 14px;
}
.fault-diagnosis__item::after,
.fault-diagnosis__item:nth-child(n+3)::after { left: -26px; }
.fault-diagnosis__name { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
W35. DIAGNÓSTICO REMOTO Y ASISTENCIA EN PLANTA — AST.01
Contenido exclusivo de /servicios/asistencia-tecnica/ según
docs/SITE-ARCHITECTURE.md §5.6: «asistencia remota y su combinación con
intervención en planta · análisis previo antes de desplazarse».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 ·
.fault-diagnosis paper. Este bloque vuelve al oscuro sobre --navy.
Ningún color nuevo.
COMPOSICIÓN. Una incidencia con dos vías de intervención posibles. Un
tramo común entra por la izquierda y llega al análisis previo; en ese
punto la línea se bifurca y sigue por dos trazados paralelos, el alto
hacia el diagnóstico a distancia y el bajo hacia la intervención en
planta. Los tres ejes cuelgan del trazado que les corresponde, cada uno
desde su altura: la bifurcación se lee en la propia geometría.
NO ES UNA DECISIÓN BINARIA. Aguas abajo, un puente vertical vuelve a unir
los dos trazados: las dos vías no son excluyentes y pueden combinarse.
Sin flechas, sin rombo de decisión, sin secuencia numerada y sin dos
columnas enfrentadas: nada obliga a pasar por remoto antes que por planta.
ÚNICO ACENTO. Una marca cian en el punto de bifurcación, donde el tramo
común se encuentra con la vertical: el momento en que la información
disponible permite definir cómo continuar. No señala acierto ni
resolución, y no hay segundo color. En móvil el trazado horizontal se
retira, así que el acento se traslada al primer eje —el contexto
compartido—, que es ese mismo punto.
SIN ICONOGRAFÍA. Solo líneas, nodos y derivaciones: el mismo lenguaje de
ingeniería del resto del sitio. Ni antenas, ni nubes, ni vehículos, ni
chinchetas de mapa.
MÓVIL. El trazado se retira y la línea pasa a vertical sobre el costado;
los tres ejes se apilan y derivan de ella lateralmente. La geometría de
escritorio no se arrastra: la bifurcación horizontal no se comprime.
Namespace propio. Sin elementos focalizables: W19 y W24 no cambian.
-------------------------------------------------------------------------- */
.assistance-mode {
position: relative;
padding: 112px 0 124px;
background: var(--navy);
color: var(--ink-300);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.assistance-mode__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.assistance-mode__ref {
margin-bottom: 56px;
color: var(--ink-500);
}
.assistance-mode__ref .ref__rule {
max-width: none;
background: var(--line);
}
/* --- Titular y entradilla enfrentados --- */
.assistance-mode__head {
row-gap: 28px;
margin-bottom: 96px;
}
.assistance-mode__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.assistance-mode__intro { grid-column: 7 / 13; }
.assistance-mode__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.assistance-mode__intro p + p { margin-top: 18px; }
.assistance-mode__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
}
/* --- La bifurcación ---
Banda de 96px cuyo borde inferior coincide con el inicio de la retícula.
Tres alturas de trabajo: trazado alto en 0, tramo común en 36 y trazado
bajo en 72. Cada eje cae desde la suya, así que las tres caídas tienen
longitudes distintas y el reparto se ve sin necesidad de rotular nada.
El punto de bifurcación va en 26%: por delante del inicio de la segunda
columna a cualquier ancho, sin depender de la calle. */
.assistance-mode__route {
position: relative;
display: block;
height: 96px;
}
/* Tramo común: entra por la izquierda y muere en la bifurcación */
.assistance-mode__route::before {
content: "";
position: absolute;
top: 36px;
left: 0;
width: 26%;
height: 1px;
background: var(--line);
}
/* Trazado alto: diagnóstico a distancia */
.assistance-mode__route::after {
content: "";
position: absolute;
top: 0;
left: 26%;
right: 0;
height: 1px;
background: var(--line);
}
/*
* Vertical de bifurcación (borde izquierdo) y trazado bajo hacia la
* intervención en planta (borde inferior), en un solo elemento.
*/
.assistance-mode__branch {
position: absolute;
top: 0;
left: 26%;
right: 0;
height: 72px;
border-left: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* Puente entre ambos trazados: las dos vías pueden combinarse */
.assistance-mode__branch::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 84%;
width: 1px;
background: var(--line-soft);
}
/* Único acento: donde la información disponible define cómo continuar */
.assistance-mode__node {
position: absolute;
top: 36px;
left: 26%;
width: 5px;
height: 5px;
margin: -2px 0 0 -2px;
background: var(--cyan);
}
/* --- Tres ejes colgando del trazado que les corresponde --- */
.assistance-mode__map {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding: 0;
list-style: none;
}
.assistance-mode__item {
position: relative;
padding-right: 20px;
}
/* Caída desde el trazado propio de cada eje */
.assistance-mode__item::before {
content: "";
position: absolute;
left: 0;
width: 1px;
background: var(--line-soft);
}
/* Marca de toma sobre el trazado */
.assistance-mode__item::after {
content: "";
position: absolute;
left: -2px;
width: 5px;
height: 5px;
background: var(--navy);
box-shadow: inset 0 0 0 1px var(--ink-500);
}
/* 01 · contexto compartido — cuelga del tramo común (36) */
.assistance-mode__item:nth-child(1)::before { top: -60px; height: 60px; }
.assistance-mode__item:nth-child(1)::after { top: -63px; }
/* 02 · a distancia — cuelga del trazado alto (0) */
.assistance-mode__item:nth-child(2)::before { top: -96px; height: 96px; }
.assistance-mode__item:nth-child(2)::after { top: -99px; }
/* 03 · en planta — cuelga del trazado bajo (72) */
.assistance-mode__item:nth-child(3)::before { top: -24px; height: 24px; }
.assistance-mode__item:nth-child(3)::after { top: -27px; }
.assistance-mode__label {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
color: var(--ink-500);
}
.assistance-mode__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.assistance-mode__meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.assistance-mode__name {
margin: 0 0 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--ink-100);
text-wrap: balance;
}
.assistance-mode__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.66;
text-wrap: pretty;
}
/* --- Móvil: la línea gira a vertical y la bifurcación se retira --- */
@media (max-width: 900px) {
.assistance-mode { padding: 88px 0 96px; }
.assistance-mode__ref { margin-bottom: 28px; }
.assistance-mode__head {
row-gap: 20px;
margin-bottom: 64px;
}
.assistance-mode__title,
.assistance-mode__intro { grid-column: 1 / -1; }
/* La bifurcación horizontal es geometría de escritorio: no se comprime */
.assistance-mode__route { display: none; }
.assistance-mode__map {
grid-template-columns: 1fr;
row-gap: 0;
padding-left: 30px;
}
/* Una sola línea vertical recorre los tres ejes */
.assistance-mode__map::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
width: 1px;
background: var(--line);
}
.assistance-mode__item { padding: 0 0 40px; }
.assistance-mode__item:last-child { padding-bottom: 0; }
/* Derivación corta desde la línea hacia cada eje */
.assistance-mode__item:nth-child(1)::before,
.assistance-mode__item:nth-child(2)::before,
.assistance-mode__item:nth-child(3)::before {
top: 10px;
left: -30px;
width: 18px;
height: 1px;
background: var(--line-soft);
}
.assistance-mode__item:nth-child(1)::after,
.assistance-mode__item:nth-child(2)::after,
.assistance-mode__item:nth-child(3)::after {
top: 8px;
left: -32px;
}
/*
* El acento se traslada al primer eje: sin trazado horizontal, el punto
* en que se define cómo continuar es el contexto compartido.
*/
.assistance-mode__item:nth-child(1)::before { background: var(--cyan); }
.assistance-mode__item:nth-child(1)::after {
background: var(--cyan);
box-shadow: none;
}
}
@media (max-width: 520px) {
.assistance-mode__map { padding-left: 24px; }
.assistance-mode__item:nth-child(1)::before,
.assistance-mode__item:nth-child(2)::before,
.assistance-mode__item:nth-child(3)::before {
left: -24px;
width: 14px;
}
.assistance-mode__item:nth-child(1)::after,
.assistance-mode__item:nth-child(2)::after,
.assistance-mode__item:nth-child(3)::after { left: -26px; }
.assistance-mode__name { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
W36. DE LAS SEÑALES AL FUNCIONAMIENTO REAL — VAL.01
Contenido exclusivo de /servicios/puesta-en-marcha/ según
docs/SITE-ARCHITECTURE.md §5.7: «verificación de E/S, sensores, actuadores,
motores, variadores, comunicaciones, secuencias, seguridades y parámetros ·
ajuste de programación y optimización de secuencias hasta funcionamiento
estable · arranque en condiciones reales de producción».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900. Este bloque
abre la primera superficie clara sobre --paper, con el contraste fuerte
navy-900 → paper. Ningún color nuevo.
COMPOSICIÓN. Un solo sistema con cuatro niveles, no cuatro bloques. Cuatro
raíles horizontales recorren la composición completa a cuatro alturas —del
campo, abajo, al proceso, arriba— y un único eje vertical los atraviesa por
el costado izquierdo: lo que los convierte en un sistema y no en cuatro
listas. Cada plano deriva del raíl que le corresponde, así que las cuatro
caídas miden distinto y la profundidad se lee en la propia geometría, sin
rotular ningún nivel.
NO ES UN DIAGRAMA DE FLUJO. Sin flechas, sin cajas, sin secuencia numerada
en el trazado y sin fichas: los raíles son continuos y del mismo peso, y
ninguno apunta al siguiente. Se leen como capas simultáneas de la misma
instalación, que es lo que son.
ÚNICO ACENTO. Una marca cian donde el eje vertical corta el tercer raíl:
el punto en que las comprobaciones dejan de ser elementos aislados y pasan
a comprobarse como conjunto. No significa aprobado, resuelto ni
certificado, y no hay segundo color. En móvil los raíles horizontales se
retiran, así que el acento se traslada al tercer plano, que es ese mismo
punto.
MÓVIL. Los raíles se retiran y el eje vertical pasa a ser la línea que
recorre los cuatro planos apilados, con una derivación corta hacia cada
uno. La geometría de escritorio no se arrastra comprimida.
Namespace propio. Sin elementos focalizables: W19 y W24 no cambian.
-------------------------------------------------------------------------- */
.commissioning-validation {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.commissioning-validation__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.commissioning-validation__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.commissioning-validation__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
/* --- Titular y entradilla enfrentados --- */
.commissioning-validation__head {
row-gap: 28px;
margin-bottom: 96px;
}
.commissioning-validation__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.commissioning-validation__intro { grid-column: 7 / 13; }
.commissioning-validation__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.commissioning-validation__intro p + p { margin-top: 18px; }
.commissioning-validation__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* --- Los cuatro niveles del sistema ---
Banda de 108px cuyo borde inferior coincide con el inicio de la retícula.
Cuatro alturas de trabajo, de arriba abajo: 0 (proceso real), 27, 54 y 81
(campo y señales). Cada plano cae desde la suya, de modo que las cuatro
caídas miden 108, 81, 54 y 27px y el nivel se ve sin rotularlo. El eje
vertical va en el 6%: por delante de cualquier columna a todos los anchos. */
.commissioning-validation__system {
position: relative;
display: block;
height: 108px;
}
/* Raíl 04 — proceso real, el nivel más alto */
.commissioning-validation__system::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--line-dark);
}
/* Raíl 01 — campo y señales, el nivel más bajo */
.commissioning-validation__system::after {
content: "";
position: absolute;
top: 81px;
left: 0;
right: 0;
height: 1px;
background: var(--line-dark);
}
/*
* Raíles 03 y 02 en un solo elemento: sus bordes superior e inferior caen
* exactamente en 27 y 54.
*/
.commissioning-validation__rail {
position: absolute;
top: 27px;
left: 0;
right: 0;
height: 27px;
border-top: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
}
/* El eje que atraviesa los cuatro niveles: un sistema, no cuatro listas */
.commissioning-validation__rail::before {
content: "";
position: absolute;
top: -27px;
left: 6%;
width: 1px;
height: 108px;
background: var(--line-dark-soft);
}
/* Único acento: donde las comprobaciones pasan a mirarse como conjunto */
.commissioning-validation__node {
position: absolute;
top: 27px;
left: 6%;
width: 5px;
height: 5px;
margin: -2px 0 0 -2px;
background: var(--cyan);
}
/* --- Cuatro planos, cada uno colgando de su raíl --- */
.commissioning-validation__map {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding: 0;
list-style: none;
}
.commissioning-validation__item {
position: relative;
padding-right: 20px;
}
/* Caída desde el raíl propio de cada plano */
.commissioning-validation__item::before {
content: "";
position: absolute;
left: 0;
width: 1px;
background: var(--line-dark-soft);
}
/* Marca de toma sobre el raíl */
.commissioning-validation__item::after {
content: "";
position: absolute;
left: -2px;
width: 5px;
height: 5px;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--on-light-dim);
}
/* 01 · campo y señales — raíl bajo (81) */
.commissioning-validation__item:nth-child(1)::before { top: -27px; height: 27px; }
.commissioning-validation__item:nth-child(1)::after { top: -30px; }
/* 02 · equipos conectados — raíl 54 */
.commissioning-validation__item:nth-child(2)::before { top: -54px; height: 54px; }
.commissioning-validation__item:nth-child(2)::after { top: -57px; }
/* 03 · control y secuencia — raíl 27 */
.commissioning-validation__item:nth-child(3)::before { top: -81px; height: 81px; }
.commissioning-validation__item:nth-child(3)::after { top: -84px; }
/* 04 · proceso real — raíl alto (0) */
.commissioning-validation__item:nth-child(4)::before { top: -108px; height: 108px; }
.commissioning-validation__item:nth-child(4)::after { top: -111px; }
.commissioning-validation__label {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
color: var(--on-light-dim);
}
.commissioning-validation__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.commissioning-validation__meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.commissioning-validation__name {
margin: 0 0 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--navy);
text-wrap: balance;
}
.commissioning-validation__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.66;
text-wrap: pretty;
}
/* --- Tablet: dos columnas. La segunda fila recupera sus dos raíles --- */
@media (max-width: 1024px) {
.commissioning-validation__system { height: 54px; }
/* Con dos planos por fila solo quedan dos alturas: 0 y 27 */
.commissioning-validation__system::after { display: none; }
.commissioning-validation__rail {
top: 27px;
height: 0;
border-bottom: 0;
}
.commissioning-validation__rail::before {
top: -27px;
height: 54px;
}
.commissioning-validation__map {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commissioning-validation__item:nth-child(1)::before,
.commissioning-validation__item:nth-child(3)::before { top: -27px; height: 27px; }
.commissioning-validation__item:nth-child(1)::after,
.commissioning-validation__item:nth-child(3)::after { top: -30px; }
.commissioning-validation__item:nth-child(2)::before,
.commissioning-validation__item:nth-child(4)::before { top: -54px; height: 54px; }
.commissioning-validation__item:nth-child(2)::after,
.commissioning-validation__item:nth-child(4)::after { top: -57px; }
/* La segunda fila cuelga de su propio par de raíles */
.commissioning-validation__item:nth-child(n+3) {
margin-top: 64px;
padding-top: 54px;
}
.commissioning-validation__item:nth-child(3)::before,
.commissioning-validation__item:nth-child(4)::before { top: 0; }
.commissioning-validation__item:nth-child(3)::after,
.commissioning-validation__item:nth-child(4)::after { top: -3px; }
.commissioning-validation__item:nth-child(n+3) {
background:
linear-gradient(var(--line-dark), var(--line-dark)) top left / 100% 1px no-repeat;
}
.commissioning-validation__item:nth-child(4) {
background:
linear-gradient(var(--line-dark), var(--line-dark)) top left / 100% 1px no-repeat;
}
}
/* --- Móvil: el eje pasa a vertical y los raíles se retiran --- */
@media (max-width: 900px) {
.commissioning-validation { padding: 88px 0 96px; }
.commissioning-validation__ref { margin-bottom: 28px; }
.commissioning-validation__head {
row-gap: 20px;
margin-bottom: 64px;
}
.commissioning-validation__title,
.commissioning-validation__intro { grid-column: 1 / -1; }
/* Los raíles horizontales son geometría de escritorio: no se comprimen */
.commissioning-validation__system { display: none; }
.commissioning-validation__map {
grid-template-columns: 1fr;
row-gap: 0;
padding-left: 30px;
}
/* El eje recorre ahora los cuatro planos apilados */
.commissioning-validation__map::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
width: 1px;
background: var(--line-dark);
}
.commissioning-validation__item,
.commissioning-validation__item:nth-child(n+3) {
margin-top: 0;
padding: 0 0 40px;
background: none;
}
.commissioning-validation__item:last-child { padding-bottom: 0; }
/* Derivación corta desde el eje hacia cada plano */
.commissioning-validation__item:nth-child(1)::before,
.commissioning-validation__item:nth-child(2)::before,
.commissioning-validation__item:nth-child(3)::before,
.commissioning-validation__item:nth-child(4)::before {
top: 10px;
left: -30px;
width: 18px;
height: 1px;
background: var(--line-dark-soft);
}
.commissioning-validation__item:nth-child(1)::after,
.commissioning-validation__item:nth-child(2)::after,
.commissioning-validation__item:nth-child(3)::after,
.commissioning-validation__item:nth-child(4)::after {
top: 8px;
left: -32px;
}
/*
* El acento se traslada al tercer plano: sin raíles horizontales, el punto
* en que se mira el conjunto es donde se comprueba su comportamiento.
*/
.commissioning-validation__item:nth-child(3)::before { background: var(--cyan); }
.commissioning-validation__item:nth-child(3)::after {
background: var(--cyan);
box-shadow: none;
}
}
@media (max-width: 520px) {
.commissioning-validation__map { padding-left: 24px; }
.commissioning-validation__item:nth-child(1)::before,
.commissioning-validation__item:nth-child(2)::before,
.commissioning-validation__item:nth-child(3)::before,
.commissioning-validation__item:nth-child(4)::before {
left: -24px;
width: 14px;
}
.commissioning-validation__item:nth-child(1)::after,
.commissioning-validation__item:nth-child(2)::after,
.commissioning-validation__item:nth-child(3)::after,
.commissioning-validation__item:nth-child(4)::after { left: -26px; }
.commissioning-validation__name { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
W37. CUADRO NUEVO, AMPLIACIÓN O REFORMA — CUA.01
Contenido exclusivo de /servicios/cuadros-electricos/ según
docs/SITE-ARCHITECTURE.md §5.8: «reforma y reacondicionamiento de cuadros
antiguos · ampliación con análisis previo de espacio, alimentación y
protecciones».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900. Este bloque
abre la primera superficie clara sobre --paper, con el contraste fuerte
navy-900 → paper. Ningún color nuevo.
COMPOSICIÓN. Una sola envolvente, tres puntos de partida. El rectángulo
perfilado que cruza la composición es el cuadro; dentro discurren dos
carriles horizontales, y de ellos cuelgan las tres situaciones. No son
tres fichas ni tres cuadros distintos: es el mismo objeto mirado desde
tres sitios, que es exactamente lo que dice el texto.
ÚNICO ACENTO. Una marca cian sobre el carril inferior, en el tramo del
segundo eje: el punto en que hay que comprobar si lo nuevo cabe —espacio,
alimentación y protecciones—. No significa aprobado ni recomendado.
MÓVIL. La envolvente se retira y los carriles pasan a una línea vertical
sobre el costado, de la que derivan las tres situaciones apiladas. El
acento se traslada al segundo eje, que es el mismo punto.
Namespace propio. Sin elementos focalizables: W19 y W24 no cambian.
-------------------------------------------------------------------------- */
.panel-work {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.panel-work__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.panel-work__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.panel-work__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
/* --- Titular y entradilla enfrentados --- */
.panel-work__head {
row-gap: 28px;
margin-bottom: 96px;
}
.panel-work__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.panel-work__intro { grid-column: 7 / 13; }
.panel-work__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.panel-work__intro p + p { margin-top: 18px; }
.panel-work__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
/* --- La envolvente y sus dos carriles ---
Banda de 92px cuyo borde inferior coincide con el inicio de la retícula.
Los carriles van en 30 y 62: las tres caídas miden 62 y 30px según de cuál
cuelgue cada situación, de modo que el reparto se ve sin rotular nada. */
.panel-work__envelope {
position: relative;
display: block;
height: 92px;
border: 1px solid var(--line-dark);
}
/* Carril superior */
.panel-work__envelope::before {
content: "";
position: absolute;
top: 30px;
left: 18px;
right: 18px;
height: 1px;
background: var(--line-dark-soft);
}
/* Carril inferior */
.panel-work__envelope::after {
content: "";
position: absolute;
top: 62px;
left: 18px;
right: 18px;
height: 1px;
background: var(--line-dark-soft);
}
/* Único acento: donde se comprueba si lo nuevo cabe */
.panel-work__node {
position: absolute;
top: 62px;
left: 40%;
width: 5px;
height: 5px;
margin: -2px 0 0 -2px;
background: var(--cyan);
}
/* --- Tres situaciones colgando de la envolvente --- */
.panel-work__map {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding: 0;
list-style: none;
}
.panel-work__item {
position: relative;
padding-right: 20px;
}
.panel-work__item::before {
content: "";
position: absolute;
left: 0;
width: 1px;
background: var(--line-dark-soft);
}
.panel-work__item::after {
content: "";
position: absolute;
left: -2px;
width: 5px;
height: 5px;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--on-light-dim);
}
/* 01 y 03 cuelgan del carril superior (30) · 02 del inferior (62) */
.panel-work__item:nth-child(1)::before,
.panel-work__item:nth-child(3)::before { top: -62px; height: 62px; }
.panel-work__item:nth-child(1)::after,
.panel-work__item:nth-child(3)::after { top: -65px; }
.panel-work__item:nth-child(2)::before { top: -30px; height: 30px; }
.panel-work__item:nth-child(2)::after { top: -33px; }
.panel-work__label {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
color: var(--on-light-dim);
}
.panel-work__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.panel-work__meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.panel-work__name {
margin: 0 0 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--navy);
text-wrap: balance;
}
.panel-work__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.66;
text-wrap: pretty;
}
/* --- Móvil: la envolvente se retira y el carril gira a vertical --- */
@media (max-width: 900px) {
.panel-work { padding: 88px 0 96px; }
.panel-work__ref { margin-bottom: 28px; }
.panel-work__head {
row-gap: 20px;
margin-bottom: 64px;
}
.panel-work__title,
.panel-work__intro { grid-column: 1 / -1; }
.panel-work__envelope { display: none; }
.panel-work__map {
grid-template-columns: 1fr;
row-gap: 0;
padding-left: 30px;
}
.panel-work__map::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
width: 1px;
background: var(--line-dark);
}
.panel-work__item { padding: 0 0 40px; }
.panel-work__item:last-child { padding-bottom: 0; }
.panel-work__item:nth-child(1)::before,
.panel-work__item:nth-child(2)::before,
.panel-work__item:nth-child(3)::before {
top: 10px;
left: -30px;
width: 18px;
height: 1px;
background: var(--line-dark-soft);
}
.panel-work__item:nth-child(1)::after,
.panel-work__item:nth-child(2)::after,
.panel-work__item:nth-child(3)::after {
top: 8px;
left: -32px;
}
/* El acento acompaña a la ampliación, que es donde se comprueba */
.panel-work__item:nth-child(2)::before { background: var(--cyan); }
.panel-work__item:nth-child(2)::after {
background: var(--cyan);
box-shadow: none;
}
}
@media (max-width: 520px) {
.panel-work__map { padding-left: 24px; }
.panel-work__item:nth-child(1)::before,
.panel-work__item:nth-child(2)::before,
.panel-work__item:nth-child(3)::before {
left: -24px;
width: 14px;
}
.panel-work__item:nth-child(1)::after,
.panel-work__item:nth-child(2)::after,
.panel-work__item:nth-child(3)::after { left: -26px; }
.panel-work__name { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
W38. UN CUADRO QUE SE PUEDA MANTENER Y AMPLIAR — CRT.01
Contenido exclusivo de /servicios/cuadros-electricos/ según
docs/SITE-ARCHITECTURE.md §5.8: «criterio de accesibilidad,
mantenibilidad, ventilación, etiquetado y ampliación futura».
SUPERFICIE. La landing llevaba .phead navy · .srv navy-900 · .panel-work
paper. Este bloque vuelve al oscuro sobre --navy. Ningún color nuevo.
COMPOSICIÓN. Un carril ocupado y un tramo reservado. La línea recorre los
cuatro criterios y se interrumpe antes del final: lo que queda a la
derecha, acotado por dos topes, es el sitio que se deja libre para lo que
todavía no está. La composición dice lo mismo que el cuarto eje, y por eso
ese eje no necesita ilustrarse aparte.
ÚNICO ACENTO. Una marca cian en el punto donde termina lo ocupado y
empieza lo reservado. No indica éxito ni recomendación: indica dónde está
el margen.
MÓVIL. El carril gira a vertical sobre el costado, los criterios se apilan
y el tramo reservado se conserva como prolongación libre por debajo del
último. La geometría de escritorio no se comprime.
Namespace propio. Sin elementos focalizables: W19 y W24 no cambian.
-------------------------------------------------------------------------- */
.panel-criteria {
position: relative;
padding: 112px 0 124px;
background: var(--navy);
color: var(--ink-300);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.panel-criteria__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.panel-criteria__ref {
margin-bottom: 56px;
color: var(--ink-500);
}
.panel-criteria__ref .ref__rule {
max-width: none;
background: var(--line);
}
/* --- Titular y entradilla enfrentados --- */
.panel-criteria__head {
row-gap: 28px;
margin-bottom: 96px;
}
.panel-criteria__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.panel-criteria__intro { grid-column: 7 / 13; }
.panel-criteria__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.panel-criteria__intro p + p { margin-top: 18px; }
.panel-criteria__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
}
/* --- Carril ocupado + tramo reservado ---
El carril recorre el 78% de la composición: los cuatro criterios cuelgan
de él. El 22% restante queda libre, acotado por el tope de la derecha: es
el sitio reservado. Banda de 56px. */
.panel-criteria__rail {
position: relative;
display: block;
height: 56px;
}
/* Tramo ocupado */
.panel-criteria__rail::before {
content: "";
position: absolute;
top: 28px;
left: 0;
width: 78%;
height: 1px;
background: var(--line);
}
/* Tope final del tramo reservado */
.panel-criteria__rail::after {
content: "";
position: absolute;
top: 18px;
right: 0;
width: 1px;
height: 20px;
background: var(--line-soft);
}
/* Único acento: donde termina lo ocupado y empieza lo reservado */
.panel-criteria__node {
position: absolute;
top: 28px;
left: 78%;
width: 5px;
height: 5px;
margin: -2px 0 0 -2px;
background: var(--cyan);
}
/* --- Cuatro criterios colgando del tramo ocupado --- */
.panel-criteria__map {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--gutter);
margin: 0;
padding: 0;
list-style: none;
}
.panel-criteria__item {
position: relative;
padding-right: 20px;
}
.panel-criteria__item::before {
content: "";
position: absolute;
top: -28px;
left: 0;
width: 1px;
height: 28px;
background: var(--line-soft);
}
.panel-criteria__item::after {
content: "";
position: absolute;
top: -31px;
left: -2px;
width: 5px;
height: 5px;
background: var(--navy);
box-shadow: inset 0 0 0 1px var(--ink-500);
}
.panel-criteria__label {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
color: var(--ink-500);
}
.panel-criteria__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.panel-criteria__meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.panel-criteria__name {
margin: 0 0 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--ink-100);
text-wrap: balance;
}
.panel-criteria__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.66;
text-wrap: pretty;
}
/* --- Tablet: dos columnas, con su propio tramo de carril --- */
@media (max-width: 1024px) {
.panel-criteria__map {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.panel-criteria__item:nth-child(n+3) {
margin-top: 60px;
padding-top: 28px;
background:
linear-gradient(var(--line), var(--line)) top left / 100% 1px no-repeat;
}
.panel-criteria__item:nth-child(n+3)::before { top: 0; }
.panel-criteria__item:nth-child(n+3)::after { top: -3px; }
}
/* --- Móvil: el carril gira a vertical y el tramo reservado lo prolonga --- */
@media (max-width: 900px) {
.panel-criteria { padding: 88px 0 96px; }
.panel-criteria__ref { margin-bottom: 28px; }
.panel-criteria__head {
row-gap: 20px;
margin-bottom: 64px;
}
.panel-criteria__title,
.panel-criteria__intro { grid-column: 1 / -1; }
.panel-criteria__rail { display: none; }
.panel-criteria__map {
grid-template-columns: 1fr;
row-gap: 0;
padding-left: 30px;
padding-bottom: 40px;
}
/* Tramo ocupado: llega hasta el último criterio */
.panel-criteria__map::before {
content: "";
position: absolute;
top: 10px;
bottom: 40px;
left: 0;
width: 1px;
background: var(--line);
}
/* Tramo reservado: prolonga el carril por debajo, más tenue */
.panel-criteria__map::after {
content: "";
position: absolute;
bottom: 0;
height: 40px;
left: 0;
width: 1px;
background: var(--line-soft);
}
.panel-criteria__item,
.panel-criteria__item:nth-child(n+3) {
margin-top: 0;
padding: 0 0 40px;
background: none;
}
.panel-criteria__item:last-child { padding-bottom: 0; }
.panel-criteria__item::before,
.panel-criteria__item:nth-child(n+3)::before {
top: 10px;
left: -30px;
width: 18px;
height: 1px;
background: var(--line-soft);
}
.panel-criteria__item::after,
.panel-criteria__item:nth-child(n+3)::after {
top: 8px;
left: -32px;
}
/* El acento marca el último criterio: ahí empieza lo reservado */
.panel-criteria__item:last-child::before { background: var(--cyan); }
.panel-criteria__item:last-child::after {
background: var(--cyan);
box-shadow: none;
}
}
@media (max-width: 520px) {
.panel-criteria__map { padding-left: 24px; }
.panel-criteria__item::before,
.panel-criteria__item:nth-child(n+3)::before {
left: -24px;
width: 14px;
}
.panel-criteria__item::after,
.panel-criteria__item:nth-child(n+3)::after { left: -26px; }
.panel-criteria__name { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
W39. DESPLEGABLE DE SERVICIOS — MEGAMENÚ
docs/SITE-ARCHITECTURE.md §13.2. Los ocho servicios V1 agrupados por
necesidad, no alfabéticamente. La agrupación «Sobre instalaciones
existentes» comunica el posicionamiento desde el propio menú.
ESCRITORIO. Panel de ancho completo bajo la cabecera, sobre --navy-900 para
separarlo del header sin cambiarlo. Tres grupos en retícula, numeración
mono continua del 01 al 08 y un hairline superior que lo cose a la barra.
Sin tarjetas, sin sombra, sin radios: el mismo lenguaje del resto.
El header NO cambia: ni marca, ni CTA, ni altura. El panel es un hermano
del enlace, no una modificación de la barra.
MÓVIL. El panel de escritorio no se comprime: no se renderiza. Dentro del
panel de navegación existente, «Servicios» pasa a ser un disclosure con su
propia lista.
Sin colores nuevos. W19 y W24 no cambian: el foco visible y el estado
aria-current siguen resolviéndose donde ya estaban.
-------------------------------------------------------------------------- */
.mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 60;
padding: 40px 0 44px;
background: var(--navy-900);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.mega[hidden] { display: none; }
.mega__inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: 28px;
align-items: start;
}
.mega__group-label {
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
color: var(--ink-500);
}
.mega__list {
margin: 0;
padding: 0;
list-style: none;
}
.mega__item + .mega__item { margin-top: 2px; }
.mega__link {
display: flex;
align-items: baseline;
gap: 12px;
padding: 9px 0;
font-size: 0.9375rem;
line-height: 1.35;
color: var(--ink-300);
text-decoration: none;
transition: color 0.18s ease;
}
.mega__link:hover,
.mega__link:focus-visible { color: var(--white); }
.mega__link[aria-current] { color: var(--white); }
.mega__num {
flex: 0 0 auto;
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
letter-spacing: 0.1em;
color: var(--ink-500);
}
.mega__link:hover .mega__num,
.mega__link:focus-visible .mega__num { color: var(--cyan); }
.mega__all {
grid-column: 1 / -1;
margin: 8px 0 0;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.mega__all-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cyan);
text-decoration: none;
}
.mega__all-link svg { width: 15px; }
.mega__all-link:hover { color: var(--white); }
/* El panel es geometría de escritorio: en móvil manda el panel de navegación */
@media (max-width: 900px) {
.mega { display: none; }
}
/* --- Desglose de servicios dentro del panel móvil --- */
.nav-panel__services { width: 100%; }
.nav-panel__disclosure {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 14px 0;
border: 0;
border-bottom: 1px solid var(--line);
background: none;
font-family: inherit;
font-size: 1.125rem;
color: var(--ink-100);
text-align: left;
cursor: pointer;
}
.nav-panel__chevron {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-right: 1px solid var(--ink-500);
border-bottom: 1px solid var(--ink-500);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.2s ease;
}
.nav-panel__disclosure[aria-expanded="true"] .nav-panel__chevron {
transform: rotate(-135deg) translate(-2px, -2px);
}
.nav-panel__submenu { padding: 8px 0 16px; }
.nav-panel__submenu[hidden] { display: none; }
.submenu__group + .submenu__group { margin-top: 18px; }
.submenu__group-label {
margin: 0 0 8px;
color: var(--ink-500);
}
.submenu__list {
margin: 0;
padding: 0;
list-style: none;
}
.submenu__link {
display: flex;
align-items: baseline;
gap: 12px;
padding: 8px 0;
font-size: 0.9375rem;
line-height: 1.35;
color: var(--ink-300);
text-decoration: none;
}
.submenu__link[aria-current] { color: var(--white); }
.submenu__num {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
letter-spacing: 0.1em;
color: var(--ink-500);
}
.submenu__all { margin: 16px 0 0; }
.submenu__all-link {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cyan);
text-decoration: none;
}
/* --------------------------------------------------------------------------
W40. CABECERA Y BLOQUES DE PÁGINA CORPORATIVA
Cabecera de /para-fabricantes-e-ingenierias/, /quienes-somos/,
/preguntas-frecuentes/ y /contacto/. Reutiliza .phead con un modificador:
misma composición que las landings de servicio, con la ruta de navegación
de un solo nivel que pide §37.
.corp es el bloque de contenido compartido por B2B y Quiénes somos: cuatro
o cinco ejes colgando de un bus horizontal, el mismo recurso del sistema.
Alterna superficie para que dos bloques seguidos no se fundan.
Sin colores nuevos. Sin elementos focalizables propios.
-------------------------------------------------------------------------- */
.phead--corp .phead__main { margin-top: 0; }
.corp {
position: relative;
padding: 112px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.corp--modular,
.corp--principles {
background: var(--navy);
color: var(--ink-300);
}
.corp__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.corp__ref {
margin-bottom: 56px;
color: var(--on-light-dim);
}
.corp__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.corp--modular .corp__ref,
.corp--principles .corp__ref { color: var(--ink-500); }
.corp--modular .corp__ref .ref__rule,
.corp--principles .corp__ref .ref__rule { background: var(--line); }
.corp__head {
row-gap: 28px;
margin-bottom: 96px;
}
.corp__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.corp--modular .corp__title,
.corp--principles .corp__title { color: var(--white); }
.corp__intro { grid-column: 7 / 13; }
.corp__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.corp__intro p + p { margin-top: 18px; }
.corp__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--navy);
}
.corp--modular .corp__intro p:first-child,
.corp--principles .corp__intro p:first-child { color: var(--ink-100); }
/* Bus horizontal del que cuelgan los ejes */
.corp__map {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: 56px;
margin: 0;
padding: 46px 0 0;
list-style: none;
}
.corp__map::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--line-dark);
}
.corp--modular .corp__map::before,
.corp--principles .corp__map::before { background: var(--line); }
.corp__item {
position: relative;
padding-right: 20px;
}
.corp__item::before {
content: "";
position: absolute;
top: -46px;
left: 0;
width: 1px;
height: 46px;
background: var(--line-dark-soft);
}
.corp--modular .corp__item::before,
.corp--principles .corp__item::before { background: var(--line-soft); }
.corp__item::after {
content: "";
position: absolute;
top: -49px;
left: -2px;
width: 5px;
height: 5px;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--on-light-dim);
}
.corp--modular .corp__item::after,
.corp--principles .corp__item::after {
background: var(--navy);
box-shadow: inset 0 0 0 1px var(--ink-500);
}
/* Único acento por bloque: el primer eje */
.corp__item:first-child::before { background: var(--cyan); }
.corp__item:first-child::after {
background: var(--cyan);
box-shadow: none;
}
.corp__label {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
color: var(--on-light-dim);
}
.corp--modular .corp__label,
.corp--principles .corp__label { color: var(--ink-500); }
.corp__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.corp__meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.corp__name {
margin: 0 0 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--navy);
text-wrap: balance;
}
.corp--modular .corp__name,
.corp--principles .corp__name { color: var(--ink-100); }
.corp__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.66;
text-wrap: pretty;
}
@media (max-width: 1024px) {
.corp__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.corp { padding: 88px 0 96px; }
.corp__ref { margin-bottom: 28px; }
.corp__head {
row-gap: 20px;
margin-bottom: 64px;
}
.corp__title,
.corp__intro { grid-column: 1 / -1; }
.corp__map {
grid-template-columns: 1fr;
row-gap: 0;
padding: 0 0 0 30px;
}
.corp__map::before {
top: 10px;
bottom: 10px;
left: 0;
right: auto;
width: 1px;
height: auto;
}
.corp__item { padding: 0 0 40px; }
.corp__item:last-child { padding-bottom: 0; }
.corp__item::before {
top: 10px;
left: -30px;
width: 18px;
height: 1px;
}
.corp__item::after { top: 8px; left: -32px; }
}
@media (max-width: 520px) {
.corp__map { padding-left: 24px; }
.corp__item::before { left: -24px; width: 14px; }
.corp__item::after { left: -26px; }
.corp__name { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
W41. PREGUNTAS FRECUENTES — ACORDEÓN
docs/SITE-ARCHITECTURE.md §10. Cinco grupos temáticos sobre superficie
alterna. Cada pregunta es un botón real con aria-expanded y aria-controls;
la respuesta es una región con id propio que existe en el HTML.
El signo es geométrico —dos hairlines que forman una cruz y pasan a guion
al abrirse—, no un icono. Sin cards, sin sombras, sin radios.
W19 sigue resolviendo el foco visible sobre superficie clara.
-------------------------------------------------------------------------- */
.faq {
position: relative;
padding: 96px 0 104px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.faq:nth-of-type(even) {
background: var(--navy);
color: var(--ink-300);
}
.faq__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.faq__ref {
margin-bottom: 40px;
color: var(--on-light-dim);
}
.faq__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.faq:nth-of-type(even) .faq__ref { color: var(--ink-500); }
.faq:nth-of-type(even) .faq__ref .ref__rule { background: var(--line); }
.faq__head { margin-bottom: 40px; }
.faq__title {
grid-column: 1 / 8;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.faq:nth-of-type(even) .faq__title { color: var(--white); }
.faq__list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line-dark);
}
.faq:nth-of-type(even) .faq__list { border-top-color: var(--line); }
.faq__item { border-bottom: 1px solid var(--line-dark); }
.faq:nth-of-type(even) .faq__item { border-bottom-color: var(--line); }
.faq__q { margin: 0; }
.faq__button {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: 18px;
width: 100%;
padding: 26px 0;
border: 0;
background: none;
font-family: inherit;
font-size: 1.125rem;
line-height: 1.4;
letter-spacing: -0.012em;
color: var(--navy);
text-align: left;
cursor: pointer;
}
.faq:nth-of-type(even) .faq__button { color: var(--ink-100); }
.faq__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
line-height: 1.7;
color: var(--on-light-dim);
}
.faq:nth-of-type(even) .faq__num { color: var(--ink-500); }
.faq__text { text-wrap: pretty; }
/* Signo: cruz que pasa a guion al abrir */
.faq__sign {
position: relative;
width: 13px;
height: 13px;
margin-top: 7px;
}
.faq__sign::before,
.faq__sign::after {
content: "";
position: absolute;
top: 6px;
left: 0;
width: 13px;
height: 1px;
background: var(--on-light-dim);
transition: transform 0.2s ease;
}
.faq:nth-of-type(even) .faq__sign::before,
.faq:nth-of-type(even) .faq__sign::after { background: var(--ink-500); }
.faq__sign::after { transform: rotate(90deg); }
.faq__button[aria-expanded="true"] .faq__sign::after { transform: rotate(0deg); }
.faq__a {
padding: 0 0 30px 0;
max-width: 68ch;
}
.faq__a[hidden] { display: none; }
.faq__a p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.7;
text-wrap: pretty;
}
.faq__a p + p { margin-top: 14px; }
@media (max-width: 900px) {
.faq { padding: 72px 0 80px; }
.faq__ref { margin-bottom: 24px; }
.faq__head { margin-bottom: 28px; }
.faq__title { grid-column: 1 / -1; }
.faq__button {
gap: 14px;
padding: 22px 0;
font-size: 1rem;
}
.faq__a { padding-bottom: 24px; }
}
@media (max-width: 520px) {
.faq__button { grid-template-columns: auto 1fr; }
.faq__sign { display: none; }
}
/* --------------------------------------------------------------------------
W42. CONTACTO — FORMULARIO
docs/SITE-ARCHITECTURE.md §5.12: el checklist de la FAQ 72 del kickoff es
la estructura del formulario. Dos columnas: el formulario y, al lado, lo
que ayuda a analizar el caso.
El envío está deshabilitado mientras el sitio no tenga gestor de correo, y
el estado se comunica con texto, no con color.
Campos sobre superficie clara con hairline inferior: el mismo recurso de
las tablas del sistema. Sin cajas redondeadas ni sombras.
-------------------------------------------------------------------------- */
.form {
position: relative;
padding: 104px 0 124px;
background: var(--paper);
color: var(--on-light);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.form__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.form__ref {
margin-bottom: 48px;
color: var(--on-light-dim);
}
.form__ref .ref__rule {
max-width: none;
background: var(--line-dark);
}
.form__head {
row-gap: 24px;
margin-bottom: 72px;
}
.form__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--navy);
text-wrap: balance;
}
.form__intro { grid-column: 7 / 13; }
.form__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.form__layout { row-gap: 56px; }
.form__form { grid-column: 1 / 9; }
.form__aside { grid-column: 10 / 13; }
.form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--gutter);
}
.form__field {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 28px;
}
.form__field--wide { grid-column: 1 / -1; }
.form__label {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-light-dim);
}
.form__req {
border: 0;
text-decoration: none;
color: var(--on-light-dim);
}
.form__hint {
font-size: 0.875rem;
line-height: 1.6;
color: var(--on-light-dim);
text-wrap: pretty;
}
.form__input {
width: 100%;
padding: 10px 0;
border: 0;
border-bottom: 1px solid var(--line-dark);
background: none;
font-family: inherit;
font-size: 1rem;
color: var(--navy);
}
.form__input:focus-visible {
outline: none;
border-bottom-color: var(--cyan);
}
.form__textarea {
border: 1px solid var(--line-dark);
padding: 14px;
line-height: 1.6;
resize: vertical;
}
.form__fieldset {
margin: 0 0 32px;
padding: 0;
border: 0;
}
.form__legend {
padding: 0;
margin-bottom: 14px;
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-light-dim);
}
.form__options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--gutter);
}
.form__option {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 10px;
}
.form__option-label {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--on-light);
}
.form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
margin: 8px 0 0;
}
.form__submit[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
.form__pending {
font-size: 0.875rem;
line-height: 1.5;
color: var(--on-light-dim);
text-wrap: pretty;
}
.form__aside-label {
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line-dark);
color: var(--on-light-dim);
}
.form__docs {
margin: 0 0 18px;
padding: 0;
list-style: none;
}
.form__docs li {
padding: 9px 0;
border-bottom: 1px solid var(--line-dark);
font-size: 0.9375rem;
line-height: 1.45;
}
.form__docs-note {
margin: 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--on-light-dim);
text-wrap: pretty;
}
@media (max-width: 1024px) {
.form__form { grid-column: 1 / 8; }
.form__aside { grid-column: 9 / 13; }
}
@media (max-width: 900px) {
.form { padding: 80px 0 96px; }
.form__ref { margin-bottom: 24px; }
.form__head {
row-gap: 18px;
margin-bottom: 48px;
}
.form__title,
.form__intro,
.form__form,
.form__aside { grid-column: 1 / -1; }
.form__layout { row-gap: 48px; }
}
@media (max-width: 520px) {
.form__grid { grid-template-columns: 1fr; }
.form__options { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
W43. CONTACTO — MEDIOS DE CONTACTO (VIA.01)
Datos reales de contacto confirmados por Catarsys. El bloque va entre la
cabecera y el formulario porque hoy es lo único operativo: teléfono y
email funcionan, el envío web todavía no.
SUPERFICIE. La página llevaba .phead navy · .form paper. Este bloque entra
en medio sobre --navy-900, la misma adyacencia que ya usan las landings de
servicio (.phead navy → .srv navy-900). Ningún color nuevo.
COMPOSICIÓN. Cuatro fichas sobre hairline superior, el recurso de tabla
del sistema. Sin iconos, sin tarjetas con sombra, sin bordes redondeados:
el dato es el protagonista. Único acento cian en la primera ficha —el
teléfono—, coherente con «un solo acento por bloque».
FOCO. Teléfono y email son reales y reciben el :focus-visible global
(línea 119). No se anula ni se reemplaza.
-------------------------------------------------------------------------- */
.channels {
position: relative;
padding: 104px 0 112px;
background: var(--navy-900);
color: var(--ink-300);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.channels__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.channels__ref {
margin-bottom: 56px;
color: var(--ink-500);
}
.channels__ref .ref__rule { max-width: none; }
.channels__head {
row-gap: 28px;
margin-bottom: 72px;
}
.channels__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.channels__intro { grid-column: 7 / 13; }
.channels__intro p {
margin: 0;
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
text-wrap: pretty;
}
/* --- Las cuatro fichas --- */
.channels__map {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: 48px;
margin: 0;
padding: 0;
list-style: none;
}
.channels__item {
padding: 22px 20px 0 0;
border-top: 1px solid var(--line);
}
/* Único acento del bloque: el teléfono, que es la vía más rápida */
.channels__item:first-child { border-top-color: var(--cyan); }
.channels__meta {
margin: 0 0 16px;
line-height: 1.5;
color: var(--ink-500);
text-wrap: balance;
}
.channels__value {
margin: 0;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.24;
letter-spacing: -0.02em;
color: var(--ink-100);
overflow-wrap: anywhere;
}
.channels__link {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--line);
text-decoration-thickness: 1px;
text-underline-offset: 5px;
transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.channels__link:hover {
color: var(--cyan);
text-decoration-color: var(--cyan);
}
.channels__line {
margin: 6px 0 0;
font-size: 1rem;
line-height: 1.45;
color: var(--ink-300);
}
.channels__note {
margin: 16px 0 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--ink-700);
text-wrap: pretty;
}
@media (max-width: 1024px) {
.channels__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.channels { padding: 80px 0 88px; }
.channels__ref { margin-bottom: 28px; }
.channels__head {
row-gap: 20px;
margin-bottom: 48px;
}
.channels__title,
.channels__intro { grid-column: 1 / -1; }
.channels__map { row-gap: 36px; }
}
@media (max-width: 560px) {
.channels__map { grid-template-columns: 1fr; }
.channels__item { padding-right: 0; }
}
/* --------------------------------------------------------------------------
W44. DISPONIBILIDAD DE ASISTENCIA — DIS.01
Bloque compacto de /servicios/asistencia-tecnica/. Publica la
disponibilidad y los tiempos de referencia que Catarsys ha confirmado.
No es un SLA y el bloque no lo aparenta: sin insignias, sin relojes, sin
contadores y sin sello de garantía.
SUPERFICIE. La landing lleva .phead navy · .srv navy-900 ·
.fault-diagnosis paper · .assistance-mode navy · este bloque navy-900 ·
.related paper. La misma adyacencia navy → navy-900 que ya usan
.phead → .srv. Ningún color nuevo.
COMPOSICIÓN. Tres ejes colgando de un bus horizontal, el recurso del
sistema, con la geometría de .corp pero en tres columnas y con menos
aire: es un bloque de dato, no una landing dentro de la landing. No son
cuatro tarjetas y no lleva CTA propio: la llamada telefónica de §5.6
vive en CTA.01, al cierre de la landing.
ÚNICO ACENTO. Una marca cian en el primer eje, la disponibilidad 24/365,
que es el dato que sostiene el bloque. Sin segundo color.
Namespace propio. Sin elementos focalizables: W1–W42 no cambian.
-------------------------------------------------------------------------- */
.availability {
position: relative;
padding: 96px 0 104px;
background: var(--navy-900);
color: var(--ink-300);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.availability__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.availability__ref {
margin-bottom: 52px;
color: var(--ink-500);
}
.availability__ref .ref__rule { max-width: none; }
/* --- Titular y entradilla enfrentados --- */
.availability__head {
row-gap: 28px;
margin-bottom: 76px;
}
.availability__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.availability__intro { grid-column: 7 / 13; }
.availability__intro p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.availability__intro p + p { margin-top: 18px; }
.availability__intro p:first-child {
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
}
/* --- Bus horizontal del que cuelgan los tres ejes --- */
.availability__map {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: 48px;
margin: 0;
padding: 42px 0 0;
list-style: none;
}
.availability__map::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--line);
}
.availability__item {
position: relative;
padding-right: 24px;
}
.availability__item::before {
content: "";
position: absolute;
top: -42px;
left: 0;
width: 1px;
height: 42px;
background: var(--line-soft);
}
.availability__item::after {
content: "";
position: absolute;
top: -45px;
left: -2px;
width: 5px;
height: 5px;
background: var(--navy-900);
box-shadow: inset 0 0 0 1px var(--ink-500);
}
/* Único acento del bloque: la disponibilidad 24/365 */
.availability__item:first-child::before { background: var(--cyan); }
.availability__item:first-child::after {
background: var(--cyan);
box-shadow: none;
}
.availability__label {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
color: var(--ink-500);
}
.availability__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
}
.availability__meta {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
text-wrap: balance;
}
.availability__name {
margin: 0 0 12px;
font-size: 1.25rem;
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.2;
letter-spacing: -0.022em;
color: var(--ink-100);
text-wrap: balance;
}
.availability__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.66;
text-wrap: pretty;
}
@media (max-width: 900px) {
.availability { padding: 76px 0 84px; }
.availability__ref { margin-bottom: 28px; }
.availability__head {
row-gap: 20px;
margin-bottom: 56px;
}
.availability__title,
.availability__intro { grid-column: 1 / -1; }
.availability__map {
grid-template-columns: 1fr;
row-gap: 0;
padding: 0 0 0 30px;
}
.availability__map::before {
top: 10px;
bottom: 10px;
left: 0;
right: auto;
width: 1px;
height: auto;
}
.availability__item { padding: 0 0 40px; }
.availability__item:last-child { padding-bottom: 0; }
.availability__item::before {
top: 10px;
left: -30px;
width: 18px;
height: 1px;
}
.availability__item::after { top: 8px; left: -32px; }
}
@media (max-width: 520px) {
.availability__map { padding-left: 24px; }
.availability__item::before { left: -24px; width: 14px; }
.availability__item::after { left: -26px; }
.availability__name { font-size: 1.125rem; }
}
/* --------------------------------------------------------------------------
W45. QUIÉNES SOMOS — FUNDADORES (SOC.01)
Perfiles de los dos socios fundadores en /quienes-somos/. Composición
editorial, no de producto: referencia mono, nombre, cargo y texto,
separados por hairlines. Sin tarjetas, sin avatar, sin iniciales, sin
fotografía —no existe todavía y no se sustituye por nada—, sin glow.
SUPERFICIE. La página lleva .phead navy · .corp--story paper · este
bloque navy-900 · .corp--principles navy · .related paper. La misma
adyacencia navy-900 → navy que ya usa W44. Ningún color nuevo.
COMPOSICIÓN. Cabecera enfrentada como .corp. Cada perfil es una fila de
la retícula de 12: identidad en 1–5, texto en 7–12. Una hairline arriba
y otra abajo de cada fila, como un registro técnico.
ÚNICO ACENTO. Un tramo cian sobre la hairline del primer perfil, el mismo
recurso que el primer eje de .corp. Sin segundo color.
Namespace propio. Sin elementos focalizables: W1–W44 no cambian.
-------------------------------------------------------------------------- */
.founders {
position: relative;
padding: 112px 0 124px;
background: var(--navy-900);
color: var(--ink-300);
scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h));
}
.founders__tick {
position: absolute;
top: 0;
left: max(var(--pad-x), 50% - var(--container) / 2 + var(--pad-x));
width: 1px;
height: 30px;
background: linear-gradient(to bottom, var(--cyan), rgba(36, 193, 184, 0));
}
.founders__ref {
margin-bottom: 56px;
color: var(--ink-500);
}
.founders__ref .ref__rule { max-width: none; }
/* --- Titular y entradilla enfrentados --- */
.founders__head {
row-gap: 28px;
margin-bottom: 80px;
}
.founders__title {
grid-column: 1 / 6;
margin: 0;
font-size: var(--fs-h3);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--white);
text-wrap: balance;
}
.founders__intro { grid-column: 7 / 13; }
.founders__intro p {
margin: 0;
font-size: 1.125rem;
line-height: 1.56;
letter-spacing: -0.01em;
color: var(--ink-100);
text-wrap: pretty;
}
/* --- Registro de perfiles --- */
.founders__list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.founders__item {
position: relative;
row-gap: 24px;
padding: 44px 0 52px;
border-bottom: 1px solid var(--line);
}
.founders__item:first-child::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 56px;
height: 1px;
background: var(--cyan);
}
.founders__id { grid-column: 1 / 6; }
.founders__num {
margin: 0 0 22px;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1;
letter-spacing: 0.1em;
color: var(--ink-500);
}
.founders__name {
margin: 0 0 14px;
font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem);
font-variation-settings: "wdth" 100, "wght" 500;
line-height: 1.14;
letter-spacing: -0.024em;
color: var(--white);
text-wrap: balance;
}
.founders__role {
margin: 0;
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-400);
}
.founders__body { grid-column: 7 / 13; }
.founders__body p {
margin: 0;
font-size: 1rem;
line-height: 1.66;
text-wrap: pretty;
}
.founders__body p + p { margin-top: 16px; }
@media (max-width: 900px) {
.founders { padding: 88px 0 96px; }
.founders__ref { margin-bottom: 28px; }
.founders__head {
row-gap: 20px;
margin-bottom: 56px;
}
.founders__title,
.founders__intro,
.founders__id,
.founders__body { grid-column: 1 / -1; }
.founders__item { padding: 36px 0 40px; }
}
@media (max-width: 520px) {
.founders__intro p { font-size: 1.0625rem; }
.founders__num { margin-bottom: 18px; }
}
/* ==========================================================================
CORRECCIONES DE CLIENTE — NOVIEMBRE 2026
--------------------------------------------------------------------------
Fuente: documento del cliente «cambios WEB.docx».
W1–W45 NO se editan. Todo lo que esta pasada necesita vive aquí, como
override localizado: si una corrección cae dentro de una regla anterior,
se reescribe el valor desde este bloque y la regla original queda intacta.
========================================================================== */
/* --------------------------------------------------------------------------
W46. P.02 SERVICIOS — ÍNDICE DE 9 SERVICIOS
El hub pasa de 8 a 9 servicios: entra «Instalaciones eléctricas MT y BT»
como 09, sin renumerar los ocho anteriores.
W10 había repartido las 8 filas en dos columnas de cuatro
(grid-template-rows: repeat(4, auto)) y movido el hairline superior de la
segunda columna de la fila 6 a la fila 5. Con 9 filas ese reparto se rompe:
grid-auto-flow: column con 4 filas explícitas generaría una tercera columna
implícita para la novena.
El reparto correcto vuelve a ser 5+4, que es justo el del prototipo. En vez
de editar W10 se revierten aquí sus dos reglas: cinco filas por columna y
el hairline otra vez en la fila 6, primera de la segunda columna.
Solo escritorio. Por debajo de 901px el índice es una sola columna de 9
filas y las reglas de W10 y del prototipo siguen siendo correctas: este
bloque no las toca.
-------------------------------------------------------------------------- */
@media (min-width: 901px) {
.idx__list { grid-template-rows: repeat(5, auto); }
.idx__row:nth-child(5) { border-top: 0; }
.idx__row:nth-child(6) { border-top: 1px solid var(--line-dark); }
}
/* --------------------------------------------------------------------------
W47. P.02 SERVICIOS — CREDENCIAL DE EMPRESA INSTALADORA
«Somos empresa instaladora eléctrica certificada», confirmado por el
cliente. Aparece UNA SOLA VEZ en el hub, bajo la escala de alcance.
QUÉ NO ES. No es una insignia de certificación: sin sello, sin logotipo,
sin recuadro, sin número de registro y sin organismo certificador. Es una
línea técnica del mismo sistema que .scope — mono, versales, hairline
superior, un único acento cian— y se lee como tal.
SUPERFICIE. La misma --navy-900 de .scope, con la que forma una sola
banda de dos líneas bajo la cabecera. Ningún color nuevo.
-------------------------------------------------------------------------- */
.credential {
border-top: 1px solid var(--line-soft);
background: var(--navy-900);
}
.credential__inner {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
padding-block: 18px;
}
/* Marca cuadrada, el mismo recurso que los nodos del diagrama */
.credential__mark {
flex: 0 0 auto;
width: 7px;
height: 7px;
border: 1px solid var(--cyan);
background: var(--cyan);
}
.credential__text {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
letter-spacing: 0.12em;
line-height: 1.4;
text-transform: uppercase;
color: var(--ink-300);
}
@media (max-width: 900px) {
.credential__inner { padding-block: 16px; }
}
/* --------------------------------------------------------------------------
W48. P.02 SERVICIOS — AZUL CORPORATIVO EN LA PRIMERA LÍNEA DEL TITULAR
Corrección del cliente: «El color que sea el azul nuestro del logo y no el
gris», señalando la cabecera de /servicios/. El gris es --ink-500 en
.phead__title span:first-child («Servicios de»), definido en la zona del
prototipo.
POR QUÉ CYAN Y NO #070e29. El navy ES la superficie sobre la que se
imprime ese titular: navy sobre navy no se vería. El único azul de marca
legible ahí es --cyan #24c1b8, que además es el acento del sistema.
Contraste sobre --navy: 8.5:1 — muy por encima del 3:1 que WCAG AA exige a
texto de gran tamaño, y por encima también del 4.5:1 de texto normal.
LOCALIZADO. Solo este titular, por su modificador --hub. No se toca
--ink-500, no se tocan los demás .phead__title y no se altera ninguna
superficie clara de lectura.
-------------------------------------------------------------------------- */
.phead__title--hub span:first-child { color: var(--cyan); }
/* --------------------------------------------------------------------------
W49. CONTACTO — DOS TELÉFONOS EN UNA FICHA
El cliente pide publicar los dos números. No existe línea central, así que
no se inventa un fijo: la ficha «Teléfonos» de VIA.01 publica los dos,
cada uno con el nombre de a quién llega.
POR QUÉ UNA FICHA Y NO DOS. .channels__map es una retícula de cuatro
columnas (W43). Una quinta ficha dejaría una huérfana en segunda fila y
rompería la tabla. Los dos números son la misma vía de contacto, así que
comparten ficha y la retícula de cuatro se mantiene intacta.
El acento cian de la primera ficha —el teléfono, la vía más rápida— sigue
donde estaba: W43 no cambia.
-------------------------------------------------------------------------- */
.channels__lines {
margin: 0;
padding: 0;
list-style: none;
}
.channels__pair + .channels__pair { margin-top: 16px; }
.channels__pair-name {
display: block;
margin-bottom: 4px;
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-500);
}
/* .channels__value es