/* =====================================================================
   DEMMA Solutions — Diseño «Nexo»
   Formal y corporativo. Portada oscura con una red de conexiones que
   se mueve y sigue el mouse (assets/js/nexo.js); el resto de la página
   en claro. Mismo morado de marca (calafate) con verde y amarillo.
   Se activa con <html data-diseno="nexo"> (panel → «Diseño del sitio»).
   ===================================================================== */

/* ---------- claro: toda la página ---------- */
[data-diseno="nexo"] {
  /* Fondo base de la pagina: se ve en las esquinas redondeadas del navegador y
     al rebotar el scroll. Va oscuro para que calce con el menu y el pie. */
  background-color: #0D0A1C;
  --n-morado: #6B3FD9; --n-morado-rgb: 107, 63, 217; --n-morado-texto: #5A30C4;
  --n-verde: #3C8A2E;  --n-verde-rgb: 60, 138, 46;
  --n-amarillo: #E0B21B;

  --demma-fondo: #E7E3EF;
  --demma-fondo-hondo: #DFDAEA;
  --demma-superficie: #F1EEF6;
  --demma-superficie-2: #E3DEEC;
  --demma-vidrio: rgba(26, 22, 48, .035);
  --demma-vidrio-borde: #CBC3DC;
  --demma-borde: #D4CDE2;
  --demma-texto: #1F1B36;
  --demma-texto-suave: #5D5874;
  --demma-marca: #120F24;
  --demma-acento: var(--n-morado);
  --demma-sobre-acento: #FFFFFF;
  --demma-acento-texto: var(--n-morado-texto);
  --demma-destacado: var(--n-verde);
  --demma-secundario: var(--n-morado-texto);
  --demma-calido: var(--n-amarillo);
  --demma-exito: #2F7D3A; --demma-exito-suave: rgba(47, 125, 58, .1);
  --demma-foco: var(--n-morado);
  --demma-fuente-titulos: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --demma-fuente-texto: "Inter", "Segoe UI", system-ui, sans-serif;
  --demma-fuente-datos: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --t-1: var(--n-morado); --t-1-rgb: var(--n-morado-rgb);
  --t-2: var(--n-verde);  --t-2-rgb: var(--n-verde-rgb);
  --t-3: #4B4666;
  --t-4: var(--n-amarillo);
  --t-panel: #ECE8F3;     --t-panel-rgb: 236, 232, 243;
  --t-fondo-rgb: 231, 227, 239;
  --t-radio-btn: 8px;
  --radio: 12px;
  color-scheme: light;
}

/* ---------- oscuro: portada, pie y menú sobre la portada ---------- */
[data-diseno="nexo"] .hero,
[data-diseno="nexo"] .pie,
[data-diseno="nexo"] .nav-d:not(.claro) {
  --demma-fondo: #0D0A1C;
  --demma-fondo-hondo: #080612;
  --demma-superficie: #17132B;
  --demma-superficie-2: #211B3B;
  --demma-vidrio: rgba(243, 241, 250, .05);
  --demma-vidrio-borde: rgba(183, 148, 255, .22);
  --demma-borde: #2E2750;
  --demma-texto: #F3F1FA;
  --demma-texto-suave: #A8A2C2;
  --demma-marca: #FFFFFF;
  --demma-acento: #B794FF;
  --demma-sobre-acento: #1C0E3A;
  --demma-acento-texto: #D9C7FF;
  --demma-destacado: #A3E27A;
  --demma-secundario: #D9C7FF;
  --demma-exito: #A3E27A; --demma-exito-suave: rgba(163, 226, 122, .13);
  --demma-foco: #A3E27A;
  --t-1: #B794FF; --t-1-rgb: 183, 148, 255;
  --t-2: #A3E27A; --t-2-rgb: 163, 226, 122;
  --t-3: #CFC8E6;
  --t-4: #F4D35E;
  --t-panel: #120E24; --t-panel-rgb: 18, 14, 36;
  --t-fondo-rgb: 13, 10, 28;
  color-scheme: dark;
  color: var(--demma-texto);
}

