styles.css

/* ============================================================
   StatSim Pro — Design System "Observatorio Nocturno" v2
   Tema oscuro profesional · Rendimiento máximo por diseño:
   · Solo se animan transform/opacity/color (compositor GPU).
   · Cero fuentes externas (pila del sistema), cero JS añadido.
   · Profundidad por bordes-luz (1px rgba blanca) en vez de
     sombras pesadas: se pinta una vez y no cuesta en scroll.
   · Los diagramas exportables (PRISMA, forest) se muestran en
     "modo papel" claro: son vista previa del Word.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    color-scheme: dark;
    /* Lienzo y superficies (azul-noche) */
    --color-bg: #0b0f19;
    --color-bg-secondary: #121a2b;
    --color-bg-tertiary: #0e1524;
    --surface: #131c2e;
    --surface-2: #182338;
    /* Bordes-luz */
    --color-border: rgba(148, 163, 197, 0.16);
    --border-soft: rgba(148, 163, 197, 0.09);
    --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    /* Texto */
    --color-text: #e7ecf6;
    --color-text-secondary: #aab5c7;
    --color-text-tertiary: #718096;
    --color-primary: #f2f5fb;      /* antes negro: ahora el "tinta" claro */
    --color-secondary: #c2cbdc;
    /* Marca */
    --color-accent: #e6b93f;       /* dorado StatSim */
    --accent-soft: rgba(230, 185, 63, 0.14);
    --accent-ring: rgba(230, 185, 63, 0.35);
    /* Estados */
    --color-success: #4ade80;
    --color-error: #f87171;
    --color-warning: #fbbf24;
    /* Tipografía */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-secondary: 'Georgia', 'Times New Roman', serif;
    /* Espaciado */
    --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem;
    --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem;
    /* Sombras (solo para elementos flotantes: header, toast, hovers) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(2, 6, 16, 0.45);
    --shadow-lg: 0 16px 48px rgba(2, 6, 16, 0.55);
    /* Bordes */
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
    /* Transiciones */
    --transition-fast: 140ms cubic-bezier(.4, 0, .2, 1);
    --transition-base: 220ms cubic-bezier(.4, 0, .2, 1);
    --transition-slow: 340ms cubic-bezier(.4, 0, .2, 1);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Atmósfera: dos auroras fijas, pintadas UNA vez (pseudo-elemento fixed,
   sin imágenes, sin repaint en scroll porque no depende del scroll). */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(52rem 34rem at 82% -8%, rgba(230, 185, 63, 0.07), transparent 60%),
        radial-gradient(46rem 30rem at -12% 32%, rgba(76, 125, 255, 0.075), transparent 55%),
        radial-gradient(40rem 28rem at 55% 118%, rgba(46, 91, 186, 0.06), transparent 55%);
}
body::after { /* red de nodos: textura científica en todas las secciones */
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg stroke='%23aebbdb' stroke-opacity='0.07' fill='none'%3E%3Cpath d='M60 90L200 40L340 120L470 70M200 40L160 210M340 120L390 300M60 90L120 260L160 210L300 250L390 300L520 340M120 260L90 430L260 480M300 250L260 480M390 300L440 470L260 480M520 340L440 470'/%3E%3C/g%3E%3Cg fill='%23aebbdb' fill-opacity='0.11'%3E%3Ccircle cx='60' cy='90' r='2.2'/%3E%3Ccircle cx='200' cy='40' r='1.7'/%3E%3Ccircle cx='340' cy='120' r='2.4'/%3E%3Ccircle cx='470' cy='70' r='1.5'/%3E%3Ccircle cx='160' cy='210' r='1.8'/%3E%3Ccircle cx='120' cy='260' r='2.1'/%3E%3Ccircle cx='300' cy='250' r='1.6'/%3E%3Ccircle cx='390' cy='300' r='2.3'/%3E%3Ccircle cx='520' cy='340' r='1.6'/%3E%3Ccircle cx='90' cy='430' r='1.8'/%3E%3Ccircle cx='260' cy='480' r='2.2'/%3E%3Ccircle cx='440' cy='470' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
}
::selection { background: var(--accent-soft); color: var(--color-primary); }

/* ========================================
   HEADER
   ======================================== */
.header {
    background-color: rgba(11, 15, 25, 0.72);
    border-bottom: 1px solid var(--border-soft);
    padding: var(--spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.header::after { /* filo dorado sutil bajo el header */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230, 185, 63, 0.35) 30%, rgba(76, 125, 255, 0.25) 70%, transparent);
    pointer-events: none;
}
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo {
    font-family: var(--font-display);
    font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em;
    color: var(--color-primary);
}
.logo .accent {
    font-weight: 300;
    background: linear-gradient(120deg, #f4d071, var(--color-accent) 55%, #b8912b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.logo .accent::after { /* destello que cruza el "Pro" cada 7 s (solo transform) */
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: logoShine 7s cubic-bezier(.4, 0, .2, 1) infinite;
    pointer-events: none;
}
@keyframes logoShine {
    0%, 78% { transform: translateX(-160%) skewX(-18deg); }
    92%, 100% { transform: translateX(340%) skewX(-18deg); }
}
.nav { display: flex; gap: var(--spacing-lg); }
.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
    transition: color var(--transition-base);
    position: relative;
    padding-bottom: 2px;
}
.nav-link::after { /* subrayado animado por transform (GPU) */
    content: '';
    position: absolute;
    bottom: -0.7rem; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--color-accent), #f4d071);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}
.nav-link:hover { color: var(--color-text); }
.nav-link:hover::after { transform: scaleX(0.55); }
.nav-link.active { color: var(--color-primary); }
.nav-link.active::after { transform: scaleX(1); }

/* ========================================
   CONTAINER Y LAYOUT
   ======================================== */
