/* Laboratorio de Orgánica · capa de marca de Cursemos Ingeniería (solo la versión pública).
   Enfoque de la decisión 0007 (laboratorio de simulaciones, propuesta): tema oscuro único porque el logo cromado
   no tiene versión aprobada para fondo claro; paleta y tipografías [DE HECHO] del manual (§4 y §5); un solo azul y titanio.
   Botones con fondo en azul 700 #1E42B0 (texto blanco 8,5:1); el azul 500 #3B6BFF con blanco da 4,44:1 y no llega a AA.
   Colores de datos (no son acentos de interfaz): elementos químicos en las moléculas (convención CPK), electrones,
   enlaces que se forman y se rompen, y los colores reales de los reactivos en los tubos de ensayo.
   La red de reacciones usa un solo azul: el tipo de mecanismo se distingue por el trazo, no por el color (criterio A3). */

/* Mismos valores en los tres estados de tema: la página es oscura siempre */
:root, :root:not([data-theme="light"]), :root[data-theme="light"], :root[data-theme="dark"] {
  color-scheme: dark;
  --vacio: #030409; --bg: #06070C; --card: #0E1119; --elev: #141824;
  --ink: #F4F6FA; --mute: #A7AEBC; --line: #232A3A;
  --ti100: #E3E8EF; --ti300: #C0C8D4; --ti500: #8B94A3;
  --azul300: #9CB6FF; --azul400: #6E93FF; --azul500: #3B6BFF; --azul700: #1E42B0;
  --acc: #6E93FF; --acc-ink: #FFFFFF; --acc-solid: #1E42B0; --soft: #141D36;
  --ok: #6FCF97; --mid: #E6B04A; --bad: #F08079; --chg: #E3E8EF;
  --arrow: #6E93FF;
  --f-alif: #3B6BFF; --f-alq: #3B6BFF; --f-alqi: #3B6BFF; --f-arom: #3B6BFF;
  --f-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --r: 10px;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: dark; } }

/* Profundidad, nunca negro liso (B21): luz azul tenue y la red de la marca, quieta y lejana */
body {
  background-color: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15.5px;
  background-image: radial-gradient(90% 60% at 70% -10%, rgba(59, 107, 255, .16), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(59, 107, 255, .07), transparent 60%);
  background-attachment: fixed;
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: url("marca/red.png") center / cover no-repeat; }
h1, h2, h3, h4, .q, .r3-tit, summary, .verdict b { font-family: var(--f-display); letter-spacing: -.012em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--azul300); outline-offset: 2px; }