/* ---------- tipografía ---------- */
[data-diseno="nexo"] h3 { letter-spacing: -.01em; }
[data-diseno="nexo"] h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); font-weight: 800; line-height: 1.06; letter-spacing: -.028em; }
[data-diseno="nexo"] h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); font-weight: 700; line-height: 1.14; letter-spacing: -.02em; }
[data-diseno="nexo"] .pill { letter-spacing: 0; font-family: var(--demma-fuente-texto); }
[data-diseno="nexo"] .p-ok { color: var(--demma-exito); }
[data-diseno="nexo"] .hero h1 em { background: linear-gradient(90deg, #B794FF, #E6DAFF 55%, #A3E27A); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-diseno="nexo"] .destacado { background: linear-gradient(90deg, var(--n-morado), #8F5CF0 55%, var(--n-verde)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-diseno="nexo"] .eyebrow { font-family: var(--demma-fuente-texto); font-weight: 600; font-size: .78rem; letter-spacing: .1em; padding: .3rem .7rem; border-radius: 999px; background: rgba(var(--t-1-rgb), .1); border: 1px solid rgba(var(--t-1-rgb), .22); }
[data-diseno="nexo"] .eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--t-2); box-shadow: 0 0 0 3px rgba(var(--t-2-rgb), .2); }
[data-diseno="nexo"] .lead-2 { font-size: 1.08rem; }

/* ---------- menú ---------- */
[data-diseno="nexo"] .nav-d { background: rgba(13, 10, 28, .97); border-bottom-color: rgba(183, 148, 255, .14); transition: background .3s, border-color .3s, box-shadow .3s; }
[data-diseno="nexo"] .nav-d.claro { background: rgba(236, 232, 243, .93); border-bottom-color: var(--demma-borde); box-shadow: 0 6px 24px -18px rgba(18, 15, 36, .45); }
[data-diseno="nexo"] .nav-d .nav-link { border-radius: 8px; font-weight: 500; }
[data-diseno="nexo"] .brand { font-weight: 800; letter-spacing: -.01em; }

/* ---------- botones ---------- */
[data-diseno="nexo"] .btn-aurora { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px -12px rgba(var(--t-1-rgb), .9); font-weight: 600; }
[data-diseno="nexo"] .btn-aurora:hover { box-shadow: 0 0 0 4px rgba(var(--t-1-rgb), .18), 0 12px 26px -12px rgba(var(--t-1-rgb), .9); }
[data-diseno="nexo"] .btn-vidrio { font-weight: 600; background: var(--demma-superficie); backdrop-filter: none; }
[data-diseno="nexo"] .hero .btn-vidrio { background: rgba(243, 241, 250, .06); }
[data-diseno="nexo"] .btn-aurora::after { content: "→"; transition: transform .2s; }
[data-diseno="nexo"] .btn-aurora:hover::after { transform: translateX(3px); }
[data-diseno="nexo"] .wsp::after, [data-diseno="nexo"] .nav-d .btn-aurora::after, [data-diseno="nexo"] button.btn-aurora::after { content: none; }

/* ---------- portada ---------- */
/* La portada: tinta plana de la marca. Sin manchas de luz de colores y sin
   paisajes dibujados —se ven de caricatura—. La profundidad la ponen la
   rejilla fina y la red de puntos, que son estructura, no decoracion. */
[data-diseno="nexo"] .hero { background: #0B0818; }
[data-diseno="nexo"] .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,8,24,0) 55%, rgba(13,10,28,.85) 88%, #0D0A1C 100%); }
[data-diseno="nexo"] .aurora, [data-diseno="nexo"] .estrellas, [data-diseno="nexo"] .curvas, [data-diseno="nexo"] .resplandor,
[data-diseno="nexo"] .coordenadas, [data-diseno="nexo"] .cordillera { display: none; }
[data-diseno="nexo"] .red { display: block; position: absolute; inset: 0; }
/* La cordillera, trazada desde una fotografía real de los Andes (no dibujada a
   mano): una línea fina, como de plano, al pie de la portada. */