.container {
    width: 100%;
    padding-left: clamp(16px, 2.5%, 48px);
    padding-right: clamp(16px, 2.5%, 48px);
    box-sizing: border-box;
}
.main { min-height: calc(100vh - 200px); padding: var(--spacing-2xl) 0; }
.section { display: none; }
.section.active { display: block; animation: fadeIn 0.45s cubic-bezier(.22, .8, .3, 1); }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Entrada escalonada de las primeras tarjetas (solo transform/opacity). */
.section.active > .container > .card { animation: cardIn 0.5s cubic-bezier(.22, .8, .3, 1) backwards; }
.section.active > .container > .card:nth-of-type(1) { animation-delay: 0.04s; }
.section.active > .container > .card:nth-of-type(2) { animation-delay: 0.1s; }
.section.active > .container > .card:nth-of-type(3) { animation-delay: 0.16s; }
.section.active > .container > .card:nth-of-type(4) { animation-delay: 0.22s; }
.section.active > .container > .card:nth-of-type(5) { animation-delay: 0.28s; }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.section-header { text-align: center; margin-bottom: var(--spacing-2xl); }
.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 2.6rem);
    font-weight: 300; letter-spacing: -0.03em;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}
.section-title::after { /* pincelada de marca bajo el título */
    content: '';
    display: block;
    width: 64px; height: 3px;
    margin: 0.9rem auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-accent), rgba(76, 125, 255, 0.8));
}
.section-subtitle {
    font-size: 1.06rem; color: var(--color-text-secondary); font-weight: 400;
    max-width: 68rem; margin: 0 auto;
}

/* ========================================
   CARDS
   ======================================== */
.card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface) 22%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--edge-light);
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.card:hover { border-color: var(--color-border); transform: translateY(-1px); }
.card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--spacing-lg);
}
.card-title {
    font-family: var(--font-display);
    font-size: 1.18rem; font-weight: 500; letter-spacing: -0.01em;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    display: flex; align-items: center; gap: 0.55rem;
}
.card-title::before { /* pastilla de marca por tarjeta */
    content: '';
    width: 4px; height: 1.05em; border-radius: 3px;
    background: linear-gradient(180deg, var(--color-accent), rgba(76, 125, 255, 0.9));
    flex-shrink: 0;
}

/* ========================================
   FORMS
   ======================================== */
.form-group { margin-bottom: var(--spacing-md); }
.form-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--spacing-lg); }
label {
    display: block; font-size: 0.875rem; font-weight: 500;
    color: var(--color-text); margin-bottom: var(--spacing-xs);
    letter-spacing: 0.01em;
}
.input {
    width: 100%;
    padding: 0.72rem 1rem;
    font-size: 0.9375rem;
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.input:hover:not(:disabled) { border-color: rgba(148, 163, 197, 0.28); }
.input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    background-color: #101a2e;
}
.input::placeholder { color: var(--color-text-secondary); opacity: 0.55; }
.input-sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
select.input option { background: var(--surface); color: var(--color-text); }

