/* SERVILINUX · web pública. Usa los tokens de sl-tokens.css (oscuro por defecto, claro opcional). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; background-color: var(--sl-fondo); }
body { margin: 0; background: var(--sl-fondo); color: var(--sl-texto); font-family: var(--sl-fuente); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--sl-primario); text-decoration: none; }
a:hover { color: var(--sl-primario-hover); }
h1, h2, h3 { color: var(--sl-fuerte); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--sl-primario); outline-offset: 2px; border-radius: 4px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--sl-primario); color: var(--sl-sobre-primario); padding: .5em 1em; border-radius: var(--sl-radio-chico); z-index: 100; }
.saltar:focus { left: 16px; }
/* Ancho amplio para aprovechar la pantalla (los párrafos largos tienen su propio ancho de lectura) */
.contenedor { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.contenedor.estrecho { max-width: 780px; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; background: var(--sl-primario); color: var(--sl-sobre-primario); font-weight: 600; font-size: .95rem; padding: .8em 1.4em; border-radius: var(--sl-radio-chico); border: 1px solid transparent; transition: background .15s, transform .15s; white-space: nowrap; }
.boton:hover { background: var(--sl-primario-hover); color: var(--sl-sobre-primario); transform: translateY(-1px); }
.boton.secundario { background: transparent; color: var(--sl-fuerte); border-color: var(--sl-borde-fuerte); }
.boton.secundario:hover { background: var(--sl-secundario); color: var(--sl-fuerte); }
.boton.chico { padding: .5em 1em; font-size: .88rem; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--sl-fondo) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--sl-borde); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1em; }
.logo { font-family: var(--sl-mono); font-weight: 600; font-size: 1.15rem; color: var(--sl-fuerte); }
.logo-marca { font-family: var(--sl-mono); font-weight: 600; color: var(--sl-fuerte); }
.logo-cursor { font-family: var(--sl-mono); color: var(--sl-primario); animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.menu { display: flex; align-items: center; gap: 1.6em; font-size: .92rem; }
.menu > a { color: var(--sl-texto); }
.menu > a:hover { color: var(--sl-fuerte); }
.menu-herramientas { display: flex; align-items: center; gap: .9em; }
.idiomas { display: inline-flex; border: 1px solid var(--sl-borde); border-radius: 999px; overflow: hidden; }
.idiomas a { font-family: var(--sl-mono); font-size: .75rem; padding: .3em .65em; color: var(--sl-suave); }
.idiomas a[aria-current] { background: var(--sl-secundario); color: var(--sl-fuerte); }
.tema-boton, .menu-boton { background: transparent; border: 1px solid var(--sl-borde); color: var(--sl-texto); border-radius: var(--sl-radio-chico); width: 36px; height: 36px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tema-boton:hover, .menu-boton:hover { background: var(--sl-secundario); }
.entrar { color: var(--sl-texto) !important; }
.menu-boton { display: none; }

/* Hero */
.hero { padding: clamp(48px, 8vw, 96px) 0 64px; background: radial-gradient(60% 50% at 75% 20%, color-mix(in srgb, var(--sl-primario) 12%, transparent), transparent 70%), radial-gradient(40% 40% at 10% 90%, color-mix(in srgb, var(--sl-acento) 10%, transparent), transparent 70%); }
.hero-rejilla { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.etiqueta { display: inline-flex; align-items: center; gap: .55em; font-size: .82rem; color: var(--sl-texto); border: 1px solid var(--sl-borde); background: var(--sl-tarjeta); border-radius: 999px; padding: .3em .9em; margin-bottom: 1.4em; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--sl-primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sl-primario) 25%, transparent); }
.degradado { background: var(--sl-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-texto { font-size: 1.12rem; color: var(--sl-suave); max-width: 34em; }
.acciones { display: flex; flex-wrap: wrap; gap: .8em; margin: 1.8em 0; }
.hero-puntos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5em 1.4em; font-size: .9rem; color: var(--sl-suave); }
.hero-puntos .fas { color: var(--sl-primario); margin-right: .45em; }

/* Maqueta del panel */
.maqueta { background: var(--sl-tarjeta); border: 1px solid var(--sl-borde); border-radius: 16px; box-shadow: var(--sl-sombra); overflow: hidden; font-size: .88rem; }
.maqueta-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--sl-borde); background: var(--sl-secundario); }
.maqueta-barra span { width: 10px; height: 10px; border-radius: 50%; background: var(--sl-borde-fuerte); }
.maqueta-barra b { margin-left: auto; font-family: var(--sl-mono); font-weight: 600; font-size: .78rem; color: var(--sl-acento); }
.maqueta-cuerpo { padding: 16px; display: grid; gap: 14px; }
.servidor { display: flex; justify-content: space-between; align-items: center; }
.servidor strong { color: var(--sl-fuerte); font-family: var(--sl-mono); display: block; }
.servidor small { color: var(--sl-suave); font-family: var(--sl-mono); font-size: .75rem; }
.estado { font-size: .75rem; padding: .2em .7em; border-radius: 999px; border: 1px solid currentColor; }
.estado.ok { color: var(--sl-ok); }
.estado.aviso { color: var(--sl-aviso); }
.medidores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.medidores div { background: var(--sl-secundario); border-radius: var(--sl-radio-chico); padding: 10px; }
.medidores small { color: var(--sl-suave); font-size: .72rem; display: block; }
.medidores b { font-family: var(--sl-mono); color: var(--sl-fuerte); font-size: 1.15rem; }
.medidores i { display: block; height: 4px; border-radius: 4px; margin-top: 6px; background: linear-gradient(90deg, var(--sl-primario) var(--v), var(--sl-borde) var(--v)); }
.grafica { width: 100%; height: 70px; }
.grafica polyline { fill: none; stroke: var(--sl-acento); stroke-width: 2; vector-effect: non-scaling-stroke; }
.eisac { display: flex; gap: 10px; align-items: flex-start; background: color-mix(in srgb, var(--sl-acento) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sl-acento) 30%, transparent); border-radius: var(--sl-radio-chico); padding: 10px 12px; }
.eisac .fas { color: var(--sl-acento); margin-top: 3px; }
.eisac p { margin: 0; font-size: .84rem; }
.terminal { font-family: var(--sl-mono); font-size: .78rem; color: var(--sl-suave); background: var(--sl-fondo); border: 1px solid var(--sl-borde); border-radius: var(--sl-radio-chico); padding: 8px 10px; }
.terminal span { color: var(--sl-primario); }
.terminal em { font-style: normal; color: var(--sl-ok); }