/* Encabezado: isotipo + nombre (manual §3: isotipo ≥ 24 px, sobre fondo oscuro) */
header { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top { max-width: 1100px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.brand img { width: 34px; height: auto; display: block; }
.brand .marca { display: grid; line-height: 1.15; }
.brand b { font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; }
.brand small { color: var(--mute); font-size: .8rem; }
nav { max-width: 1100px; }
nav button { color: var(--mute); }
nav button.on { background: var(--soft); color: var(--ink); box-shadow: inset 0 -2px 0 var(--azul500); }
main { max-width: 1100px; }

/* Portada (B12: logo centrado; manual: logo completo ≥ 120 px de ancho) */
.hero { display: grid; justify-items: center; text-align: center; gap: 14px; padding-block: 22px 18px; }
.hero img { width: clamp(170px, 22vw, 230px); height: auto; }
.hero h1 { margin: 0; max-width: 20ch; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.05; font-weight: 600;
  background: linear-gradient(180deg, var(--ti100), var(--ti500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 0; max-width: 60ch; color: var(--mute); }
.hero .autor { font-size: .9rem; color: var(--ti300); }
.hero .autor a, .firma a { color: var(--azul300); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--azul300) 45%, transparent); }
.hero .autor a:hover, .firma a:hover { color: var(--ink); }
.firma { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; color: var(--mute); font-size: .85rem; padding: 28px 16px 40px; text-align: center; }
.firma img { width: 22px; height: auto; }

/* Superficies */
.card { background: color-mix(in srgb, var(--card) 92%, transparent); border-color: var(--line); border-radius: var(--r); }
.tip, .wnote { background: var(--soft); border-left-color: var(--azul500); }
.wblock { background: color-mix(in srgb, var(--bg) 60%, var(--card)); border-color: var(--line); }
.wtitle { color: var(--azul300); letter-spacing: .04em; }

/* Un solo azul para los rellenos, en azul 700 */
.btn.pri, .chip2.on, .r3-play, .slet, td.hit, .r3-tit span, .r3-pi { background: var(--acc-solid) !important; border-color: var(--azul500) !important; color: var(--acc-ink) !important; }
.r3-seg span.on { background: var(--acc-solid); }
.rbtn.on { border-color: var(--azul500); box-shadow: 0 0 0 1px var(--azul500); }
.chip { border-color: color-mix(in srgb, var(--azul500) 60%, transparent); color: var(--azul300); }
.chip.c3d, .b3d { border-color: var(--azul500); color: var(--azul300); }
.r3-poster, .r3card { background: radial-gradient(ellipse at 20% 30%, #1A2550, var(--card) 75%); }
.verdict { border-color: var(--azul500); background: var(--soft); }
.verdict span { color: var(--azul300); }

/* Red de reacciones: un solo azul; el tipo de mecanismo se lee en el trazo */
.redwrap { background: color-mix(in srgb, var(--card) 80%, transparent); border-color: var(--line); }
.edge .ep { stroke: var(--azul500); stroke-opacity: .5; opacity: 1; }
.edge.hi .ep { stroke: var(--azul400); stroke-opacity: 1; }
.edge.dim .ep { stroke-opacity: .08; }
.redsvg marker path { fill: var(--azul400); }
.edge[data-t="AE"] .ep, .edge[data-t="AR"] .ep, .edge[data-t="red"] .ep { stroke-dasharray: 10 5; }
.edge[data-t="E"] .ep { stroke-dasharray: 4 4; }
.edge[data-t="ox"] .ep, .edge[data-t="comb"] .ep { stroke-dasharray: 1.5 5; stroke-linecap: round; }
.edge[data-t="AB"] .ep { stroke-dasharray: 10 4 2 4; }
.elab circle { fill: var(--acc-solid); stroke: var(--bg); }
.nnode { background: var(--card); border-color: var(--line); color: var(--ink); font-family: var(--f-body); }
.nnode b { font-family: var(--f-display); font-weight: 600; }
.redleg span[data-t] i { height: 3px; width: 26px; border-radius: 2px; background: var(--azul400) !important; }
.redleg span[data-t="AE"] i, .redleg span[data-t="AR"] i, .redleg span[data-t="red"] i { background: repeating-linear-gradient(90deg, var(--azul400) 0 7px, transparent 7px 10px) !important; }
.redleg span[data-t="E"] i { background: repeating-linear-gradient(90deg, var(--azul400) 0 3px, transparent 3px 6px) !important; }
.redleg span[data-t="ox"] i, .redleg span[data-t="comb"] i { background: repeating-linear-gradient(90deg, var(--azul400) 0 2px, transparent 2px 5px) !important; }
.redleg span[data-t="AB"] i { background: repeating-linear-gradient(90deg, var(--azul400) 0 7px, transparent 7px 9px, var(--azul400) 9px 10px, transparent 10px 12px) !important; }
.rtag { background: var(--soft) !important; color: var(--azul300); border: 1px solid color-mix(in srgb, var(--azul500) 50%, transparent); }
.rnum { background: var(--acc-solid) !important; }
.ritem { background: var(--card); border-color: var(--line); }
.ritem:hover { border-color: var(--azul500); }

/* Escena 3D: mismo fondo que los simuladores de la plataforma */
.r3-stage { background: #090B12; }
.r3-cap { background: linear-gradient(180deg, #10162C, var(--card)); }
.r3-chip { color: var(--azul300); font-family: var(--f-body); text-transform: none; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.hero + .tip { display: none; }

/* ═══ Vidrio (pedido del fundador, 25/10/2026): paneles translúcidos con desenfoque sobre la red de la marca.
   Función: separar capas sin cajas pesadas; la red de fondo se ve a través. Un solo azul, bordes de 1 px, mucho aire. */
:root, :root:not([data-theme="light"]), :root[data-theme="light"], :root[data-theme="dark"] {
  --vidrio: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022));
  --vidrio-borde: rgba(255,255,255,.10);
  --vidrio-luz: inset 0 1px 0 rgba(255,255,255,.08);
  --line: rgba(255,255,255,.09);
  --card: rgba(16,19,28,.62);
  --soft: rgba(59,107,255,.10);
}
body { font-size: 16px; letter-spacing: -.003em; }
body::after { opacity: .38; }
.card, .sl, .ucard, .tile, .deck-strip button, .scard, .ef-res > div, .bif-ramas button, .bif-comun, .ej, .ritem {
  background: var(--vidrio), rgba(14,17,26,.55);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-luz), 0 18px 40px -18px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
.card { border-radius: 22px; padding: 22px; }
.sl { border-radius: 30px; }
.ucard:hover, .tile:hover, .scard:hover { border-color: rgba(110,147,255,.45); }
.btn { border-radius: 12px; border-color: var(--vidrio-borde); background: rgba(255,255,255,.05); }
.btn:hover { border-color: rgba(156,182,255,.5); }
.btn.pri { border-radius: 12px; }
.tip, .wnote { background: rgba(59,107,255,.08); border-left: 0; border-radius: 16px; }
nav button { border-radius: 10px; }
nav button.on { background: rgba(255,255,255,.07); box-shadow: inset 0 -2px 0 var(--azul500); }
header { background: rgba(6,7,12,.55); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); border-bottom-color: rgba(255,255,255,.07); }
.ust a { border-color: var(--vidrio-borde); background: rgba(255,255,255,.04); border-radius: 14px; }
.ust a.on { border-color: rgba(110,147,255,.6); background: rgba(59,107,255,.12); }
.uhead h2, .deck-h h1, .sl h2 { letter-spacing: -.02em; }
.tb th { background: rgba(255,255,255,.05); } .tb th, .tb td { border-color: rgba(255,255,255,.08); }
.sl-tb { border: 1px solid rgba(255,255,255,.08); }
.sl-k { background: rgba(59,107,255,.12); border: 1px solid rgba(110,147,255,.22); }
.r3-stage, .ef-stage, .v3-stage { border-radius: 22px !important; border-color: var(--vidrio-borde) !important; }

/* Portada: solo el isotipo, título, frase y la tarjeta del autor */
.hero { padding-block: 34px 22px; gap: 14px; }
.hero-iso { width: clamp(96px, 12vw, 150px) !important; height: auto; filter: drop-shadow(0 18px 40px rgba(59,107,255,.35)); animation: flotar 7s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-6px); } }
.hero h1 { max-width: 18ch; font-size: clamp(2rem, 5vw, 3.4rem); }
.hero-sub { margin: 0; font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--ti300); max-width: 44ch; }
.autor-card { margin-top: 10px; display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 20px; text-decoration: none; color: var(--ink);
  background: var(--vidrio), rgba(14,17,26,.55); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-luz), 0 16px 40px -20px rgba(59,107,255,.55);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); transition: transform .25s, border-color .25s, box-shadow .25s; text-align: left; }