.campo-hint { display: block; margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.3; color: var(--color-text-secondary); }
.campo-hint.invalido { color: var(--color-error); font-weight: 600; }
.campo-hint.aviso { color: var(--color-warning); font-weight: 600; }
.input.invalid { border-color: var(--color-error); background-color: rgba(248, 113, 113, 0.08); }
.input.invalid:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.22); }
.input:disabled {
    background-color: rgba(14, 21, 36, 0.55);
    color: #5b6778;
    cursor: not-allowed;
    border-style: dashed;
    border-color: var(--border-soft);
}
.input:disabled::placeholder { color: #45526a; }

/* Cartel con el orden de llenado */
.orden-guia {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem 0.75rem; margin: 0 0 1rem; padding: 0.75rem 1rem;
    background-color: rgba(230, 185, 63, 0.05);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: 0.875rem; color: var(--color-secondary);
}
.orden-guia-titulo { font-weight: 700; color: var(--color-primary); }
.orden-paso { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.orden-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: linear-gradient(135deg, #f0c75e, var(--color-accent));
    color: #241a05; font-weight: 800; font-size: 0.8rem; flex-shrink: 0;
}
.orden-flecha { color: var(--color-accent); font-weight: 700; }
.orden-nota { flex-basis: 100%; font-size: 0.8125rem; color: var(--color-text-secondary); font-style: italic; }

.leyenda-pruebas {
    margin-top: 1rem; padding: 1rem 1.25rem;
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.55;
}
.leyenda-pruebas .leyenda-titulo { font-weight: 700; color: var(--color-primary); margin: 0 0 0.5rem; }
.leyenda-pruebas ol { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.leyenda-pruebas li::marker { color: var(--color-accent); font-weight: 700; }
.leyenda-pruebas strong { color: var(--color-primary); }

.help-text { display: block; font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: var(--spacing-xs); }
.help-text a, .card a { color: #8fb3ff; text-decoration: none; }
.help-text a:hover, .card a:hover { color: #b3ccff; text-decoration: underline; }

.radio-group { display: flex; gap: var(--spacing-lg); flex-wrap: wrap; }
.radio-label { display: flex; align-items: center; gap: var(--spacing-xs); cursor: pointer; font-size: 0.9375rem; }
.radio-label input[type="radio"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-accent); }
input[type="checkbox"] { accent-color: var(--color-accent); }

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex; align-items: center; gap: var(--spacing-xs);
    padding: 0.72rem 1.5rem;
    font-size: 0.9375rem; font-weight: 550; font-family: var(--font-primary);
    letter-spacing: 0.01em; text-decoration: none;
    border: none; border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-base),
                background-color var(--transition-base), border-color var(--transition-base),
                color var(--transition-base), filter var(--transition-base);
    white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.btn-primary {
    background: linear-gradient(135deg, #f2cc66, var(--color-accent) 55%, #c99a2e);
    color: #221803;
    box-shadow: 0 2px 10px rgba(230, 185, 63, 0.22), var(--edge-light);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 6px 20px rgba(230, 185, 63, 0.3);
}
.btn-secondary {
    background-color: var(--surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--edge-light);
}
.btn-secondary:hover:not(:disabled) { background-color: #1d2a44; border-color: rgba(148, 163, 197, 0.3); }
.btn-outline { background-color: transparent; color: var(--color-secondary); border: 1px solid var(--color-border); }
.btn-outline:hover:not(:disabled) {
    background-color: rgba(230, 185, 63, 0.07);
    border-color: var(--color-accent);
    color: var(--color-text);
}
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn:focus-visible, .input:focus-visible, .nav-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    background: none; border: none;
    color: var(--color-text-secondary); cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    border-radius: var(--radius-sm);
}
.btn-icon:hover { background-color: var(--surface-2); color: var(--color-text); }
.btn-delete:hover { background-color: rgba(248, 113, 113, 0.12); color: var(--color-error); }

/* ========================================
   TABLES
   ======================================== */
.table-container { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-soft); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: rgba(14, 21, 36, 0.35); }
.table thead { background-color: var(--surface-2); }
.table th {
    padding: 0.9rem 1rem; text-align: left; font-weight: 650;
    color: var(--color-secondary);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
    position: sticky; top: 0; background-color: var(--surface-2); z-index: 1;
}
.table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-soft); }
.table tbody tr { transition: background-color var(--transition-fast); }
.table tbody tr:nth-child(even) { background-color: rgba(148, 163, 197, 0.03); }
.table tbody tr:hover { background-color: rgba(230, 185, 63, 0.055); }
.table-scroll {
    max-height: 400px; overflow-y: auto; overflow-x: auto;
    border-radius: var(--radius-md); border: 1px solid var(--border-soft);
}
.table-preview { font-size: 0.875rem; }
.table-preview th, .table-preview td { padding: 0.625rem; }

/* ========================================
   STATS GRID
   ======================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md); margin-bottom: var(--spacing-lg);
}
.stat-card {
    display: flex; flex-direction: column;
    padding: var(--spacing-md);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    box-shadow: var(--edge-light);
}
.stat-label {
    font-size: 0.78rem; color: var(--color-text-secondary); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: var(--spacing-xs);
}
.stat-value {
    font-size: 2rem; font-weight: 300; letter-spacing: -0.02em;
    background: linear-gradient(120deg, var(--color-primary), #c9d6f0);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ========================================
   ACTIONS / UPLOAD / RESULTS
   ======================================== */
.actions-bar { display: flex; gap: var(--spacing-md); justify-content: center; margin: var(--spacing-xl) 0; flex-wrap: wrap; }
.upload-area { padding: var(--spacing-xl); border: 2px dashed var(--color-border); border-radius: var(--radius-lg); text-align: center; transition: border-color var(--transition-base); }
.upload-area:hover { border-color: var(--color-accent); }
.upload-options { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); }
.divider-text { color: var(--color-text-secondary); font-size: 0.875rem; }

.result-section { margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-xl); border-bottom: 1px solid var(--border-soft); }
.result-section:last-child { border-bottom: none; }
.result-title { font-size: 1.125rem; font-weight: 550; margin-bottom: var(--spacing-md); color: var(--color-primary); }
.result-box {
    background-color: var(--color-bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-accent);
}
/* Cajas de interpretación: mismas variantes, versión nocturna. */
.interpretation-box {
    padding: 1.5rem; margin-top: 1rem;
    background: var(--ib-fondo);
    border-left: 4px solid var(--ib-borde);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.interpretation-title { display: flex; align-items: center; margin-bottom: 0.75rem; font-weight: 650; color: var(--ib-titulo); }
.interpretation-title svg { margin-right: 0.5rem; }
body .interpretation-text { margin: 0; line-height: 1.8; text-align: justify; color: var(--color-text); }
.interpretation-box--normalidad { --ib-fondo: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.05)); --ib-borde: #3b82f6; --ib-titulo: #8fb3ff; }
.interpretation-box--correlacion { --ib-fondo: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.05)); --ib-borde: #22c55e; --ib-titulo: #6ee7a0; }
.interpretation-box--hipotesis { --ib-fondo: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(245,158,11,0.05)); --ib-borde: #f59e0b; --ib-titulo: #f7c860; }

.result-table { width: 100%; margin: var(--spacing-md) 0; }
.result-table td { padding: var(--spacing-xs) var(--spacing-sm); }
.result-table th { padding: var(--spacing-xs) var(--spacing-sm); text-align: left; font-weight: 650; border-bottom: 1px solid var(--color-border); }
.result-table td:first-child { font-weight: 500; color: var(--color-text-secondary); }
.discussion-box { background-color: var(--color-bg-tertiary); padding: var(--spacing-lg); border-radius: var(--radius-md); line-height: 1.8; font-size: 0.9375rem; }
.apa-box { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; }
.apa-text { margin: 0; flex: 1; min-width: 240px; font-style: italic; line-height: 1.7; }
.reference-text { overflow-wrap: anywhere; word-break: break-word; }
code {
    overflow-wrap: anywhere; word-break: break-word;
    background: rgba(148, 163, 197, 0.1);
    padding: 0.1rem 0.35rem; border-radius: 4px;
    font-size: 0.9em; color: #c9d6f0;
}
.highlight { background-color: rgba(230, 185, 63, 0.16); padding: 0.125rem 0.3rem; border-radius: var(--radius-sm); font-weight: 500; color: #f3d787; }
.decision-accept { color: var(--color-success); font-weight: 650; }
.decision-reject { color: var(--color-error); font-weight: 650; }

/* ========================================
   HELP
   ======================================== */
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); }
.help-card {
    padding: var(--spacing-xl);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--edge-light);
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.help-card:hover { border-color: var(--color-border); transform: translateY(-2px); }
.help-card h3 { font-size: 1.18rem; font-weight: 550; margin-bottom: var(--spacing-sm); color: var(--color-primary); }
.help-card p { color: var(--color-text-secondary); line-height: 1.65; }