/* Secciones */
.seccion { padding: clamp(56px, 8vw, 96px) 0; }
.seccion.alterna { background: var(--sl-tarjeta); border-top: 1px solid var(--sl-borde); border-bottom: 1px solid var(--sl-borde); }
.sobretitulo { font-family: var(--sl-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sl-primario); margin-bottom: .6em; }
.entrada { color: var(--sl-suave); max-width: 46em; }
.tarjeta { background: var(--sl-tarjeta); border: 1px solid var(--sl-borde); border-radius: var(--sl-radio); padding: 24px; }
.seccion.alterna .tarjeta { background: var(--sl-fondo); }
.icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--sl-primario) 14%, transparent); color: var(--sl-primario); margin-bottom: 14px; }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.modulo p, .publico p { color: var(--sl-suave); font-size: .93rem; }
.modulo ul { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.modulo li { padding: .3em 0 .3em 1.3em; position: relative; }
.modulo li::before { content: ''; position: absolute; left: 0; top: .85em; width: 7px; height: 7px; border-radius: 2px; background: var(--sl-primario); }

/* Planes */
.conmutador { display: inline-flex; border: 1px solid var(--sl-borde); border-radius: 999px; padding: 4px; margin: 8px 0 8px; background: var(--sl-tarjeta); }
.conmutador button { background: none; border: 0; color: var(--sl-suave); font: inherit; font-size: .88rem; padding: .45em 1.1em; border-radius: 999px; cursor: pointer; }
.conmutador button[aria-pressed="true"] { background: var(--sl-secundario); color: var(--sl-fuerte); }
.conmutador em { font-style: normal; color: var(--sl-primario); font-size: .78rem; margin-left: .3em; }
.bloque-titulo { margin: 40px 0 16px; font-size: 1rem; color: var(--sl-suave); font-weight: 600; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--sl-tarjeta); border: 1px solid var(--sl-borde); border-radius: var(--sl-radio); padding: 24px; }
.plan.destacado { border-color: color-mix(in srgb, var(--sl-primario) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-primario) 30%, transparent), var(--sl-sombra); }
.plan-cinta { position: absolute; top: -11px; left: 24px; background: var(--sl-degradado); color: var(--sl-sobre-primario); font-size: .72rem; font-weight: 600; padding: .2em .8em; border-radius: 999px; }
.plan h3 { margin-bottom: .2em; }
.plan-para { color: var(--sl-suave); font-size: .88rem; min-height: 2.8em; }
.plan-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35em; margin: .4em 0 1em; min-height: 2.6em; }
.plan-precio .cifra { font-family: var(--sl-mono); font-size: 1.9rem; font-weight: 600; color: var(--sl-fuerte); }
.plan-precio .periodo, .plan-precio .desde { color: var(--sl-suave); font-size: .85rem; }
.plan-lista { list-style: none; padding: 0; margin: 0 0 1.4em; font-size: .9rem; flex: 1; }
.plan-lista li { display: flex; gap: .7em; padding: .38em 0; border-bottom: 1px dashed var(--sl-borde); }
.plan-lista .fas { color: var(--sl-primario); width: 1.1em; text-align: center; margin-top: .3em; font-size: .85em; }
.plan .boton { width: 100%; }
.nota { color: var(--sl-suave); font-size: .82rem; margin-top: 24px; }

/* Cómo funciona */
.pasos { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.numero { font-family: var(--sl-mono); color: var(--sl-primario); font-size: .9rem; display: block; margin-bottom: 10px; }
.pasos p { color: var(--sl-suave); font-size: .93rem; margin: 0; }
.sistemas { margin-top: 24px; color: var(--sl-suave); font-size: .9rem; }
.sistemas .fas { color: var(--sl-primario); }

/* Aprende */
.aprende { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--sl-verde-azulado) 18%, transparent), transparent 70%), var(--sl-tarjeta); }
.aprende p { color: var(--sl-suave); margin: 0; max-width: 40em; }