[data-diseno="nexo"] .cordillera-real { display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 11vw, 160px); z-index: 0; pointer-events: none; }
[data-diseno="nexo"] .cordillera-real .cr-relleno { fill: rgba(183, 148, 255, .06); }
[data-diseno="nexo"] .cordillera-real .cr-linea { fill: none; stroke: rgba(183, 148, 255, .5); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
html[data-tema]:not([data-tema=""]) .cordillera-real { display: none; }
[data-diseno="nexo"] .rejilla { display: block; position: absolute; inset: 0; background-image: linear-gradient(rgba(183,148,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(183,148,255,.06) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent 85%); mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent 85%); }
[data-diseno="nexo"] .hero-grid { padding-bottom: clamp(4rem, 8vw, 6.5rem); }
[data-diseno="nexo"] .hero::after { content: none; }
[data-diseno="nexo"] .rubros { background: transparent; border-top: 1px solid rgba(183, 148, 255, .16); padding-block: .3rem; }
[data-diseno="nexo"] .rubros a::before { transform: none; width: 6px; height: 6px; border-radius: 50%; background: var(--t-2); }
[data-diseno="nexo"] .cifras { gap: 1rem 0; }
[data-diseno="nexo"] .cifras div { padding: 0 2rem 0 0; margin-right: 2rem; border-right: 1px solid rgba(183, 148, 255, .2); }
[data-diseno="nexo"] .cifras div:last-child { border-right: 0; margin-right: 0; }
[data-diseno="nexo"] .cifras dd { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- fondo con fotografía (panel → Portada → «Fondo») ----------
   Una foto real de la cordillera, virada a la «hora azul» con la tinta y el
   morado de la marca. La red de puntos sigue ahí, más tenue sobre la foto.
   Un velo oscuro —del color de fondo de la portada, así cada temporada pone el
   suyo— deja la foto a la vista por un lado y apoya el texto por el otro. */
.cielo .foto { display: none; }
html[data-fondo] .cielo { --velo-rgb: 11, 8, 24; }
html[data-fondo] .cielo .foto { display: block; position: absolute; inset: 0; background-position: center 58%; background-size: cover; background-repeat: no-repeat; }
/* La foto viene del original de 4000 px y se sirve en cuatro tamaños: el que
   toca según el ancho de la pantalla y su densidad (un monitor grande o uno
   «retina» recibe la versión de 2560 o 3840 px; un celular, la de 1000). */
html[data-fondo="andes"] .cielo .foto { background-image: url("../img/portada/andes-1920.jpg"); }
html[data-fondo="torres"] .cielo .foto { background-image: url("../img/portada/torres-1920.jpg"); background-position: center 38%; }
@media (max-width: 991.98px) {
  html[data-fondo="andes"] .cielo .foto { background-image: url("../img/portada/andes-1000.jpg"); }
  html[data-fondo="torres"] .cielo .foto { background-image: url("../img/portada/torres-1000.jpg"); }
}
@media (max-width: 991.98px) and (min-resolution: 1.5dppx), (min-width: 992px) and (max-width: 1920px) and (max-resolution: 1.49dppx) {
  html[data-fondo="andes"] .cielo .foto { background-image: url("../img/portada/andes-1920.jpg"); }
  html[data-fondo="torres"] .cielo .foto { background-image: url("../img/portada/torres-1920.jpg"); }
}
@media (min-width: 1921px), (min-width: 1200px) and (min-resolution: 1.5dppx) {
  html[data-fondo="andes"] .cielo .foto { background-image: url("../img/portada/andes-2560.jpg"); }
  html[data-fondo="torres"] .cielo .foto { background-image: url("../img/portada/torres-2560.jpg"); }
}
@media (min-width: 2561px), (min-width: 1700px) and (min-resolution: 1.5dppx) {
  html[data-fondo="andes"] .cielo .foto { background-image: url("../img/portada/andes-3840.jpg"); }
  html[data-fondo="torres"] .cielo .foto { background-image: url("../img/portada/torres-3840.jpg"); }
}
html[data-fondo] .cielo .foto::after { content: ""; position: absolute; inset: 0; }
/* clásico: el texto va a la izquierda, la foto respira a la derecha, bajo la vitrina */
html[data-fondo] .cielo .foto::after { background:
  linear-gradient(180deg, rgba(var(--velo-rgb), .55) 0%, rgba(var(--velo-rgb), .1) 30%, rgba(var(--velo-rgb), 0) 60%),
  linear-gradient(90deg, rgba(var(--velo-rgb), .96) 0%, rgba(var(--velo-rgb), .8) 38%, rgba(var(--velo-rgb), .35) 70%, rgba(var(--velo-rgb), .2) 100%); }
/* derecha: la foto a la izquierda, el texto a la derecha (la «hora azul» aprobada) */
html[data-fondo][data-portada="derecha"] .cielo .foto::after { background:
  linear-gradient(180deg, rgba(var(--velo-rgb), .6) 0%, rgba(var(--velo-rgb), .12) 24%, rgba(var(--velo-rgb), 0) 40%),
  linear-gradient(90deg, rgba(var(--velo-rgb), .06) 26%, rgba(var(--velo-rgb), .8) 54%, rgba(var(--velo-rgb), .97) 100%); }
/* centrado: la foto entera, el texto encima, en el cielo */
html[data-fondo][data-portada="centrado"] .cielo .foto::after { background:
  linear-gradient(180deg, rgba(var(--velo-rgb), .9) 0%, rgba(var(--velo-rgb), .7) 45%, rgba(var(--velo-rgb), .35) 75%, rgba(var(--velo-rgb), .78) 100%); }
html[data-fondo] .hero { background: rgb(var(--velo-rgb, 11, 8, 24)); }
html[data-fondo] .hero::before { background: linear-gradient(180deg, rgba(11,8,24,0) 70%, rgba(13,10,28,.8) 92%, #0D0A1C 100%); }
html[data-fondo] .cordillera-real, html[data-fondo] .rejilla { display: none; }
/* la atmósfera de las temporadas (atmosfera.js): solo con foto y temporada */
.atmosfera { display: none; }
html[data-fondo][data-tema] .atmosfera { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-fondo][data-tema] .temporada span { display: none; }
html[data-fondo] .red { opacity: .75; }
html[data-fondo][data-portada="derecha"] .red { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.35) 40%, #000 62%); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.35) 40%, #000 62%); }
html[data-fondo]:not([data-portada]) .red { -webkit-mask-image: linear-gradient(90deg, #000 40%, rgba(0,0,0,.35) 65%); mask-image: linear-gradient(90deg, #000 40%, rgba(0,0,0,.35) 65%); }
html[data-fondo] .hero .btn-vidrio { background: rgba(13, 10, 28, .4); }

/* ---------- formatos de la portada (panel → Portada → «Formato») ---------- */
/* derecha: una sola columna a la derecha; la lista de soluciones reemplaza la vitrina y la tira */
html[data-portada="derecha"] .hero-grid.sin-vitrina { grid-template-columns: minmax(0, 1fr) minmax(0, 720px); }
html[data-portada="derecha"] .hero-grid.sin-vitrina > .hero-texto { grid-column: 2; }
html[data-portada="derecha"] .hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
html[data-portada] .hero-grid { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
html[data-portada] .rubros, html[data-portada] .hero::after { display: none; }
html[data-portada] .hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
html[data-portada] .hero .lead { margin: 1.2rem 0 1.6rem; }
html[data-portada] .cifras { margin-top: 2rem; }
/* centrado: todo al medio, la lista en una fila */
html[data-portada="centrado"] .hero-grid.sin-vitrina { grid-template-columns: minmax(0, 860px); justify-content: center; text-align: center; }
html[data-portada="centrado"] .hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
html[data-portada="centrado"] .hero-cta, html[data-portada="centrado"] .cifras { justify-content: center; }
html[data-portada="centrado"] .hero-texto .lead { margin-inline: auto; max-width: 62ch; }
html[data-portada="centrado"] .t-saludo { margin-inline: auto; }

/* la lista de soluciones de la portada: nombre, qué es y una flecha; sin estados */
.hero-lista { display: grid; margin-top: 2.1rem; border-top: 1px solid rgba(var(--t-1-rgb), .3); }
.hero-lista a { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: baseline; padding: .72rem 0; border-bottom: 1px solid rgba(var(--t-1-rgb), .16); color: var(--demma-texto); text-decoration: none; min-height: var(--tap); }
.hero-lista b { font: 700 1.02rem/1.25 var(--demma-fuente-titulos); letter-spacing: -.01em; }
.hero-lista span { font-size: .9rem; color: var(--demma-texto-suave); text-align: right; }
.hero-lista i { font-style: normal; font-weight: 700; color: var(--t-1); transition: transform .2s; }
.hero-lista a:hover b { color: var(--t-1); }
.hero-lista a:hover i { transform: translateX(3px); }
html[data-portada="centrado"] .hero-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; border-top: 0; margin-top: 3rem; text-align: left; }
html[data-portada="centrado"] .hero-lista a { grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: start; gap: .5rem 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(var(--t-1-rgb), .22); border-radius: 10px; background: rgba(var(--velo-rgb, 11, 8, 24), .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-portada="centrado"] .hero-lista span { grid-column: 1 / -1; text-align: left; }
html[data-portada="centrado"] .hero-lista i { grid-row: 1; grid-column: 2; }
@media (max-width: 991.98px) {
  html[data-portada="derecha"] .hero-grid.sin-vitrina { grid-template-columns: minmax(0, 1fr); }
  html[data-portada="derecha"] .hero-grid.sin-vitrina > .hero-texto { grid-column: 1; }
  html[data-fondo] .cielo .foto::after, html[data-fondo][data-portada="derecha"] .cielo .foto::after, html[data-fondo][data-portada="centrado"] .cielo .foto::after { background: linear-gradient(180deg, rgba(var(--velo-rgb), .8) 0%, rgba(var(--velo-rgb), .6) 30%, rgba(var(--velo-rgb), .72) 70%, rgba(var(--velo-rgb), .95) 100%); }
  html[data-portada="centrado"] .hero-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-fondo] .red { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 575.98px) {
  html[data-portada="centrado"] .hero-lista { grid-template-columns: 1fr; }
  .hero-lista a { grid-template-columns: 1fr auto; }
  .hero-lista span { grid-column: 1 / -1; text-align: left; }
  .hero-lista i { grid-row: 1; grid-column: 2; }
}

/* vitrina */
[data-diseno="nexo"] .vitrina-tabs { border-radius: 12px; background: rgba(23, 19, 43, .7); }
[data-diseno="nexo"] .vitrina-tabs [role=tab] { border-radius: 8px; }
[data-diseno="nexo"] .vitrina-tabs [role=tab][aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--t-1), 0 8px 20px -14px rgba(0,0,0,.8); }
[data-diseno="nexo"] .maq, [data-diseno="nexo"] .tablero { border-radius: 12px; background: linear-gradient(180deg, rgba(27, 22, 50, .94), rgba(17, 13, 33, .94)); backdrop-filter: blur(6px); }
[data-diseno="nexo"] .cafe-tarjeta { border-radius: 16px; background: radial-gradient(80% 90% at 100% 0%, rgba(183,148,255,.6), transparent 60%), radial-gradient(70% 80% at 0% 100%, rgba(163,226,122,.35), transparent 60%), linear-gradient(135deg, #231B45, #110D24); }
[data-diseno="nexo"] .vitrina-progreso i { background: linear-gradient(90deg, #B794FF, #A3E27A); }

/* ---------- secciones claras ---------- */
[data-diseno="nexo"] .seccion-honda { border-block-color: var(--demma-borde); }
[data-diseno="nexo"] #erp { background: var(--t-panel); border-block: 1px solid var(--demma-borde); }
[data-diseno="nexo"] .solucion, [data-diseno="nexo"] .modulo, [data-diseno="nexo"] .demo-fila, [data-diseno="nexo"] .form-vidrio, [data-diseno="nexo"] .erp-visual, [data-diseno="nexo"] .erp-vacio { border-radius: 12px; box-shadow: 0 1px 2px rgba(18, 15, 36, .04), 0 12px 32px -24px rgba(18, 15, 36, .35); }
[data-diseno="nexo"] .solucion { transition: transform .25s, box-shadow .25s, border-color .25s; }
[data-diseno="nexo"] .solucion:hover { transform: translateY(-3px); border-color: rgba(var(--t-1-rgb), .35); box-shadow: 0 1px 2px rgba(18, 15, 36, .05), 0 22px 44px -26px rgba(var(--t-1-rgb), .55); }
[data-diseno="nexo"] .solucion::before { height: 0; }
[data-diseno="nexo"] .solucion::after, [data-diseno="nexo"] .principio::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--t-1-rgb), .08), transparent 60%); }
[data-diseno="nexo"] .solucion:hover::after, [data-diseno="nexo"] .principio:hover::after { opacity: 1; }
[data-diseno="nexo"] .solucion-estrella { background: linear-gradient(135deg, var(--demma-superficie) 40%, #E6DCF8); border-color: rgba(var(--t-1-rgb), .3); }
[data-diseno="nexo"] .solucion-estrella::before { height: 3px; background: linear-gradient(90deg, var(--n-morado), var(--n-verde)); }
[data-diseno="nexo"] .solucion li::before, [data-diseno="nexo"] .sistema li::before { width: 16px; height: 16px; margin-top: .22rem; transform: none; border-radius: 50%; background: rgba(var(--t-1-rgb), .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B3FD9' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
[data-diseno="nexo"] .solucion li, [data-diseno="nexo"] .sistema li { grid-template-columns: 16px 1fr; gap: .65rem; }
[data-diseno="nexo"] .p-rubro { background: var(--demma-superficie-2); color: var(--demma-texto-suave); border-color: var(--demma-borde); }
[data-diseno="nexo"] .p-estrella { background: rgba(var(--t-1-rgb), .1); color: var(--n-morado-texto); }
[data-diseno="nexo"] .p-pronto { border-color: var(--demma-borde); }

[data-diseno="nexo"] .principio { position: relative; background: var(--demma-superficie); border-color: var(--demma-borde); border-radius: 12px; }
[data-diseno="nexo"] .principio i { border-radius: 8px; background: rgba(var(--t-1-rgb), .1) !important; color: var(--n-morado-texto); font-family: var(--demma-fuente-datos); font-weight: 500; }
[data-diseno="nexo"] .principio:nth-child(4n+2) i { background: rgba(var(--t-2-rgb), .12) !important; color: var(--n-verde); }
[data-diseno="nexo"] .principio:nth-child(4n+4) i { background: rgba(224, 178, 27, .16) !important; color: #7A5E00; }
[data-diseno="nexo"] .checks li::before { border-radius: 8px; background: rgba(var(--t-1-rgb), .1); }
[data-diseno="nexo"] .erp-vacio { background: radial-gradient(circle at 1px 1px, rgba(var(--t-1-rgb), .18) 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(160deg, var(--demma-superficie), #E4D9F6); }
[data-diseno="nexo"] .erp-vacio .mosaico span { border-radius: 8px; background: #F5F2F9; border-color: var(--demma-borde); box-shadow: 0 6px 16px -14px rgba(18, 15, 36, .4); }
[data-diseno="nexo"] .erp-vacio .mosaico span.on { background: rgba(var(--t-1-rgb), .08); border-color: rgba(var(--t-1-rgb), .45); color: var(--n-morado-texto); }
[data-diseno="nexo"] .erp-vacio .mosaico span.v { background: rgba(var(--t-2-rgb), .08); border-color: rgba(var(--t-2-rgb), .45); }

[data-diseno="nexo"] .chip { border-radius: 8px; background: var(--demma-superficie); border-color: var(--demma-borde); }
[data-diseno="nexo"] .chip:hover { border-color: rgba(var(--t-1-rgb), .5); }
[data-diseno="nexo"] .chip[aria-pressed="true"] { background: var(--demma-acento); border-color: var(--demma-acento); color: var(--demma-sobre-acento); }
[data-diseno="nexo"] .bloque summary { color: var(--demma-texto-suave); }
[data-diseno="nexo"] .modulo { border-radius: 10px; }
[data-diseno="nexo"] .modulo.listo { border-color: rgba(var(--t-2-rgb), .45); }
[data-diseno="nexo"] .bloques.filtrando .modulo.en-pack { border-color: var(--t-1); box-shadow: 0 0 0 1px var(--t-1), 0 12px 28px -18px rgba(var(--t-1-rgb), .7); }
[data-diseno="nexo"] .nucleo { background: var(--demma-superficie); border-style: solid; border-color: var(--demma-borde); border-left: 3px solid var(--t-1); border-radius: 8px; }

[data-diseno="nexo"] .form-control, [data-diseno="nexo"] .form-select { background-color: #F7F5FA; border-radius: 8px; }
[data-diseno="nexo"] .form-control:focus, [data-diseno="nexo"] .form-select:focus { background-color: #F9F8FC; }
[data-diseno="nexo"] .form-vidrio { background: var(--demma-superficie); border-color: var(--demma-borde); backdrop-filter: none; }
[data-diseno="nexo"] .contacto { background: linear-gradient(180deg, var(--demma-fondo), #DDD3EE); }
[data-diseno="nexo"] .cielo-bajo { display: none; }
[data-diseno="nexo"] .dato a:hover { color: var(--n-morado-texto); }
[data-diseno="nexo"] .pie { background: #0D0A1C; color: var(--demma-texto-suave); border-top: 0; }
[data-diseno="nexo"] .modal-content { border-radius: 12px; }

/* aparición al bajar (lo agrega nexo.js; sin JavaScript todo se ve igual) */
[data-diseno="nexo"] .revelar { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-diseno="nexo"] .revelar.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-diseno="nexo"] .solucion, [data-diseno="nexo"] .nav-d { transition: none; }
  [data-diseno="nexo"] .solucion:hover { transform: none; }
  [data-diseno="nexo"] .revelar { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 767.98px) {
  [data-diseno="nexo"] .cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-diseno="nexo"] .cifras div { padding-right: .8rem; margin-right: .8rem; }
  [data-diseno="nexo"] .cifras dt { font-size: .8rem; line-height: 1.3; }
  [data-diseno="nexo"] .rubros { gap: 0 1rem; font-size: .88rem; }
  [data-diseno="nexo"] .rubros a { min-height: 36px; }
  [data-diseno="nexo"] .rejilla { background-size: 44px 44px; }
}