/* E-SPACE · tema visual 2026-11 (oscuro y claro). Lenguaje tomado de parametricmind.com: fondo neutro y plano, bordes finos,
   tarjetas redondeadas, títulos livianos, etiquetas en tipografía monoespaciada. El azul de E-SPACE es el color de marca.
   Se carga DESPUÉS de estilo.css y solo cambia variables y detalles. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url(../fonts/PlusJakartaSans-400.ttf) format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url(../fonts/PlusJakartaSans-500.ttf) format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url(../fonts/PlusJakartaSans-600.ttf) format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url(../fonts/PlusJakartaSans-700.ttf) format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(../fonts/JetBrainsMono-500.ttf) format("truetype"); }

:root, html[data-theme="oscuro"] {
  color-scheme: dark;
  --fondo: #15171B; --grafito: #121418; --panel: #1b1d22; --panel2: #23262C; --linea: #2c2f36;
  --texto: #eef1f4; --suave: #a6acb5; --acento: #3fa2ff; --boton: #3fa2ff; --boton-hover: #69b8ff; --boton-texto: #06121f;
  --ok: #3ccf8e; --ambar: #f5b335; --rojo: #f2665c; --violeta: #bf8cff;
  --cab: rgba(21,23,27,.86); --lavado: rgba(63,162,255,.10); --demo: #0F1114; --sombra: none; --trazo: rgba(255,255,255,.06);
  --radio: 22px; --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
html[data-theme="claro"] {
  color-scheme: light;
  --fondo: #eef1f4; --grafito: #e6eaef; --panel: #ffffff; --panel2: #e9edf1; --linea: #d5dae0;
  --texto: #15171B; --suave: #4d535c; --acento: #1f72d6; --boton: #1f72d6; --boton-hover: #1a63bc; --boton-texto: #ffffff;
  --ok: #168a5b; --ambar: #a86a0c; --rojo: #d33f35; --violeta: #7b4bd4;
  --cab: rgba(238,241,244,.88); --lavado: rgba(31,114,214,.07); --demo: #e6eaef; --sombra: 0 18px 44px rgba(24,24,27,.08); --trazo: rgba(0,0,0,.05);
}

body { background: var(--fondo); font-family: var(--fuente); font-size: 17px; line-height: 1.62; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.025em; word-spacing: .04em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.03em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
h3 { font-weight: 600; letter-spacing: -.015em; }
h4 { font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
strong, b { font-weight: 600; }
code, kbd { font-family: var(--mono); font-size: .86em; background: var(--panel2); }
.etq, .insignia, .indice strong, .chip { font-family: var(--mono); font-weight: 500; }
.etq { display: block; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--acento); margin: 0 0 14px; }

/* cabecera */
.cabecera { background: var(--cab); }
.cabecera.sombra { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.marca img { height: 32px; }
html[data-theme="claro"] .marca img, html[data-theme="claro"] .pie img.logo, html[data-theme="claro"] .logo-grande { filter: brightness(.74) saturate(1.25); }
.grupo-boton { font-weight: 500; }
.panel { background: var(--panel); box-shadow: var(--sombra, none); }
html[data-theme="oscuro"] .panel { box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.tema-boton { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--suave); cursor: pointer; padding: 0; }
.tema-boton:hover { color: var(--texto); background: var(--panel2); }
.tema-boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="oscuro"] .tema-boton .luna, html[data-theme="claro"] .tema-boton .sol { display: none; }

/* botones */
.boton { background: var(--boton); color: var(--boton-texto); font-weight: 600; }
.boton:hover { background: var(--boton-hover); color: var(--boton-texto); box-shadow: 0 10px 26px rgba(63,162,255,.28); }
.boton.sec { background: transparent; color: var(--texto); border-color: var(--linea); }
.boton.sec:hover { background: var(--panel2); color: var(--texto); box-shadow: none; border-color: var(--acento); }
.saltar { color: var(--boton-texto); }
.pasos > li::before, .demo-pasos button.on { color: var(--boton-texto); }
.demo-pasos button.on span { color: var(--boton-texto); background: rgba(0,0,0,.18); }
.insignia { font-size: .74rem; letter-spacing: .16em; }