/* Preguntas */
.pregunta { border-bottom: 1px solid var(--sl-borde); padding: 18px 0; }
.pregunta summary { cursor: pointer; color: var(--sl-fuerte); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1em; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: '+'; font-family: var(--sl-mono); color: var(--sl-primario); }
.pregunta[open] summary::after { content: '−'; }
.pregunta p { color: var(--sl-suave); margin: .8em 0 0; }

/* Pie */
.pie { border-top: 1px solid var(--sl-borde); padding: 40px 0 24px; font-size: .9rem; }
.pie-fila { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pie p { color: var(--sl-suave); margin: .5em 0 0; max-width: 28em; }
.pie nav { display: flex; gap: 1.4em; flex-wrap: wrap; align-items: flex-start; }
.pie nav a { color: var(--sl-texto); }
.copyright { color: var(--sl-suave); font-size: .8rem; margin-top: 24px; }

/* Adaptable */
@media (max-width: 1000px) {
  .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-rejilla { grid-template-columns: 1fr; }
  .maqueta { max-width: 560px; }
}
@media (max-width: 860px) {
  .menu-boton { display: inline-flex; }
  .menu { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--sl-fondo); border-bottom: 1px solid var(--sl-borde); padding: 8px 16px 16px; }
  .menu.abierto { display: flex; }
  .menu > a { padding: .8em 0; border-bottom: 1px solid var(--sl-borde); }
  .menu-herramientas { padding-top: 12px; flex-wrap: wrap; }
  .rejilla-3, .pasos, .rejilla-2 { grid-template-columns: 1fr; }
  .aprende { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .rejilla-4 { grid-template-columns: 1fr; }
  .medidores b { font-size: 1rem; }
  .acciones .boton { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo-cursor { animation: none; }
  .boton:hover { transform: none; }
}
.pie .copyright { margin: 24px auto 0; }

/* ===== «Así funciona»: flujos animados (parts/web_flujos.php + sitio.js) ===== */
.flujos { margin-top: 28px; }
.flujos-pestanas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.flujos-pestanas button { font: inherit; font-size: .9rem; display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.1em; border-radius: 999px; border: 1px solid var(--sl-borde); background: var(--sl-tarjeta); color: var(--sl-texto); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.flujos-pestanas button:hover { border-color: var(--sl-borde-fuerte); color: var(--sl-fuerte); }
.flujos-pestanas button[aria-selected="true"] { background: color-mix(in srgb, var(--sl-primario) 14%, transparent); border-color: color-mix(in srgb, var(--sl-primario) 55%, transparent); color: var(--sl-fuerte); }
.flujos-pestanas .fas { color: var(--sl-primario); }
.flujo[hidden] { display: none !important; }
.flujo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; padding: 24px; animation: sl-aparece .35s ease-out; }
@keyframes sl-aparece { from { opacity: 0; transform: translateY(6px); } }
.flujo-visual { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.diagrama { width: 100%; height: auto; background: radial-gradient(70% 90% at 50% 50%, color-mix(in srgb, var(--sl-primario) 6%, transparent), transparent 70%), var(--sl-fondo); border: 1px solid var(--sl-borde); border-radius: 12px; }
.diagrama .nodo rect { fill: var(--sl-tarjeta); stroke: var(--sl-borde-fuerte); stroke-width: 1.2; }
.diagrama .nodo.marca rect { stroke: color-mix(in srgb, var(--sl-primario) 70%, transparent); fill: color-mix(in srgb, var(--sl-primario) 8%, var(--sl-tarjeta)); }
.diagrama .nodo.rojo rect { stroke: color-mix(in srgb, var(--sl-peligro) 60%, transparent); }
.diagrama .nodo-icono { fill: var(--sl-primario); font-size: 16px; text-anchor: middle; }
.diagrama .nodo.rojo .nodo-icono { fill: var(--sl-peligro); }
.diagrama .nodo-titulo { fill: var(--sl-fuerte); font: 600 13px var(--sl-fuente); }
.diagrama .nodo-sub { fill: var(--sl-suave); font: 400 10.5px var(--sl-mono); }
.diagrama .camino { fill: none; stroke: var(--sl-borde-fuerte); stroke-width: 1.5; stroke-dasharray: 5 5; animation: sl-guiones 1.2s linear infinite; }
@keyframes sl-guiones { to { stroke-dashoffset: -20; } }
.diagrama .camino.verde { stroke: color-mix(in srgb, var(--sl-primario) 55%, transparent); }
.diagrama .camino.azul { stroke: color-mix(in srgb, var(--sl-acento) 55%, transparent); }
.diagrama .camino.acento { stroke: color-mix(in srgb, var(--sl-verde-azulado) 70%, transparent); }
.diagrama .camino.rojo { stroke: color-mix(in srgb, var(--sl-peligro) 55%, transparent); }
.diagrama .dato { fill: var(--sl-primario); filter: drop-shadow(0 0 4px var(--sl-primario)); }
.diagrama .dato.azul { fill: var(--sl-acento); filter: drop-shadow(0 0 4px var(--sl-acento)); }
.diagrama .dato.acento { fill: var(--sl-verde-azulado); }
.diagrama .dato.rojo { fill: var(--sl-peligro); filter: drop-shadow(0 0 4px var(--sl-peligro)); }
.diagrama .camino-etiqueta { fill: var(--sl-suave); font: 500 11px var(--sl-mono); }
.diagrama .muro { fill: color-mix(in srgb, var(--sl-primario) 18%, var(--sl-tarjeta)); stroke: var(--sl-primario); stroke-width: 1.2; }
.diagrama .contador-f2b { fill: var(--sl-primario); font: 600 11px var(--sl-mono); }
.flujo-consola { list-style: none; margin: 0; padding: 12px 14px; background: var(--sl-fondo); border: 1px solid var(--sl-borde); border-radius: 10px; font: 12.5px/1.7 var(--sl-mono); color: var(--sl-suave); min-height: 9em; }
.flujo-consola li { opacity: .18; transition: opacity .35s, color .35s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flujo-consola li.visto { opacity: 1; color: var(--sl-texto); }
.flujo-consola li.activo { color: var(--sl-primario); }
.flujo-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flujo-pasos li { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background .25s, border-color .25s; }
.flujo-pasos li:hover { background: var(--sl-secundario); }
.flujo-pasos li.activo { background: color-mix(in srgb, var(--sl-primario) 9%, transparent); border-color: color-mix(in srgb, var(--sl-primario) 35%, transparent); }
.flujo-pasos .paso-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 12px var(--sl-mono); color: var(--sl-suave); border: 1px solid var(--sl-borde-fuerte); transition: all .25s; }
.flujo-pasos li.hecho .paso-num { background: var(--sl-primario); border-color: var(--sl-primario); color: var(--sl-sobre-primario); }
.flujo-pasos li.activo .paso-num { border-color: var(--sl-primario); color: var(--sl-primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sl-primario) 20%, transparent); }
.flujo-pasos strong { display: block; color: var(--sl-fuerte); font-size: .95rem; }
.flujo-pasos span:not(.paso-num) { display: block; color: var(--sl-suave); font-size: .86rem; line-height: 1.5; margin-top: 2px; }
.chat-demo { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--sl-fondo); border: 1px solid var(--sl-borde); border-radius: 12px; min-height: 240px; }
.chat-burbuja { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.chat-burbuja.visto { opacity: 1; transform: none; }
.chat-burbuja.usuario { align-self: flex-end; background: color-mix(in srgb, var(--sl-primario) 14%, transparent); color: var(--sl-fuerte); border-bottom-right-radius: 4px; }
.chat-burbuja.ia { align-self: flex-start; background: var(--sl-tarjeta); border: 1px solid var(--sl-borde); color: var(--sl-texto); border-bottom-left-radius: 4px; }
.chat-burbuja.ia::before { content: '✦ Eisac'; display: block; font: 600 11px var(--sl-mono); color: var(--sl-acento); margin-bottom: 4px; }

/* ===== Observabilidad: panel «en vivo» ===== */
.obs-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.obs-puntos { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 16px; }
.obs-puntos li { display: flex; gap: 14px; }
.obs-puntos .icono { flex: none; margin: 0; }
.obs-puntos strong { display: block; color: var(--sl-fuerte); }
.obs-puntos span:not(.icono) { color: var(--sl-suave); font-size: .92rem; }
.obs-panel { padding: 18px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.mono { font-family: var(--sl-mono); }
.obs-cab { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--sl-texto); }
.obs-vivo { margin-left: auto; font: 600 11px var(--sl-mono); color: var(--sl-primario); text-transform: uppercase; letter-spacing: .1em; }
.obs-vivo::before { content: '●'; margin-right: 6px; animation: parpadeo 1.4s steps(1) infinite; }
.obs-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.obs-cifras div { background: var(--sl-secundario); border-radius: 10px; padding: 10px 12px; }
.obs-cifras small { display: block; color: var(--sl-suave); font-size: .75rem; }
.obs-cifras b { font-size: 1.35rem; color: var(--sl-fuerte); transition: color .3s; }
.obs-cifras b.aviso { color: var(--sl-aviso); }
.obs-grafica { width: 100%; height: 110px; background: var(--sl-fondo); border: 1px solid var(--sl-borde); border-radius: 10px; }
.obs-grafica polyline { fill: none; stroke: var(--sl-acento); stroke-width: 2; vector-effect: non-scaling-stroke; }
.obs-umbral { stroke: var(--sl-aviso); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .7; }
.obs-alerta, .obs-eisac { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: .86rem; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; min-height: 2.6em; }
.obs-alerta.visible, .obs-eisac.visible { opacity: 1; transform: none; }
.obs-alerta { background: color-mix(in srgb, var(--sl-aviso) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sl-aviso) 40%, transparent); color: var(--sl-fuerte); }
.obs-alerta .fas { color: var(--sl-aviso); margin-top: 3px; }
.obs-eisac { background: color-mix(in srgb, var(--sl-acento) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sl-acento) 35%, transparent); color: var(--sl-texto); min-height: 4.6em; }
.obs-eisac .fas { color: var(--sl-acento); margin-top: 3px; }