/* ========================================
   FOOTER · TOAST
   ======================================== */
.footer {
    background-color: rgba(14, 21, 36, 0.6);
    border-top: 1px solid var(--border-soft);
    padding: var(--spacing-xl) 0; text-align: center; margin-top: var(--spacing-2xl);
}
.footer p { color: var(--color-text-secondary); font-size: 0.875rem; }
.toast {
    position: fixed; bottom: -120px; left: 50%; transform: translateX(-50%);
    background: rgba(19, 28, 46, 0.92);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
    padding: 1rem 1.6rem; border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg), var(--edge-light);
    transition: bottom var(--transition-slow);
    z-index: 1000; font-size: 0.9375rem;
    max-width: min(90vw, 640px); line-height: 1.4; text-align: left;
}
.toast.show { bottom: 2rem; }
.toast.success { border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 12px 36px rgba(74, 222, 128, 0.12); }
.toast.error { border-color: rgba(248, 113, 113, 0.55); box-shadow: 0 12px 36px rgba(248, 113, 113, 0.14); }
.toast.warning { border-color: rgba(251, 191, 36, 0.55); }

/* ========================================
   GRÁFICOS — "modo papel" (los SVG de d3 y los exportables se dibujan
   sobre blanco: son la vista previa de lo que irá al documento Word).
   Sobrescribe con `body` los <style> inline del index sin tocarlo.
   ======================================== */
body .chart-container {
    background: linear-gradient(180deg, var(--surface-2), var(--surface) 22%);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--border-soft);
    box-shadow: var(--edge-light);
}
body .chart-title { color: var(--color-primary); }
/* Los SVG de d3 dibujan ejes y textos oscuros: el filtro los adapta al tema
   SOLO en pantalla (es CSS puro: la exportación a Word serializa el SVG
   original y sale en claro, correcto para el documento). */
/* Cobertura total: cualquier SVG de gráfico del Analizador (los iconos de
   16/20 px quedan fuera). Inversión completa + brillo para que ejes y
   etiquetas grises de d3 salgan CLARAMENTE legibles sobre el tema. */
#analizador svg[width]:not([width="14"]):not([width="16"]):not([width="18"]):not([width="20"]):not([width="24"]) {
    filter: invert(1) hue-rotate(180deg) brightness(1.32) contrast(1.12) saturate(1.25);
    border-radius: 6px;
}
#prismaLienzo, #metaLienzo, #redResultado { color-scheme: light; }
#redResultado { background: #fbfaf7 !important; color: #1f2430 !important; border-color: var(--border-soft) !important; }
#metaResultado { background: var(--color-bg-tertiary) !important; color: var(--color-text) !important; border-color: var(--border-soft) !important; }

/* ---- Módulos con estilos claros propios: versión nocturna ---- */
body #arbolPsico .arb-col { background: var(--color-bg-tertiary); border-color: var(--border-soft); }
body #arbolPsico .arb-item { color: var(--color-secondary); }
body #arbolPsico .arb-item:hover { background: rgba(230, 185, 63, 0.08); color: #f3d787; }
body #arbolPsico .arb-item.act { background: var(--accent-soft); color: #f3d787; border-left-color: var(--color-accent); }
body #arbolPsico .arb-item .arb-n { color: var(--color-text-secondary); }
body #arbolPsico .arb-cab { background: linear-gradient(135deg, #2E5BBA, #4a74d0); }
body #arbolPsico .arb-total { color: #f3d787; background: var(--accent-soft); }
body #arbolPsico .arb-ruta, body #arbolPsico .arb-vacio { color: var(--color-text-secondary); }
tr.exp-detalle > td { background: rgba(76, 125, 255, 0.07) !important; border-left-color: #4c7dff !important; }
#prismaEditor, #expTablaCont { background: transparent; }

/* ========================================
   CONTACTO — versión nocturna (gana a los <style> del index vía `body`)
   ======================================== */
body #contacto .perfil-card {
    background: linear-gradient(160deg, rgba(76, 125, 255, 0.1), rgba(230, 185, 63, 0.045) 55%, transparent);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md), var(--edge-light);
}
body #contacto .perfil-foto { border-color: var(--surface-2); box-shadow: 0 0 0 3px var(--color-accent), 0 0 0 6px rgba(230, 185, 63, 0.2), 0 8px 22px rgba(0, 0, 0, 0.45); }
body #contacto .perfil-fallback { border-color: var(--surface-2); }
body #contacto .perfil-nombre { color: var(--color-primary); }
body #contacto .perfil-tag { color: var(--color-accent); }
body #contacto .perfil-bio { color: var(--color-text-secondary); }
body #contacto .contact-card { background: var(--surface); border-color: var(--color-border); }
body #contacto .contact-card h3 { color: var(--color-text); }
body #contacto .contact-card .icon { color: var(--color-accent); }
body #contacto .contact-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
body #contacto .contact-card[href*="github"]:hover { border-color: #e7ecf6; }
body #contacto .contact-card[href*="github"]:hover .icon,
body #contacto .contact-card[href*="github"]:hover h3 { color: #e7ecf6; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .section-title { font-size: 1.9rem; }
    .form-row { grid-template-columns: 1fr; }
    .header-content { flex-direction: column; gap: var(--spacing-md); }
    .nav { gap: var(--spacing-md); flex-wrap: wrap; justify-content: center; }
    .nav-link { font-size: 0.875rem; }
    .nav-link::after { bottom: -0.4rem; }
    .actions-bar { flex-direction: column; }
    .upload-options { flex-direction: column; }
    .table-container { font-size: 0.8125rem; }
    .card { padding: var(--spacing-lg); }
}
/* ========================================
   UTILIDADES · SCROLLBAR · LOGO
   ======================================== */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: var(--spacing-lg); }
