/* ==========================================================
   Datsool — constelación (red neuronal) y tema claro "Atlas"
   Se carga después de control-room.css.
   - .constelacion / .arte: dibujos de assets/js/constelacion.js
   - body.claro: páginas de lectura y empresas en fondo papel
   ========================================================== */
:root {
  --indigo: #2A7466;
  --c-lavanda: #E2E9EF;
  --c-durazno: #F5E4D9;
  --c-lima: #DDEFEA;
}

/* ---------- Constelación ---------- */
.constelacion .c-svg, .arte .c-svg { width: 100%; height: 100%; overflow: visible; }
.c-linea { fill: none; stroke-width: 1.3; opacity: .55; }
.c-pulso { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 5 95; opacity: .95; animation: c-pulso 6s linear infinite; }
@keyframes c-pulso { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.c-polvo circle { fill: #F2F0E9; opacity: .22; }
.c-halo { transform-box: fill-box; transform-origin: center; animation: c-latido 4.5s ease-in-out infinite; }
.c-nodo { animation: c-flota 9s ease-in-out infinite; }
@keyframes c-latido { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes c-flota { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -5px); } }
.c-titulo { font: 600 15px var(--display); fill: #F2F0E9; letter-spacing: -.01em; }
.c-sub { font: 400 10px var(--mono); fill: #9FB0B8; letter-spacing: .04em; }

/* Arte generativo de artículos: siempre sobre fondo oscuro */
.arte { position: relative; background: radial-gradient(80% 90% at 70% 20%, #1E3644, #142833 70%); border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; }
.arte .c-linea { opacity: .7; stroke-width: 2; }
.arte .c-halo { animation: none; }
.arte .c-nodo { animation: none; }

/* ---------- Portada: hero con red ---------- */
.hero-red { display: flex; flex-direction: column; gap: 3rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-red > .contenedor { display: block; }
.hero-texto { max-width: 590px; position: relative; z-index: 1; }
.hero-red h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); }
.constelacion-hero { position: absolute; right: max(0px, calc((100vw - 1340px) / 2)); top: 1.5rem; width: min(58vw, 760px); height: min(620px, 82%); pointer-events: none; }
.hero-cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linea); border-radius: var(--r); background: rgba(20,40,51,.75); backdrop-filter: blur(6px); position: relative; z-index: 1; }
.hero-cifras li { padding: 1.3rem 1.4rem; border-left: 1px solid var(--linea); display: flex; flex-direction: column; gap: .35rem; }
.hero-cifras li:first-child { border-left: 0; }
.hero-cifras li::before { content: ""; width: 26px; height: 26px; border: 1px solid #3C5664; border-radius: 4px; margin-bottom: .5rem; background: radial-gradient(circle, var(--lima) 0 3px, transparent 4px); }
.hero-cifras li:nth-child(2)::before { background: radial-gradient(circle, #A6B8C7 0 3px, transparent 4px); }
.hero-cifras li:nth-child(3)::before { background: radial-gradient(circle, #A6B8C7 0 3px, transparent 4px); }
.hero-cifras li:nth-child(4)::before { background: radial-gradient(circle, #D99A78 0 3px, transparent 4px); }
.hero-cifras strong { font: 600 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--display); letter-spacing: -.04em; }
.hero-cifras span { font: .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 980px) {
  .constelacion-hero { position: relative; right: auto; top: auto; width: 100%; height: 340px; order: 2; margin: -1rem 0 -1.5rem; }
  .hero-red > .contenedor:first-of-type { order: 1; }
  .hero-red > .contenedor:last-child { order: 3; }
  .hero-cifras { grid-template-columns: 1fr 1fr; }
  .hero-cifras li:nth-child(3) { border-left: 0; }
  .hero-cifras li:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* Cómo funciona: pasos a la izquierda, resultado de ejemplo a la derecha */
.como-funciona { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pasos-vertical { grid-template-columns: 1fr; gap: 1.2rem; }
.pasos-vertical li { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; padding-top: 1rem; }
.pasos-vertical li::before { grid-row: span 2; margin: .3rem 0 0; }
.pasos-vertical h3 { margin-bottom: .2rem; }
@media (max-width: 980px) { .como-funciona { grid-template-columns: 1fr; } }

/* ==========================================================
   Tema claro "Atlas"
   ========================================================== */
body.claro {
  --negro: #F2F0E9;
  --carbon: #E9E7DF;
  --carbon-2: #FFFFFF;
  --linea: #D9D7D0;
  --texto: #172A35;
  --gris: #56656C;
  --azul-claro: var(--indigo);
  --verde-claro: #2A7466;
  background: var(--negro); color: var(--texto);
}
.claro a:not(.btn):hover { color: var(--tinta); }
.claro :focus-visible { outline-color: var(--indigo); }
.claro h1 em, .claro h2 em { color: var(--indigo); }
.claro .marca-producto .barras i { background: #55B8A5; }

/* Encabezado y pie claros */
.claro .encabezado { background: rgba(242,240,233,.92); border-bottom-color: var(--linea); }
.claro .logo, .claro .logo:hover { color: var(--tinta); }
.claro .logo img { background: var(--tinta); border-radius: 6px; padding: 3px; }
.claro .nav a { color: #33464F; }
.claro .nav a:hover { color: var(--tinta); }
.claro .nav a[aria-current="page"] { color: var(--tinta); font-weight: 700; box-shadow: inset 0 -2px 0 var(--tinta); }
.claro .nav .btn-verde, .claro .nav .btn-verde:hover { color: var(--tinta); box-shadow: none; }
.claro .menu-btn { color: var(--tinta); }
.claro .cuenta-enlace { color: var(--tinta); }
.claro .cuenta-enlace:hover, .claro .cuenta-menu[open] > .cuenta-enlace { color: var(--tinta); border-color: var(--tinta); }
.claro .nav .cuenta-opciones a:hover { background: var(--carbon); color: var(--tinta); }
@media (max-width: 880px) { .claro .nav { background: var(--negro); } }
.claro .pie { border-top-color: var(--linea); }
.claro .pie a { color: var(--tinta); }
.claro .pie a:hover { color: var(--indigo); }
.claro .pie h3 { color: var(--gris); }

/* Botones en papel */
.claro .btn-verde:hover { background: #223D4B; color: var(--tinta); }
.claro .btn-borde { border-color: #BCBAB2; color: var(--tinta); }
.claro .btn-borde:hover { border-color: var(--tinta); color: var(--tinta); }
.claro .btn-morado { background: var(--tinta); color: var(--lima); }
.claro .btn-morado:hover { background: #000; color: var(--lima-suave); }
.claro .btn-texto { color: var(--indigo); }

/* Superficies */
.claro .seccion-carbon { background: var(--carbon); border-color: var(--linea); }
.claro .portal-hero, .claro .cabecera-empresas {
  background:
    radial-gradient(40% 70% at 95% 10%, rgba(166,184,199,.20), transparent 70%),
    radial-gradient(35% 60% at 70% 100%, rgba(217,154,120,.14), transparent 70%),
    var(--negro);
  border-bottom: 1px solid var(--linea);
}
.claro .portal-tarjeta, .claro .herramienta, .claro .lectura, .claro .proveedor, .claro .pasos-red li,
.claro .empresas-para, .claro .portal-kpis div, .claro .kpis-admin div { background: #fff; border-color: #E0DED6; }
.claro .lectura:hover, .claro .proveedor:hover, .claro .herramienta:hover { border-color: var(--tinta); }
.claro .portal-sub { color: var(--gris); }
.claro .portal-sub strong, .claro .portal-kpis strong, .claro .kpis-admin strong { color: var(--tinta); }
.claro .gancho-grande, .claro .siguiente-texto, .claro .prosa strong, .claro .dia-consultoria b,
.claro .empresas-detalle .dia-consultoria b, .claro .lanzamiento .lanzamiento-titulo { color: var(--tinta); }
.claro .siguiente-paso, .claro .portal-vacio { background: linear-gradient(90deg, var(--c-lima), #fff 65%); border-color: #BFE3DA; }
.claro .siguiente-etiqueta { color: #2A7466; }
.claro .lectura-cat { color: var(--indigo) !important; }
.claro .herramienta-bajar { color: var(--indigo) !important; }
.claro .herramienta .herramienta-tipo { background: var(--tinta); color: var(--papel); }
.claro .filtro-chips a { background: #fff; color: #33464F; border-color: var(--linea); }
.claro .filtro-chips a[aria-current="page"], .claro .filtro-chips a:hover { background: var(--lima); color: var(--tinta); border-color: var(--lima); }
.claro .skills span { color: #33464F; background: #fff; }
.claro .proveedor-ayuda b { color: #2A7466; }
.claro .pasos li::before, .claro .empresas-detalle .pasos li::before { color: var(--indigo); }
.claro .lista-check li::before, .claro .empresas-para .lista-check li::before, .claro .empresas-detalle .lista-check li::before,
.claro .perfil-lateral .lista-check li::before, .claro .portal-proximo .lista-check li::before { color: #2A7466; }
.claro .empresas-para { border-left: 2px solid var(--tinta); }
.claro .pasos-red li::before { background: var(--tinta); color: var(--lima); }
.claro .notas li { border-left-color: var(--indigo); }

/* Formularios en papel */
.claro .campo input, .claro .campo textarea, .claro .campo select,
.claro .solicitud-form select, .claro .solicitud-form input { background: #fff; color: var(--tinta); border-color: #CDCBC3; }
.claro .campo input:focus, .claro .campo textarea:focus, .claro .campo select:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(42,116,102,.15); }
.claro .aviso-ok { background: var(--c-lima); color: #22604F; }
.claro .aviso-error { background: #F6E3D6; color: #8F4F2E; }
.claro .casilla input { accent-color: var(--indigo); }

/* Lectura */
.claro .prosa p, .claro .prosa li { color: #2A3B44; }
.claro .prosa h2, .claro .prosa h3 { color: var(--tinta); }

/* Constelación sobre papel */
.claro .constelacion .c-polvo circle { fill: var(--tinta); opacity: .16; }
.claro .constelacion .c-linea { opacity: .75; }
.claro .constelacion .c-titulo { fill: var(--tinta); font-size: 13px; }
.claro .constelacion .c-sub { fill: var(--gris); }

/* Cabecera con dibujo a la derecha (empresas y biblioteca) */
.cabecera-red { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.constelacion-empresas { height: clamp(300px, 34vw, 430px); }
.arte-cabecera { aspect-ratio: 16 / 9; }
@media (max-width: 880px) {
  .cabecera-red { grid-template-columns: 1fr; }
  .constelacion-empresas { height: 300px; }
}

/* Empresas: niveles como tarjetas de color pastel */
.claro .empresas-detalle .niveles-emp article { border: 0; border-radius: 10px; padding: 1.8rem; }
.claro .empresas-detalle .niveles-emp article:nth-child(1) { background: var(--c-lima); }
.claro .empresas-detalle .niveles-emp article:nth-child(2) { background: var(--c-lavanda); }
.claro .empresas-detalle .niveles-emp article:nth-child(3) { background: var(--c-durazno); }
.claro .empresas-detalle .niveles-emp p, .claro .empresas-detalle .niveles-emp .nivel-precio, .claro .nivel-detalle dd { color: var(--tinta); }
.claro .empresas-detalle .niveles-emp .nivel-num, .claro .nivel-detalle dt { color: #4C5D65; }
.nivel-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; margin-bottom: 1rem; }
.nivel-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.niveles-emp article:nth-child(1) .nivel-icono { background: #2A7466; color: var(--lima); }
.niveles-emp article:nth-child(2) .nivel-icono { background: #5D7A8E; color: #fff; }
.niveles-emp article:nth-child(3) .nivel-icono { background: #C27F5D; color: #fff; }
.claro .empresas-detalle .dia-consultoria { color: var(--gris); }

/* Biblioteca: artículo destacado y tarjetas con arte */
.destacado { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; margin: 1.6rem 0 1.2rem; padding: 1.6rem; border-radius: 10px; background: #fff; border: 1px solid #E0DED6; color: var(--tinta) !important; text-decoration: none; transition: border-color .15s; }
.destacado:hover { border-color: var(--tinta); }
.destacado > div:first-child { display: flex; flex-direction: column; gap: .7rem; }
.destacado strong { font: 600 clamp(1.5rem, 2.8vw, 2.1rem)/1.15 var(--display); letter-spacing: -.035em; }
.destacado-resumen { color: var(--gris); }
.destacado-etiqueta { align-self: flex-start; font: .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--c-durazno); color: #8F4F2E; padding: .25rem .55rem; border-radius: 3px; }
@media (max-width: 880px) { .destacado { grid-template-columns: 1fr; } .destacado .arte { order: -1; } }
.lectura-arte { padding: .8rem .8rem 1.3rem; }
.lectura-arte .arte { margin-bottom: .6rem; }
.lectura-arte > span, .lectura-arte > strong { padding: 0 .5rem; }

/* Artículo: índice, cuerpo y relacionados */
.cabecera-articulo .contenedor { max-width: 900px; margin-left: max(1.25rem, calc((100vw - var(--ancho)) / 2)); }
.cabecera-articulo h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.migas { display: flex; gap: .6rem; font: .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.4rem; color: var(--gris); }
.migas a { color: var(--gris); text-decoration: none; }
.migas a:hover { color: var(--tinta); }
.cabecera-pagina .articulo-meta { flex-wrap: wrap; display: flex; align-items: center; gap: .6rem; font: .78rem var(--mono); color: var(--gris); letter-spacing: .03em; }
.articulo-autor { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); color: var(--lima); font: 700 .75rem var(--display); }
.articulo-rejilla { display: grid; grid-template-columns: 190px minmax(0, 1fr) 260px; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.articulo-rejilla .lectura-cuerpo { max-width: none; }
.arte-articulo { margin-bottom: 2rem; aspect-ratio: 16 / 8; }
.articulo-indice, .articulo-relacionados { position: sticky; top: 96px; }
.indice-titulo { font: .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: .8rem; }
.articulo-indice ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linea); }
.articulo-indice a { display: block; padding: .35rem 0 .35rem .9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--gris); text-decoration: none; font-size: .88rem; line-height: 1.35; }
.articulo-indice a:hover { color: var(--tinta); }
.articulo-indice a[aria-current] { color: var(--tinta); border-left-color: var(--tinta); font-weight: 600; }
.relacionado { display: grid; grid-template-columns: 76px 1fr; gap: .8rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--linea); color: var(--tinta) !important; text-decoration: none; }
.relacionado .arte { aspect-ratio: 1; border-radius: 6px; }
.relacionado strong { display: block; font: 600 .92rem/1.3 var(--display); letter-spacing: -.01em; }
.relacionado small { font: .68rem var(--mono); color: var(--gris); }
.relacionado:hover strong { text-decoration: underline; }
@media (max-width: 1100px) {
  .articulo-rejilla { grid-template-columns: minmax(0, 1fr) 240px; }
  .articulo-indice { display: none; }
}
@media (max-width: 800px) {
  .articulo-rejilla { grid-template-columns: 1fr; }
  .articulo-relacionados { position: static; }
}

/* ==========================================================
   Tema claro en todo el sitio (portada, ClienteCheck y portal)
   ========================================================== */
/* Lima como texto no se lee sobre papel: verde oscuro o tinta */
.claro .cc-nivel, .claro .portal-kpis div:first-child strong, .claro .producto-cc .precio-producto,
.claro .journey-etapa.hecha .journey-estado, .claro .journey-etapa.actual .journey-estado,
.claro .cifras div { color: #2A7466; }
.claro .lanzamiento-ofertas strong, .claro .radar-muestra .marcador { color: var(--indigo); }
.claro .lanzamiento-ofertas b, .claro .cc-chip b, .claro .lanzamiento .lanzamiento-titulo { color: var(--tinta); }
.claro .hero-ruta a { color: var(--indigo); }
.claro .hero .bajada { color: var(--gris); }
.claro .hero::before {
  background:
    radial-gradient(40% 55% at 85% 35%, rgba(166,184,199,.16), transparent 70%),
    radial-gradient(35% 45% at 10% 90%, rgba(85,184,165,.22), transparent 70%),
    linear-gradient(rgba(23,42,53,.035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(23,42,53,.035) 1px, transparent 1px) 0 0 / 64px 64px;
}
.claro .hero-cifras { background: rgba(255,255,255,.85); border-color: #E0DED6; }
.claro .hero-cifras li { border-color: #E0DED6; }
.claro .hero-cifras li::before { border-color: #D3D1C9; }
.claro .areas-cc li { color: #33464F; background: #fff; }
.claro .trayectoria li { color: #33464F; }

/* Radar sobre blanco */
.claro .radar-muestra { background: #fff; border-color: #E0DED6; }
.claro .radar .rejilla, .claro .radar .eje { stroke: rgba(23,42,53,.14); }
.claro .radar .area { fill: rgba(85,184,165,.20); stroke: #3E9483; }
.claro .radar .punto, .claro .radar .punto-alto { fill: #3E9483; stroke: #fff; }
.claro .radar .punto-bajo { stroke: #fff; }
.claro .radar .etiqueta { fill: #33464F; }
.claro .leyenda .l-fuerte::before { background: #3E9483; }

/* Precios: Pro se queda negro premium; empresarial en lavanda */
.claro .productos-3 .producto { color: var(--tinta); background: #fff; border-color: #E0DED6; }
.claro .productos-3 .producto > p:not(.gancho):not(.marca-producto):not(.precio-producto):not(.nota-precio) { color: var(--gris); }
.claro .productos-3 .producto .gancho { color: var(--tinta); }
.claro .productos-3 .producto-cc { border-color: #9FD3C8; background: linear-gradient(180deg, var(--c-lima), #fff 45%); }
.claro .productos-3 .producto-pro { background: var(--tinta); border-color: var(--tinta); color: #F2F0E9; }
.claro .productos-3 .producto-pro .gancho, .claro .productos-3 .producto-pro .precio-producto { color: #fff; }
.claro .productos-3 .producto-pro > p:not(.gancho):not(.marca-producto):not(.precio-producto) { color: #B7C4CA; }
.claro .productos-3 .producto-pro .lista-check li::before { color: var(--lima); }
.claro .productos-3 .producto-pro .precio-producto small { color: #9FB0B8; }
.claro .productos-3 .producto-emp { background: var(--c-lavanda); border-color: var(--c-lavanda); }
.claro .productos-3 .producto-emp .niveles-precio li { border-bottom-color: #C6D3DD; }
.claro .lanzamiento { background: #fff; border-color: #E0DED6; }

/* Raíces: bloque oscuro con foto, conserva su texto claro */
.claro .raices { --texto: #F2F0E9; --gris: #B7C4CA; color: #F2F0E9; }
.claro .raices .datos span { color: #C6D1D8; }

/* ClienteCheck */
.claro .cc-opcion, .claro .cc-perfil-opcion { background: #fff; border-color: #D9D7D0; }
.claro .cc-opcion:hover, .claro .cc-perfil-opcion:hover { border-color: var(--tinta); background: #fff; }
.claro .cc-opcion:has(input:checked) { border-color: #55B8A5; background: var(--c-lima); }
.claro .cc-opcion input { accent-color: #2A7466; }
.claro .cc-chip { background: #fff; }
.claro .cc-progreso span { background: #55B8A5; }
.claro .cc-pro, .claro .cc-captura { background: #fff; border-color: #E0DED6; }
.claro .cc-pro .lista-check li::before { color: #2A7466; }
.claro .cc-cuenta { border-color: #9FD3C8; background: var(--c-lima); }

/* Portal: pestañas, journey y herramientas */
.claro .subnav { background: rgba(242,240,233,.95); }
.claro .subnav a { color: var(--gris); }
.claro .subnav a:hover { color: var(--tinta); }
.claro .subnav a[aria-current="page"] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--tinta); }
.claro .journey-etapa { background: #fff; border-color: #E0DED6; }
.claro .journey-etapa.hecha .journey-num { border-color: #2A7466; color: #2A7466; }
.claro .journey-etapa.actual { border-color: #55B8A5; background: linear-gradient(180deg, var(--c-lima), #fff); }
.claro .herramienta .herramienta-reco { color: #2A7466; border-color: #9FD3C8; }
.claro .portal-proximo { background: #fff; }
.claro .grafica .g-barra { fill: var(--indigo); }
.claro .grafica .g-rejilla { stroke: rgba(23,42,53,.08); }
.claro .grafica .g-base { stroke: rgba(23,42,53,.3); }
.claro .grafica .g-dato:hover .g-zona { fill: rgba(23,42,53,.05); }
.claro .cuenta-opciones { background: #fff; border-color: #E0DED6; box-shadow: 0 16px 32px -16px rgba(23,42,53,.25); }
.claro .btn-salir { color: var(--tinta); }
.claro .tabla-admin th, .claro .cc-tabla th { color: var(--gris); }