/* ============================================================
Neurya · sistema.css — sistema visual del rediseño (Brava, 21-sep-2026)
Referencia: paquete handoff-dev-2026-09-21 de Brava Marketing
(D-css-referencia/estilos-completos-del-mockup.css) y sus respuestas
del 23-sep. Los nombres de clase son los del mockup, para que cada
página nueva se arme con las mismas piezas.
Esta hoja se carga en TODAS las páginas (partials/analytics.html), así
que está partida en dos:
1. Nav y footer. Van en todas las páginas por SSI, también en las que
todavía no se rediseñan, así que se estilan solos: no dependen de
nada del documento que los rodea.
2. Páginas del sistema nuevo. Todo lo que toca elementos sueltos (h1,
p, section, img…) vive bajo `body.sis`. Una página vieja no lleva
esa clase y no se entera de que esta hoja existe.
Colores, espaciado y tipografía salen de tokens/ (styles.css). Aquí no
se define ningún color nuevo que no esté ahí.
============================================================ */
/* ============================================================
1 · NAV
Claro por defecto; oscuro cuando cruza una sección .dark; transparente
mientras flota sobre el encabezado con foto. En las páginas viejas
(sin body.sis) es siempre oscuro, que es el fondo de esas páginas.
El cambio de tema lo hace assets/sistema.js; el menú móvil y la
pestaña activa, assets/site.js (hooks data-nav, data-navtoggle,
data-navmenu y a.nk-navlink).
============================================================ */
.nav{
position:sticky;top:0;z-index:100;
font-family:var(--body);font-size:16px;line-height:1.4;
background:rgba(250,251,253,.88);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border-bottom:1px solid transparent;
transition:background .3s ease,border-color .25s ease;
}
.nav *,.nav *::before,.nav *::after{box-sizing:border-box}
.nav.nav--pegado{border-bottom-color:var(--borde)}
.nav__in{
max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
display:flex;align-items:center;gap:var(--s4);min-height:var(--navh);padding-block:12px;
}
.nav__logo{display:inline-flex;align-items:center;min-height:44px;padding-right:8px;flex:none}
.nav__logo img{height:23px;width:auto;display:block}
.nav__logo .nav__logo--claro{display:none}
.nav__links{display:none;gap:30px;margin-left:auto;align-items:center}
.nav__links a{
font-size:14.5px;font-weight:500;color:var(--tinta);text-decoration:none;
display:inline-flex;align-items:center;min-height:44px;padding-block:11px;
border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;
}
.nav__links a:hover,.nav__links a[data-nav-active]{border-bottom-color:var(--acero);color:var(--acero)}
.nav__cta{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.nav .lang{display:flex;border:1px solid var(--borde);border-radius:999px;overflow:hidden}
.nav .lang a{
font-size:13.5px;font-weight:500;padding:9px 12px;min-height:38px;display:inline-flex;align-items:center;
color:var(--gris);text-decoration:none;transition:background .2s,color .2s;
}
.nav .lang a[data-active="true"]{background:var(--tinta);color:#fff}
/* botón del buscador (lo muestra assets/search.js quitando [hidden]) */
.nav .nav__buscar{
background:none;border:1px solid var(--borde);color:var(--tinta);
width:42px;height:42px;padding:0;border-radius:999px;justify-content:center;gap:0;
}
.nav .nav__buscar .nk-srbtn-txt,.nav .nav__buscar kbd{display:none}
.nav .nav__buscar:hover{background:var(--bg-alt);color:var(--acero);border-color:var(--acero)}
.nav__burger{
display:inline-flex;flex-direction:column;gap:5px;padding:12px;margin-right:-12px;
background:none;border:0;cursor:pointer;
}
.nav__burger i{display:block;width:20px;height:1.5px;background:var(--tinta)}
/* menú móvil: lo abre site.js con data-open="true" */
.nav__menu{
display:none;position:absolute;top:100%;left:0;right:0;
background:var(--navy);border-top:1px solid var(--linea-dark);
padding:var(--s2) var(--gut) var(--s4);max-height:calc(100svh - var(--navh));overflow-y:auto;
}
.nav__menu[data-open="true"]{display:grid}
.nav__menu a:not(.btn){
color:var(--sobre-dark);text-decoration:none;font-size:20px;font-weight:400;letter-spacing:-.01em;
padding:14px 0;border-bottom:1px solid var(--linea-dark);min-height:44px;
}
.nav__menu .nav__menu-lang{display:flex;gap:var(--s3);border-bottom:0;padding-top:var(--s3)}
.nav__menu .nav__menu-lang a{font-size:15px;border:0;padding:8px 0;color:var(--sobre-dark-2)}
.nav__menu .nav__menu-lang a[data-active="true"]{color:#fff}
.nav__menu .btn{margin-top:var(--s3);justify-content:center}
.nav .nav__menu .btn--pri{background:var(--cyan);color:var(--navy)} /* el menú siempre es oscuro */
/* tema oscuro: sobre sección .dark, sobre la foto del encabezado y en páginas viejas */
.nav.nav--oscuro,body:not(.sis) .nav{background:rgba(10,14,26,.86)}
.nav.nav--oscuro.nav--pegado,body:not(.sis) .nav{border-bottom-color:rgba(255,255,255,.10)}
.nav.nav--sobre-hero{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .nav__logo--oscuro{display:none}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .nav__logo--claro{display:block}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .nav__links a{color:#E6EDF5}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .nav__links a:hover,
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .nav__links a[data-nav-active]{color:var(--cyan);border-bottom-color:var(--cyan)}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .lang{border-color:rgba(255,255,255,.22)}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .lang a{color:rgba(230,237,245,.62)}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .lang a[data-active="true"]{background:#fff;color:var(--tinta)}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .nav__burger i{background:#E6EDF5}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .nav__buscar{color:#E6EDF5;border-color:rgba(255,255,255,.22)}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .nav__buscar:hover{background:rgba(255,255,255,.08);color:var(--cyan);border-color:var(--cyan)}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .btn--pri{background:var(--cyan);color:var(--navy)}
:is(.nav--oscuro,.nav--sobre-hero,body:not(.sis) .nav) .btn--pri:hover{background:#8ADCFF}
@media (min-width:1024px){
.nav__links{display:flex}
.nav__cta{margin-left:0}
.nav__burger,.nav__menu,.nav__menu[data-open="true"]{display:none}
}
@media (max-width:1023px){
.nav__cta .btn,.nav__cta .lang{display:none}
}
/* ============================================================
1 · BOTONES Y ENLACES (los usan el nav, el footer y las páginas)
============================================================ */
.btn{
display:inline-flex;align-items:center;gap:10px;
min-height:52px;padding:14px 26px;border-radius:999px;
font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1.2;
text-decoration:none;border:1px solid transparent;cursor:pointer;
transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--pri{background:var(--acero);color:#fff}
.btn--pri:hover{background:#18406A;color:#fff}
.dark .btn--pri{background:var(--cyan);color:var(--navy)}
.dark .btn--pri:hover{background:#8ADCFF;color:var(--navy)}
.btn--sec{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn--sec:hover{background:var(--tinta);color:var(--bg)}
.dark .btn--sec{color:var(--sobre-dark);border-color:rgba(207,234,255,.4)}
.dark .btn--sec:hover{background:var(--sobre-dark);color:var(--navy)}
.btn--sobre-foto{border-color:rgba(255,255,255,.52);color:#fff;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--sobre-foto:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
.btn--sm{min-height:42px;padding:10px 20px;font-size:14px}
.enlace{
display:inline-flex;gap:8px;align-items:center;min-height:44px;
font-family:var(--body);font-size:15px;font-weight:600;color:var(--acero);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .2s ease,gap .2s ease;
}
.enlace:hover{border-color:var(--acero);gap:12px;color:var(--acero)}
.dark .enlace,.dark .enlace:hover{color:var(--cyan)}
.dark .enlace:hover{border-color:var(--cyan)}
/* ============================================================
1 · FOOTER
============================================================ */
.foot{
background:#06090F;color:var(--sobre-dark-2);
font-family:var(--body);font-size:16px;line-height:1.6;
padding-block:var(--s6) var(--s4);
}
.foot *,.foot *::before,.foot *::after{box-sizing:border-box}
.foot :where(p,ul,h2,h3,h4){margin:0;padding:0}
.foot .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);width:100%}
.foot__grid{display:grid;gap:var(--s5)}
.foot__marca img{height:26px;width:auto;display:block;margin-bottom:var(--s3)}
.foot__marca p{font-size:14px;max-width:34ch;color:var(--sobre-dark-2)}
.foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.foot h2{font-size:14px;font-weight:500;color:#7D93A8;margin-bottom:var(--s2);letter-spacing:0}
.foot ul{list-style:none;display:grid;gap:13px}
.foot a{
font-size:14.5px;display:inline-flex;align-items:center;min-height:26px;
color:var(--sobre-dark-2);text-decoration:none;
border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.foot a:hover{color:#fff;border-bottom-color:var(--cyan)}
.foot__legal{
display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid rgba(207,234,255,.12);
font-size:13.5px;color:#8FA5B8;
}
.foot__legal a{font-size:13.5px;color:#8FA5B8}
.foot__legal .der{margin-left:auto}
@media (min-width:700px){.foot__cols{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.foot__grid{grid-template-columns:.9fr 2.1fr;gap:var(--s6)}}
/* ============================================================
2 · PÁGINAS DEL SISTEMA NUEVO (body.sis)
Los resets de elementos van con :where(body.sis): especificidad cero,
así cualquier clase de componente (también las del nav y el footer) les gana.
============================================================ */
body.sis{
margin:0;background:var(--bg);color:var(--tinta);
font-family:var(--body);font-size:16px;line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
html:has(body.sis){-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body.sis *,body.sis *::before,body.sis *::after{box-sizing:border-box}
:where(body.sis) :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd){margin:0;padding:0}
:where(body.sis) :where(img){display:block;max-width:100%;height:auto}
:where(body.sis) :where(a){color:inherit;text-decoration:none}
:where(body.sis) :where(button){font:inherit;color:inherit;background:none;border:none;cursor:pointer}
body.sis ::selection{background:var(--cyan);color:var(--navy)}
body.sis :focus-visible{outline:2px solid var(--acero);outline-offset:3px;border-radius:2px}
body.sis .dark :focus-visible,.nav :focus-visible,.foot :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
body.sis *,body.sis *::before,body.sis *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ---------- tipografía (Inter: H1 400, H2/H3 600; guía §3) ---------- */
:where(body.sis) :where(h1,h2,h3,h4){font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.sis .eyebrow{
display:block;margin-bottom:var(--s3);
font-family:var(--body);font-size:15px;font-weight:500;line-height:1.4;color:var(--acero);
}
.sis .dark .eyebrow{color:var(--cyan)}
.sis .h1{font-size:clamp(40px,6.1vw,86px);line-height:.95;letter-spacing:-.035em;font-weight:400}
.sis .h2{font-size:clamp(29px,4.2vw,56px);line-height:1.02;letter-spacing:-.028em;font-weight:600;max-width:19ch}
.sis .h2.ancho{max-width:26ch}
.sis .h3{font-size:clamp(19px,2.1vw,25px);line-height:1.2;letter-spacing:-.018em;font-weight:600}
.sis .lead{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--gris);max-width:60ch}
.sis .dark .lead{color:var(--sobre-dark-2)}
body.sis main p{max-width:66ch}
.sis .micro{font-size:13.5px;line-height:1.7;color:var(--gris)}
.sis .dark .micro{color:var(--sobre-dark-2)}
/* ---------- estructura ---------- */
.sis .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);width:100%}
body.sis main > section{padding-block:var(--sec)}
.sis .dark{background:var(--bg-dark);color:var(--sobre-dark)}
.sis .dark :where(p){color:var(--sobre-dark-2)} /* :where: cualquier clase de componente le gana */
.sis .alt{background:var(--bg-alt)}
/* ---------- revelado al hacer scroll ----------
El contenido es visible por defecto. assets/sistema.js marca con
.rv-espera solo lo que está fuera de pantalla al cargar y se lo quita
al entrar: si el JS no corre, no se esconde nada (guía §1). */
.sis .rv.rv-espera{opacity:0;transform:translateY(14px)}
.sis .rv{transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.sis .rv.rv-espera{opacity:1;transform:none}}
/* ============================================================
2 · TRATAMIENTO FOTOGRÁFICO ÚNICO (D-css-referencia/tratamiento-fotografico.css)
![]()
)
============================================================ */
.sis .faq{margin-top:var(--s6);border-top:1px solid var(--linea)}
.sis .faq details{border-bottom:1px solid var(--linea)}
.sis .faq summary{
list-style:none;cursor:pointer;display:flex;gap:var(--s3);align-items:baseline;
padding-block:var(--s3);min-height:56px;
}
.sis .faq summary::-webkit-details-marker{display:none}
.sis .faq summary h3{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.018em;line-height:1.3}
.sis .faq summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--acero);line-height:1;flex:none}
.sis .faq details[open] summary::after{content:"–"}
.sis .faq summary:hover{color:var(--acero)}
.sis .faq__r{padding:0 0 var(--s4) 0;max-width:70ch}
.sis .faq__r p{font-size:15.5px}
/* ============================================================
2 · CONTACTO (cierre)
============================================================ */
.sis .cta__ctas{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.sis .cta__nap{display:grid;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--linea-dark)}
.sis .cta__nap b{display:block;font-size:14px;font-weight:500;color:var(--cyan);margin-bottom:6px}
@media (min-width:760px){.sis .cta__nap{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
/* ============================================================
2 · PÁGINAS INTERNAS (fase 3: Método y Soluciones)
Clases del mockup de Brava para las páginas interiores; las sx-* son
las de las páginas de solución.
============================================================ */
.sis .hero--interior{min-height:86vh}
body.sis main > section.pag-sec{padding-block:clamp(72px,9vw,128px)}
.sis .gran-texto{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.2vw,44px);line-height:1.2;letter-spacing:-.02em;max-width:30ch;margin-top:var(--s4)}
.sis .dark .gran-texto{color:var(--sobre-dark)}
.sis .pista{margin-top:var(--s3);color:var(--gris);font-size:15px}
.sis .dark .pista{color:var(--sobre-dark-2)}
.sis .cta-fin{margin-top:var(--s5);display:flex;gap:12px;flex-wrap:wrap}
/* utilidades de margen (en vez de style="" en el marcado) */
.sis .mt-s3{margin-top:var(--s3)}
.sis .mt-s4{margin-top:var(--s4)}
.sis .mt-s5{margin-top:var(--s5)}
.sis .lead.mt-s4{max-width:62ch}
/* rejilla de 4 tarjetas */
@media (min-width:900px){.sis .sol__grid.sol__grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.sis .sol__grid.sol__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Soluciones: tarjeta con listas */
.sis .sx-et{font-size:15px;font-weight:600;color:var(--acero);margin-top:var(--s2)}
.sis .sx-lista{list-style:none;display:grid;gap:6px;margin-top:4px}
.sis .sx-lista li{font-size:15px;color:var(--gris);padding-left:18px;position:relative;line-height:1.5}
.sis .sx-lista li::before{content:"";position:absolute;left:0;top:.75em;width:9px;height:1px;background:var(--acero)}
.sis .sx-nivel{font-size:15px;font-weight:600;color:var(--acero)}
.sis .sx-tag{font-size:14.5px;color:var(--acero);margin-top:4px}
/* páginas de solución */
.sis .sx-volver{margin-bottom:var(--s3);font-size:14.5px}
.sis .hero .sx-volver{color:var(--cyan)}
.sis .sx-dos{display:grid;gap:var(--s5)}
@media (min-width:900px){.sis .sx-dos{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}}
.sis .sx-dos .sx-et{margin-top:0;margin-bottom:var(--s2)}
.sis .sx-grande{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.2vw,28px);line-height:1.35;letter-spacing:-.015em}
.sis .sx-por{list-style:none;display:grid;gap:var(--s3)}
.sis .sx-por li{border-top:1px solid var(--linea);padding-top:var(--s2);font-size:15.5px;color:var(--gris)}
.sis .sx-por b{display:block;font-family:var(--display);font-weight:600;font-size:18px;color:var(--tinta);margin-bottom:2px}
.sis .sx-cifra{font-family:var(--display);font-weight:400;font-size:clamp(72px,12vw,168px);line-height:.9;letter-spacing:-.045em}
.sis .dark .sx-cifra{color:var(--sobre-dark)}
.sis .sx-caso .gran-texto{max-width:34ch}
.sis .sx-nota{font-size:14px;margin-top:var(--s3)}
/* formularios en páginas de solución: el marcado operativo es el del sitio
(data-contacto-form, honeypot .hp, data-contacto-msg); aquí solo el diseño */
.sis .sx-form{background:var(--bg);color:var(--tinta);border-radius:var(--r);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:10px;position:relative}
.sis .sx-form h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.15;letter-spacing:-.02em;color:var(--tinta)}
.sis .dark .sx-form p{color:var(--gris);font-size:14px;line-height:1.5}
.sis .sx-form input,.sis .sx-form textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--linea);border-radius:var(--r-sm);background:#fff;color:var(--tinta);min-height:46px}
.sis .sx-form textarea{min-height:84px;resize:vertical}
.sis .sx-form .btn{justify-content:center;width:100%;margin-top:4px}
.sis .dark .sx-form .btn--pri{background:var(--acero);color:#fff}
.sis .dark .sx-form .btn--pri:hover{background:#18406A}
.sis .sx-form a:not(.btn){text-decoration:underline}
.sis .sx-form [data-contacto-msg]:empty{display:none}
.sis .sx-form [data-paso-ligero-msg]:empty{display:none}
.sis .sx-cambio{align-self:center;font-size:14.5px;color:var(--gris);text-decoration:underline;padding:4px 0}
.sis .sx-cambio:hover{color:var(--tinta)}
.sis .dark .sx-form .sx-aviso{font-size:12.5px}
.sis .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (min-width:1024px){.sis .sx-hero-form .hero__in{align-items:center}}
.sis .sx-hero-form{padding-bottom:var(--s5)}
.sis .sx-sol-grid{display:grid;gap:var(--s5)}
@media (min-width:900px){.sis .sx-sol-grid{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}}
.sis .sx-garantias{list-style:none;display:grid;gap:10px;margin-top:var(--s4)}
.sis .sx-garantias li{padding-left:22px;position:relative;font-size:15.5px}
.sis .sx-garantias li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--cyan)}
.sis .m-0{margin:0}
/* ============================================================
2 · INDUSTRIAS (fase 4: el índice y las seis páginas de industria)
icu-*: casos de uso por industria (pestañas por grupo, «Ver detalle»
dentro de la tarjeta con , bloque «Detalle técnico» al final).
ix-*: el índice de industrias.
============================================================ */
.sis .hero--interior .hero__fondo::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(0deg,rgba(6,9,15,.35),rgba(6,9,15,.12))}
@media (max-width:640px){.sis .hero--interior .hero__fondo::after{background:rgba(6,9,15,.5)}}
.sis .icu-volver{display:inline-block;margin-bottom:var(--s3);color:var(--cyan);font-weight:600;font-size:15px}
.sis .icu-volver:hover{text-decoration:underline}
.sis .hero--interior .h1.icu-h1{font-size:clamp(34px,4.6vw,64px);max-width:20ch}
/* formulario bajo el encabezado (marcado operativo del sitio, diseño de Brava) */
.sis .icu-form-sec .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.sis .icu-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative}
.sis .icu-form input,.sis .icu-form textarea{font:inherit;font-size:15.5px;width:100%;min-height:52px;padding:14px 16px;border:1px solid var(--borde);border-radius:12px;background:#fff;color:var(--tinta)}
.sis .icu-form textarea{min-height:104px;resize:vertical;grid-column:1/-1}
.sis .icu-form input:focus,.sis .icu-form textarea:focus{outline:2px solid var(--acero);outline-offset:1px;border-color:var(--acero)}
.sis .icu-form .btn{grid-column:1/-1;justify-self:start;margin-top:var(--s1)}
.sis .icu-form [data-contacto-msg]{grid-column:1/-1;font-size:15px}
.sis .icu-form [data-contacto-msg]:empty{display:none}
.sis .icu-micro{grid-column:1/-1;font-size:14px;color:var(--gris);line-height:1.55}
.sis .icu-micro a{color:var(--acero);font-weight:600;text-decoration:underline}
/* casos de uso */
.sis .icu-grupo{margin-top:var(--s6)}
.sis .icu-grupo__t{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.022em;line-height:1.15}
.sis .icu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:var(--s4)}
.sis .icu-card{background:var(--bg);border:1px solid var(--linea);border-radius:var(--r);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:var(--s2);transition:background .25s ease}
.sis .alt .icu-card{background:#fff}
.sis .icu-cat{font-size:14px;color:var(--acero);font-weight:500}
.sis .icu-card h4{font-size:clamp(19px,1.9vw,23px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.sis .icu-card>p:not([class]){font-size:15px;color:var(--gris)}
.sis .icu-dato{font-size:14px;color:var(--tinta);border-left:2px solid var(--cyan);padding-left:10px}
.sis .icu-card details{margin-top:auto;border-top:1px solid var(--linea);padding-top:var(--s2)}
.sis .icu-card summary{list-style:none;cursor:pointer;color:var(--acero);font-weight:600;font-size:15px;min-height:44px;display:flex;align-items:center;gap:8px}
.sis .icu-card summary::-webkit-details-marker{display:none}
.sis .icu-card summary::after{content:"+";margin-left:auto;font-size:19px;line-height:1}
.sis .icu-card details[open] summary::after{content:"–"}
.sis .icu-como{font-size:14px;font-weight:600;color:var(--tinta);margin-top:var(--s1)}
.sis .icu-card details p:not([class]){font-size:15px;color:var(--gris);margin-top:6px}
.sis .icu-card details .enlace{margin-top:var(--s1)}
.sis .icu-card > .enlace{margin-top:auto;border-top:1px solid var(--linea);padding-top:var(--s2)}
/* cierre de la sección de casos («¿Quieres ver el abanico completo?» + botón) */
.sis .icu-cierre{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s3)}
.sis .icu-cierre p{font-family:var(--display);font-size:clamp(21px,2.3vw,28px);line-height:1.25;letter-spacing:-.02em;max-width:34ch;color:var(--tinta)}
.sis .icu-cierre p a{color:var(--acero)}
/* pestañas por grupo: el panel es un bloque; el título del grupo lo dice la pestaña */
.sis .ind__panel.icu-panel{display:block;padding-top:0}
.sis .ind__panel.icu-panel[hidden]{display:none}
.sis .icu-panel .icu-grupo__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sis .icu-tabs .ind__tab{text-align:left}
@media (max-width:1024px){.sis .icu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sis .icu-form-sec .wrap{grid-template-columns:1fr}}
@media (max-width:640px){.sis .icu-grid{grid-template-columns:1fr}.sis .icu-form{grid-template-columns:1fr}}
/* bloque «Detalle técnico» */
.sis .ix-dt{margin-top:var(--s4);border-top:1px solid var(--linea)}
.sis .ix-dt article{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:var(--s3);padding-block:var(--s3);border-bottom:1px solid var(--linea);scroll-margin-top:calc(var(--navh) + 16px)}
.sis .ix-dt h3{font-size:19px;font-weight:500;line-height:1.3}
.sis .ix-dt p{font-size:15px;color:var(--gris)}
.sis .ix-dt .icu-como{color:var(--tinta)}
.sis .ix-dt .icu-dato{margin-top:8px}
.sis .ix-dt .enlace{margin-top:4px}
@media (max-width:860px){.sis .ix-dt article{grid-template-columns:1fr;gap:8px}}
/* índice de industrias: tarjetas con foto (mismo tratamiento que Resultados) */
.sis .ix-h1{font-size:clamp(36px,4.8vw,66px);line-height:1.02;max-width:22ch}
.sis .ix-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,20px);margin-top:var(--s5)}
.sis .ix-hub .caso{aspect-ratio:4/5}
/* texto arriba (industria y frase) y abajo («Ver industria»): veladura en los dos extremos */
.sis .ix-hub .caso .foto__vin{background:linear-gradient(180deg, rgba(6,9,15,.94) 0%, rgba(6,9,15,.86) 28%, rgba(6,9,15,.6) 46%, rgba(6,9,15,.4) 62%, rgba(6,9,15,.82) 86%, rgba(6,9,15,.94) 100%)}
.sis .ix-hub .caso__t{max-width:none}
.sis .caso__img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.05) brightness(1)}
.sis .ix-ind__sub{color:rgba(234,245,255,.86);font-size:16px;max-width:30ch}
.sis .ix-ind__ver{margin-top:auto;color:var(--cyan)}
@media (max-width:1024px){.sis .ix-hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sis .ix-hub{grid-template-columns:1fr}.sis .ix-hub .caso{aspect-ratio:1/1.05}}
/* ============================================================
2 · FASE 5: Nosotros, Insights, Contacto, Diagnóstico, Recursos
============================================================ */
.sis .hero.hero--62{min-height:62vh}
.sis .hero.hero--70{min-height:70vh}
.sis .mt-0{margin-top:0}
.sis .mw-32{max-width:32ch}
.sis .dark .pilar{border-top-color:var(--linea-dark)}
.sis .dark .pilar h3{color:var(--sobre-dark)}
/* rejillas que el HTML operativo trae de antes (r-grid) y que responsive.css ya no cubre */
.sis .r-grid[data-cols="2"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
@media (max-width:760px){.sis .r-grid[data-cols]{grid-template-columns:1fr!important}}
/* ---------- Nosotros ---------- */
.sis .nos-origen p:not([class]){color:var(--sobre-dark-2);font-size:16.5px;margin-top:var(--s3)}
.sis .nos-origen .fund__cita{margin-block:var(--s3) 0}
.sis .nos-eq{display:grid;gap:var(--s5) var(--s4);margin-top:var(--s6);grid-template-columns:repeat(4,minmax(0,1fr));list-style:none}
@media (max-width:1024px){.sis .nos-eq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sis .nos-eq{grid-template-columns:1fr}}
.sis .nos-p{display:flex;flex-direction:column;gap:6px}
.sis .nos-p__foto{aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--navy2);margin-bottom:var(--s2)}
.sis .nos-p__foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.05)}
.sis .nos-p__n{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.2}
.sis .nos-p__c{font-size:14.5px;color:var(--acero);font-weight:500;line-height:1.4}
.sis .nos-p details{margin-top:var(--s1);border-top:1px solid var(--linea)}
.sis .nos-p summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--acero)}
.sis .nos-p summary::-webkit-details-marker{display:none}
.sis .nos-p summary::after{content:"+";margin-left:auto;font-size:18px}
.sis .nos-p details[open] summary::after{content:"–"}
.sis .nos-p__datos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:var(--s2)}
.sis .nos-p__prev{font-size:13px;font-weight:600;color:var(--acero);margin:var(--s2) 0 6px}
.sis .nos-p__datos div{border:1px solid var(--linea);border-radius:var(--r-sm);padding:10px 12px}
.sis .nos-p__datos b{display:block;font-family:var(--display);font-weight:600;font-size:18px;color:var(--acero);line-height:1.1}
.sis .nos-p__datos span{font-size:13px;color:var(--gris);line-height:1.3;display:block;margin-top:4px}
.sis .nos-p details p{font-size:14.5px;color:var(--gris);margin-bottom:var(--s2)}
.sis .nos-p details p strong{color:var(--tinta);font-weight:600}
.sis .nos-pvm{display:grid;gap:var(--s5);margin-top:0}
@media (min-width:860px){.sis .nos-pvm{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
.sis .nos-nota{margin-top:var(--s3);font-size:14px;color:var(--gris)}
/* ---------- Insights ---------- */
/* listado de artículos: lo escribe tools/build-insights.mjs con estas clases */
.sis .ins-arts{display:grid;gap:1px;margin-top:var(--s5);background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
@media (min-width:900px){.sis .ins-arts{grid-template-columns:repeat(3,1fr)}}
.sis .ins-art{background:var(--bg);padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column;gap:var(--s2);min-height:260px;transition:background .25s ease}
.sis .ins-art:hover{background:#fff}
.sis .ins-art__cat{font-size:14px;font-weight:500;color:var(--acero)}
.sis .ins-art__t{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.3vw,28px);letter-spacing:-.022em;line-height:1.18}
.sis .ins-art__min{margin-top:auto;font-size:14px;color:var(--gris);display:flex;align-items:center;gap:8px}
.sis .ins-form{display:grid;gap:var(--s2);margin-top:var(--s2)}
.sis .ins-form input{width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--linea);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:15.5px;color:var(--tinta)}
.sis .ins-form input:focus{outline:2px solid var(--acero);outline-offset:1px}
.sis .ins-form .btn{justify-self:start}
.sis .ins-form [data-descarga-msg]:empty{display:none}
.sis .ins-nota{font-size:14px;color:var(--gris)}
/* ---------- Contacto ---------- */
.sis .ct-grid{display:grid;gap:var(--s5)}
@media (min-width:980px){.sis .ct-grid{grid-template-columns:.9fr 1.1fr;gap:var(--s6);align-items:start}}
.sis .ct-serv{list-style:none;border-top:1px solid var(--linea)}
.sis .ct-serv li{border-bottom:1px solid var(--linea);padding-block:var(--s3);display:grid;gap:4px}
.sis .ct-serv b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em}
.sis .ct-serv span{font-size:15px;color:var(--gris)}
.sis .ct-datos{margin-top:var(--s4);display:grid;gap:10px;font-size:15.5px}
.sis .ct-datos a{color:var(--acero);font-weight:600}
.sis .ct-datos p{color:var(--gris);font-size:14.5px}
.sis .ct-form{display:grid;gap:var(--s2);margin-top:var(--s2);position:relative}
.sis .ct-form label{display:grid;gap:6px;font-size:14.5px;font-weight:500;color:var(--tinta)}
.sis .ct-form input,.sis .ct-form select,.sis .ct-form textarea{width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--linea);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:15.5px;font-weight:400;color:var(--tinta)}
.sis .ct-form select:has(option[value=""]:checked){color:var(--gris)}
.sis .ct-form textarea{min-height:120px;resize:vertical}
.sis .ct-form input:focus,.sis .ct-form select:focus,.sis .ct-form textarea:focus{outline:2px solid var(--acero);outline-offset:1px}
.sis .ct-form #contacto-celular-nota{font-size:13.5px;color:var(--gris);margin-top:-6px}
.sis .ct-form .btn{justify-self:start}
.sis .ct-form [data-contacto-msg]:empty{display:none}
.sis .ct-sedes{display:grid;gap:1px;margin-top:var(--s5);background:var(--linea-dark);border:1px solid var(--linea-dark);border-radius:var(--r);overflow:hidden}
@media (min-width:760px){.sis .ct-sedes{grid-template-columns:repeat(4,1fr)}}
.sis .ct-sede{background:var(--navy);padding:clamp(24px,3vw,36px);display:grid;gap:6px}
.sis .ct-sede h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.2vw,28px);color:var(--sobre-dark);letter-spacing:-.02em}
/* ---------- Diagnóstico ----------
El test (section.dg) conserva su marcado: lo maneja assets/diagnostico.js por
sus ganchos data-dg-*. Aquí solo se viste con el sistema: la portada va en
blanco sobre la foto (como el encabezado de las demás páginas) y cada
pantalla siguiente en una tarjeta clara. diagnostico.css sigue siendo la base
(y la de impresión); estas reglas le ganan por especificidad (.sis .dg). */
.sis .dg.dg--foto{background:var(--navy);min-height:calc(100svh - var(--navh));display:flex;align-items:center}
.sis .dg--foto .dg-reticula{display:none}
/* el texto de la portada va al centro de la foto: veladura pareja (contraste medido) */
.sis .dg--foto .hero__fondo .foto__vin{background:linear-gradient(94deg, rgba(6,9,15,.9) 0%, rgba(6,9,15,.82) 60%, rgba(6,9,15,.7) 100%)}
.sis .dg--foto .dg-wrap{z-index:2;max-width:820px;padding:clamp(56px,8vw,112px) var(--gut)}
.sis .dg .dg-eyebrow,.sis .dg h3{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:0;text-transform:none}
.sis .dg h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,5.1vw,64px);line-height:1;letter-spacing:-.03em}
.sis .dg h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
/* portada, sobre la foto */
.sis .dg [data-pane="intro"] .dg-eyebrow{color:var(--cyan)}
.sis .dg [data-pane="intro"] h1{color:#fff}
.sis .dg [data-pane="intro"] .dg-intro-lead,.sis .dg [data-pane="intro"] .dg-senales li{color:#C6D6E5}
.sis .dg [data-pane="intro"] .dg-tick{background:transparent;border-color:rgba(84,200,245,.6);color:var(--cyan)}
/* las demás pantallas, en tarjeta */
.sis .dg .dg-pane:not([data-pane="intro"]){background:var(--bg);color:var(--tinta);border-radius:var(--r);padding:clamp(26px,3.8vw,48px)}
.sis .dg .dg-pane:not([data-pane="intro"]) :where(p){color:var(--tinta-2)}
.sis .dg .dg-pane:not([data-pane="intro"]) h2{color:var(--tinta)}
.sis .dg .dg-pane:not([data-pane="intro"]) .dg-eyebrow{color:var(--acero)}
/* botones y opciones */
.sis .dg .dg-btn,.sis .dg .dg-cta{border-radius:999px;font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:-.005em;padding:14px 26px;background:var(--acero);color:#fff;transition:background .2s ease}
.sis .dg .dg-btn:hover,.sis .dg .dg-cta:hover{transform:none;box-shadow:none;background:#18406A;color:#fff}
.sis .dg [data-pane="intro"] .dg-btn{background:var(--cyan);color:var(--navy)}
.sis .dg [data-pane="intro"] .dg-btn:hover{background:#8ADCFF;color:var(--navy)}
.sis .dg .dg-cta-2{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.sis .dg .dg-cta-2:hover{background:var(--tinta);color:var(--bg)}
.sis .dg .dg-barra{background:var(--acero)}
.sis .dg .dg-opt{border-radius:var(--r-sm);border:1px solid var(--linea);background:#fff;box-shadow:none;font-family:var(--body)}
.sis .dg .dg-opt:hover{border-color:var(--acero);background:var(--hielo2);transform:none}
.sis .dg .dg-form{box-shadow:none;border-radius:var(--r-sm)}
.sis .dg .dg-form::before{display:none}
.sis .dg .dg-campo input,.sis .dg .dg-campo select{border-radius:var(--r-sm)}
.sis .dg .dg-atras{color:var(--gris)}
.sis .dg .dg-atras:hover{color:var(--acero)}
/* ---------- Recursos ---------- */
.sis .rec-form{display:grid;gap:var(--s2);margin-top:var(--s2);position:relative}
.sis .rec-form input{width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--linea);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:15.5px;color:var(--tinta)}
.sis .rec-form input:focus{outline:2px solid var(--acero);outline-offset:1px}
.sis .rec-form .btn{justify-self:start}
.sis .rec-form [data-descarga-msg]:empty{display:none}
.sis .rec-nota{font-size:14px;color:var(--gris)}
/* ---------- casos (listado) · prefijo cx- (Brava, 29-sep) ---------- */
.sis .cx-hero{min-height:58vh}
.sis .cx-h1{font-size:clamp(40px,5.4vw,76px);line-height:1;max-width:16ch}
.sis .cx-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.sis .cx-grid .caso{aspect-ratio:auto;min-height:clamp(460px,40vw,580px);display:flex}
.sis .cx-grid .caso__in{height:auto;flex:1}
.sis .cx-grid .caso__t{max-width:none;font-size:clamp(19px,1.6vw,23px)}
.sis .cx-grid .caso__t--marca b{font-size:clamp(34px,3.3vw,50px)}
.sis .cx-grid .caso .foto__vin{background:linear-gradient(180deg,rgba(6,9,15,.9) 0%,rgba(6,9,15,.7) 38%,rgba(6,9,15,.55) 62%,rgba(6,9,15,.9) 100%)}
.sis .cx-pie{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.sis .cx-pie .caso__logo{margin-top:0}
.sis .cx-ver{color:var(--cyan);font-size:15px}
@media (max-width:1024px){.sis .cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sis .cx-grid{grid-template-columns:1fr}.sis .cx-grid .caso{min-height:420px}}
/* ---------- página de caso · prefijo cc- (plantilla de Brava, 29-sep) ---------- */
.sis .cc-hero .hero__in{align-items:end}
.sis .cc-h1{font-size:clamp(34px,4.4vw,62px);line-height:1.04;max-width:17ch}
.sis .cc-cifra{display:block;color:var(--cyan);font-size:1.5em;line-height:1;letter-spacing:-.045em;margin-bottom:.14em}
.sis .cc-hero .hero__fondo .foto__vin{background:linear-gradient(90deg,rgba(6,9,15,.9) 0%,rgba(6,9,15,.78) 55%,rgba(6,9,15,.6) 100%),linear-gradient(0deg,rgba(6,9,15,.9) 0%,rgba(6,9,15,.55) 60%,rgba(6,9,15,.45) 100%)}
.sis .cc-kicker{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.8vw,22px);line-height:1.35;letter-spacing:-.015em;color:#fff;max-width:30ch;margin-bottom:var(--s2)}
.sis .cc-logo{display:block;height:34px;width:auto;margin-top:var(--s4)}
.sis .cc-bloque{max-width:760px}
.sis .cc-bloque .h2{font-weight:400}
.sis .cc-bloque>p{margin-top:var(--s3);font-size:17px;line-height:1.65;color:var(--tinta)}
.sis .cc-sub{font-family:var(--display);font-weight:600;font-size:20px;color:var(--tinta);margin-top:var(--s5)}
.sis .cc-dos{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:var(--s5);background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.sis .cc-dos>div{background:var(--bg);padding:clamp(22px,2.6vw,32px)}
.sis .cc-dos>div.cc-persona{background:#fff}
.sis .cc-dos h3{font-family:var(--body);font-size:15px;font-weight:500;color:var(--acero);letter-spacing:0;margin-bottom:var(--s2)}
.sis .cc-dos p{font-size:16px;line-height:1.6;color:var(--tinta)}
.sis .cc-tabla{width:100%;border-collapse:collapse;margin-top:var(--s5);font-size:16px}
.sis .cc-tabla th,.sis .cc-tabla td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--linea)}
.sis .cc-tabla thead th{font-size:14px;font-weight:500;color:var(--gris);padding-bottom:12px}
.sis .cc-tabla tbody th{font-weight:500;color:var(--tinta);width:32%}
.sis .cc-tabla td{color:var(--gris)}
.sis .cc-tabla td.cc-hoy{font-family:var(--display);color:var(--acero);font-size:19px;letter-spacing:-.01em}
.sis .cc-tabla tr.cc-abre td.cc-hoy,.sis .cc-tabla tr.cc-abre td.cc-antes{font-size:24px}
.sis .cc-tabla tr.cc-abre td.cc-antes{font-family:var(--display);color:var(--tinta)}
.sis .cc-tabla td.cc-tipo{font-size:14px;color:var(--gris);white-space:nowrap}
.sis .cc-fuente{margin-top:var(--s4);font-size:14px;line-height:1.6;color:var(--gris);max-width:70ch}
.sis .cc-fuente b{color:var(--tinta);font-weight:600}
@media (max-width:760px){
.sis .cc-dos{grid-template-columns:1fr}
.sis .cc-tabla thead{display:none}
.sis .cc-tabla,.sis .cc-tabla tbody,.sis .cc-tabla tr,.sis .cc-tabla th,.sis .cc-tabla td{display:block;width:100%}
.sis .cc-tabla tr{padding:14px 0;border-bottom:1px solid var(--linea)}
.sis .cc-tabla th,.sis .cc-tabla td{border:0;padding:3px 0}
.sis .cc-tabla tbody th{width:100%;margin-bottom:6px}
.sis .cc-tabla td::before{content:attr(data-e) " ";color:var(--gris);font-family:var(--body);font-size:13px;display:inline-block;min-width:64px}
}
/* ---------- artículo de Insights · prefijo art- (plantilla de Brava, 29-sep) ----------
El HTML lo escribe tools/build-insights.mjs. Medida de lectura: columna de 630 px. */
.sis .art-h1{font-size:clamp(36px,4.6vw,64px);line-height:1.04;max-width:16ch}
.sis .art-meta{display:grid;gap:6px;font-size:15px;color:rgba(234,245,255,.82)}
.sis .art-grid{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,630px);column-gap:clamp(40px,11vw,196px);align-items:start}
.sis .art-lado{position:sticky;top:calc(var(--navh) + 24px)}
.sis .art-comp{font-size:14px}
.sis .art-comp__t{color:var(--tinta);font-weight:500;margin-bottom:6px}
.sis .art-comp__t:not(:first-child){margin-top:var(--s3)}
.sis .art-comp ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px}
.sis .art-comp a,.sis .art-comp button{color:var(--gris);font-size:14px;padding:0}
.sis .art-comp a:hover,.sis .art-comp button:hover{color:var(--acero)}
.sis .art-copia{position:relative}
.sis .art-copia [data-copiar-msg]{position:absolute;left:0;top:calc(100% + 4px);white-space:nowrap;font-size:12px;color:var(--acero);opacity:0;transition:opacity .2s;pointer-events:none}
.sis .art-cuerpo{font-size:17.5px;line-height:1.72;color:var(--tinta)}
.sis .art-cuerpo>p,.sis .art-cuerpo>ul,.sis .art-cuerpo>ol{margin:0 0 20px}
.sis .art-cuerpo>ul,.sis .art-cuerpo>ol{padding-left:22px}
.sis .art-cuerpo li{margin-bottom:8px;padding-left:4px}
.sis .art-cuerpo li::marker{color:var(--acero);font-weight:600}
.sis .art-cuerpo strong{font-weight:600}
.sis .art-cuerpo a{color:var(--acero);text-decoration:underline;text-underline-offset:3px}
.sis .art-cuerpo h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.4vw,33px);line-height:1.2;letter-spacing:-.02em;margin:60px 0 18px}
.sis .art-cuerpo h3{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.3;margin:36px 0 12px}
.sis .art-cuerpo>h2:first-child,.sis .art-cuerpo>blockquote:first-child{margin-top:0}
.sis .art-cond{display:block;font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;color:var(--acero);margin-bottom:10px}
.sis .art-cuerpo blockquote{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.7vw,22px);line-height:1.45;letter-spacing:-.01em;border-left:2px solid var(--acero);padding:4px 0 4px 22px;margin:36px 0 44px}
.sis .art-faq{margin-top:64px}
.sis .art-faq h2{margin-top:0}
.sis .art-faq__i{border-top:1px solid var(--linea);padding:20px 0}
.sis .art-faq__i:last-child{border-bottom:1px solid var(--linea)}
.sis .art-faq__i h3{font-family:var(--display);font-weight:400;font-size:19px;margin:0 0 8px}
.sis .art-faq__i p{font-size:15.5px;line-height:1.6;color:var(--gris);margin:0}
.sis .art-cta__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.sis .art-cta__p{margin-top:var(--s2);color:var(--gris-sobre,rgba(234,245,255,.78));font-size:16px}
.sis .art-cta .hero__ctas{margin-top:var(--s4)}
.sis .art-cta__alt{margin-top:var(--s3);font-size:14.5px;color:rgba(234,245,255,.78)}
.sis .art-cta__alt a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.sis .art-form{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:clamp(20px,2.4vw,28px)}
.sis .art-form__fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sis .art-form input,.sis .art-form textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);background:rgba(255,255,255,.05);color:#fff;min-height:46px}
.sis .art-form input::placeholder,.sis .art-form textarea::placeholder{color:rgba(234,245,255,.55)}
.sis .art-form textarea{min-height:110px;resize:vertical}
.sis .art-form .btn{align-self:flex-start}
.sis .art-form [data-blog-msg]{font-size:14px}
.sis .art-form [data-blog-msg]:empty{display:none}
.sis .art-mas .ins-arts{margin-top:var(--s5)}
.sis .art-volver{display:inline-flex;gap:6px;margin-top:var(--s5)}
@media (max-width:900px){
.sis .art-grid{grid-template-columns:1fr}
.sis .art-lado{position:static;border-bottom:1px solid var(--linea);padding-bottom:var(--s4);margin-bottom:var(--s5)}
.sis .art-cta__in{grid-template-columns:1fr}
}
@media (max-width:520px){.sis .art-form__fila{grid-template-columns:1fr}}
/* ---------- legales · prefijo leg- (plantilla de Brava, 29-sep) ----------
Sin foto, fondo claro; el menú queda sólido porque no hay .hero ni .dark. */
.sis .leg{background:var(--bg)}
body.sis main > section.leg-cab{padding-block:clamp(56px,8vw,112px) clamp(36px,4.5vw,56px);border-bottom:1px solid var(--linea)}
.sis .leg-cat{font-size:15px;font-weight:500;color:var(--acero);margin-bottom:var(--s3)}
.sis .leg-h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,5vw,68px);line-height:1;letter-spacing:-.03em;color:var(--tinta)}
.sis .leg-vig{margin-top:var(--s3);color:var(--gris);font-size:16px}
body.sis main > section.leg-sec{padding-block:clamp(40px,5vw,72px) clamp(72px,9vw,128px)}
.sis .leg-cuerpo{display:grid;gap:var(--s4)}
@media (min-width:1024px){.sis .leg-cuerpo{grid-template-columns:260px minmax(0,590px);gap:clamp(48px,6vw,104px)}}
.sis .leg-indice{font-size:15px}
@media (min-width:1024px){.sis .leg-indice{position:sticky;top:calc(var(--navh) + 32px);align-self:start}}
.sis .leg-indice p{font-weight:500;color:var(--tinta);margin:0 0 10px}
.sis .leg-indice ol{list-style:none;display:grid;gap:2px;border-left:1px solid var(--linea)}
.sis .leg-indice a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--gris);line-height:1.4;transition:color .2s,border-color .2s}
.sis .leg-indice a:hover{color:var(--acero);border-left-color:var(--acero)}
@media (max-width:1023px){.sis .leg-indice{padding-bottom:var(--s3);border-bottom:1px solid var(--linea)}}
.sis .leg-texto{min-width:0}
.sis .leg-texto h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.1vw,27px);line-height:1.2;letter-spacing:-.018em;color:var(--tinta);margin:clamp(44px,5vw,64px) 0 var(--s2);scroll-margin-top:calc(var(--navh) + 24px)}
.sis .leg-texto h2:first-child{margin-top:0}
.sis .leg-texto p,.sis .leg-texto li{font-size:17px;line-height:1.72;color:var(--tinta)}
.sis .leg-texto p{margin:0 0 1em}
.sis .leg-texto ul{margin:0 0 1.1em;padding-left:1.3em;display:grid;gap:.45em}
.sis .leg-texto ul li::marker{color:var(--acero)}
.sis .leg-texto strong{font-weight:600}
.sis .leg-texto a{color:var(--acero);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.sis .leg-texto .leg-act{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--linea);color:var(--gris);font-size:15.5px}
.sis .leg-texto .legal-prevalece{padding:14px 16px;border-left:2px solid var(--acero);background:var(--bg-alt)}
.sis .leg-volver{margin-top:var(--s5);display:inline-flex;gap:6px}
/* ---------- video del encabezado del home (Brava, 7-oct) ----------
Encima del póster; aparece solo cuando ya está reproduciendo. Qué archivo
se carga (horizontal o el corte vertical del celular) y cuándo lo decide
assets/sistema.js; mientras, el póster hace de imagen fija. */
.sis .hero__video{z-index:2;opacity:0;transition:opacity .9s ease}
.sis .hero__video--listo{opacity:1}
@media (prefers-reduced-motion:reduce){.sis .hero__video{display:none}}
/* botón secundario dentro de la caja clara del formulario, aunque esté en un encabezado oscuro */
.sis .sx-form .btn--sec{color:var(--tinta);border-color:var(--tinta)}
.sis .sx-form .btn--sec:hover{background:var(--tinta);color:var(--bg)}
/* página 404 (/404/index.html, la sirve nginx con error_page) */
.sis .p404-enlaces{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:var(--s4)}
.sis .p404-en{margin-top:var(--s5);color:var(--gris);font-size:15px}
/* el botón del encabezado de las industrias baja aquí: que el menú fijo no lo tape */
.sis .icu-form-sec{scroll-margin-top:var(--navh)}
/* Portadas de artículo: son ilustraciones con texto propio, no fotos. Como fondo del
encabezado, sus etiquetas competían con el titular (revisión del 9-oct): se apagan y
se desenfocan un poco hasta que cada artículo tenga foto (pendiente de Brava). */
.sis .art-hero .foto__real{opacity:.55;filter:blur(2px) saturate(.9)}
.sis .art-hero .foto__vin{background:linear-gradient(0deg,rgba(6,9,15,.96) 0%,rgba(6,9,15,.88) 45%,rgba(6,9,15,.7) 75%,rgba(6,9,15,.6) 100%)}