.hidden { display: none !important; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: #2a3b52; border-radius: 5px; border: 2px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: #3a4e6d; }
* { scrollbar-width: thin; scrollbar-color: #2a3b52 var(--color-bg); }

.logo-group { display: flex; align-items: flex-end; gap: 10px; }
.author-signature { font-size: 0.8rem; font-weight: 400; color: var(--color-text-secondary); }
.logo { margin: 0; font-size: 1.8rem; }

/* Duplicados del index (chart-grid) ya cubiertos arriba en modo papel. */
.chart-wrapper { width: 100%; height: 320px; display: flex; justify-content: center; align-items: center; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   HERO — portada del Explorador. El "wow" sin video: tipografía display,
   red de nodos con pulso tenue (solo opacity, 2 nodos) y verbos de marca.
   ======================================== */
/* Portada independiente A PANTALLA COMPLETA: al entrar solo se ve ella
   (las secciones de abajo se ocultan por CSS mientras esté activa) y se
   retira al navegar. El video de fondo es OPCIONAL: si portada.mp4 no
   existe, su onerror lo oculta y quedan las auroras del tema. */
.hero-portada {
    margin: 0 0 var(--spacing-2xl);
    padding: 0; /* full-bleed: el hero toca los bordes del viewport */
}
.hero-portada .hero {
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent; /* el video ES el fondo; sin tarjeta */
    /* Se desliza bajo el header para que el nav flote SOBRE el video: */
    margin-top: -76px;
    padding-top: 96px;
    min-height: 100vh;   /* fallback universal */
    min-height: 100svh;  /* viewport completo real */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (max-width: 768px) { /* header apilado: más alto */
    .hero-portada .hero { margin-top: -152px; padding-top: 172px; }
}
/* Mientras la portada está activa, el header se vuelve cristal puro
   (flota sobre el video, sin fondo ni filo): aspecto premium. */
body:has(.hero-portada:not(.oculto)) .header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body:has(.hero-portada:not(.oculto)) .header::after { opacity: 0; }
.hero-portada.oculto { display: none; }
/* Mientras la portada está activa, el resto espera su turno. */
main > .hero-portada:not(.oculto) ~ .section { display: none !important; }
body:has(.hero-portada:not(.oculto)) .footer { display: none; }
/* Video de fondo (opcional): cubre el hero, tono oscuro garantizado por
   el velo; pausado por el script al retirar la portada. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.5;
    filter: saturate(0.85) brightness(0.7);
}
.hero-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(62% 58% at 50% 44%, rgba(11, 15, 25, 0.12), rgba(11, 15, 25, 0.7) 80%),
        linear-gradient(180deg, rgba(11, 15, 25, 0.62) 0%, rgba(11, 15, 25, 0.3) 34%, rgba(11, 15, 25, 0.55) 72%, var(--color-bg) 99%);
}
.hero-portada .hero > :not(.hero-video):not(.hero-velo):not(.hero-red) { position: relative; z-index: 2; }
.hero-portada .hero-red { position: absolute; inset: 0; z-index: 1; } /* decorativo: JAMÁS en flujo */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Linterna de nodos: la red se INTENSIFICA alrededor del cursor. Es un
   elemento fijo pequeño con la misma textura, recortado en círculo suave,
   movido SOLO con transform (compositor GPU): cero repintados, cero costo
   en reposo. Desactivada en táctiles y con movimiento reducido. */
.nodo-linterna { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .nodo-linterna {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 720px; height: 720px;
        margin: -360px 0 0 -360px;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.45s ease, transform 0.16s cubic-bezier(.2, .7, .3, 1);
        background-color: transparent;
        background-blend-mode: screen;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg stroke='%23c8d4ef' stroke-opacity='0.16' fill='none'%3E%3Cpath d='M60 90L200 40L340 120L470 70M200 40L160 210M340 120L390 300M60 90L120 260L160 210L300 250L390 300L520 340M120 260L90 430L260 480M300 250L260 480M390 300L440 470L260 480M520 340L440 470'/%3E%3C/g%3E%3Cg fill='%23e6b93f' fill-opacity='0.28'%3E%3Ccircle cx='60' cy='90' r='2.4'/%3E%3Ccircle cx='200' cy='40' r='1.8'/%3E%3Ccircle cx='340' cy='120' r='2.6'/%3E%3Ccircle cx='470' cy='70' r='1.6'/%3E%3Ccircle cx='160' cy='210' r='2'/%3E%3Ccircle cx='120' cy='260' r='2.2'/%3E%3Ccircle cx='300' cy='250' r='1.7'/%3E%3Ccircle cx='390' cy='300' r='2.5'/%3E%3Ccircle cx='520' cy='340' r='1.7'/%3E%3Ccircle cx='90' cy='430' r='2'/%3E%3Ccircle cx='260' cy='480' r='2.4'/%3E%3Ccircle cx='440' cy='470' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
        -webkit-mask-image: radial-gradient(circle closest-side, rgba(0,0,0,0.95), transparent 70%);
        mask-image: radial-gradient(circle closest-side, rgba(0,0,0,0.95), transparent 70%);
        will-change: transform;
    }
    .nodo-linterna::before { /* halo de iluminación que delata el área activa */
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%, rgba(230, 185, 63, 0.075), rgba(76, 125, 255, 0.045) 40%, transparent 68%);
    }
    body:hover .nodo-linterna { opacity: 1; }
}
/* Nodos que LATEN en zonas fijas de todas las secciones (vida tenue
   permanente: 4 puntos diminutos animando solo opacity — costo ínfimo). */
.red-viva { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.red-viva i {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 185, 63, 0.85), rgba(230, 185, 63, 0) 70%);
    animation: nodoPulso 6s ease-in-out infinite;
}
.red-viva i:nth-child(1) { top: 16%; left: 11%; }
.red-viva i:nth-child(2) { top: 34%; right: 8%; animation-delay: 1.6s; animation-duration: 7.5s; }
.red-viva i:nth-child(3) { bottom: 22%; left: 20%; animation-delay: 3.1s; background: radial-gradient(circle, rgba(140, 170, 255, 0.8), rgba(140, 170, 255, 0) 70%); }
.red-viva i:nth-child(4) { bottom: 12%; right: 16%; animation-delay: 4.4s; animation-duration: 8.5s; }
@media (prefers-reduced-motion: reduce) { .red-viva { display: none; } }
.hero-cta {
    margin-top: 1.8rem;
    display: inline-flex;
}
.hero {
    position: relative;
    text-align: center;
    padding: clamp(2.5rem, 7vw, 5rem) 1rem clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--spacing-xl);
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(38rem 22rem at 50% -30%, rgba(230, 185, 63, 0.1), transparent 60%),
        linear-gradient(180deg, rgba(24, 35, 56, 0.55), rgba(19, 28, 46, 0.25));
    box-shadow: var(--edge-light);
}
.hero-red { position: absolute; inset: 0; pointer-events: none; opacity: 0.55; }
.hero-red .pulso { animation: nodoPulso 5.5s ease-in-out infinite; }
.hero-red .pulso2 { animation: nodoPulso 7s ease-in-out 2.2s infinite; }
@keyframes nodoPulso { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
.hero-eyebrow {
    font-family: var(--font-display);
    font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}
.hero-titulo {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6.5vw, 4rem);
    font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
    color: var(--color-primary);
    margin-bottom: 1.1rem;
}
.hero-titulo .accent {
    background: linear-gradient(120deg, #f4d071, var(--color-accent) 55%, #b8912b);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lema {
    font-size: clamp(1.02rem, 2.2vw, 1.25rem);
    color: var(--color-secondary);
    max-width: 34rem; margin: 0 auto 1.6rem;
}
.hero-verbos {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    font-family: var(--font-display);
    font-size: 0.95rem; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.hero-verbos b { color: #f3d787; font-weight: 600; }
.hero-verbos span[aria-hidden] { color: rgba(230, 185, 63, 0.55); }

/* Avisos con fondo claro inline en el Buscador (p. ej. la nota de Scopus):
   texto tinta garantizado sobre cualquier fondo claro generado por JS. */
#seccionAntecedentes :is(div, p, span, li)[style*="background"] { color: #2a3140; }
#seccionAntecedentes :is(div, p, span, li)[style*="background"] :is(b, strong, a, em, span, li) { color: #131a26; }

/* ============================================================
   EL RECORRIDO — storytelling conducido por el scroll.
   Motor: CSS scroll-driven animations (animation-timeline: view())
   ejecutadas por el compositor GPU: cero JS por frame, cero video.
   Respaldo: sin soporte, IntersectionObserver añade .visible y las
   mismas piezas entran con transition (idéntica estética).
   Se retira junto a la portada al navegar (clase .oculto).
   ============================================================ */
.recorrido { position: relative; }
.recorrido.oculto { display: none; }
.rec-cap {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4.5rem clamp(16px, 5%, 64px);
    position: relative;
    overflow: hidden;
}
.rec-cap::before { /* red de fondo: vive en los LATERALES (el centro queda
    limpio gracias a la máscara) y se funde con el scroll del capítulo */
    content: '';
    position: absolute;
    inset: -80px 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 16%, rgba(0,0,0,0.1) 38%, rgba(0,0,0,0.1) 62%, rgba(0,0,0,0.55) 84%, rgba(0,0,0,0.95) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 16%, rgba(0,0,0,0.12) 38%, rgba(0,0,0,0.12) 62%, rgba(0,0,0,0.7) 84%, rgba(0,0,0,1) 100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg stroke='%23aebbdb' stroke-opacity='0.12' fill='none'%3E%3Cpath d='M60 90L200 40L340 120L470 70M200 40L160 210M340 120L390 300M60 90L120 260L160 210L300 250L390 300L520 340M120 260L90 430L260 480M300 250L260 480M390 300L440 470L260 480'/%3E%3C/g%3E%3Cg fill='%23aebbdb' fill-opacity='0.18'%3E%3Ccircle cx='200' cy='40' r='1.8'/%3E%3Ccircle cx='340' cy='120' r='2.4'/%3E%3Ccircle cx='160' cy='210' r='1.9'/%3E%3Ccircle cx='390' cy='300' r='2.3'/%3E%3Ccircle cx='260' cy='480' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}
/* La geometría del fondo narra la etapa (cada capítulo, su red):
   01 dispersa (descubrir) · 02 convergente (encontrar) ·
   03 malla organizándose (datos) · 04 estructurada (evidencia→documento) */
.recorrido .rec-cap:nth-of-type(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg stroke='%23aebbdb' stroke-opacity='0.14' fill='none'%3E%3Cpath d='M40 60L280 300M120 480L280 300M520 90L280 300M500 470L280 300M60 260L280 300M480 250L280 300'/%3E%3C/g%3E%3Cg fill='%23aebbdb' fill-opacity='0.2'%3E%3Ccircle cx='40' cy='60' r='2'/%3E%3Ccircle cx='120' cy='480' r='2'/%3E%3Ccircle cx='520' cy='90' r='2'/%3E%3Ccircle cx='500' cy='470' r='2'/%3E%3Ccircle cx='60' cy='260' r='1.8'/%3E%3Ccircle cx='480' cy='250' r='1.8'/%3E%3C/g%3E%3Ccircle cx='280' cy='300' r='5' fill='%23e6b93f' fill-opacity='0.55'/%3E%3C/svg%3E");
}
.recorrido .rec-cap:nth-of-type(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg stroke='%23aebbdb' stroke-opacity='0.13' fill='none'%3E%3Cpath d='M80 80H480M80 200H480M80 320H480M80 440H480M80 80V440M213 80V440M347 80V440M480 80V440'/%3E%3C/g%3E%3Cg fill='%23aebbdb' fill-opacity='0.2'%3E%3Ccircle cx='213' cy='200' r='2.2'/%3E%3Ccircle cx='347' cy='320' r='2.2'/%3E%3Ccircle cx='80' cy='440' r='2'/%3E%3Ccircle cx='480' cy='80' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.recorrido .rec-cap:nth-of-type(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg stroke='%23aebbdb' stroke-opacity='0.15' fill='none'%3E%3Cpath d='M60 460L180 340L300 380L420 220L500 260M60 460H500M180 340V460M300 380V460M420 220V460'/%3E%3C/g%3E%3Cg fill='%23aebbdb' fill-opacity='0.22'%3E%3Ccircle cx='180' cy='340' r='2.2'/%3E%3Ccircle cx='300' cy='380' r='2.2'/%3E%3Ccircle cx='420' cy='220' r='2.6'/%3E%3C/g%3E%3Ccircle cx='420' cy='220' r='6' fill='none' stroke='%23e6b93f' stroke-opacity='0.55'/%3E%3C/svg%3E");
}
.rec-cap > * { position: relative; z-index: 1; }
.rec-num {
    font-family: var(--font-display);
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}
.rec-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.5vw, 2.9rem);
    font-weight: 550; letter-spacing: -0.02em; line-height: 1.12;
    color: var(--color-primary);
    margin-bottom: 1rem;
    max-width: 22ch;
}
.rec-texto {
    font-size: clamp(0.98rem, 1.9vw, 1.12rem);
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 36rem;
    margin-bottom: 1.5rem; /* el visual es parte de la composición, no un anexo */
}
.rec-final { min-height: 78vh; min-height: 78svh; }
/* --- Piezas animables --- */
.rec-anim { opacity: 0; transform: translateY(26px); }
/* Motor moderno: el scroll conduce la animación (GPU, sin JS) */
@supports (animation-timeline: view()) {
    .rec-anim {
        animation: recIn 1ms linear both; /* duración irrelevante: manda el scroll */
        animation-timeline: view();
        animation-range: entry 12% cover 38%;
    }
    .rec-anim.rec-d2 { animation-range: entry 18% cover 46%; }
    .rec-anim.rec-d3 { animation-range: entry 24% cover 54%; }
    .rec-cap::before {
        animation: recParallax 1ms linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
    }
}
@keyframes recIn { to { opacity: 1; transform: translateY(0); } }
/* Parallax + fundido: la red del capítulo nace, acompaña y se disuelve. */
@keyframes recParallax {
    from { transform: translateY(46px); opacity: 0; }
    18% { opacity: 0.9; }
    82% { opacity: 0.9; }
    to { transform: translateY(-46px); opacity: 0; }
}
/* Respaldo universal: IntersectionObserver añade .visible */
@supports not (animation-timeline: view()) {
    .rec-anim { transition: opacity 0.6s cubic-bezier(.22,.8,.3,1), transform 0.6s cubic-bezier(.22,.8,.3,1); }
    .rec-anim.rec-d2 { transition-delay: 0.12s; }
    .rec-anim.rec-d3 { transition-delay: 0.24s; }
    .rec-anim.visible { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .rec-anim { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    .rec-cap::before { animation: none !important; }
}
/* --- Visuales de los capítulos (SVG/CSS puros, sin imágenes) --- */
.rec-visual { width: min(560px, 92%); }
.rec-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 34rem; }
.rec-chips span {
    font-size: 0.82rem; font-weight: 500;
    color: var(--color-secondary);
    border: 1px solid var(--border-soft);
    background: rgba(19, 28, 46, 0.6);
    border-radius: 999px;
    padding: 0.34rem 0.9rem;
    box-shadow: var(--edge-light);
}
.rec-chips b { color: #f3d787; font-weight: 600; }
.rec-word { /* mockup ligero de página Word APA */
    width: min(340px, 86%);
    background: #fbfaf7;
    border-radius: 8px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    text-align: left;
    color-scheme: light;
}
.rec-word i {
    display: block; height: 7px; border-radius: 4px;
    background: #d8d4c8; margin-bottom: 8px;
}
.rec-word i:nth-child(1) { width: 55%; height: 10px; background: #b9b29e; margin: 0 auto 14px; }
.rec-word i:nth-child(3) { width: 92%; }
.rec-word i:nth-child(4) { width: 97%; }
.rec-word i:nth-child(5) { width: 60%; margin-bottom: 14px; }
.rec-word i:nth-child(6) { width: 84%; background: #e3caa2; }
.rec-word i:nth-child(7) { width: 88%; }
.rec-cta-zona { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.rec-nota { font-size: 0.82rem; color: var(--color-text-tertiary); }

/* ============================================================
   ANALIZADOR EN TEMA COMPLETO — los módulos (Comparación de grupos,
   SEM, Renombrar variables, resultados) generan bloques con fondos
   claros inline: aquí se re-visten al sistema nocturno. El !important
   es necesario y legítimo: debe ganar a style="background:#fff…".
   ============================================================ */
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background: #f"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background:#f"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background: white"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background:white"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background: #e"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background:#e"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="rgb(255"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background-color: #f"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background-color:#f"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background-color: #e"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background-color:#e"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background-color: white"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="background-color:white"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="rgb(2"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="linear-gradient"][style*="#f"],
#analizador :is(div, section, p, td, th, span, label, fieldset)[style*="linear-gradient"][style*="#e"] {
    background: var(--surface-2) !important;
    color: var(--color-text) !important;
    border-color: var(--border-soft) !important;
}
#analizador [style*="background: #f"] :is(strong, b, h3, h4, label),
#analizador [style*="background:#f"] :is(strong, b, h3, h4, label),
#analizador [style*="background: #e"] :is(strong, b, h3, h4, label),
#analizador [style*="background:#e"] :is(strong, b, h3, h4, label) { color: var(--color-primary) !important; }
/* Textos con color oscuro inline (ilegibles en dark) → claros */
#analizador :is(p, span, td, li, label, div)[style*="color: #1"],
#analizador :is(p, span, td, li, label, div)[style*="color:#1"],
#analizador :is(p, span, td, li, label, div)[style*="color: #2"],
#analizador :is(p, span, td, li, label, div)[style*="color:#2"],
#analizador :is(p, span, td, li, label, div)[style*="color: #3"],
#analizador :is(p, span, td, li, label, div)[style*="color:#3"],
#analizador :is(p, span, td, li, label, div)[style*="color: black"] { color: var(--color-text) !important; }
/* Los gráficos quedan fuera de la caza (su filtro ya los gobierna). */
#analizador :is(.chart-wrapper, .chart-container)[style],
#analizador :is(.chart-wrapper, .chart-container) [style] { background: revert-layer; }

/* ============================================================
   VIDEO-TUTORIALES (façade de YouTube): miniatura ligera + play;
   el iframe real solo existe tras el clic. Peso en reposo ≈ 1 img lazy.
   ============================================================ */
.yt-lite {
    position: relative;
    width: min(680px, 100%);
    aspect-ratio: 16 / 9;
    margin: 1.4rem auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-soft);
    box-shadow: var(--edge-light), 0 14px 40px rgba(2, 6, 16, 0.45);
    background: var(--surface);
}
.yt-lite img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.78) saturate(0.95);
    transition: filter var(--transition-base), transform var(--transition-slow);
}
.yt-lite:hover img { filter: brightness(0.92) saturate(1.05); transform: scale(1.025); }
.yt-play {
    position: absolute;
    top: 50%; left: 50%;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #221803;
    background: linear-gradient(135deg, #f2cc66, var(--color-accent) 60%, #c99a2e);
    box-shadow: 0 6px 24px rgba(230, 185, 63, 0.4);
    transition: transform var(--transition-fast);
}
.yt-play svg { margin-left: 3px; }
.yt-lite:hover .yt-play, .yt-lite:focus-visible .yt-play { transform: scale(1.1); }
.yt-lite:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.yt-cinta {
    position: absolute;
    left: 0.9rem; bottom: 0.8rem;
    font-family: var(--font-display);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #f3d787;
    background: rgba(11, 15, 25, 0.72);
    border: 1px solid rgba(230, 185, 63, 0.28);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    backdrop-filter: blur(6px);
}
.yt-lite.yt-activo { cursor: default; }
.yt-lite iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}


/* ============================================================
   HERO DEL ANALIZADOR — dos columnas: texto (izq) + video (der).
   El slot derecho recibe la façade .yt-lite que monta
   video-tutoriales.js; aquí solo se adapta a su columna.
   ============================================================ */
.ana-hero {
    max-width: 1240px;
    margin: 0 auto var(--spacing-2xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.ana-eyebrow {
    font-family: var(--font-display);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.9rem;
}
.ana-titulo {
    font-family: var(--font-display);
    font-weight: 500; letter-spacing: -0.022em; line-height: 1.06;
    font-size: clamp(2.25rem, 4.2vw, 3.4rem);
    color: var(--color-primary);
    margin-bottom: 1.1rem;
}
.ana-titulo .oro {
    background: linear-gradient(120deg, #f4d071, var(--color-accent) 55%, #b8912b);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    display: block;
}
.ana-parrafo {
    font-size: 1rem;
    color: var(--color-text-secondary);
    max-width: 46ch;
    line-height: 1.65;
}
.ana-flujo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.af-paso {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.86rem; font-weight: 500;
    color: var(--color-secondary); white-space: nowrap;
}
.af-paso i {
    font-style: normal;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #f0c75e, var(--color-accent));
    color: #241a05; font-weight: 800; font-size: 0.8rem;
}
.af-oro { color: #f3d787; font-weight: 600; }
.af-linea {
    flex: 0 0 26px; height: 1px;
    background: linear-gradient(90deg, rgba(230, 185, 63, 0.6), rgba(148, 163, 197, 0.25));
}
.ana-ctas { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.ana-hero-video .yt-lite { width: 100%; margin: 0; }
@media (max-width: 880px) {
    .ana-hero { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .ana-parrafo { margin-left: auto; margin-right: auto; }
    .ana-flujo, .ana-ctas { justify-content: center; }
}


/* Sección sin video-tutorial configurado: el hero colapsa a una columna
   centrada y el botón de tutorial desaparece (cero JS: puro :has). */
.ana-hero:has(.ana-hero-video:empty) { grid-template-columns: 1fr; text-align: center; }
.ana-hero:has(.ana-hero-video:empty) .ana-parrafo { margin-left: auto; margin-right: auto; }
.ana-hero:has(.ana-hero-video:empty) .ana-flujo,
.ana-hero:has(.ana-hero-video:empty) .ana-ctas { justify-content: center; }
.ana-hero:has(.ana-hero-video:empty) .ana-cta-tutorial { display: none; }