/* portada: texto a la izquierda y la nube de puntos animada a la derecha */
.heroe { padding: 56px 0 120px; text-align: left; background: radial-gradient(ellipse 760px 520px at 78% 38%, var(--lavado), transparent 70%), var(--fondo); }
.heroe::before { height: 300px; opacity: .55; }
html[data-theme="claro"] .heroe::before { opacity: .35; }
.heroe .contenedor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: center; }
.heroe .logo-anim { width: min(430px, 100%); margin: 0 0 22px; }
.heroe h1 { max-width: 640px; margin: 0 0 26px; }
.heroe .botones { justify-content: flex-start; }
.heroe-demo { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center; }
.heroe-demo canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { .heroe .contenedor { grid-template-columns: 1fr; } .heroe-demo { max-width: 380px; } .heroe { padding-bottom: 90px; } }

/* secciones y tarjetas */
section.bloque { padding: 72px 0; }
section.bloque.alt { background: var(--grafito); }
.titulo-seccion { max-width: 800px; }
.titulo-seccion p { font-size: 1.08rem; }
.tarjeta, .pasos > li, .figura, .gesto, details, .formulario, .demo-escena, .vacio { background: var(--panel); border-color: var(--linea); box-shadow: var(--sombra, none); }
.tarjeta { border-radius: var(--radio); padding: 26px; }
.tarjeta:hover, .pasos > li:hover { border-color: var(--acento); box-shadow: var(--sombra, none); }
html[data-theme="oscuro"] .tarjeta:hover, html[data-theme="oscuro"] .pasos > li:hover { box-shadow: none; }
.tarjeta .icono { width: 48px; height: 48px; border-radius: 14px; background: var(--lavado); border: 1px solid var(--linea); }
.tarjeta .icono svg { width: 26px; height: 26px; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.encabezado-pagina { background: radial-gradient(ellipse 800px 260px at 20% 0, var(--lavado), transparent 70%); }
.indice a.activo { background: var(--panel); }
.chip { font-size: .72rem; letter-spacing: .1em; }
html[data-theme="claro"] .chip.hecho { background: rgba(22,138,91,.1); border-color: rgba(22,138,91,.45); }
th { background: var(--panel2); }
.pie { background: var(--grafito); }
.progreso { background: var(--acento); }
.gesto-marco { background: var(--trazo); }
.g-etq { color: var(--suave); }
.vacio { background: transparent; }
.aviso strong { color: var(--texto); }
.formulario input[type="text"], .formulario input[type="email"], .formulario select, .formulario textarea { background: var(--fondo); }
.intro { background: var(--fondo); }

/* demostraciones: cuatro pasos (SVG) y funciones en acción (canvas) */
.func { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; }
.func-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 6px; }
.func-tabs button { font: inherit; font-size: .95rem; font-weight: 500; cursor: pointer; border-radius: 999px; padding: 9px 18px; border: 1px solid var(--linea); background: transparent; color: var(--suave); }
.func-tabs button:hover { color: var(--texto); border-color: var(--acento); }
.func-tabs button[aria-selected="true"] { background: var(--boton); border-color: var(--boton); color: var(--boton-texto); font-weight: 600; }
.func-texto h3 { font-size: 1.7rem; margin: 0 0 10px; font-weight: 500; letter-spacing: -.02em; }
.func-texto p { color: var(--suave); font-size: 1.05rem; }
.func-texto ul { list-style: none; padding: 0; margin: 14px 0 0; }
.func-texto li { position: relative; padding-left: 26px; margin: 10px 0; }
.func-texto li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--acento); }
.func-escena { background: var(--demo); border: 1px solid var(--linea); border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sombra, none); }
.func-escena canvas { display: block; width: 100%; height: 100%; }
.func-nota { text-align: center; color: var(--suave); font-size: .9rem; margin: 18px 0 0; grid-column: 1 / -1; }
@media (max-width: 860px) { .func { grid-template-columns: 1fr; } .func-texto { order: 2; } }
@media (prefers-reduced-motion: reduce) { .tema-boton { transition: none; } }
.tarjeta.plan .insignia { background: var(--panel); color: var(--ambar); border-color: var(--ambar); }
.heroe .botones .boton.sec:nth-child(n+4) { display: none; }
/* logo de cabecera y pie: PNG de alta resolución con el peso original del cubo (el SVG fino se ve débil a este tamaño) */
.marca img { height: 40px; width: auto; }
.pie img.logo { height: 38px; width: auto; }