/* ===== La IA te explica: maqueta de la ayuda «?» ===== */
.obs-rejilla.invertida { grid-template-columns: 1fr 1fr; }
.ia-demo { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.ia-opcion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--sl-borde); border-radius: 10px; background: var(--sl-fondo); font-size: .9rem; color: var(--sl-fuerte); }
.ia-opcion input { accent-color: var(--sl-primario); margin-right: 6px; }
.ia-ayuda-boton { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--sl-primario); color: var(--sl-primario); display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--sl-fuente); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sl-primario) 50%, transparent); animation: sl-pulso 2.2s infinite; }
@keyframes sl-pulso { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ia-tarjeta { border: 1px solid var(--sl-borde-fuerte); border-radius: 12px; padding: 16px; background: var(--sl-tarjeta); box-shadow: var(--sl-sombra); position: relative; }
.ia-tarjeta::before { content: ''; position: absolute; top: -7px; right: 22px; width: 12px; height: 12px; background: var(--sl-tarjeta); border-left: 1px solid var(--sl-borde-fuerte); border-top: 1px solid var(--sl-borde-fuerte); transform: rotate(45deg); }
.ia-tarjeta small { display: block; color: var(--sl-suave); font-size: .75rem; }
.ia-tarjeta strong { display: block; color: var(--sl-fuerte); margin: 2px 0 6px; }
.ia-tarjeta p { color: var(--sl-texto); font-size: .88rem; margin: 0 0 12px; }
.ia-tarjeta-boton { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; padding: .5em .9em; border-radius: 8px; background: var(--sl-primario); color: var(--sl-sobre-primario); }

@media (max-width: 1000px) {
  .flujo, .obs-rejilla, .obs-rejilla.invertida { grid-template-columns: 1fr; }
  .obs-rejilla.invertida .ia-demo { order: 2; }
}
@media (max-width: 520px) {
  .flujo { padding: 14px; }
  .flujos-pestanas button { font-size: .82rem; padding: .5em .8em; }
  .flujo-consola { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .diagrama .camino, .obs-vivo::before, .ia-ayuda-boton { animation: none; }
  .flujo-consola li, .chat-burbuja { opacity: 1; transform: none; }
}
.plan-precio .cifra.pronto { font-family: var(--sl-fuente); font-size: 1.45rem; color: var(--sl-primario); }
/* Página bajo las barras del sistema del móvil (viewport-fit=cover): márgenes seguros */
.cabecera { padding-top: env(safe-area-inset-top, 0px); }
.pie { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ===== Servicios, ahorro y próximamente (parts/web_servicios.php + sitio.js) ===== */
.tipos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 32px; }
.tipo { padding: 20px; }
.tipo h3 { font-size: 1.02rem; margin: 12px 0 6px; display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.tipo p { color: var(--sl-suave); font-size: .88rem; margin: 0; }
.tipo.pronto { border-style: dashed; }
.tipo.pronto .icono { background: var(--sl-secundario); color: var(--sl-suave); }
.insignia { font: 500 .68rem var(--sl-mono); text-transform: uppercase; letter-spacing: .06em; padding: .2em .6em; border-radius: 999px; border: 1px dashed var(--sl-borde-fuerte); color: var(--sl-suave); }
.chips-lista { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-lista li { display: inline-flex; align-items: center; gap: .5em; font-size: .85rem; padding: .45em .9em; border-radius: 999px; border: 1px solid var(--sl-borde); background: var(--sl-fondo); color: var(--sl-texto); }
.chips-lista .fas, .lista-check .fas { color: var(--sl-primario); font-size: .8em; }
.lista-check { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: .45em; font-size: .92rem; }
.lista-check li { display: flex; gap: .6em; align-items: baseline; }
.nubes { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; margin-top: 40px; }
.nubes h3 { margin: 0 0 8px; font-size: 1.25rem; }
.nubes p { color: var(--sl-suave); margin: 0; }
.nubes-mapa { width: 100%; max-width: 420px; justify-self: center; overflow: visible; }
.nubes-mapa .nodo-titulo { font-size: 11px; }
.herramientas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.herramienta { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--sl-borde); border-radius: var(--sl-radio); background: var(--sl-fondo); transition: border-color .15s, transform .15s; }
.herramienta:hover { border-color: var(--sl-borde-fuerte); transform: translateY(-2px); }
.herramienta > span { color: var(--sl-primario); font-size: 1.15rem; width: 1.4em; text-align: center; margin-top: 2px; }
.herramienta strong { display: block; color: var(--sl-fuerte); font-size: .95rem; }
.herramienta small { display: block; color: var(--sl-suave); font-size: .84rem; line-height: 1.5; margin-top: 2px; }

/* Calculadora de ahorro */
.calculadora { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; margin-top: 32px; }
.calc-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; align-content: start; }
.calc-datos label { display: grid; gap: 6px; font-size: .86rem; color: var(--sl-texto); font-weight: 500; }
.calc-datos input[type="number"], .calc-datos select { font: inherit; font-size: 1rem; padding: .6em .75em; border-radius: var(--sl-radio-chico); border: 1px solid var(--sl-borde-fuerte); background: var(--sl-fondo); color: var(--sl-fuerte); width: 100%; box-sizing: border-box; }
.calc-datos input:focus-visible, .calc-datos select:focus-visible { outline: 2px solid var(--sl-primario); outline-offset: 1px; }
.calc-datos input[type="range"] { accent-color: var(--sl-primario); width: 100%; }
.calc-datos output { font: 600 1rem var(--sl-mono); color: var(--sl-primario); }
.calc-datos small { color: var(--sl-suave); font-weight: 400; font-size: .76rem; line-height: 1.4; }
.calc-resultado { border-left: 1px solid var(--sl-borde); padding-left: 32px; }
.calc-barras { display: grid; gap: 14px; }
.calc-barra { display: grid; grid-template-columns: 8.5em 1fr auto; align-items: center; gap: 12px; font-size: .88rem; color: var(--sl-suave); }
.calc-barra i { display: block; height: 14px; border-radius: 999px; background: var(--sl-borde-fuerte); width: var(--ancho, 0%); transition: width .7s cubic-bezier(.2, .8, .2, 1); min-width: 4px; }
.calc-barra.mejor i { background: var(--sl-degradado); }
.calc-barra b { font: 700 1.5rem var(--sl-mono); color: var(--sl-fuerte); min-width: 2.2em; text-align: right; }
.calc-barra.mejor b { color: var(--sl-primario); }
.calc-frase { margin: 18px 0 0; font-size: 1.05rem; color: var(--sl-fuerte); }
.calc-frase strong { color: var(--sl-primario); }

/* Próximamente */
.proximo { border-style: dashed; }
.proximo p { color: var(--sl-suave); font-size: .9rem; }
.proximo h3 { font-size: 1.05rem; }

@media (max-width: 1000px) {
  .tipos { grid-template-columns: repeat(3, 1fr); }
  .herramientas { grid-template-columns: repeat(2, 1fr); }
  .calculadora, .nubes { grid-template-columns: 1fr; }
  .calc-resultado { border-left: 0; padding-left: 0; border-top: 1px solid var(--sl-borde); padding-top: 24px; }
}
@media (max-width: 620px) {
  .tipos, .herramientas, .calc-datos { grid-template-columns: 1fr; }
  .tipos { grid-template-columns: 1fr; gap: 10px; }
  .tipo { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px; }
  .tipo .icono { grid-row: span 2; }
  .tipo h3 { margin: 0 0 4px; }
  .calc-barra { grid-template-columns: 1fr auto; }
  .calc-barra i { grid-column: 1 / -1; grid-row: 2; }
}

/* ===== Páginas «Ver más» (parts/web_temas.php) ===== */
.ver-mas { display: inline-flex; align-items: center; gap: .5em; margin-top: 18px; font-weight: 600; font-size: .92rem; color: var(--sl-primario); text-decoration: none; }
.ver-mas:hover { gap: .75em; }
.ver-mas .fas { transition: transform .15s; }
.tema-hero { padding: clamp(40px, 6vw, 72px) 0 8px; }
.tema-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.1; margin: .1em 0 .4em; max-width: 18em; }
.tema-hero .entrada { font-size: 1.08rem; }
.tema-volver { display: inline-flex; align-items: center; gap: .5em; font-size: .88rem; color: var(--sl-suave); text-decoration: none; margin-bottom: 22px; }
.tema-volver:hover { color: var(--sl-fuerte); }
.tema-mapa { padding-top: 24px; }
.tema-lienzo { padding: 20px; }
.tema-desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tema-diagrama { display: block; width: 100%; min-width: 720px; height: auto; }
.tema-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 14px 0 0; font-size: .85rem; color: var(--sl-texto); }
.tema-leyenda li { display: inline-flex; align-items: center; gap: .55em; }
.tema-leyenda i { width: 22px; height: 4px; border-radius: 4px; background: var(--sl-primario); }
.tema-leyenda i.azul { background: var(--sl-acento); }
.tema-leyenda i.acento { background: var(--sl-verde-azulado); }
.tema-leyenda i.aviso { background: var(--sl-aviso); }
.tema-pie-diagrama { color: var(--sl-suave); font-size: .9rem; margin: 10px 0 0; }
.tema-bloques { margin-top: 0; }
.tema-bloques h3 { font-size: 1.08rem; margin: 0 0 8px; }
.tema-bloques p { color: var(--sl-suave); margin: 0; font-size: .95rem; }
.tema-pasos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: paso; }
.tema-pasos li { display: flex; gap: 14px; align-items: flex-start; }
.tema-pasos b { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sl-primario); color: var(--sl-sobre-primario); font-family: var(--sl-mono); }
.tema-pasos strong { display: block; color: var(--sl-fuerte); margin-bottom: 4px; }
.tema-pasos p { margin: 0; color: var(--sl-suave); font-size: .9rem; }
.tema-tabla { margin-top: 24px; }
.tema-tabla h3 { margin: 0 0 6px; font-size: 1.08rem; }
.tema-tabla > p { color: var(--sl-suave); margin: 0 0 14px; }
.tema-tabla table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tema-tabla th, .tema-tabla td { text-align: left; padding: .7em .8em; border-bottom: 1px solid var(--sl-borde); vertical-align: top; }
.tema-tabla thead th { color: var(--sl-suave); font-weight: 600; font-size: .82rem; }
.tema-tabla tbody th { font-family: var(--sl-mono); color: var(--sl-primario); white-space: nowrap; }
.tema-otros { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tema-otros a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--sl-texto); padding: 16px 18px; transition: border-color .15s; }
.tema-otros a:hover { border-color: var(--sl-primario); }
.tema-otros a > span:nth-child(2) { flex: 1; }
.tema-otros strong { display: block; color: var(--sl-fuerte); }
.tema-otros small { color: var(--sl-suave); }
.tema-otros a > .fa-arrow-right { color: var(--sl-primario); }
.seccion.alterna .aprende.tarjeta { background: var(--sl-fondo); }