.autor-card img { width: 34px; height: auto; }
.autor-card span { display: grid; line-height: 1.25; }
.autor-card small { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.autor-card b { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; }
.autor-card em { font-style: normal; font-size: .85rem; color: var(--azul300); }
.autor-card i { font-style: normal; font-size: 1.2rem; color: var(--azul300); margin-left: 6px; transition: transform .25s; }
.autor-card:hover { transform: translateY(-2px); border-color: rgba(110,147,255,.55); box-shadow: var(--vidrio-luz), 0 20px 44px -18px rgba(59,107,255,.7); }
.autor-card:hover i { transform: translate(2px, -2px); }
.hero .autor { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-iso { animation: none; } }

/* ══════════════════════════════════════════════════════════════════
   SISTEMA ELÉCTRICO (decisión 0009, propuesta): un solo lenguaje en TODAS las pantallas.
   Azul eléctrico #3B6BFF como luz principal, oscuro #0E1119 como contraste, red oficial y logo sin tocar.
   Escenario animado <div class="esc"> (recorrido.js). Las pantallas de elegir (body.claro) van más luminosas;
   las de trabajo, más profundas para leer. Nunca placas blancas, cortes de color ni nodos dibujados con código.
   ══════════════════════════════════════════════════════════════════ */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
:root, :root:not([data-theme="light"]), :root[data-theme="light"], :root[data-theme="dark"] { --bg: #060B24; --card: #0A1130; --elev: #111A44; --ink: #F4F6FA; --mute: #C0C8D4; --line: rgba(156,182,255,.3); --acc: #9CB6FF; --soft: #16235C; --vidrio: linear-gradient(160deg, rgba(110,147,255,.16), rgba(59,107,255,.04)); --vidrio-borde: rgba(156,182,255,.38); --marco: rgba(156,182,255,.42); --marco-f: rgba(214,226,255,.68); }
body, body.claro { background: #0F2266; background-image: none; color: #F4F6FA; overflow-x: clip; }
body::before, body::after { display: none !important; }

/* Escenario */
.esc { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; background: linear-gradient(135deg, #0B1B5E 0%, #1E42B0 42%, #3B6BFF 78%, #1E42B0 100%); background-size: 220% 220%; animation: esc-base 34s ease-in-out infinite alternate; }
.esc i { position: absolute; display: block; will-change: transform; }
.esc-m { top: 0; left: 0; border-radius: 50%; width: 92vmax; height: 92vmax; }
.esc-m1 { background: radial-gradient(closest-side, rgba(110,147,255,.92), transparent); animation: malla-a 24s ease-in-out infinite alternate; }
.esc-m2 { background: radial-gradient(closest-side, rgba(5,10,42,.9), transparent); animation: malla-b 30s ease-in-out infinite alternate; }
.esc-m3 { background: radial-gradient(closest-side, rgba(156,182,255,.72), transparent); animation: malla-c 36s ease-in-out infinite alternate; }
.esc-m4 { background: radial-gradient(closest-side, rgba(59,107,255,.95), transparent); animation: malla-d 27s ease-in-out infinite alternate; }
.esc-r { inset: -10%; background: url("marca/red.png") center / cover no-repeat; }
.esc-r1 { opacity: .5; animation: red-lejos 46s ease-in-out infinite alternate; translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -9px + var(--sc, 0) * -24px); }
.esc-r2 { opacity: .9; animation: red-cerca 30s ease-in-out infinite alternate; translate: calc(var(--px, 0) * -30px) calc(var(--py, 0) * -20px + var(--sc, 0) * -60px); }
.esc-l { inset: -10%; background: url("marca/red.png") center / cover no-repeat; filter: brightness(2.6); mix-blend-mode: screen;
  -webkit-mask: radial-gradient(closest-side, #000 22%, transparent) 0 0 / 52vmax 52vmax no-repeat; mask: radial-gradient(closest-side, #000 22%, transparent) 0 0 / 52vmax 52vmax no-repeat; }
.esc-l1 { animation: luz-a 15s linear infinite, red-cerca 30s ease-in-out infinite alternate; }
.esc-l2 { animation: luz-b 21s linear infinite, red-cerca 30s ease-in-out infinite alternate; }
.esc-l3 { animation: luz-c 27s linear infinite, red-cerca 30s ease-in-out infinite alternate; }
.esc-v { inset: 0; background: rgba(6,11,36,.5); transition: opacity .5s; }
body.claro .esc-v { opacity: 0; }
@keyframes esc-base { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
@keyframes red-lejos { from { transform: scale(1.16) rotate(-1.6deg); } to { transform: scale(1.3) translate(-3.2%, 2.4%) rotate(1.8deg); } }
@keyframes red-cerca { from { transform: scale(1.02) translate(2%, -1.6%); } to { transform: scale(1.14) translate(-2.6%, 2.2%) rotate(-1.2deg); } }
@keyframes luz-a { 0% { -webkit-mask-position: -20% 10%; mask-position: -20% 10%; } 50% { -webkit-mask-position: 60% 90%; mask-position: 60% 90%; } 100% { -webkit-mask-position: 120% 20%; mask-position: 120% 20%; } }
@keyframes luz-b { 0% { -webkit-mask-position: 120% 100%; mask-position: 120% 100%; } 50% { -webkit-mask-position: 40% 0%; mask-position: 40% 0%; } 100% { -webkit-mask-position: -20% 70%; mask-position: -20% 70%; } }
@keyframes luz-c { 0% { -webkit-mask-position: 50% -30%; mask-position: 50% -30%; } 50% { -webkit-mask-position: 0% 60%; mask-position: 0% 60%; } 100% { -webkit-mask-position: 90% 130%; mask-position: 90% 130%; } }
@keyframes malla-a { from { transform: translate(-22%, -28%) scale(1); } to { transform: translate(34%, 14%) scale(1.3); } }
@keyframes malla-b { from { transform: translate(70%, 46%) scale(1.15); } to { transform: translate(8%, -24%) scale(.9); } }
@keyframes malla-c { from { transform: translate(-30%, 62%) scale(1.1); } to { transform: translate(52%, 26%) scale(1.4); } }
@keyframes malla-d { from { transform: translate(84%, -34%) scale(.95); } to { transform: translate(40%, 30%) scale(1.25); } }
body.en-clase .esc i { animation-play-state: paused; }

/* Navegación azul en todo el sitio */
header, body.claro > header { position: sticky; background: linear-gradient(90deg, rgba(11,27,94,.82) 0%, rgba(30,66,176,.72) 55%, rgba(59,107,255,.6) 100%); border-bottom: 0; box-shadow: none; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
body > header::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(156,182,255,.3) 50%, transparent 62%); background-size: 240% 100%; animation: brillo 11s ease-in-out infinite; }
@keyframes brillo { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.deck-h { overflow: visible; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
nav button { color: #E3E8EF; } nav button.on { background: rgba(255,255,255,.2); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }

/* Portada */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; gap: clamp(16px, 3vw, 36px); margin: -18px calc(50% - 50vw) 0; padding: clamp(22px, 3vw, 38px) max(16px, calc(50vw - 534px)); background: none; }
.hero::before { content: ""; position: absolute; z-index: -1; left: max(-60px, calc(50vw - 660px)); top: 50%; width: 340px; height: 340px; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(5,10,42,.92) 34%, rgba(5,10,42,.5) 62%, transparent); animation: halo 7s ease-in-out infinite alternate; }
@keyframes halo { from { transform: scale(.94); opacity: .86; } to { transform: scale(1.08); opacity: 1; } }
.hero-iso { width: clamp(64px, 7vw, 92px) !important; height: auto; filter: none !important; animation: none !important; }
.hero h1 { margin: 0; max-width: none; font-size: clamp(1.7rem, 3.1vw, 2.5rem); line-height: 1.05; color: #fff; background: linear-gradient(100deg, #fff 30%, #9CB6FF 50%, #fff 70%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: titulo 9s ease-in-out infinite alternate; }
@keyframes titulo { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.hero-sub { margin: 4px 0 0; font-size: clamp(.98rem, 1.25vw, 1.08rem); color: #E3E8EF; }
.autor-card { margin: 0; background: linear-gradient(150deg, rgba(10,17,48,.9), rgba(16,30,86,.8)); border: 1.5px solid var(--marco); }
@media (max-width: 820px) { .hero { grid-template-columns: auto minmax(0, 1fr); } .autor-card { grid-column: 1 / -1; } }

/* Superficies: oscuro azulado como contraste sobre el azul eléctrico, en todas las vistas */
.card, .sl, .ucard, .tile, .deck-strip button, .scard, .ef-res > div, .bif-ramas button, .bif-comun, .ej, .ritem, .gr-inc, .gr-item, .gr-guia, .vf-it, .pz-inc, .pz-card, .pta, .el-u, .el-extra, .ust a, .pz-modo, .rs, .sl-k, .tip, .wnote, .wblock {
  background: linear-gradient(155deg, rgba(10,17,48,.9), rgba(16,30,86,.84)); border: 1.5px solid var(--marco); color: var(--ink); box-shadow: inset 0 1px 0 rgba(156,182,255,.2), 0 24px 44px -24px rgba(5,10,42,.95); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.pta, .el-u, .el-extra, .scard, .gr-guia, .gr-item, .pz-card, .ucard, .tile { position: relative; transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .2s; }
.pta:hover, .el-u:hover, .el-extra:hover, .scard:hover, .gr-guia:hover, .gr-item:hover, .pz-card:hover, .ucard:hover, .tile:hover, .ritem:hover, .deck-strip button:hover { transform: translateY(-3px); border-color: #9CB6FF; box-shadow: 0 0 0 2px #3B6BFF, 0 0 34px -6px rgba(59,107,255,.95), 0 26px 46px -22px rgba(5,10,42,.95); }
.scard.on, .deck-strip button.on, .ust a.on, nav .on { border-color: #fff; box-shadow: 0 0 0 2px #3B6BFF, 0 0 26px -6px rgba(110,147,255,.95); }
.pta::before, .el-extra::before, .gr-guia::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0 60%, #3B6BFF 74%, #9CB6FF 84%, #fff 88%, #3B6BFF 94%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: giro 8s linear infinite; }
@keyframes giro { to { --ang: 360deg; } }
.sl { border-radius: 26px; }
.r3-stage, .ef-stage, .v3-stage, .mtz-stage { border: 1.5px solid var(--marco) !important; border-radius: 22px !important; box-shadow: 0 0 0 1px rgba(59,107,255,.3), 0 26px 50px -26px rgba(5,10,42,.95); }
.tb th { background: rgba(59,107,255,.26); } .tb th, .tb td { border-color: rgba(156,182,255,.22); }
.mute, .small.mute, .pta-tx > span, .pta-tx small { color: #C0C8D4; }
.el-h h2 { color: #fff; } .el-h p { color: #E3E8EF; } .seguir { color: #E3E8EF; } .seguir b { color: #fff; }
.el-a em { color: #9CB6FF; }

/* Botones */
.btn { position: relative; overflow: hidden; border: 1.5px solid var(--marco-f); background: rgba(10,17,48,.6); color: #fff; font-weight: 600; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; }
a.btn { text-decoration: none; }
.btn:hover { transform: translateY(-1px); border-color: #fff; background: rgba(59,107,255,.35); }
.btn.ghost { background: transparent; }
.btn.pri, .pta-tx em { background: linear-gradient(120deg, #1E42B0, #2F5BE0) !important; border-color: #9CB6FF !important; color: #fff !important; box-shadow: 0 0 22px -6px rgba(59,107,255,.95); }
.btn.pri:hover { box-shadow: 0 0 0 2px #3B6BFF, 0 0 30px -4px rgba(110,147,255,1); }
.btn.pri::after, .pta-tx em::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%) 130% 0 / 240% 100%; transition: background-position .7s; pointer-events: none; }
.btn.pri:hover::after, .pta:hover .pta-tx em::after { background-position: -130% 0; }
.pta-tx em { position: relative; overflow: hidden; justify-self: start; align-self: end; margin-top: auto; padding: 7px 14px; border-radius: 10px; border: 1.5px solid; font-style: normal; font-size: 13.5px; font-weight: 600; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.deck-b { border: 1.5px solid var(--marco-f); background: rgba(10,17,48,.85); color: #fff; }
.vf-bt button, .pz-op, .pz-chip { border: 1.5px solid var(--marco); } .vf-bt button.sel, .pz-op.sel, .pz-chip.on { box-shadow: 0 0 0 2px #3B6BFF; border-color: #fff; }
.pta-v { background: linear-gradient(150deg, rgba(5,10,42,.86), rgba(30,66,176,.6)); border: 1px solid rgba(156,182,255,.4); }
.firma { background: none; border: 0; color: #E3E8EF; } .firma a { color: #fff; }
.est-btn { background: rgba(10,17,48,.82); border-color: var(--marco); }
#app.entrar > * { animation: subir .55s cubic-bezier(.2,.7,.2,1) both; } #app.entrar > *:nth-child(2) { animation-delay: .07s; } #app.entrar > *:nth-child(3) { animation-delay: .14s; }
.pta { animation: subir .6s cubic-bezier(.2,.7,.2,1) both; } .pta:nth-child(2) { animation-delay: .08s; } .pta:nth-child(3) { animation-delay: .16s; } .pta:nth-child(4) { animation-delay: .24s; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .esc, .esc i, .hero::before, .hero h1, body > header::before, .pta::before, .el-extra::before, .gr-guia::before, #app.entrar > *, .pta { animation: none !important; } .esc-l { display: none; } .esc i { translate: none; } }


/* La barra se funde con el fondo: sin borde inferior */
body > header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 56px; pointer-events: none; background: linear-gradient(90deg, rgba(11,27,94,.82), rgba(30,66,176,.72) 55%, rgba(59,107,255,.6)); -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,.62) 30%, rgba(0,0,0,.26) 62%, transparent); mask-image: linear-gradient(#000, rgba(0,0,0,.62) 30%, rgba(0,0,0,.26) 62%, transparent); }
.r3-cap { background: linear-gradient(180deg, #101B4D, #0A1238); }
.deck.clase { background: linear-gradient(140deg, #060B24, #0B1B5E 70%, #10266F); }
/* Simulaciones 3D sobre oscuro: los modelos y orbitales se leen mejor (pedido de Geronimo) */
.vis3d .v3-stage, .mtz .mtz-stage, .ef .ef-stage { background: #090B12 !important; }
.r3-cap { background: linear-gradient(180deg, #0E1430, #090B12); }

/* Modo clase: la diapositiva llena la pantalla y la barra flota sin caja */
.deck.clase { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; box-sizing: border-box; }
.deck.clase .deck-stage { display: grid; min-height: 0; }
.deck.clase .deck-stage > .sl { min-height: 0; height: 100%; box-sizing: border-box; align-content: space-between; overflow: auto; }
.deck.clase .deck-nav { position: static; background: none; padding: 4px 0 0; }
.deck.clase .deck-prog { display: none; }
.deck.clase .sl-sim .sl-vis.compacto .r3-view { height: clamp(250px, calc(100vh - 520px), 600px); }

/* Portada de entrada: texto a la izquierda, figura a la derecha (.hero-fig recibirá el personaje animado) */
.hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: min(76vh, 640px); align-items: center; }
.hero::before { left: auto; right: max(-40px, calc(50vw - 640px)); width: clamp(340px, 46vw, 620px); height: clamp(340px, 46vw, 620px); background: radial-gradient(closest-side, rgba(5,10,42,.94) 30%, rgba(30,66,176,.62) 58%, rgba(59,107,255,.26) 76%, transparent); }
.hero-tx { display: grid; gap: clamp(12px, 1.6vw, 20px); justify-items: start; }
.hero-k { margin: 0; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #E3E8EF; }
.hero-k b { color: #9CB6FF; }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; }
.hero h1 i { font-style: normal; -webkit-text-fill-color: #6E93FF; }
.hero-sub { margin: 0; max-width: 40ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.hero-pri { padding: 14px 28px; border-radius: 99px; background: #3B6BFF; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 0 0 1px rgba(156,182,255,.6), 0 14px 40px rgba(59,107,255,.5); transition: transform .2s, box-shadow .2s; }
.hero-pri:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #9CB6FF, 0 18px 54px rgba(59,107,255,.75); }
.hero-sec { color: #fff; font-weight: 600; text-decoration: none; }
.hero-sec i { font-style: normal; display: inline-block; color: #9CB6FF; margin-left: 4px; transition: transform .2s; }
.hero-sec:hover i { transform: translate(3px, -3px); }
.hero-autor { font-size: .88rem; color: #C0C8D4; text-decoration: none; }
.hero-autor b { color: #fff; font-weight: 600; }
.hero-autor:hover { color: #fff; }
.hero-fig { margin: 0; display: grid; place-items: center; align-self: stretch; }
.hero-fig .hero-iso { width: clamp(150px, 20vw, 270px) !important; }
@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero::before { right: 50%; translate: 50% 0; top: auto; bottom: 0; }
  .hero-fig { padding-block: 26px; }
}
.hero::before { display: none; }
.hero-fig { position: relative; isolation: isolate; justify-self: stretch; }
.hero-fig::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: clamp(300px, 42vw, 580px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(5,10,42,.95) 38%, rgba(16,38,111,.72) 62%, rgba(59,107,255,.28) 80%, transparent); animation: halo 7s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .hero-fig::before { animation: none; } }

/* Autocrítica (30/10): halo más suave, una sola firma en el inicio, diapositiva sin vacío, lista de ejercicios compacta, selector 3D/2D solo donde hay estructuras */
.hero-fig::before { background: radial-gradient(closest-side, rgba(5,10,42,.78) 22%, rgba(12,28,92,.62) 50%, rgba(59,107,255,.3) 74%, transparent); }
body.inicio .firma { display: none; }
body.claro .est-btn { display: none; }
.deck:not(.clase) .sl { min-height: min(54vh, 500px); }
.deck:not(.clase) .sl h2 { font-size: clamp(26px, 3.3vw, 44px); }
.deck:not(.clase) .sl li { font-size: clamp(16px, 1.5vw, 20.5px); }
.card.ej { padding: 12px 18px; }
.card.ej[open] { padding: 16px 20px 20px; }
.card.ej > summary .ejt { font-size: 1rem; }

/* Modo clase más formal: barra de progreso fina arriba, reloj, atajos en un panel que se abre con «?» */
.deck.clase .deck-prog { display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: rgba(156,182,255,.18); border-radius: 0; }
.deck.clase .deck-prog i { display: block; height: 100%; background: linear-gradient(90deg, #1E42B0, #6E93FF); transition: width .35s ease; }
.deck-reloj { font-variant-numeric: tabular-nums; font-size: .95rem; color: #C0C8D4; align-self: center; margin-right: 6px; }
.deck.clase .deck-ayuda { display: none; }
.deck.clase .deck-ayuda.ver { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; align-items: center; position: fixed; left: 50%; bottom: 84px; translate: -50% 0; z-index: 75; min-width: 320px; padding: 16px 20px; border-radius: 16px; background: rgba(10,17,48,.96); border: 1.5px solid var(--marco); box-shadow: 0 24px 60px rgba(0,0,0,.5); font-size: .92rem; color: #E3E8EF; margin: 0; }
.deck-ayuda b { grid-column: 1 / -1; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #9CB6FF; margin-bottom: 4px; }
.deck-ayuda kbd { display: inline-block; min-width: 24px; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(156,182,255,.45); background: rgba(255,255,255,.06); font: 600 .82rem/1.3 inherit; text-align: center; color: #fff; }
.pred { border-left: 3px solid #6E93FF; }


/* RENDIMIENTO (30/10): todo lo que se mueve va por transform/opacity (compositor). Sin backdrop-filter sobre fondo móvil,
   sin animar background-position ni máscaras sobre la red 4K, borde giratorio solo al pasar el mouse. */
.esc { animation: none; background: #1E42B0; }
.esc::before { content: ""; position: absolute; inset: -40%; background: linear-gradient(135deg, #0B1B5E 0%, #1E42B0 42%, #3B6BFF 78%, #1E42B0 100%); will-change: transform; animation: esc-mov 34s ease-in-out infinite alternate; }
@keyframes esc-mov { from { transform: translate(-10%, -8%); } to { transform: translate(10%, 8%); } }
.esc-m { width: 76vmax; height: 76vmax; }
.esc-r { background-image: url("marca/red-escena.webp"); }
.esc-l { display: none; }
.esc-luz { inset: auto; top: -27vmax; left: -27vmax; width: 54vmax; height: 54vmax; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(156,182,255,.6), rgba(59,107,255,.28) 45%, transparent 72%); }
.esc-luz1 { animation: luz-t1 19s ease-in-out infinite alternate; }
.esc-luz2 { animation: luz-t2 27s ease-in-out infinite alternate; }
@keyframes luz-t1 { 0% { transform: translate(10vw, 20vh) scale(.9); } 50% { transform: translate(85vw, 70vh) scale(1.2); } 100% { transform: translate(45vw, 10vh) scale(1); } }
@keyframes luz-t2 { 0% { transform: translate(90vw, 15vh) scale(1.1); } 50% { transform: translate(20vw, 85vh) scale(.85); } 100% { transform: translate(60vw, 50vh) scale(1.15); } }
body.en-clase .esc::before { animation-play-state: paused; }
header, body.claro > header { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(90deg, rgba(11,27,94,.95) 0%, rgba(30,66,176,.92) 55%, rgba(59,107,255,.86) 100%); }
body > header::before { left: -140%; width: 240%; background: linear-gradient(105deg, transparent 38%, rgba(156,182,255,.3) 50%, transparent 62%); background-size: 100% 100%; will-change: transform; animation: brillo-t 11s ease-in-out infinite; }
@keyframes brillo-t { from { transform: translateX(0); } to { transform: translateX(58%); } }
#app *, .autor-card, .firma, .deck-h { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.card, .sl, .ucard, .tile, .deck-strip button, .scard, .ef-res > div, .bif-ramas button, .bif-comun, .ej, .ritem { background: linear-gradient(155deg, rgba(10,17,48,.96), rgba(16,30,86,.93)); }
.pta::before, .el-extra::before, .gr-guia::before { animation-play-state: paused; }
.pta:hover::before, .pta:focus-within::before, .el-extra:hover::before, .gr-guia:hover::before { animation-play-state: running; }
.hero h1 { animation: titulo 2.6s ease-out 1 forwards; }

/* ═══ Modo clase: escenario fijo escalado (ver encuadrar() en lib/recorrido.js). Todas las medidas son del escenario de 1600×900. ═══ */
.deck.clase { position: fixed; inset: 0; z-index: 60; display: block; width: auto; height: auto; padding: 0; margin: 0; overflow: hidden; outline: none; }
.deck.clase:not(.barra) { cursor: none; }
.deck.clase .deck-h, .deck.clase .deck-strip { display: none; }
.deck.clase.ver-ind .deck-strip { display: grid; }
.deck.clase .deck-stage { position: absolute; transform-origin: 0 0; display: block; min-height: 0; overflow: hidden; max-width: none; }
.deck.clase .deck-stage > .sl { --e: 1; position: absolute; inset: 0; width: auto; height: auto; min-height: 0; margin: 0; box-sizing: border-box; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 18px 52px; align-items: stretch; align-content: stretch; padding: 58px 72px 26px; border: 0; border-radius: 0; background: none; box-shadow: none; animation-duration: .3s; }
.deck.clase .deck-stage > .sl.sl-sim { grid-template-columns: 500px minmax(0, 1fr); gap: 18px 36px; padding: 46px 44px 22px 60px; }
.deck.clase .deck-stage > .sl.sl-txt { grid-template-columns: minmax(0, 1fr); }
.deck.clase .sl .sl-txt { display: flex; flex-direction: column; justify-content: center; min-height: 0; max-width: none; overflow: hidden; }
.deck.clase .sl.sl-txt .sl-txt { max-width: 1240px; margin: 0 auto; width: 100%; }
.deck.clase .sl .sl-kick { font-size: 19px; }
.deck.clase .sl h2 { font-size: calc(58px * var(--e)); line-height: 1.1; margin: 10px 0 calc(24px * var(--e)); }
.deck.clase .sl.sl-sim h2 { font-size: calc(46px * var(--e)); }
.deck.clase .sl ul { gap: calc(16px * var(--e)); }
.deck.clase .sl li { font-size: calc(31px * var(--e)); line-height: 1.32; }
.deck.clase .sl.sl-sim li { font-size: calc(25px * var(--e)); }
.deck.clase .sl.sl-txt li { font-size: calc(36px * var(--e)); }
.deck.clase .sl .sl-k { font-size: calc(27px * var(--e)); margin-top: calc(20px * var(--e)); padding: calc(14px * var(--e)) 20px; }
.deck.clase .sl.sl-sim .sl-k { font-size: calc(22px * var(--e)); }
.deck.clase .sl .sl-pre { font-size: calc(24px * var(--e)); margin-top: calc(16px * var(--e)); padding: 12px 18px; }
.deck.clase .sl .sl-pre span { font-size: 15px; }
.deck.clase .sl .sl-r { font-size: calc(24px * var(--e)); }
.deck.clase .sl .sl-pie { font-size: 15px; padding-top: 10px; margin: 0; }
.deck.clase .sl .sl-pie img { width: 24px; }
.deck.clase .sl .sl-vis { min-height: 0; overflow: hidden; align-content: center; display: grid; zoom: 1 !important; }
.deck.clase .sl .sl-esq, .deck.clase .sl .sl-esq .fml-b { font-size: calc(38px * var(--e)); }
.deck.clase .sl .sl-tb { font-size: calc(26px * var(--e)); width: 100%; }
.deck.clase .sl .sl-tb th, .deck.clase .sl .sl-tb td { padding: calc(10px * var(--e)) 16px; }
.deck.clase .sl .sl-datos div { font-size: calc(26px * var(--e)); }
.deck.clase .sl .sl-fuente { font-size: 18px; }
/* Simulación dentro de la diapositiva: la escena llena la columna; variables a demanda */
.deck.clase .sl .sl-vis .emb, .deck.clase .sl .sl-vis .wblock { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.deck.clase .sl .sl-vis .embk { font-size: 15px; margin-bottom: 6px; }
.deck.clase .sl .fs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.deck.clase .sl .fs-lay { flex: 1; min-height: 0; display: block; position: relative; }
.deck.clase .sl .fs-scene { position: absolute; inset: 0; }
.deck.clase .sl .fs-scene canvas { position: absolute; inset: 0; width: 100%; height: 100% !important; }
.deck.clase .sl .fs-read { position: absolute; top: 8px; right: 8px; display: none; grid-template-columns: 1fr; width: 250px; z-index: 3; }
.deck.clase .sl .fs-read div { background: rgba(9,11,18,.82); }
.deck.clase .sl .fs-par, .deck.clase .sl .fs-chips, .deck.clase .sl .fs-leg { display: none; }
.deck.clase .sl .fs.ver-par .fs-read { display: grid; }
.deck.clase .sl .fs.ver-par .fs-par { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deck.clase .sl .fs.ver-par .fs-chips { display: flex; }
.deck.clase .sl .fs-ctl { opacity: .9; font-size: 14px; }
.deck.clase .sl .fs-ctl [data-t] { font-variant-numeric: tabular-nums; font-size: 16px; }
.deck.clase .sl.sim-amplia { grid-template-columns: minmax(0, 1fr) !important; padding: 18px 22px 12px; }
.deck.clase .sl.sim-amplia .sl-txt { display: none; }
/* Barra discreta: flota sobre la pantalla (no se escala) y se va sola */
.deck.clase .deck-nav { position: fixed; right: 18px; bottom: 14px; left: auto; z-index: 66; display: flex; gap: 8px; align-items: center; width: auto; margin: 0; padding: 6px 10px; border-radius: 14px; background: rgba(10,17,48,.88); opacity: 0; pointer-events: none; transition: opacity .25s; }
.deck.clase.barra .deck-nav { opacity: 1; pointer-events: auto; }
.deck.clase .deck-nav .deck-b { width: 36px; height: 36px; }
.deck.clase .deck-prog { pointer-events: none; }
.deck.clase [data-full-clon] { display: none; }
.deck-pulso { position: fixed; left: 50%; top: 22px; translate: -50% 0; z-index: 70; padding: 8px 18px; border-radius: 12px; background: rgba(10,17,48,.92); color: #fff; font-size: 17px; opacity: 0; pointer-events: none; }
.deck-pulso.ver { animation: pulso 1.3s ease; }
@keyframes pulso { 10%, 70% { opacity: 1; } 100% { opacity: 0; } }
.deck.clase .deck-negro:not([hidden]) { position: fixed; inset: 0; z-index: 80; background: #000; display: block; }
/* Pantalla vertical (celular): una columna */
.deck.clase.vert .deck-stage > .sl, .deck.clase.vert .deck-stage > .sl.sl-sim { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 56px 44px 22px; }
.deck.clase.vert .deck-stage > .sl.sl-txt { grid-template-rows: minmax(0, 1fr) auto; }
.deck.clase .sl .fs.pausada .fs-scene::after { content: "▶"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 96px; height: 96px; display: grid; place-items: center; padding-left: 8px; box-sizing: border-box; border-radius: 50%; background: rgba(10,17,48,.72); border: 2px solid rgba(156,182,255,.7); color: #fff; font-size: 40px; pointer-events: none; }
.deck.clase .sl .fs-scene { cursor: pointer; }
.deck.clase .sl.sl-sim .sl-vis { grid-template-rows: minmax(0, 1fr); align-content: stretch; height: 100%; }
.deck.clase .sl.sl-sim .sl-vis .sl-emb { height: 100%; min-height: 0; }
.deck.clase .sl .wblock { flex: 1; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* El brillo de la barra mide 240 % y se traslada: sin este recorte, WebKit deja correr la página de costado. */
html { overflow-x: hidden; }
body > header { overflow-x: clip; overflow-y: visible; }

/* Con una simulación en marcha el fondo animado se detiene: la placa de video queda para la escena. */
body.sim-viva .esc, body.sim-viva .esc i, body.sim-viva > header::before { animation-play-state: paused; }

/* Modo clase en pantallas táctiles: sin mouse la barra queda siempre a mano, respetando la zona segura del teléfono. */
@media (hover: none) {
  .deck.clase { cursor: auto; }
  .deck.clase .deck-nav { opacity: 1; pointer-events: auto; left: 50%; right: auto; translate: -50% 0; bottom: max(8px, env(safe-area-inset-bottom)); gap: 6px; padding: 4px 8px; max-width: calc(100vw - 16px); box-sizing: border-box; }
  .deck.clase [data-ayuda], .deck.clase .deck-n { display: none; }
}

/* Teléfono apaisado: escenario más chico (1180×700), mismas proporciones de lectura */
.deck.clase.bajo .deck-stage > .sl { padding: 30px 40px 12px; gap: 10px 32px; }
.deck.clase.bajo .deck-stage > .sl.sl-sim { grid-template-columns: 400px minmax(0, 1fr); padding: 26px 30px 12px 36px; gap: 10px 26px; }
.deck.clase.bajo .sl h2 { font-size: calc(44px * var(--e)); margin-bottom: calc(14px * var(--e)); }
.deck.clase.bajo .sl.sl-sim h2 { font-size: calc(36px * var(--e)); }
.deck.clase.bajo .sl.sl-txt li { font-size: calc(32px * var(--e)); }
/* Pantalla vertical: la letra crece, porque el escenario se ve al ancho del teléfono */
.deck.clase.vert .sl li, .deck.clase.vert .sl.sl-sim li, .deck.clase.vert .sl.sl-txt li { font-size: calc(34px * var(--e)); }
.deck.clase.vert .sl h2, .deck.clase.vert .sl.sl-sim h2 { font-size: calc(50px * var(--e)); }
.deck.clase.vert .sl .sl-k { font-size: calc(30px * var(--e)); }

/* Herramientas con tabla dentro de una diapositiva: la tabla se recorre por dentro, sin achicar la letra. */
.deck.clase .sl .wblock:has(table) { overflow: auto; -webkit-overflow-scrolling: touch; }
/* Diapositiva que no entra con letra legible en una pantalla muy chica: se desplaza por dentro. */
.deck.clase .deck-stage > .sl.desliza { overflow-y: auto; -webkit-overflow-scrolling: touch; grid-template-rows: auto auto auto; }
.deck.clase .sl.desliza .sl-txt { overflow: visible; }

/* Tablas de diapositiva: siempre al ancho de su columna */
.deck.clase .sl .sl-tb { table-layout: fixed; overflow-wrap: break-word; hyphens: auto; }
.deck.clase.bajo .sl .sl-tb { font-size: calc(21px * var(--e)); }
.deck.clase.bajo .sl .sl-tb th, .deck.clase.bajo .sl .sl-tb td { padding: calc(6px * var(--e)) 10px; }
@media (hover: none) { .deck.clase .deck-prog { display: block; } }

/* Teléfono apaisado: la barra pasa al costado para no robarle altura a la diapositiva */
@media (hover: none) { .deck.clase.bajo .deck-nav { flex-direction: column; left: auto; right: max(4px, env(safe-area-inset-right)); top: 50%; bottom: auto; translate: 0 -50%; width: 50px; padding: 6px 4px; }
  .deck.clase.bajo .deck-nav .deck-b { width: 38px; height: 38px; } .deck.clase.bajo .deck-ib span { display: none; } .deck.clase.bajo .deck-ib { padding: 6px 10px; } }

/* Portada: el halo detrás del logo pasa de disco oscuro con borde a una sombra muy gradual, sin anillo ni corte (pedido 31/10) */
.hero-fig::before { width: clamp(380px, 54vw, 760px); background: radial-gradient(closest-side, rgba(6,11,36,.58) 0%, rgba(6,11,36,.5) 22%, rgba(8,18,64,.34) 44%, rgba(14,32,104,.18) 64%, rgba(30,66,176,.07) 82%, transparent 100%); animation: halo-suave 9s ease-in-out infinite alternate; }
@keyframes halo-suave { from { opacity: .85; } to { opacity: 1; } }

/* Portada más compacta (31/10: «mucho espacio vacío»); en celular el logo va al lado del título, no abajo */
.hero { min-height: min(58vh, 500px); padding-top: clamp(14px, 2vw, 26px); padding-bottom: clamp(10px, 1.6vw, 20px); }
.hero-tx { gap: clamp(8px, 1.2vw, 14px); }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.hero-fig .hero-iso { width: clamp(140px, 17vw, 230px) !important; }
@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr) clamp(92px, 27vw, 124px); column-gap: 12px; row-gap: 12px; align-items: start; min-height: 0; padding-top: 16px; }
  .hero-tx { display: contents; }
  .hero-k { grid-column: 1 / -1; margin-bottom: 2px; }
  .hero h1 { grid-column: 1; font-size: clamp(2.2rem, 11vw, 3rem); }
  .hero-fig { grid-column: 2; grid-row: 2; align-self: center; padding: 0; margin: 0; }
  .hero-fig .hero-iso { width: 100% !important; }
  .hero-fig::before { width: 230%; }
  .hero-sub, .hero-cta, .hero-autor { grid-column: 1 / -1; }
}
html, body { overflow-x: clip; }  /* nada que se salga a lo ancho (halos, brillos) puede agrandar el viewport del teléfono */

/* Firma de la portada: una línea discreta; «Unite a la red ↗» es un enlace fino que se ilumina (la tarjeta con botón fue rechazada: «tosca») */
.hero-autor { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 6px; padding: 0; border: 0; background: none; color: #C0C8D4; font-size: .9rem; text-decoration: none; }
.hero-autor b { color: #fff; font-weight: 600; }
.hero-autor em { font-style: normal; font-weight: 600; color: #9CB6FF; padding-bottom: 2px; border-bottom: 1px solid rgba(156,182,255,.45); transition: color .2s, border-color .2s, text-shadow .2s; white-space: nowrap; }
.hero-autor em i { font-style: normal; display: inline-block; margin-left: 2px; transition: transform .2s; }
.hero-autor:hover { color: #E3E8EF; }
.hero-autor:hover em { color: #fff; border-color: #fff; text-shadow: 0 0 18px rgba(156,182,255,.9); }
.hero-autor:hover em i { transform: translate(3px, -3px); }