/* Piezas nuevas de los diagramas */
.diagrama .zona rect { fill: color-mix(in srgb, var(--sl-secundario) 45%, transparent); stroke: var(--sl-borde-fuerte); stroke-width: 1.2; stroke-dasharray: 6 6; }
.diagrama .zona.servidor rect { stroke-dasharray: none; fill: color-mix(in srgb, var(--sl-secundario) 35%, transparent); }
.diagrama .zona-titulo { fill: var(--sl-fuerte); font: 600 14px var(--sl-fuente); }
.diagrama .zona-sub { fill: var(--sl-suave); font: 500 12px var(--sl-mono); }
.diagrama .nodo.bd rect { stroke: color-mix(in srgb, var(--sl-acento) 65%, transparent); }
.diagrama .nodo.dominio rect, .diagrama .nodo.app rect { stroke-width: 1.6; }
.diagrama .nodo.verde rect { stroke: color-mix(in srgb, var(--sl-primario) 75%, transparent); }
.diagrama .nodo.azul rect { stroke: color-mix(in srgb, var(--sl-acento) 75%, transparent); }
.diagrama .nodo.acento rect { stroke: color-mix(in srgb, var(--sl-verde-azulado) 85%, transparent); }
.diagrama .nodo.aviso rect { stroke: color-mix(in srgb, var(--sl-aviso) 75%, transparent); }
.diagrama .nodo.ip rect { stroke-dasharray: 4 3; }
.diagrama .camino.tenue { opacity: .5; }
.diagrama .dato.tenue { opacity: .7; }
.diagrama .camino.aviso { stroke: color-mix(in srgb, var(--sl-aviso) 60%, transparent); }
.diagrama .dato.aviso { fill: var(--sl-aviso); filter: drop-shadow(0 0 4px var(--sl-aviso)); }
.diagrama .memoria { fill: var(--sl-primario); }
.diagrama .memoria.azul { fill: var(--sl-acento); }
.diagrama .memoria.acento { fill: var(--sl-verde-azulado); }
.diagrama .memoria.aviso { fill: var(--sl-aviso); }
.diagrama .memoria.libre { fill: var(--sl-borde); }
.diagrama .memoria-texto { fill: var(--sl-suave); font: 500 11px var(--sl-mono); }

@media (max-width: 1000px) { .tema-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .tema-pasos { grid-template-columns: 1fr; }
  .tema-lienzo { padding: 12px; }
  .tema-tabla { overflow-x: auto; }
}
.tema-desliza-aviso { display: none; margin: 0 0 8px; font-size: .8rem; color: var(--sl-suave); }
@media (max-width: 760px) { .tema-desliza-aviso { display: block; } }

/* ===== Diagramas de Observabilidad y Rendimiento (parts/web_diagramas.php) ===== */
.tema-etapa { display: flex; gap: 18px; align-items: flex-start; margin: 48px 0 18px; }
.tema-etapa:first-child { margin-top: 8px; }
.tema-etapa h2 { margin: 0 0 6px; font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.tema-etapa .entrada { margin: 0; }
.tema-etapa-num { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--sl-primario) 14%, transparent); color: var(--sl-primario); font: 700 1.1rem var(--sl-mono); }
.tema-leyenda i.rojo { background: var(--sl-peligro); }
.diagrama .tile rect { fill: var(--sl-tarjeta); stroke: var(--sl-borde-fuerte); stroke-width: 1.2; }
.diagrama .tile.rojo rect { stroke: var(--sl-peligro); animation: sl-latido 1.6s ease-in-out infinite; }
.diagrama .tile.aviso rect { stroke: var(--sl-aviso); }
.diagrama .punto { fill: var(--sl-primario); }
.diagrama .punto.aviso { fill: var(--sl-aviso); }
.diagrama .punto.rojo { fill: var(--sl-peligro); animation: sl-parpadeo 1s steps(2) infinite; }
.diagrama .tile-estado { fill: var(--sl-primario); font: 600 10px var(--sl-mono); text-transform: uppercase; }
.diagrama .tile-estado.aviso { fill: var(--sl-aviso); }
.diagrama .tile-estado.rojo { fill: var(--sl-peligro); }
.diagrama .tile-valor { fill: var(--sl-texto); font: 600 11px var(--sl-mono); }
.diagrama .tile-valor.aviso { fill: var(--sl-aviso); }
.diagrama .tile-valor.rojo { fill: var(--sl-peligro); }
.diagrama .barra-fondo { fill: var(--sl-borde); }
.diagrama .barra { fill: var(--sl-primario); }
.diagrama .barra.aviso { fill: var(--sl-aviso); }
.diagrama .barra.rojo { fill: var(--sl-peligro); }
.diagrama .nodo.aviso .nodo-icono { fill: var(--sl-aviso); }
.diagrama .rejilla { stroke: var(--sl-borde); stroke-width: 1; }
.diagrama .pico { fill: color-mix(in srgb, var(--sl-aviso) 10%, transparent); }
.diagrama .pico-texto { fill: var(--sl-aviso); }
.diagrama .umbral { stroke: var(--sl-peligro); stroke-width: 1.4; stroke-dasharray: 6 5; }
.diagrama .umbral-texto { fill: var(--sl-peligro); font: 600 11px var(--sl-mono); }
.diagrama .buena-texto { fill: var(--sl-primario); font: 600 11px var(--sl-mono); }
.diagrama .serie { fill: none; stroke: var(--sl-primario); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: sl-dibujar 3.5s ease-out forwards; }
.diagrama .alerta-punto { fill: var(--sl-peligro); stroke: var(--sl-tarjeta); stroke-width: 2; animation: sl-latido 1.6s ease-in-out infinite; }
.diagrama .celda.c0 { fill: color-mix(in srgb, var(--sl-primario) 12%, var(--sl-tarjeta)); }
.diagrama .celda.c1 { fill: color-mix(in srgb, var(--sl-primario) 35%, var(--sl-tarjeta)); }
.diagrama .celda.c2 { fill: color-mix(in srgb, var(--sl-primario) 70%, var(--sl-tarjeta)); }
.diagrama .celda.c3 { fill: var(--sl-aviso); }
.diagrama .celda.c4 { fill: var(--sl-peligro); }
.diagrama .marca-hora { fill: none; stroke-width: 2; }
.diagrama .marca-hora.mala { stroke: var(--sl-peligro); stroke-dasharray: 5 4; }
.diagrama .marca-hora.buena { stroke: var(--sl-primario); }
.diagrama .espera { fill: var(--sl-borde-fuerte); animation: sl-parpadeo 1.4s steps(2) infinite; }
.diagrama .proceso.ocupado { fill: color-mix(in srgb, var(--sl-peligro) 22%, var(--sl-tarjeta)); stroke: var(--sl-peligro); stroke-width: 1.2; animation: sl-latido 2s ease-in-out infinite; }
.diagrama .proceso-texto { fill: var(--sl-peligro); font: 600 10px var(--sl-mono); }
.diagrama .bucle { fill: color-mix(in srgb, var(--sl-acento) 10%, var(--sl-tarjeta)); stroke: var(--sl-acento); stroke-width: 2; stroke-dasharray: 10 8; animation: sl-guiones 1s linear infinite; }
@keyframes sl-latido { 50% { stroke-opacity: .35; } }
@keyframes sl-parpadeo { 50% { opacity: .3; } }
@keyframes sl-dibujar { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .diagrama .serie { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .diagrama .tile.rojo rect, .diagrama .alerta-punto, .diagrama .proceso.ocupado, .diagrama .espera, .diagrama .punto.rojo, .diagrama .bucle { animation: none; }
}

/* ===== Bases de datos y Seguridad (parts/web_diagramas.php) ===== */
.diagrama .nodo.apagado { opacity: .45; }
.diagrama .bloqueo { fill: var(--sl-peligro); font: 700 18px var(--sl-fuente); }
.chat-ejemplo { margin-top: 24px; display: grid; gap: 14px; position: relative; }
.chat-ejemplo > .insignia { justify-self: start; }
.burbuja { max-width: 760px; padding: 14px 18px; border-radius: 16px; font-size: .95rem; line-height: 1.55; }
.burbuja.usuario { justify-self: end; background: color-mix(in srgb, var(--sl-primario) 14%, var(--sl-tarjeta)); border: 1px solid color-mix(in srgb, var(--sl-primario) 35%, transparent); color: var(--sl-fuerte); border-bottom-right-radius: 4px; }
.burbuja.ia { justify-self: start; background: var(--sl-fondo); border: 1px solid var(--sl-borde); border-bottom-left-radius: 4px; }
.burbuja.ia > strong { display: inline-flex; align-items: center; gap: .45em; color: var(--sl-primario); margin-bottom: 4px; }
.burbuja.ia p { margin: .5em 0; color: var(--sl-texto); }
.burbuja pre { margin: .6em 0; padding: 12px 14px; border-radius: 10px; background: var(--sl-secundario); border: 1px solid var(--sl-borde); overflow-x: auto; }
.burbuja code { font: 500 .82rem/1.55 var(--sl-mono); color: var(--sl-fuerte); white-space: pre; }
.ver-mas-fila { display: flex; flex-wrap: wrap; gap: 0 28px; }