/* ==========================================================================
   EduSistema · Preversión 4 — Deck "Editorial vivo"
   Tipografía Newsreader (espejo Flora) + Inter, paleta de Flora.
   Layouts CENTRADOS. Animaciones por todos lados — música, líneas que se
   dibujan, sellos que rotan, sobres que vuelan, firma que se escribe.
   Self-contained — cero dependencias.
   ========================================================================== */

/* ── Tokens (espejo de Flora) ─────────────────────────────────────────── */
:root {
    --bosque-50:  #F2F7F4;
    --bosque-100: #DCEBE2;
    --bosque-200: #B8CEBF;
    --bosque-300: #7A9E87;
    --bosque-400: #6A9E7F;
    --bosque-500: #4A7A5E;
    --bosque-600: #3A5C48;
    --bosque-700: #2B4A38;
    --bosque-800: #22382C;
    --bosque-900: #1A2E22;
    --bosque-950: #0F1D14;

    --oro-200: #F4DDA0;
    --oro-300: #E0A726;
    --oro-400: #C88A0A;
    --oro-700: #815806;

    --crema:   #F4EFE6;
    --crema-2: #ECE6D7;
    --papel:   #FAF6EE;
    --papel-2: #F1EBDB;
    --tinta:   #1A2E22;
    --tinta-suave: #4A4842;

    --ash:     #8B8378;
    --ash-2:   #6A6862;

    --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --t-rapido: 220ms;
    --t-suave: 480ms;
    --t-pelicula: 720ms;
    --ease-salida: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-resorte: cubic-bezier(0.16, 1.3, 0.3, 1);
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sans);
    color: var(--tinta);
    background: var(--papel);
    overflow: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv01", "cv11";
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; display: block; }
kbd {
    font-family: var(--mono);
    font-size: 0.85em;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    line-height: 1;
}

/* ── Grain SVG ────────────────────────────────────────────────────────── */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.05;
    mix-blend-mode: multiply;
}
body.theme-dark::before { mix-blend-mode: screen; opacity: 0.04; }

/* ════════════════════════════════════════════════════════════════════
   ATMÓSFERA GLOBAL — siempre se está moviendo algo.
   ════════════════════════════════════════════════════════════════════ */
.ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Orbes verdes / mostaza / sage que flotan */
.ambient-orb {
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 900px;
    max-height: 900px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.55;
    will-change: transform;
}
.ambient-orb--bosque {
    background: radial-gradient(circle, var(--bosque-300), transparent 70%);
    top: -20%;
    right: -15%;
    animation: orb-drift-1 28s var(--ease-salida) infinite alternate;
}
.ambient-orb--mostaza {
    background: radial-gradient(circle, var(--oro-300), transparent 70%);
    bottom: -25%;
    left: -10%;
    animation: orb-drift-2 36s var(--ease-salida) infinite alternate;
    opacity: 0.45;
}
.ambient-orb--sage {
    background: radial-gradient(circle, var(--bosque-200), transparent 70%);
    top: 35%;
    left: 40%;
    width: 40vw;
    height: 40vw;
    animation: orb-drift-3 44s var(--ease-salida) infinite alternate;
    opacity: 0.5;
}
.ambient-orb--extra {
    background: radial-gradient(circle, var(--oro-200), transparent 70%);
    top: 10%;
    left: 60%;
    width: 30vw;
    height: 30vw;
    animation: orb-drift-4 38s var(--ease-salida) infinite alternate;
    opacity: 0.32;
}
@keyframes orb-drift-4 {
    0%   { transform: translate(0, 0) scale(0.9); }
    100% { transform: translate(-12vw, 22vh) scale(1.25); }
}
@keyframes orb-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-15vw, 18vh) scale(1.15); }
}
@keyframes orb-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20vw, -22vh) scale(0.9); }
}
@keyframes orb-drift-3 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-25vw, -10vh) scale(1.2); }
}
body.theme-dark .ambient-orb { opacity: 0.3; }
body.theme-dark .ambient-orb--mostaza { opacity: 0.22; }

/* Pentagrama sutil que pasa al fondo */
.ambient-pentagrama {
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 240px;
    transform: translateY(-50%) rotate(-3deg);
    opacity: 0.18;
    pointer-events: none;
}
.penta-linea {
    stroke: var(--bosque-900);
    stroke-width: 1;
    stroke-dasharray: 1 6;
    stroke-linecap: round;
    animation: penta-flow 80s linear infinite;
}
.penta-linea:nth-of-type(2) { animation-duration: 95s; }
.penta-linea:nth-of-type(3) { animation-duration: 70s; animation-direction: reverse; }
.penta-linea:nth-of-type(4) { animation-duration: 110s; }
.penta-linea:nth-of-type(5) { animation-duration: 85s; animation-direction: reverse; }
@keyframes penta-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -400; }
}
body.theme-dark .ambient-pentagrama { opacity: 0.1; }
body.theme-dark .penta-linea { stroke: var(--crema); }

/* Notas musicales flotando */
.nota-flotante {
    position: absolute;
    font-family: var(--display);
    color: color-mix(in srgb, var(--bosque-900) 28%, transparent);
    font-weight: 300;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
}
.nota-flotante--1 { left: 4%;   bottom: -12%; font-size: clamp(80px, 8vw, 150px);  animation: nota-flotar 32s linear infinite; }
.nota-flotante--2 { left: 18%;  bottom: -12%; font-size: clamp(110px, 10vw, 200px); animation: nota-flotar 42s linear infinite; animation-delay: -10s; }
.nota-flotante--3 { left: 36%;  bottom: -12%; font-size: clamp(70px, 7vw, 130px);  animation: nota-flotar 28s linear infinite; animation-delay: -20s; }
.nota-flotante--4 { left: 56%;  bottom: -12%; font-size: clamp(100px, 9vw, 180px); animation: nota-flotar 38s linear infinite; animation-delay: -6s; }
.nota-flotante--5 { left: 72%;  bottom: -12%; font-size: clamp(80px, 8vw, 150px);  animation: nota-flotar 36s linear infinite; animation-delay: -26s; }
.nota-flotante--6 { left: 88%;  bottom: -12%; font-size: clamp(70px, 7vw, 120px);  animation: nota-flotar 44s linear infinite; animation-delay: -14s; }
.nota-flotante--7 { left: 12%;  bottom: -12%; font-size: clamp(60px, 6vw, 110px);  animation: nota-flotar 50s linear infinite; animation-delay: -32s; }
.nota-flotante--8 { left: 80%;  bottom: -12%; font-size: clamp(90px, 9vw, 160px);  animation: nota-flotar 34s linear infinite; animation-delay: -2s; }
@keyframes nota-flotar {
    0%   { transform: translateY(0)        rotate(-12deg); opacity: 0; }
    8%   { opacity: 0.85; }
    50%  { transform: translateY(-65vh)    rotate(8deg);   opacity: 0.85; }
    92%  { opacity: 0.85; }
    100% { transform: translateY(-130vh)   rotate(-15deg); opacity: 0; }
}
body.theme-dark .nota-flotante { color: color-mix(in srgb, var(--crema) 14%, transparent); }

/* ════════════════════════════════════════════════════════════════════
   DECK CONTAINER + CHROME
   ════════════════════════════════════════════════════════════════════ */
.deck {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.deck-chrome {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 36px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash-2);
    pointer-events: none;
    transition: color var(--t-rapido) var(--ease-salida);
}
.deck-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}
.deck-brand-mark {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oro-300);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro-300) 20%, transparent);
    animation: mark-pulso 2.4s ease-in-out infinite;
}
@keyframes mark-pulso {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro-300) 20%, transparent); }
    50%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--oro-300) 6%, transparent); }
}
.deck-counter { font-variant-numeric: tabular-nums; opacity: 0.85; }
.deck-counter [data-current] { color: var(--oro-300); font-weight: 600; }
body.theme-dark .deck-chrome { color: var(--bosque-200); }

.deck-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 100;
    pointer-events: none;
}
.deck-progress-bar {
    height: 100%;
    width: var(--progreso, 7%);
    background: var(--oro-300);
    transition: width var(--t-pelicula) var(--ease-salida);
    box-shadow: 0 0 12px color-mix(in srgb, var(--oro-300) 60%, transparent);
}

.deck-hint {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bosque-900);
    transition: opacity 600ms;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.deck-hint kbd {
    background: color-mix(in srgb, var(--bosque-900) 14%, transparent);
    border-color: color-mix(in srgb, var(--bosque-900) 30%, transparent);
    color: var(--bosque-900);
}
body.theme-dark .deck-hint {
    color: var(--crema);
}
body.theme-dark .deck-hint kbd {
    background: color-mix(in srgb, var(--crema) 14%, transparent);
    border-color: color-mix(in srgb, var(--crema) 32%, transparent);
    color: var(--crema);
}
.deck-hint.escondido { opacity: 0; }

/* ════════════════════════════════════════════════════════════════════
   SLIDES — base CENTRADO
   ════════════════════════════════════════════════════════════════════ */
.slide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(80px, 7vh, 110px) clamp(60px, 7vw, 120px);
    background: var(--papel);
    color: var(--tinta);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    transition: opacity var(--t-pelicula) var(--ease-salida),
                transform 1000ms var(--ease-resorte),
                visibility var(--t-pelicula);
    overflow: hidden;
}
.slide.activa {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}
.slide.saliendo {
    opacity: 0;
    transform: scale(0.985);
    z-index: 1;
}

.cover-stack,
.section-grid,
.timeline-stack,
.problemas-stack,
.feature-grid,
.joya-stack,
.ux-stack,
.cierre-stack {
    width: 100%;
    max-width: 1280px;
    position: relative;
    z-index: 3;
}

/* ── Eyebrow + base ─────────────────────────────────────────────────── */
.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oro-400);
    margin: 0 0 24px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--oro-300);
    border-radius: 999px;
    transform-origin: left;
    animation: eyebrow-respirar 3s ease-in-out infinite;
}
@keyframes eyebrow-respirar {
    0%, 100% { transform: scaleX(0.6); opacity: 0.7; }
    50%      { transform: scaleX(1.3); opacity: 1; box-shadow: 0 0 12px var(--oro-300); }
}

/* Reveal palabra por palabra */
.palabra {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
    margin-right: 0.22em;
}
.palabra--acento {
    color: var(--oro-400);
    font-style: italic;
}
.slide.activa .palabra {
    animation: palabra-aparecer 900ms var(--ease-resorte) forwards;
    animation-delay: calc(var(--retraso-base, 200ms) + var(--i, 0) * 110ms);
}
@keyframes palabra-aparecer {
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Animación genérica [data-anim] */
.slide.activa [data-anim] {
    animation: ele-aparecer 800ms var(--ease-salida) backwards;
    animation-delay: var(--retraso, 0ms);
}
@keyframes ele-aparecer {
    from { opacity: 0; transform: translateY(20px); filter: blur(2px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ════════════════════════════════════════════════════════════════════
   01 · COVER
   ════════════════════════════════════════════════════════════════════ */
.slide--cover { background: var(--papel); }

.cover-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cover-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bosque-700);
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, var(--bosque-900) 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--papel) 80%, var(--crema));
    backdrop-filter: blur(8px);
}
.cover-eyebrow--abajo {
    margin-top: 36px;
    font-size: 10px;
    letter-spacing: 0.22em;
}
.cover-eyebrow--abajo img { width: 20px; height: 20px; }
.cover-eyebrow img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.cover-titulo {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(80px, 13vw, 220px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--bosque-900);
    margin: 0;
    --retraso-base: 280ms;
}
.cover-titulo .palabra { font-style: italic; }
.cover-titulo .palabra:nth-child(1) { --i: 0; }
.cover-titulo .palabra:nth-child(2) { --i: 1; }
.cover-titulo .palabra:nth-child(3) { --i: 2; font-style: normal; }
.cover-bajada {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 1.8vw, 28px);
    color: var(--tinta-suave);
    margin: 36px 0 0;
    line-height: 1.4;
    max-width: 22em;
}
.cover-bajada em {
    color: var(--oro-400);
    font-weight: 500;
}
.cover-meta {
    margin-top: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bosque-700);
}
.cover-meta-marca { display: inline-flex; align-items: center; gap: 8px; }
.cover-meta-mostaza {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--oro-300);
    border-radius: 50%;
}
.cover-meta-lugar { color: var(--ash-2); }
.cover-meta-lugar::before { content: "·"; margin-right: 16px; color: var(--ash); }

.cover-flecha {
    margin-top: 56px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--oro-400);
    animation: cover-flecha-bounce 2s ease-in-out infinite;
    animation-delay: 2.5s;
}
.cover-flecha kbd {
    font-size: 14px;
    padding: 4px 10px;
    color: var(--oro-400);
    border-color: color-mix(in srgb, var(--oro-300) 35%, transparent);
}
@keyframes cover-flecha-bounce {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
}

/* Sello rotando atrás */
.deco-sello {
    position: absolute;
    top: 50%;
    right: -120px;
    transform: translateY(-50%);
    width: clamp(360px, 38vw, 580px);
    height: clamp(360px, 38vw, 580px);
    opacity: 0.32;
    pointer-events: none;
    z-index: 1;
    animation: sello-girar 90s linear infinite;
}
.sello-aro {
    stroke: var(--bosque-700);
    stroke-width: 1.5;
    fill: none;
    transform-origin: center;
    transform-box: fill-box;
}
.sello-aro--2 { stroke-dasharray: 4 6; }
.sello-texto {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    fill: var(--bosque-700);
}
@keyframes sello-girar {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════
   SECTIONS (oscuras)
   ════════════════════════════════════════════════════════════════════ */
.slide--section {
    background: var(--bosque-900);
    color: var(--crema);
    background-image:
        radial-gradient(ellipse 800px 600px at 90% 100%, color-mix(in srgb, var(--bosque-700) 70%, transparent), transparent 60%),
        radial-gradient(ellipse 500px 350px at 5% 5%, color-mix(in srgb, var(--oro-300) 12%, transparent), transparent 60%);
}
.section-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(60px, 8vw, 120px);
    align-items: center;
}
.section-numero {
    font-family: var(--display);
    font-style: italic;
    font-weight: 200;
    font-size: clamp(220px, 28vw, 440px);
    line-height: 0.85;
    color: var(--oro-300);
    margin: 0;
    letter-spacing: -0.05em;
    text-shadow: 0 0 80px color-mix(in srgb, var(--oro-300) 35%, transparent);
}
.section-texto { max-width: 18em; }
.section-titulo {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(48px, 5.4vw, 88px);
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 0 0 24px;
    color: var(--crema);
    font-style: italic;
}
.section-caption {
    font-family: var(--display);
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.45;
    color: var(--bosque-200);
    margin: 0;
    font-weight: 300;
}
.section-caption em { font-style: italic; color: var(--oro-300); }

/* Aros decorativos rotando */
.deco-aros {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100vmin;
    height: 100vmin;
    opacity: 0.22;
    pointer-events: none;
    z-index: 1;
}
.aro {
    stroke: var(--oro-300);
    stroke-width: 1;
    fill: none;
    transform-origin: center;
    transform-box: fill-box;
}
.aro--1 { animation: aro-girar 60s linear infinite; }
.aro--2 { animation: aro-girar 75s linear infinite reverse; stroke-dasharray: 4 8; }
.aro--3 { animation: aro-girar 90s linear infinite; stroke-dasharray: 2 10; }
@keyframes aro-girar { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════
   TIMELINE (placa 03)
   ════════════════════════════════════════════════════════════════════ */
.timeline-stack { display: flex; flex-direction: column; }
.timeline-titulo {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(48px, 5.6vw, 88px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--bosque-900);
    margin: 0 0 56px;
    font-style: italic;
}
.timeline-titulo em { font-style: italic; color: var(--oro-400); }

.timeline-eje {
    position: relative;
    padding: 0 60px;
    margin: 24px 0;
}
.timeline-svg {
    width: 100%;
    height: 80px;
    pointer-events: none;
    display: block;
}
.timeline-linea {
    stroke: var(--bosque-700);
    stroke-width: 2;
    stroke-dasharray: 1080;
    stroke-dashoffset: 1080;
}
.slide.activa .timeline-linea {
    animation: timeline-draw 1800ms 200ms var(--ease-salida) forwards;
}
@keyframes timeline-draw {
    to { stroke-dashoffset: 0; }
}

.timeline-nodos {
    position: absolute;
    inset: 0;
    padding: 0 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.timeline-nodo {
    text-align: center;
    position: relative;
    padding-top: 20px;
}
.timeline-bola {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bosque-700);
    margin: 0 auto;
    border: 4px solid var(--papel);
    box-shadow: 0 0 0 1px var(--bosque-700);
    position: relative;
    z-index: 2;
}
.timeline-nodo--actual .timeline-bola {
    background: var(--oro-300);
    box-shadow: 0 0 0 1px var(--oro-400),
                0 0 0 8px color-mix(in srgb, var(--oro-300) 18%, transparent);
}
.timeline-nodo--futuro .timeline-bola--pulse {
    background: var(--oro-400);
    border-color: var(--papel);
    animation: nodo-pulse 1.6s ease-in-out infinite;
}
@keyframes nodo-pulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--oro-400),
                          0 0 0 8px color-mix(in srgb, var(--oro-300) 18%, transparent); }
    50%      { box-shadow: 0 0 0 1px var(--oro-400),
                          0 0 0 18px color-mix(in srgb, var(--oro-300) 4%, transparent); }
}
.timeline-nodo--fail .timeline-bola {
    background: var(--ash);
    box-shadow: 0 0 0 1px var(--ash);
}
.timeline-anio {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash-2);
    margin: 18px 0 6px;
}
.timeline-version {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 48px);
    color: var(--bosque-900);
    margin: 0;
    line-height: 1;
}
.timeline-nodo--actual .timeline-version { color: var(--oro-400); font-weight: 400; }
.timeline-nodo--fail   .timeline-version { color: var(--ash); text-decoration: line-through; text-decoration-thickness: 1px; }
.timeline-nodo--futuro .timeline-version { color: var(--oro-400); font-weight: 400; }
.timeline-detalle {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(13px, 1vw, 16px);
    color: var(--tinta-suave);
    margin: 10px 0 0;
    line-height: 1.35;
    font-weight: 300;
}
.timeline-pie {
    margin-top: 64px;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(17px, 1.4vw, 22px);
    color: var(--tinta-suave);
    max-width: 44em;
    line-height: 1.55;
    font-weight: 300;
}
.timeline-pie strong { color: var(--bosque-900); font-weight: 500; font-style: normal; }
.timeline-pie em { color: var(--oro-400); }

/* ════════════════════════════════════════════════════════════════════
   PROBLEMAS (lista con ×)
   ════════════════════════════════════════════════════════════════════ */
.problemas-stack { display: flex; flex-direction: column; }
.problemas-titulo {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(56px, 6vw, 100px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--bosque-900);
    margin: 0 0 18px;
    font-style: italic;
}
.problemas-titulo em { font-style: normal; color: var(--oro-400); }
.problemas-bajada {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.5;
    color: var(--tinta-suave);
    margin: 0 0 40px;
    max-width: 38em;
    font-weight: 300;
}
.problemas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 64px;
    column-rule: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
}
.problemas-lista li {
    padding: 16px 0;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.45;
    color: var(--tinta-suave);
    break-inside: avoid;
    border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent);
}
.problemas-lista li:last-child { border-bottom: 0; }
.problemas-lista li strong { color: var(--bosque-900); font-weight: 600; }
.problemas-marca {
    font-family: var(--display);
    font-style: italic;
    font-weight: 200;
    font-size: 36px;
    line-height: 0.85;
    color: var(--oro-400);
    flex-shrink: 0;
    margin-top: -8px;
    animation: marca-vibrar 6s ease-in-out infinite;
}
@keyframes marca-vibrar {
    0%, 92%, 100% { transform: rotate(0); }
    94%           { transform: rotate(8deg); }
    96%           { transform: rotate(-6deg); }
    98%           { transform: rotate(3deg); }
}

/* ════════════════════════════════════════════════════════════════════
   FEATURES (cátedra · mesas · préstamos · datos · comunicación)
   ════════════════════════════════════════════════════════════════════ */
.feature-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
}
.feature-grid--invertida { grid-template-columns: 0.95fr 1.05fr; }

.feature-cuerpo {
    display: flex;
    flex-direction: column;
    position: relative;
}
.feature-cuerpo::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 8%;
    bottom: 8%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--oro-300), transparent);
    opacity: 0.5;
    border-radius: 999px;
    animation: feat-linea-respirar 4s ease-in-out infinite;
}
@keyframes feat-linea-respirar {
    0%, 100% { transform: scaleY(0.5); opacity: 0.35; }
    50%      { transform: scaleY(1); opacity: 0.7; box-shadow: 0 0 16px var(--oro-300); }
}
.feature-titulo {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(48px, 5.4vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--bosque-900);
    margin: 0 0 36px;
    font-style: italic;
}
.feature-titulo em { font-style: italic; color: var(--oro-400); }

.feature-puntos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.feature-puntos li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: baseline;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.5;
    color: var(--tinta-suave);
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent);
}
.feature-puntos li:last-child { border-bottom: 0; }
.feature-puntos li strong { color: var(--bosque-900); font-weight: 600; }
.feature-puntos li em { color: var(--oro-400); font-style: italic; font-weight: 500; }
.feature-punto-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--oro-400);
    font-weight: 600;
    background: color-mix(in srgb, var(--oro-300) 18%, transparent);
    padding: 3px 9px;
    border-radius: 5px;
    align-self: flex-start;
    border: 1px solid color-mix(in srgb, var(--oro-300) 35%, transparent);
    animation: punto-num-glow 2.8s ease-in-out infinite;
}
.feature-puntos li:nth-child(2) .feature-punto-num { animation-delay: 0.4s; }
.feature-puntos li:nth-child(3) .feature-punto-num { animation-delay: 0.8s; }
.feature-puntos li:nth-child(4) .feature-punto-num { animation-delay: 1.2s; }
@keyframes punto-num-glow {
    0%, 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
    50%      { box-shadow: 0 0 12px color-mix(in srgb, var(--oro-300) 55%, transparent); transform: scale(1.04); }
}

/* Visual contenedor */
.feature-visual {
    aspect-ratio: 4 / 5;
    background: var(--bosque-900);
    color: var(--crema);
    border-radius: 22px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--bosque-900) 24%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--crema) 8%, transparent);
}
.feature-visual::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -30%;
    width: 90%;
    height: 90%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--oro-300) 30%, transparent), transparent 70%);
    pointer-events: none;
    animation: visual-glow 8s ease-in-out infinite alternate;
}
@keyframes visual-glow {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
    100% { transform: translate(-15%, 10%) scale(1.15); opacity: 1; }
}
.feature-visual--mostaza {
    background: linear-gradient(140deg, var(--oro-300) 0%, var(--oro-400) 100%);
    color: var(--bosque-900);
    box-shadow: 0 20px 60px color-mix(in srgb, var(--oro-400) 35%, transparent);
}
.feature-visual--mostaza::before { background: radial-gradient(ellipse, color-mix(in srgb, var(--bosque-900) 18%, transparent), transparent 70%); }
.feature-visual--bosque {
    background: linear-gradient(140deg, var(--bosque-700) 0%, var(--bosque-900) 100%);
}
.feature-visual--sage {
    background: linear-gradient(140deg, var(--bosque-200) 0%, var(--bosque-300) 100%);
    color: var(--bosque-900);
}
.feature-visual--sage::before { background: radial-gradient(ellipse, color-mix(in srgb, var(--oro-300) 22%, transparent), transparent 70%); }

.feature-visual-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oro-300);
    z-index: 1;
    position: relative;
    margin: 0;
}
.feature-visual--mostaza .feature-visual-tag,
.feature-visual--sage .feature-visual-tag { color: var(--bosque-900); opacity: 0.65; }
.feature-visual-cuerpo {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.55;
    color: color-mix(in srgb, currentColor 80%, transparent);
    z-index: 1;
    position: relative;
    margin: 0;
    max-width: 24em;
    font-weight: 300;
}

/* ── Calendario mini (cátedra) ──────────────────────────────────────── */
.feature-visual--calendar { background: linear-gradient(140deg, var(--oro-300) 0%, var(--oro-400) 100%); color: var(--bosque-900); }
.cal-mini {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
    z-index: 1;
    position: relative;
    margin: auto 0;
}
.cal-dia {
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--bosque-900) 25%, transparent);
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 2.6vw, 42px);
    color: color-mix(in srgb, var(--bosque-900) 32%, transparent);
    transition: all 280ms var(--ease-resorte);
    background: color-mix(in srgb, var(--bosque-900) 5%, transparent);
}
.cal-dia--on {
    background: var(--bosque-900);
    border-color: var(--bosque-900);
    color: var(--oro-300);
    animation: cal-pulso 3s ease-in-out infinite;
    animation-delay: calc(var(--cal-i) * 280ms);
}
@keyframes cal-pulso {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in srgb, var(--bosque-900) 14%, transparent); }
}
.slide.activa .cal-dia--on {
    animation: cal-on 1s var(--ease-resorte) backwards, cal-pulso 3s ease-in-out infinite 1s;
    animation-delay: calc(var(--cal-i) * 220ms + 900ms), calc(var(--cal-i) * 220ms + 1900ms);
}
@keyframes cal-on {
    from { background: transparent; transform: scale(0.85); color: transparent; border-color: transparent; }
    to   { background: var(--bosque-900); transform: scale(1.06); color: var(--oro-300); border-color: var(--bosque-900); }
}

/* ── Diagrama orbital (mesas) ───────────────────────────────────────── */
.diag-orbital {
    width: 70%;
    max-width: 280px;
    margin: auto;
    z-index: 1;
    position: relative;
    overflow: visible;
}
.orb-linea {
    stroke: var(--bosque-900);
    stroke-width: 2;
    stroke-dasharray: 3 5;
    fill: none;
    opacity: 0.55;
    animation: orb-flow 3s linear infinite;
    animation-delay: calc(var(--orb-i, 0) * 0.4s);
}
.orb-nodo {
    fill: color-mix(in srgb, var(--bosque-900) 88%, transparent);
    stroke: var(--bosque-900);
    stroke-width: 2;
    transform-origin: center;
    transform-box: fill-box;
    animation: orb-pulso 2.4s var(--ease-resorte) infinite;
    animation-delay: calc(var(--orb-i, 0) * 0.4s);
}
.orb-nodo--centro {
    fill: var(--bosque-900);
    stroke: var(--bosque-900);
    animation: orb-pulso 2s var(--ease-resorte) infinite;
}
.orb-letra {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    fill: var(--oro-300);
    font-size: 22px;
}
.orb-letra--centro { fill: var(--oro-300); font-weight: 600; }
@keyframes orb-flow {
    to { stroke-dashoffset: -32; }
}
@keyframes orb-pulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

/* ── Préstamo (bola yendo y volviendo) ──────────────────────────────── */
.diag-prestamo {
    width: 80%;
    max-width: 320px;
    margin: auto;
    z-index: 1;
    position: relative;
}
.prest-via {
    stroke: var(--oro-300);
    stroke-width: 2;
    stroke-dasharray: 3 5;
    fill: none;
    opacity: 0.6;
    animation: orb-flow 4s linear infinite;
}
.prest-anclaje {
    fill: var(--oro-300);
    stroke: var(--oro-300);
    stroke-width: 2;
}
.prest-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    fill: var(--oro-300);
}
.prest-bola circle {
    fill: var(--oro-300);
    stroke: var(--bosque-900);
    stroke-width: 1.5;
}
.prest-bola {
    transform: translate(40px, 100px);
    animation: prest-ir 4s var(--ease-resorte) infinite;
}
@keyframes prest-ir {
    0%, 100% { transform: translate(40px, 100px); }
    50%      { transform: translate(200px, 100px); }
}

/* ── Tarjeta (datos sensibles) ──────────────────────────────────────── */
.diag-tarjeta {
    width: 70%;
    max-width: 240px;
    margin: auto;
    z-index: 1;
    position: relative;
}
.tarj-papel {
    fill: var(--papel);
    stroke: var(--bosque-900);
    stroke-width: 2;
    filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--bosque-900) 22%, transparent));
}
.tarj-renglon {
    stroke: color-mix(in srgb, var(--bosque-900) 40%, transparent);
    stroke-width: 1.5;
    stroke-linecap: round;
}
.tarj-renglon { stroke-dasharray: 120; stroke-dashoffset: 120; }
.slide.activa .tarj-renglon { animation: tarj-renglon-draw 800ms var(--ease-salida) forwards; }
.slide.activa .tarj-renglon:nth-of-type(2) { animation-delay: 1100ms; }
.slide.activa .tarj-renglon:nth-of-type(3) { animation-delay: 1300ms; }
.slide.activa .tarj-renglon:nth-of-type(4) { animation-delay: 1500ms; }
.slide.activa .tarj-renglon:nth-of-type(5) { animation-delay: 1700ms; }
.slide.activa .tarj-renglon:nth-of-type(6) { animation-delay: 1900ms; }
@keyframes tarj-renglon-draw { to { stroke-dashoffset: 0; } }
.tarj-sello {
    fill: var(--oro-300);
    stroke: var(--bosque-900);
    stroke-width: 2;
    transform-origin: center;
    transform-box: fill-box;
    animation: tarj-sello-pop 2s var(--ease-resorte) infinite;
}
@keyframes tarj-sello-pop {
    0%, 100% { transform: scale(1) rotate(-8deg); }
    50%      { transform: scale(1.12) rotate(0deg); }
}

/* ── Sobres volando (comunicación) ──────────────────────────────────── */
.diag-sobres {
    width: 80%;
    max-width: 280px;
    margin: auto;
    z-index: 1;
    position: relative;
    overflow: visible;
}
.sobre {
    transform-origin: center;
    transform-box: fill-box;
    animation: sobre-volar 5s ease-in-out infinite;
    animation-delay: calc(var(--sobre-i) * 1.3s);
}
.sobre-base {
    fill: var(--bosque-900);
    stroke: var(--bosque-900);
    stroke-width: 1.5;
}
.sobre-flap {
    fill: none;
    stroke: var(--oro-300);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@keyframes sobre-volar {
    0%   { transform: translate(40px, 200px) rotate(-20deg); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: translate(220px, 30px) rotate(15deg); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   JOYA · Soft delete
   ════════════════════════════════════════════════════════════════════ */
.slide--joya {
    background: var(--bosque-900);
    color: var(--crema);
    background-image:
        radial-gradient(ellipse 1000px 700px at 50% 50%, color-mix(in srgb, var(--bosque-700) 60%, transparent), transparent 65%),
        radial-gradient(ellipse 600px 400px at 80% 100%, color-mix(in srgb, var(--oro-300) 22%, transparent), transparent 55%);
}
.joya-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1100px;
}
.joya-eyebrow { color: var(--oro-300); margin-bottom: 40px; }
.joya-eyebrow::before { background: var(--oro-300); }
.joya-titulo {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(48px, 6.4vw, 110px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--crema);
    margin: 0;
    --retraso-base: 200ms;
}
.joya-titulo .palabra { font-style: italic; }
.joya-titulo .palabra--acento { color: var(--oro-300); font-style: italic; }
.joya-titulo .palabra:nth-child(1) { --i: 0; }
.joya-titulo .palabra:nth-child(2) { --i: 1; }
.joya-titulo .palabra:nth-child(3) { --i: 2; }
.joya-titulo .palabra:nth-child(4) { --i: 3; }
.joya-titulo .palabra:nth-child(5) { --i: 4; }
.joya-titulo .palabra:nth-child(7) { --i: 5; }
.joya-titulo .palabra:nth-child(8) { --i: 6; }
.joya-titulo .palabra:nth-child(9) { --i: 7; }
.joya-bajada { margin: 56px 0 0; max-width: 36em; }
.joya-bajada p {
    font-family: var(--display);
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.55;
    color: var(--bosque-200);
    margin: 0 0 18px;
    font-weight: 300;
    font-style: italic;
}
.joya-bajada strong { color: var(--oro-300); font-weight: 500; font-style: normal; }
.joya-cinta {
    margin-top: 56px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 28px;
    background: color-mix(in srgb, var(--oro-300) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--oro-300) 35%, transparent);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oro-300);
}
.joya-cinta::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--oro-300);
    border-radius: 50%;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro-300) 22%, transparent);
    animation: mark-pulso 2s ease-in-out infinite;
}

/* Undo girando atrás de la joya */
.deco-undo {
    position: absolute;
    top: 10%;
    right: 6%;
    width: clamp(180px, 18vw, 280px);
    height: clamp(180px, 18vw, 280px);
    opacity: 0.38;
    pointer-events: none;
    z-index: 1;
    animation: undo-girar 18s linear infinite;
}
.deco-undo--2 {
    top: auto;
    bottom: 10%;
    right: auto;
    left: 6%;
    width: clamp(140px, 14vw, 220px);
    height: clamp(140px, 14vw, 220px);
    opacity: 0.28;
    animation: undo-girar 26s linear infinite reverse;
}
.deco-undo--antes {
    top: 8%;
    right: 4%;
    width: clamp(160px, 16vw, 240px);
    height: clamp(160px, 16vw, 240px);
    opacity: 0.18;
    animation: undo-girar 22s linear infinite;
}
.particles--antes .particle {
    background: var(--oro-300);
}
.undo-aro {
    stroke: var(--oro-300);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 4 8;
}
.undo-arco {
    stroke: var(--oro-300);
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
}
.undo-flecha { fill: var(--oro-300); }
@keyframes undo-girar { to { transform: rotate(-360deg); } }

/* ════════════════════════════════════════════════════════════════════
   UX QUE CUIDA
   ════════════════════════════════════════════════════════════════════ */
.ux-stack { display: flex; flex-direction: column; }
.ux-titulo {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(56px, 6vw, 100px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--bosque-900);
    margin: 0 0 18px;
    font-style: italic;
}
.ux-titulo em { font-style: italic; color: var(--oro-400); }
.ux-bajada {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--tinta-suave);
    margin: 0 0 48px;
    max-width: 38em;
    font-weight: 300;
}
.ux-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.ux-tarjeta {
    background: color-mix(in srgb, var(--bosque-100) 22%, var(--papel));
    border: 1px solid color-mix(in srgb, var(--bosque-700) 18%, transparent);
    border-radius: 18px;
    padding: 28px 32px;
    position: relative;
    overflow: hidden;
    transition: transform 280ms var(--ease-resorte),
                border-color 280ms,
                box-shadow 280ms;
}
.ux-tarjeta:hover {
    transform: translateY(-3px);
    border-color: var(--oro-300);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--bosque-900) 12%, transparent);
}
.ux-tarjeta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--oro-300) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--oro-400) 30%, transparent);
    border-radius: 11px;
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    color: var(--oro-400);
    margin-bottom: 16px;
}
.ux-tarjeta-icono kbd {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
.ux-icono-warn,
.ux-icono-check,
.ux-icono-tabla { font-style: normal; font-weight: 700; font-size: 22px; }
.ux-icono-warn { animation: icono-vibrar 4s ease-in-out infinite; }
.ux-icono-check { animation: icono-pulse 3s ease-in-out infinite; }
.ux-icono-tabla { animation: icono-rotar 14s linear infinite; }
@keyframes icono-vibrar {
    0%, 90%, 100% { transform: rotate(0); }
    92%  { transform: rotate(-12deg); }
    94%  { transform: rotate(10deg); }
    96%  { transform: rotate(-6deg); }
    98%  { transform: rotate(0); }
}
@keyframes icono-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
@keyframes icono-rotar { to { transform: rotate(360deg); } }
.ux-tarjeta-titulo {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(20px, 1.6vw, 26px);
    color: var(--bosque-900);
    margin: 0 0 8px;
    line-height: 1.2;
}
.ux-tarjeta-cuerpo {
    font-size: clamp(13.5px, 1vw, 15.5px);
    line-height: 1.55;
    color: var(--tinta-suave);
    margin: 0;
}
.ux-tarjeta-cuerpo kbd { font-size: 0.85em; color: var(--oro-400); }

/* ════════════════════════════════════════════════════════════════════
   CIERRE
   ════════════════════════════════════════════════════════════════════ */
.slide--cierre {
    background: var(--bosque-900);
    color: var(--crema);
    background-image:
        radial-gradient(ellipse 1100px 800px at 50% 100%, color-mix(in srgb, var(--bosque-700) 70%, transparent), transparent 65%),
        radial-gradient(ellipse 700px 500px at 50% 0%, color-mix(in srgb, var(--oro-300) 16%, transparent), transparent 60%);
    text-align: center;
}
.cierre-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
}
.cierre-frase {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(32px, 4vw, 64px);
    line-height: 1.18;
    color: var(--crema);
    margin: 0 0 32px;
    --retraso-base: 0ms;
}
.cierre-frase .palabra { font-style: italic; }
.cierre-frase .palabra--acento { color: var(--oro-300); font-style: italic; }
.cierre-frase .palabra:nth-child(1) { --i: 0; }
.cierre-frase .palabra:nth-child(2) { --i: 1; }
.cierre-frase .palabra:nth-child(3) { --i: 2; }
.cierre-frase .palabra:nth-child(4) { --i: 3; }
.cierre-frase--2 {
    font-size: clamp(20px, 2.2vw, 32px);
    color: var(--bosque-200);
    font-style: italic;
    line-height: 1.4;
    font-weight: 300;
    margin-top: 20px;
}
.cierre-frase--2 em {
    color: var(--oro-300);
    font-style: italic;
    font-weight: 400;
}
.cierre-frase--2 strong {
    color: var(--crema);
    font-weight: 500;
    font-style: normal;
    display: inline-block;
    margin-top: 12px;
}
.cierre-firma {
    margin-top: 48px;
    font-family: var(--display);
    font-style: italic;
    font-size: 24px;
    color: var(--crema);
    font-weight: 400;
    z-index: 5;
    position: relative;
}
.cierre-firma::before {
    content: "—";
    color: var(--oro-300);
    margin-right: 14px;
}
.cierre-fecha {
    margin-top: 20px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bosque-300);
    z-index: 5;
    position: relative;
}

/* Firma escribiéndose en el cierre */
.deco-firma {
    position: absolute;
    bottom: 18vh;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: clamp(280px, 28vw, 460px);
    height: clamp(70px, 7vw, 120px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}
.firma-trazo, .firma-rasgo {
    stroke: var(--oro-300);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.firma-trazo { stroke-dasharray: 1200; }
.firma-rasgo { stroke-dasharray: 200; }
.slide.activa .firma-trazo { animation: firma-trazo-loop 8s ease-in-out infinite; }
.slide.activa .firma-rasgo { animation: firma-rasgo-loop 8s ease-in-out infinite; animation-delay: 1.6s; }
@keyframes firma-trazo-loop {
    0%   { stroke-dashoffset: 1200; }
    35%  { stroke-dashoffset: 0; }
    70%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1200; }
}
@keyframes firma-rasgo-loop {
    0%   { stroke-dashoffset: 200; }
    35%  { stroke-dashoffset: 0; }
    70%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

/* ════════════════════════════════════════════════════════════════════
   VISTA GRILLA (ESC)
   ════════════════════════════════════════════════════════════════════ */
.deck-grid {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--bosque-950);
    background-image:
        radial-gradient(ellipse at center, var(--bosque-900), var(--bosque-950)),
        radial-gradient(ellipse 600px 400px at 50% 0%, color-mix(in srgb, var(--oro-300) 12%, transparent), transparent 60%);
    padding: 88px 56px 40px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
    transition: opacity 320ms var(--ease-salida),
                transform 480ms var(--ease-resorte),
                visibility 480ms;
}
.deck-grid[data-abierto="true"] {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.deck-grid-titulo {
    font-family: var(--display);
    color: var(--crema);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 44px);
    margin: 0 0 36px;
    text-align: center;
    line-height: 1;
}
.deck-grid-titulo small {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bosque-300);
    margin-top: 10px;
    font-style: normal;
}
.deck-grid-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    max-width: 1400px;
    margin: 0 auto;
}
.deck-thumb {
    aspect-ratio: 16 / 10;
    background: var(--papel);
    border: 1px solid var(--bosque-700);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    text-align: left;
    color: var(--bosque-900);
    overflow: hidden;
    position: relative;
    font-family: inherit;
    transition: transform 220ms var(--ease-resorte),
                border-color 220ms,
                box-shadow 220ms;
}
.deck-thumb:hover {
    transform: translateY(-3px);
    border-color: var(--oro-300);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--oro-300) 18%, transparent);
}
.deck-thumb[data-actual="true"] {
    border-color: var(--oro-300);
    box-shadow: 0 0 0 2px var(--oro-300), 0 10px 28px color-mix(in srgb, var(--oro-300) 22%, transparent);
}
.deck-thumb-num {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--oro-400);
    text-transform: uppercase;
}
.deck-thumb-titulo {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    margin: 10px 0 0;
    color: var(--bosque-900);
}
.deck-thumb-tipo {
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash);
}
.deck-thumb--oscuro { background: var(--bosque-900); color: var(--crema); }
.deck-thumb--oscuro .deck-thumb-titulo { color: var(--crema); }
.deck-thumb--oscuro .deck-thumb-tipo { color: var(--bosque-300); }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .slide { padding: 80px 60px 60px; }
}
@media (max-width: 980px) {
    .slide { padding: 64px 32px 56px; }
    .feature-grid, .feature-grid--invertida { grid-template-columns: 1fr; gap: 32px; }
    .feature-visual { aspect-ratio: 16 / 10; }
    .ux-grid { grid-template-columns: 1fr 1fr; }
    .section-grid { grid-template-columns: 1fr; gap: 32px; }
    .section-numero { font-size: 200px; }
    .problemas-lista { columns: 1; }
    .timeline-nodos { padding: 0 30px; }
}
@media (max-width: 600px) {
    .slide { padding: 48px 24px 48px; }
    .ux-grid { grid-template-columns: 1fr; }
    .cover-titulo { font-size: clamp(56px, 18vw, 110px); }
    .section-numero { font-size: 160px; }
    .timeline-nodos { grid-template-columns: 1fr; gap: 32px; padding: 0; }
    .timeline-svg { display: none; }
}

/* Print */
@media print {
    body { overflow: visible; background: white; }
    .slide { position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; page-break-after: always; height: 100vh; }
    .deck-chrome, .deck-progress, .deck-hint, .deck-grid, .ambient, .marquee { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   MARQUEE SUPERIOR · texto pasando en loop infinito
   ════════════════════════════════════════════════════════════════════ */
.marquee {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    height: 28px;
    overflow: hidden;
    z-index: 50;
    pointer-events: none;
    border-top: 1px solid color-mix(in srgb, var(--bosque-900) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--bosque-900) 8%, transparent);
    background: color-mix(in srgb, var(--papel) 60%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.marquee-track {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 48px;
    animation: marquee-scroll 50s linear infinite;
    width: max-content;
    padding: 0 24px;
}
.marquee-track span {
    font-family: var(--display);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--bosque-700);
    white-space: nowrap;
    flex-shrink: 0;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
body.theme-dark .marquee {
    background: color-mix(in srgb, var(--bosque-900) 70%, transparent);
    border-color: color-mix(in srgb, var(--crema) 10%, transparent);
}
body.theme-dark .marquee-track span {
    color: var(--bosque-200);
}

/* ════════════════════════════════════════════════════════════════════
   SLIDE--STATEMENT · placa de presentación (oscura, frase grande)
   ════════════════════════════════════════════════════════════════════ */
.slide--statement {
    background: var(--bosque-900);
    color: var(--crema);
    background-image:
        radial-gradient(ellipse 1100px 800px at 80% 100%, color-mix(in srgb, var(--bosque-700) 60%, transparent), transparent 65%),
        radial-gradient(ellipse 700px 500px at 10% 0%, color-mix(in srgb, var(--oro-300) 18%, transparent), transparent 60%);
    text-align: center;
    overflow: hidden;
}

/* Número GIGANTE atrás, semi-transparente, mostaza */
.state-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--display);
    font-style: italic;
    font-weight: 200;
    font-size: clamp(440px, 56vw, 880px);
    line-height: 0.85;
    color: color-mix(in srgb, var(--oro-300) 14%, transparent);
    letter-spacing: -0.05em;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    animation: state-num-respirar 6s ease-in-out infinite;
    text-shadow: 0 0 80px color-mix(in srgb, var(--oro-300) 18%, transparent);
}
@keyframes state-num-respirar {
    0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: 0.9; }
    50%      { transform: translate(-50%, -50%) scale(1.05);  opacity: 1; }
}

.state-stack {
    width: 100%;
    max-width: 1180px;
    position: relative;
    z-index: 3;
}
.state-eyebrow {
    color: var(--oro-300);
    margin-bottom: 36px;
    justify-content: center;
}
.state-eyebrow::before { background: var(--oro-300); }
.state-frase {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(48px, 7vw, 130px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--crema);
    margin: 0;
    --retraso-base: 200ms;
}
.state-frase .palabra { font-style: italic; }
.state-frase .palabra--acento { color: var(--oro-300); font-style: italic; }
.state-frase .palabra:nth-child(1) { --i: 0; }
.state-frase .palabra:nth-child(2) { --i: 1; }
.state-frase .palabra:nth-child(3) { --i: 2; }
.state-frase .palabra:nth-child(4) { --i: 3; }
.state-frase .palabra:nth-child(5) { --i: 4; }
.state-frase .palabra:nth-child(6) { --i: 5; }
.state-frase .palabra:nth-child(7) { --i: 6; }
.state-frase .palabra:nth-child(8) { --i: 7; }
.state-frase .palabra:nth-child(9) { --i: 8; }
.state-frase .palabra:nth-child(10) { --i: 9; }
.state-frase .palabra:nth-child(11) { --i: 10; }
.state-sub {
    margin-top: 40px;
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.45;
    color: var(--bosque-200);
    max-width: 32em;
    margin-left: auto;
    margin-right: auto;
}
.state-sub em { color: var(--oro-300); font-weight: 500; font-style: italic; }

/* ════════════════════════════════════════════════════════════════════
   PARTICLES · partículas mostaza flotando en statement
   ════════════════════════════════════════════════════════════════════ */
.particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--oro-300);
    box-shadow: 0 0 16px color-mix(in srgb, var(--oro-300) 60%, transparent);
    opacity: 0;
    animation: particle-flotar 12s ease-in-out infinite;
}
.particle:nth-child(1)  { top: 18%; left: 8%;  width: 5px;  height: 5px;  animation-delay: 0s;    animation-duration: 11s; }
.particle:nth-child(2)  { top: 72%; left: 14%; width: 8px;  height: 8px;  animation-delay: -2s;   animation-duration: 14s; }
.particle:nth-child(3)  { top: 28%; left: 90%; width: 6px;  height: 6px;  animation-delay: -5s;   animation-duration: 13s; }
.particle:nth-child(4)  { top: 58%; left: 86%; width: 10px; height: 10px; animation-delay: -8s;   animation-duration: 16s; }
.particle:nth-child(5)  { top: 12%; left: 48%; width: 4px;  height: 4px;  animation-delay: -3s;   animation-duration: 10s; }
.particle:nth-child(6)  { top: 82%; left: 52%; width: 7px;  height: 7px;  animation-delay: -7s;   animation-duration: 15s; }
.particle:nth-child(7)  { top: 38%; left: 22%; width: 5px;  height: 5px;  animation-delay: -10s;  animation-duration: 12s; }
.particle:nth-child(8)  { top: 64%; left: 76%; width: 6px;  height: 6px;  animation-delay: -4s;   animation-duration: 13s; }
@keyframes particle-flotar {
    0%, 100% { transform: translate(0, 0)         scale(1);   opacity: 0.4; }
    25%      { transform: translate(20px, -30px)  scale(1.4); opacity: 1; }
    50%      { transform: translate(-15px, -50px) scale(1);   opacity: 0.6; }
    75%      { transform: translate(10px, -25px)  scale(1.2); opacity: 0.9; }
}

/* ════════════════════════════════════════════════════════════════════
   JOYA: ajuste de la cinta · pulse continuo más visible
   ════════════════════════════════════════════════════════════════════ */
.joya-bajada-corta {
    margin: 56px 0 0;
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.45;
    color: var(--bosque-200);
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
}
.joya-bajada-corta em { color: var(--oro-300); font-weight: 500; font-style: italic; }
.slide--joya .state-num {
    color: color-mix(in srgb, var(--oro-300) 10%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
   SLIDE--ANTESAHORA · explicación dual del soft delete
   ════════════════════════════════════════════════════════════════════ */
.slide--antesahora { background: var(--papel); }

.ah-stack {
    width: 100%;
    max-width: 1280px;
    position: relative;
    z-index: 3;
}
.ah-titulo {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(48px, 5.4vw, 88px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--bosque-900);
    margin: 0 0 48px;
    font-style: italic;
}
.ah-titulo em { font-style: italic; color: var(--oro-400); }

.ah-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
}
.ah-col {
    padding: 36px 36px 40px;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
}
.ah-col--antes {
    background: color-mix(in srgb, var(--ash) 12%, var(--papel));
    border: 1px solid color-mix(in srgb, var(--ash) 30%, transparent);
    color: var(--tinta-suave);
}
.ah-col--ahora {
    background: linear-gradient(140deg, var(--bosque-900) 0%, var(--bosque-800) 100%);
    color: var(--crema);
    box-shadow: 0 14px 40px color-mix(in srgb, var(--bosque-900) 25%, transparent);
}
.ah-col--ahora::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--oro-300) 30%, transparent), transparent 70%);
    pointer-events: none;
    animation: visual-glow 8s ease-in-out infinite alternate;
}
.ah-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 18px;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 2;
    position: relative;
}
.ah-col--antes .ah-tag {
    background: color-mix(in srgb, var(--ash) 22%, transparent);
    color: var(--ash-2);
}
.ah-col--ahora .ah-tag {
    background: color-mix(in srgb, var(--oro-300) 22%, transparent);
    color: var(--oro-300);
    border: 1px solid color-mix(in srgb, var(--oro-300) 35%, transparent);
}
.ah-frase {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1.25;
    margin: 0 0 24px;
    font-style: italic;
    z-index: 2;
    position: relative;
}
.ah-col--antes .ah-frase { color: var(--bosque-700); }
.ah-col--ahora .ah-frase { color: var(--crema); }
.ah-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 2;
    position: relative;
}
.ah-lista li {
    padding: 11px 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    font-size: clamp(14px, 1.05vw, 16.5px);
    line-height: 1.5;
    display: flex;
    gap: 12px;
    align-items: baseline;
}
.ah-lista li:last-child { border-bottom: 0; }
.ah-lista li::before {
    content: "·";
    font-family: var(--mono);
    color: var(--ash);
    flex-shrink: 0;
}
.ah-col--ahora .ah-lista li::before { color: var(--oro-300); }
.ah-lista em { color: var(--oro-400); font-style: italic; font-weight: 500; }
.ah-col--ahora .ah-lista em { color: var(--oro-300); }

.ah-cinta {
    margin-top: 36px;
    display: flex;
    justify-content: center;
}
.ah-cinta span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 28px;
    background: color-mix(in srgb, var(--oro-300) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--oro-300) 38%, transparent);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oro-400);
}
.ah-cinta span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--oro-300);
    border-radius: 50%;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro-300) 22%, transparent);
    animation: mark-pulso 2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════════════
   COVER · sello con respiración + pulso adicional
   ════════════════════════════════════════════════════════════════════ */
.deco-sello--cover {
    animation: sello-girar 90s linear infinite, sello-respirar 6s ease-in-out infinite;
}
@keyframes sello-respirar {
    0%, 100% { opacity: 0.32; }
    50%      { opacity: 0.5; }
}

/* Hint inferior con borde luminoso (override visibility) */
.deck-hint {
    background: color-mix(in srgb, var(--papel) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bosque-900) 22%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--bosque-900) 12%, transparent);
}
body.theme-dark .deck-hint {
    background: color-mix(in srgb, var(--bosque-900) 92%, transparent);
    border-color: color-mix(in srgb, var(--crema) 22%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--bosque-950) 50%, transparent);
}

/* Statement responsive */
@media (max-width: 980px) {
    .ah-grid { grid-template-columns: 1fr; }
    .state-num { font-size: clamp(280px, 50vw, 480px); }
}

/* Compensar el espacio del marquee superior en el chrome */
.deck-chrome { padding-top: 18px; }

/* ════════════════════════════════════════════════════════════════════
   MAMUSHKA · placa concepto · cajas anidadas pulsando
   ════════════════════════════════════════════════════════════════════ */
.slide--mamushka {
    background: var(--bosque-900);
    color: var(--crema);
    background-image:
        radial-gradient(ellipse 1100px 800px at 80% 100%, color-mix(in srgb, var(--bosque-700) 60%, transparent), transparent 65%),
        radial-gradient(ellipse 700px 500px at 10% 0%, color-mix(in srgb, var(--oro-300) 18%, transparent), transparent 60%);
    text-align: center;
    overflow: hidden;
}
.mam-frase {
    font-size: clamp(36px, 4.6vw, 78px) !important;
    line-height: 1.08 !important;
}

/* El visual */
.mamushka {
    width: min(92%, 880px);
    margin: 56px auto 32px;
    aspect-ratio: 16 / 7;
    position: relative;
    z-index: 3;
}
.mam-mesa {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bosque-700) 70%, transparent);
    border: 2px solid var(--oro-300);
    border-radius: 18px;
    padding: 38px 22px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--oro-300) 14%, transparent),
                0 20px 60px color-mix(in srgb, var(--bosque-950) 40%, transparent);
    animation: mam-pulse-mesa 4s ease-in-out infinite;
}
@keyframes mam-pulse-mesa {
    0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--oro-300) 14%, transparent),
                          0 20px 60px color-mix(in srgb, var(--bosque-950) 40%, transparent); }
    50%      { box-shadow: 0 0 0 16px color-mix(in srgb, var(--oro-300) 5%, transparent),
                          0 24px 72px color-mix(in srgb, var(--bosque-950) 50%, transparent); }
}
.mam-tag {
    position: absolute;
    top: 12px;
    left: 22px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--oro-300);
    text-transform: uppercase;
    font-weight: 600;
}
.mam-catedras {
    display: flex;
    gap: 14px;
    flex: 1;
    margin-top: 12px;
}
.mam-cat {
    flex: 1;
    background: color-mix(in srgb, var(--bosque-500) 55%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--bosque-200) 70%, transparent);
    border-radius: 12px;
    padding: 26px 14px 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transform-origin: center;
    animation: mam-pulse-cat 3s ease-in-out infinite;
}
.mam-cat:nth-child(1) { animation-delay: 0s; }
.mam-cat:nth-child(2) { animation-delay: 0.4s; }
.mam-cat:nth-child(3) { animation-delay: 0.8s; }
@keyframes mam-pulse-cat {
    0%, 100% { transform: scale(1); border-color: color-mix(in srgb, var(--bosque-200) 70%, transparent); }
    50%      { transform: scale(1.025); border-color: var(--oro-300); }
}
.mam-tag-mini {
    position: absolute;
    top: 9px;
    left: 12px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--bosque-100);
    text-transform: uppercase;
    font-weight: 500;
}
.mam-materias {
    display: flex;
    gap: 6px;
    flex: 1;
    align-items: center;
}
.mam-mat {
    flex: 1;
    height: 28px;
    background: var(--oro-300);
    border-radius: 5px;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--oro-300) 50%, transparent);
    animation: mam-pulse-mat 2s ease-in-out infinite;
}
.mam-cat:nth-child(1) .mam-mat:nth-child(1) { animation-delay: 0s; }
.mam-cat:nth-child(1) .mam-mat:nth-child(2) { animation-delay: 0.3s; }
.mam-cat:nth-child(2) .mam-mat:nth-child(1) { animation-delay: 0.5s; }
.mam-cat:nth-child(2) .mam-mat:nth-child(2) { animation-delay: 0.7s; }
.mam-cat:nth-child(2) .mam-mat:nth-child(3) { animation-delay: 0.9s; }
.mam-cat:nth-child(3) .mam-mat:nth-child(1) { animation-delay: 1.1s; }
@keyframes mam-pulse-mat {
    0%, 100% { opacity: 0.85; transform: scaleY(0.92); box-shadow: 0 1px 6px color-mix(in srgb, var(--oro-300) 40%, transparent); }
    50%      { opacity: 1;    transform: scaleY(1.02); box-shadow: 0 2px 14px color-mix(in srgb, var(--oro-300) 80%, transparent); }
}
.mam-mat-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bosque-100);
    text-align: center;
    margin-top: 4px;
}

@media (max-width: 980px) {
    .mamushka { aspect-ratio: 16 / 11; margin-top: 32px; }
    .mam-frase { font-size: clamp(28px, 6vw, 48px) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   17 · CAMPO DE PRUEBAS — diagrama orbital
   ════════════════════════════════════════════════════════════════════ */
.diag-campo {
    width: clamp(220px, 24vw, 320px);
    height: auto;
    margin: 12px auto 22px;
    display: block;
}
.campo-aro {
    stroke: color-mix(in srgb, var(--bosque-100) 55%, transparent);
    stroke-width: 1;
    stroke-dasharray: 3 6;
    transform-origin: 120px 120px;
}
.campo-aro--1 { animation: campo-girar 32s linear infinite; }
.campo-aro--2 { animation: campo-girar 22s linear infinite reverse; stroke-dasharray: 2 5; }
.campo-aro--3 { animation: campo-girar 14s linear infinite;        stroke-dasharray: 1 4; }
@keyframes campo-girar { to { transform: rotate(360deg); } }

.campo-centro {
    fill: var(--oro-300);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--oro-300) 70%, transparent));
    animation: campo-pulso 2.6s ease-in-out infinite;
    transform-origin: 120px 120px;
}
@keyframes campo-pulso {
    0%, 100% { transform: scale(1);    opacity: 0.95; }
    50%      { transform: scale(1.18); opacity: 1; }
}

.campo-orbita {
    transform-origin: 120px 120px;
    animation: campo-girar 38s linear infinite;
}
.campo-pin {
    fill: var(--crema);
    opacity: 0.92;
    animation: campo-pin-titilar 2.2s ease-in-out infinite;
    animation-delay: calc(var(--pin-i, 0) * 0.18s);
    transform-origin: center;
    transform-box: fill-box;
}
.campo-pin--mini { fill: color-mix(in srgb, var(--crema) 75%, var(--oro-300)); opacity: 0.7; }
@keyframes campo-pin-titilar {
    0%, 100% { transform: scale(1);   opacity: 0.7; }
    50%      { transform: scale(1.4); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   19 · PIRÁMIDE — 5 niveles de admin
   ════════════════════════════════════════════════════════════════════ */
.slide--piramide {
    background: var(--papel);
    background-image:
        radial-gradient(ellipse 700px 500px at 90% 100%, color-mix(in srgb, var(--bosque-200) 22%, transparent), transparent 60%),
        radial-gradient(ellipse 500px 350px at 5% 5%,    color-mix(in srgb, var(--oro-200) 20%, transparent),    transparent 60%);
}

.piramide-stack {
    width: 100%;
    max-width: 1180px;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}

.piramide-cabeza { display: flex; flex-direction: column; align-self: center; }
.piramide-titulo {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(40px, 4.6vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--bosque-900);
    margin: 0 0 22px;
}
.piramide-titulo em { color: var(--oro-400); font-style: italic; font-weight: 300; }
.piramide-bajada {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(17px, 1.4vw, 22px);
    color: var(--tinta-suave);
    line-height: 1.5;
    margin: 0;
    max-width: 26em;
}
.piramide-bajada small {
    display: block;
    margin-top: 14px;
    font-family: var(--mono);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ash-2);
    line-height: 1.5;
}

.piramide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    position: relative;
    padding: 12px 0;
}
.piramide-nivel {
    --piramide-color: var(--bosque-500);
    --piramide-tinta: var(--crema);
    position: relative;
    background: var(--piramide-color);
    color: var(--piramide-tinta);
    border-radius: 10px;
    padding: 14px 22px;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 16px;
    box-shadow:
        0 6px 18px color-mix(in srgb, var(--piramide-color) 35%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--crema) 22%, transparent);
    transform-origin: center;
    transition: transform var(--t-rapido) var(--ease-salida);
    overflow: hidden;
}
.piramide-nivel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, color-mix(in srgb, var(--crema) 12%, transparent) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: piramide-brillo 6s ease-in-out infinite;
    animation-delay: calc(var(--retraso, 0ms) + 1500ms);
    pointer-events: none;
}
@keyframes piramide-brillo {
    0%, 60%, 100% { transform: translateX(-100%); }
    70%           { transform: translateX(100%); }
}
.piramide-nivel:hover { transform: translateX(4px); }

/* Anchos decrecientes — tipo 1 más ancho (más poder) */
.piramide-nivel--1 { width: 100%; --piramide-color: var(--bosque-700); }
.piramide-nivel--2 { width: 92%;  --piramide-color: var(--bosque-500); }
.piramide-nivel--3 { width: 82%;  --piramide-color: var(--bosque-400); }
.piramide-nivel--4 { width: 70%;  --piramide-color: color-mix(in srgb, var(--bosque-300) 75%, var(--oro-300)); }
.piramide-nivel--5 { width: 56%;  --piramide-color: color-mix(in srgb, var(--bosque-200) 65%, var(--oro-300)); --piramide-tinta: var(--bosque-900); }

.piramide-tipo {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: color-mix(in srgb, currentColor 16%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    padding: 5px 10px;
    border-radius: 999px;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
}
.piramide-nombre {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 1.9vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.piramide-alcance {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.85;
    text-align: right;
    max-width: 22em;
}

.piramide-pie {
    grid-column: 1 / -1;
    text-align: center;
    margin: 32px 0 0;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(15px, 1.2vw, 19px);
    color: var(--tinta-suave);
    line-height: 1.5;
}
.piramide-pie em { color: var(--oro-400); }
.piramide-pie strong { color: var(--bosque-700); font-weight: 500; font-style: normal; }

@media (max-width: 1080px) {
    .piramide-stack { grid-template-columns: 1fr; }
    .piramide { width: 100%; }
    .piramide-nivel { padding: 12px 16px; gap: 10px; grid-template-columns: 58px 1fr; }
    .piramide-alcance { grid-column: 1 / -1; text-align: left; max-width: none; padding-left: 70px; }
}

/* ════════════════════════════════════════════════════════════════════
   21 · FASES — roadmap horizontal
   ════════════════════════════════════════════════════════════════════ */
.slide--fases {
    background: var(--papel);
    background-image:
        radial-gradient(ellipse 600px 400px at 12% 110%, color-mix(in srgb, var(--oro-200) 26%, transparent), transparent 60%),
        radial-gradient(ellipse 500px 360px at 88% -10%, color-mix(in srgb, var(--bosque-200) 28%, transparent), transparent 60%);
}

.fases-stack {
    width: 100%;
    max-width: 1340px;
    position: relative;
    z-index: 3;
}
.fases-titulo {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(38px, 4.4vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--bosque-900);
    margin: 0 0 56px;
}
.fases-titulo em { color: var(--oro-400); font-style: italic; font-weight: 300; }

.fases-pista {
    position: relative;
    height: 0;
    margin: 0 6%;
}
.fases-linea {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--bosque-300) 50%, transparent) 0%,
        color-mix(in srgb, var(--oro-300) 70%, transparent) 50%,
        color-mix(in srgb, var(--bosque-300) 50%, transparent) 100%);
    border-radius: 999px;
    transform-origin: left;
    animation: fases-linea-dibujar 1800ms var(--ease-salida) backwards;
    animation-delay: 200ms;
    box-shadow: 0 0 18px color-mix(in srgb, var(--oro-300) 35%, transparent);
}
@keyframes fases-linea-dibujar {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

.fases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 40px);
    margin-top: 0;
    align-items: stretch;
}
.fase {
    background: color-mix(in srgb, var(--papel) 70%, var(--crema-2));
    border: 1px solid color-mix(in srgb, var(--bosque-900) 8%, transparent);
    border-radius: 18px;
    padding: 28px 26px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 14px 40px -22px color-mix(in srgb, var(--bosque-900) 30%, transparent);
    transition: transform var(--t-rapido) var(--ease-resorte), box-shadow var(--t-rapido);
}
.fase:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px -26px color-mix(in srgb, var(--bosque-900) 45%, transparent);
}
.fase::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 28px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--oro-300);
    box-shadow: 0 0 0 5px var(--papel), 0 0 0 7px color-mix(in srgb, var(--oro-300) 40%, transparent);
    animation: fase-punto-late 2.6s ease-in-out infinite;
}
@keyframes fase-punto-late {
    0%, 100% { box-shadow: 0 0 0 5px var(--papel), 0 0 0 7px color-mix(in srgb, var(--oro-300) 40%, transparent); }
    50%      { box-shadow: 0 0 0 5px var(--papel), 0 0 0 12px color-mix(in srgb, var(--oro-300) 12%, transparent); }
}
.fase--1::before { animation-delay: 0s; }
.fase--2::before { animation-delay: 0.4s; background: var(--bosque-500); box-shadow: 0 0 0 5px var(--papel), 0 0 0 7px color-mix(in srgb, var(--bosque-500) 35%, transparent); }
.fase--2::before { animation-name: fase-punto-late-bosque; }
@keyframes fase-punto-late-bosque {
    0%, 100% { box-shadow: 0 0 0 5px var(--papel), 0 0 0 7px color-mix(in srgb, var(--bosque-500) 35%, transparent); }
    50%      { box-shadow: 0 0 0 5px var(--papel), 0 0 0 12px color-mix(in srgb, var(--bosque-500) 10%, transparent); }
}
.fase--3::before { animation-delay: 0.8s; }

.fase-num {
    position: absolute;
    top: 18px;
    right: 24px;
    font-family: var(--display);
    font-style: italic;
    font-weight: 200;
    font-size: clamp(48px, 4vw, 64px);
    line-height: 1;
    color: color-mix(in srgb, var(--bosque-300) 35%, transparent);
    letter-spacing: -0.04em;
    user-select: none;
    pointer-events: none;
}
.fase-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oro-400);
    margin-top: 18px;
    font-weight: 500;
}
.fase-titulo {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.1;
    color: var(--bosque-900);
    margin: 4px 0 6px;
    letter-spacing: -0.01em;
}
.fase-cuerpo {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.5;
    color: var(--tinta-suave);
    margin: 0 0 6px;
}
.fase-cuerpo strong { color: var(--bosque-700); font-weight: 500; }
.fase-lista {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--bosque-900) 8%, transparent);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.fase-lista li {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
    color: var(--tinta-suave);
    padding-left: 18px;
    position: relative;
}
.fase-lista li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--oro-400);
    font-weight: 600;
}

@media (max-width: 980px) {
    .fases-grid { grid-template-columns: 1fr; }
    .fases-pista { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   22 · AVISO — Imágenes y rendimiento
   ════════════════════════════════════════════════════════════════════ */
.slide--aviso {
    background: var(--papel);
    background-image:
        radial-gradient(ellipse 700px 500px at 10% 0%, color-mix(in srgb, var(--oro-200) 30%, transparent), transparent 60%),
        radial-gradient(ellipse 500px 350px at 95% 100%, color-mix(in srgb, var(--bosque-200) 24%, transparent), transparent 60%);
}

.aviso-stack {
    width: 100%;
    max-width: 1080px;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.aviso-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--oro-700);
    background: color-mix(in srgb, var(--oro-200) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--oro-300) 45%, transparent);
    padding: 8px 16px;
    border-radius: 999px;
    margin: 0 0 26px;
}
.aviso-eyebrow::before {
    content: "⚠";
    font-size: 13px;
    color: var(--oro-400);
    animation: aviso-warn-pulso 2s ease-in-out infinite;
}
@keyframes aviso-warn-pulso {
    0%, 100% { transform: scale(1);   opacity: 0.85; }
    50%      { transform: scale(1.2); opacity: 1; }
}

.aviso-titulo {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(38px, 4.4vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--bosque-900);
    margin: 0 0 36px;
    max-width: 18em;
}
.aviso-titulo em { color: var(--oro-400); font-style: italic; font-weight: 300; }

.aviso-card {
    width: min(620px, 100%);
    background: var(--bosque-900);
    color: var(--crema);
    border-radius: 16px;
    padding: 22px 26px 26px;
    box-shadow:
        0 24px 60px -28px color-mix(in srgb, var(--bosque-900) 70%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--crema) 8%, transparent);
    position: relative;
    overflow: hidden;
    margin-bottom: 36px;
    text-align: left;
}
.aviso-card-progreso {
    position: relative;
    height: 38px;
    background: color-mix(in srgb, var(--crema) 8%, transparent);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 14px;
    margin-bottom: 16px;
}
.aviso-card-barra {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--oro-300), color-mix(in srgb, var(--oro-300) 70%, var(--bosque-400)));
    box-shadow: 0 0 18px color-mix(in srgb, var(--oro-300) 50%, transparent);
    transform-origin: left;
    animation: aviso-cargar 3.2s ease-in-out infinite;
}
@keyframes aviso-cargar {
    0%   { transform: scaleX(0);    opacity: 0.3; }
    8%   { opacity: 1; }
    35%  { transform: scaleX(0.42); }
    55%  { transform: scaleX(0.55); }
    78%  { transform: scaleX(0.86); }
    92%  { transform: scaleX(1);    opacity: 1; }
    96%  { opacity: 0.4; }
    100% { transform: scaleX(0);    opacity: 0; }
}
.aviso-card-texto {
    position: relative;
    z-index: 2;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bosque-900);
    font-weight: 600;
    text-shadow: 0 0 6px color-mix(in srgb, var(--oro-200) 60%, transparent);
}
.aviso-card-cuerpo {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.5;
    color: var(--bosque-100);
    margin: 0;
}
.aviso-card-cuerpo em { color: var(--oro-300); font-style: italic; }

.aviso-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 1.8vw, 28px);
    width: 100%;
    margin-bottom: 28px;
    text-align: left;
}
.aviso-celda {
    border-radius: 14px;
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--bosque-900) 10%, transparent);
    background: color-mix(in srgb, var(--papel) 70%, var(--crema-2));
}
.aviso-celda--bien { border-color: color-mix(in srgb, var(--bosque-500) 35%, transparent); background: color-mix(in srgb, var(--bosque-100) 35%, var(--papel)); }
.aviso-celda--ojo  { border-color: color-mix(in srgb, var(--oro-300) 45%, transparent);     background: color-mix(in srgb, var(--oro-200) 35%, var(--papel)); }
.aviso-celda-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding: 4px 9px;
    border-radius: 999px;
}
.aviso-celda--bien .aviso-celda-tag { color: var(--bosque-700); background: color-mix(in srgb, var(--bosque-300) 25%, transparent); }
.aviso-celda--ojo  .aviso-celda-tag { color: var(--oro-700);    background: color-mix(in srgb, var(--oro-300) 22%, transparent); }
.aviso-celda ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aviso-celda li {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tinta-suave);
    padding-left: 18px;
    position: relative;
}
.aviso-celda li strong { color: var(--bosque-900); font-weight: 600; }
.aviso-celda--bien li::before { content: "✓"; position: absolute; left: 0; color: var(--bosque-500); font-weight: 700; }
.aviso-celda--ojo  li::before { content: "•"; position: absolute; left: 4px; color: var(--oro-400); font-size: 18px; line-height: 1; top: 1px; }

.aviso-pie {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(15px, 1.2vw, 18px);
    color: var(--tinta-suave);
    margin: 0;
    max-width: 36em;
    line-height: 1.5;
}
.aviso-pie em { color: var(--oro-400); }

@media (max-width: 820px) {
    .aviso-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   23 · JOYA · variante "evaluación" (más texto)
   ════════════════════════════════════════════════════════════════════ */
.slide--joya-evalua .joya-titulo { font-size: clamp(40px, 5vw, 76px); line-height: 1.06; }
.slide--joya-evalua .joya-bajada-corta { max-width: 30em; }



/* ════════════════════════════════════════════════════════════════════
   24·25·26 — REVEAL DEL CAMBIO DE NOMBRE (EduSistema → EMMU Sistema)
   Tres slides en secuencia:
     24: build-up (susurro previo)
     25: el reveal — animación del wordmark
     26: manifiesto (cierre del reveal antes del cierre real)
   ════════════════════════════════════════════════════════════════════ */

/* ── 24 · BUILD-UP ── statement con ritmo más lento (más respiración) */
.slide--rename-buildup { background: var(--bosque-950); color: var(--crema); }
.slide--rename-buildup .state-frase { color: var(--crema); }
.slide--rename-buildup .palabra--acento { color: var(--oro-300); }
.slide--rename-buildup .eyebrow { color: var(--ash); }
.slide--rename-buildup .state-bajada { color: var(--ash); font-style: italic; }

/* ── 25 · REVEAL ── el show. Atmósfera oscura, full impact */
.slide--rename-reveal {
    background: radial-gradient(ellipse at center,
        var(--bosque-900) 0%,
        var(--bosque-950) 70%);
    color: var(--crema);
    overflow: hidden;
}

.rename-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    max-width: 92vw;
}

.rename-eyebrow {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow, 12px);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-weight: 600;
    color: var(--oro-300);
    opacity: 0;
    animation: rename-eyebrow-in 800ms 200ms cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes rename-eyebrow-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Contenedor que aloja antes y después (superpuestos) */
.rename-show {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(120px, 18vw, 220px);
    width: 100%;
}

/* ----- ANTES: "EduSistema" letra por letra ----- */
.rename-antes {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(56px, 9vw, 140px);
    line-height: 1;
    letter-spacing: -0.01em;
}

.rename-letra {
    display: inline-block;
    color: var(--crema);
    opacity: 0;
    animation:
        rename-letra-in 60ms calc(900ms + var(--i) * 60ms) ease-out forwards,
        rename-letra-out 700ms calc(2400ms + var(--i) * 90ms) cubic-bezier(.45,.1,.5,1) forwards;
}

/* Las letras de "Sistema" se quedan visibles más tiempo (transición al final) */
.rename-letra--queda {
    animation:
        rename-letra-in 60ms calc(900ms + var(--i) * 60ms) ease-out forwards,
        rename-letra-fade-soft 600ms 3800ms cubic-bezier(.45,.1,.5,1) forwards;
}

@keyframes rename-letra-in {
    from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes rename-letra-out {
    0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.6); filter: blur(8px); }
}

@keyframes rename-letra-fade-soft {
    to { opacity: 0; filter: blur(4px); }
}

/* ----- DESPUÉS: "EMMU Sistema" emerge dramático ----- */
.rename-despues {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(56px, 9vw, 140px);
    line-height: 1;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: rename-despues-in 900ms 4000ms cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes rename-despues-in {
    0%   { opacity: 0; transform: translateY(40px) scale(0.92); filter: blur(12px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.rename-final-emmu {
    color: var(--oro-300);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 4px 24px rgba(224, 167, 38, 0.30);
}

.rename-final-sep { display: inline-block; width: 0.25em; }

.rename-final-sistema {
    color: var(--crema);
    font-weight: 500;
    font-style: italic;
}

.rename-bajada {
    font-family: var(--sans);
    font-size: clamp(16px, 1.5vw, 22px);
    color: var(--ash);
    text-align: center;
    margin: 0;
    opacity: 0;
    transform: translateY(8px);
    animation: rename-bajada-in 1200ms forwards cubic-bezier(.16,1,.3,1);
    animation-delay: 5200ms;
}

@keyframes rename-bajada-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ── 26 · MANIFIESTO ── slide compacta, centrada, líneas ACUMULATIVAS
   (cada línea aparece y se queda — todas visibles al final). */
.slide--rename-manifiesto {
    background: var(--bosque-950);
    color: var(--crema);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mani-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vw, 32px);
    max-width: min(900px, 92vw);
    text-align: center;
    /* Padding interno generoso pero sin estirar al alto completo:
       así la slide "vive" centrada y no se choca con el chrome del deck. */
    padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 48px);
}

.mani-eyebrow {
    color: var(--oro-300);
    margin: 0;
}

.mani-frase {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 22px);
    align-items: center;
    text-align: center;
    margin: 0;
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.2;
}

.mani-linea {
    display: block;
    font-family: var(--display);
    font-weight: 500;
    color: var(--crema);
    opacity: 0;
    transform: translateY(12px);
    /* La línea entra una vez — y se queda. No hay animación de salida. */
    animation: mani-linea-in 700ms forwards cubic-bezier(.16,1,.3,1);
    animation-delay: var(--retraso, 0ms);
}

.mani-linea em {
    color: var(--oro-300);
    font-style: italic;
    font-weight: 600;
}

.mani-linea--fuerte {
    margin-top: clamp(8px, 1.5vw, 14px);
    font-size: 1.5em;
    font-weight: 700;
}

.mani-linea--fuerte strong {
    color: var(--oro-300);
    font-weight: 800;
    font-style: normal;
    text-shadow: 0 2px 16px rgba(224, 167, 38, 0.28);
}

@keyframes mani-linea-in {
    to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: cortar animaciones largas, mostrar el final */
@media (prefers-reduced-motion: reduce) {
    .rename-letra,
    .rename-letra--queda { animation: none; opacity: 0; }
    .rename-despues { animation: none; opacity: 1; }
    .rename-bajada { animation: none; opacity: 1; transform: none; }
    .mani-linea { animation: none; opacity: 1; transform: none; }
}


/* ════════════════════════════════════════════════════════════════════
   PLACA-SECCIÓN — título grande de cada bloque temático.
   Va antes de cada bloque (Cátedras, Mesas, Préstamos, etc.) para que
   el público sepa de qué se va a hablar.
   ════════════════════════════════════════════════════════════════════ */
.slide--seccion {
    background: var(--bosque-950);
    color: var(--crema);
    overflow: hidden;
}

.slide--seccion .seccion-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(24px, 3.5vw, 48px);
    max-width: min(1100px, 92vw);
    z-index: 3;
}

.seccion-eyebrow {
    font-family: var(--mono);
    font-size: clamp(10px, 0.9vw, 12px);
    text-transform: uppercase;
    letter-spacing: 0.34em;
    color: var(--ash);
    margin: 0;
    opacity: 0;
    animation: seccion-fade-in 700ms 200ms forwards cubic-bezier(.16,1,.3,1);
}

.seccion-num {
    display: inline-block;
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(56px, 7vw, 100px);
    line-height: 1;
    color: var(--oro-300);
    margin: 0;
    opacity: 0;
    transform: translateY(-20px);
    animation: seccion-num-in 900ms 350ms forwards cubic-bezier(.16,1,.3,1);
    text-shadow: 0 4px 24px rgba(224, 167, 38, 0.20);
}

.seccion-divisor {
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--oro-300), transparent);
    animation: seccion-divisor-in 900ms 700ms forwards cubic-bezier(.16,1,.3,1);
}

@keyframes seccion-divisor-in {
    to { width: clamp(120px, 14vw, 220px); }
}

.seccion-titulo {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(72px, 11vw, 180px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--crema);
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    animation: seccion-titulo-in 1100ms 900ms forwards cubic-bezier(.16,1,.3,1);
}

.seccion-bajada {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(18px, 1.5vw, 26px);
    color: var(--ash);
    margin: 0;
    max-width: 26em;
    line-height: 1.4;
    opacity: 0;
    animation: seccion-fade-in 900ms 1500ms forwards cubic-bezier(.16,1,.3,1);
}

.seccion-bajada em {
    color: var(--crema);
    font-style: italic;
}

@keyframes seccion-fade-in {
    to { opacity: 1; }
}

@keyframes seccion-num-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes seccion-titulo-in {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .seccion-eyebrow, .seccion-num, .seccion-titulo, .seccion-bajada,
    .seccion-divisor { animation: none; opacity: 1; transform: none; width: 180px; }
}

/* ════════════════════════════════════════════════════════════════════
   COVER · más aire arriba/abajo (estaba muy pegado al marquee)
   ════════════════════════════════════════════════════════════════════ */
.slide--cover {
    padding-top: clamp(120px, 14vh, 200px);
    padding-bottom: clamp(80px, 10vh, 140px);
}
.slide--cover .cover-titulo {
    font-size: clamp(68px, 11vw, 180px);
}
.slide--cover .cover-bajada { margin-top: 28px; }
.slide--cover .cover-meta { margin-top: 44px; }
.slide--cover .cover-eyebrow--abajo { margin-top: 28px; }


/* ════════════════════════════════════════════════════════════════════
   ANIMACIÓN DE FONDO · slide pirámide (Los 5 tipos de admin)
   Decoración sutil: anillos concéntricos pulsantes + rayos rotando +
   glow oro flotante. Tiene que respirar sin distraer del contenido.
   ════════════════════════════════════════════════════════════════════ */
.slide--piramide { overflow: hidden; }

/* El fondo cubre la slide ENTERA (incluyendo padding). Usamos position
   absolute con propiedades explícitas para evitar cualquier conflicto
   de cascade con otras reglas del deck. */
.piramide-fondo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* ── Anillos concéntricos pulsantes ── */
.piramide-fondo-aro {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--bosque-500) 8%, transparent);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: piramide-aro-pulse 9s ease-in-out infinite;
}
.piramide-fondo-aro--1 { width: 60vmin; height: 60vmin; animation-delay:    0s; }
.piramide-fondo-aro--2 { width: 80vmin; height: 80vmin; animation-delay:  1.5s; border-color: color-mix(in srgb, var(--oro-300) 8%, transparent); }
.piramide-fondo-aro--3 { width: 100vmin; height: 100vmin; animation-delay: 3s; }

@keyframes piramide-aro-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
    50%      { transform: translate(-50%, -50%) scale(1.04); opacity: 0.40; }
}

/* ── Rayos diagonales rotando lento (líneas tipo guías de luz) ── */
.piramide-fondo-rayo {
    position: absolute;
    top: 50%; left: 50%;
    width: 200vmax;
    height: 1px;
    transform-origin: center;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--oro-300) 6%, transparent) 45%,
        color-mix(in srgb, var(--oro-300) 10%, transparent) 50%,
        color-mix(in srgb, var(--oro-300) 6%, transparent) 55%,
        transparent 100%);
    animation: piramide-rayo-rotar 60s linear infinite;
    opacity: 0.30;
}
.piramide-fondo-rayo--a { animation-duration: 56s; transform: translate(-50%, -50%) rotate(0deg); }
.piramide-fondo-rayo--b { animation-duration: 78s; animation-direction: reverse; transform: translate(-50%, -50%) rotate(60deg); }
.piramide-fondo-rayo--c { animation-duration: 94s; transform: translate(-50%, -50%) rotate(120deg); }

@keyframes piramide-rayo-rotar {
    from { transform: translate(-50%, -50%) rotate(var(--from, 0deg)); }
    to   { transform: translate(-50%, -50%) rotate(calc(var(--from, 0deg) + 360deg)); }
}

/* ── Glow central oro respirando ── */
.piramide-fondo-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 50vmin;
    height: 50vmin;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--oro-300) 5%, transparent) 0%,
        color-mix(in srgb, var(--oro-300) 2%, transparent) 40%,
        transparent 75%);
    filter: blur(60px);
    transform: translate(-50%, -50%);
    animation: piramide-glow-breath 8s ease-in-out infinite;
    z-index: 0;
}

@keyframes piramide-glow-breath {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.95); }
    50%      { opacity: 0.55; transform: translate(-50%, -50%) scale(1.05); }
}

/* Contenido por encima del fondo */
.slide--piramide .piramide-stack {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .piramide-fondo-aro,
    .piramide-fondo-rayo,
    .piramide-fondo-glow { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════
   FIRULETES — sistema de decoraciones animadas que el JS inyecta en
   TODAS las slides. Pool de 8 tipos, 2-3 random por slide. Sutiles
   (opacity baja, animaciones lentas) — adornan sin distraer.

   Variables que el JS setea inline en cada firulete:
     --top, --left   posición (% del slide)
     --retraso       delay para desincronizar
     --duracion      duración base de la animación
     --escala        tamaño relativo
     --color         color (bosque, oro, papel)
   ════════════════════════════════════════════════════════════════════ */

/* Capa al FONDO de la slide (z-index: 0). El contenido de cada slide
   queda por encima de forma natural — sin tener que tocarle z-index
   a los hijos, que en muchos slides ya están absolutamente posicionados
   y se romperían si les forzáramos position: relative. */
.firuletes-capa {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.firulete {
    position: absolute;
    top: var(--top, 50%);
    left: var(--left, 50%);
    pointer-events: none;
    will-change: transform, opacity;
}

/* ──────── 1. ONDA · arco que se rota lento ──────── */
.firulete--onda {
    width: calc(var(--escala, 1) * 280px);
    height: calc(var(--escala, 1) * 80px);
    transform: translate(-50%, -50%) rotate(var(--giro, 0deg));
    opacity: 0;
    animation: firulete-onda-aparecer 14s var(--retraso, 0s) ease-in-out infinite;
}
.firulete--onda::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--color, var(--oro-300));
    border-color: transparent transparent var(--color, var(--oro-300)) transparent;
    border-radius: 50%;
    opacity: 0.45;
    animation: firulete-onda-rotar 22s linear infinite;
}
@keyframes firulete-onda-aparecer {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 0.55; }
}
@keyframes firulete-onda-rotar {
    to { transform: rotate(360deg); }
}

/* ──────── 2. ORBITAL · puntito que orbita ──────── */
.firulete--orbital {
    width: calc(var(--escala, 1) * 120px);
    height: calc(var(--escala, 1) * 120px);
    transform: translate(-50%, -50%);
    animation: firulete-orbital-girar var(--duracion, 18s) var(--retraso, 0s) linear infinite;
}
.firulete--orbital::before,
.firulete--orbital::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color, var(--oro-400));
    opacity: 0.6;
    box-shadow: 0 0 12px currentColor;
    color: var(--color, var(--oro-400));
}
.firulete--orbital::before { top: 0; left: 50%; transform: translateX(-50%); }
.firulete--orbital::after  { bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; }
@keyframes firulete-orbital-girar {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ──────── 3. NOTA MUSICAL · ♪ ♫ ♬ flotando con bobbing ──────── */
.firulete--nota {
    font-family: var(--display);
    font-size: calc(var(--escala, 1) * 40px);
    color: var(--color, var(--oro-300));
    opacity: 0.35;
    transform: translate(-50%, -50%) rotate(var(--giro, -8deg));
    animation: firulete-nota-flotar var(--duracion, 12s) var(--retraso, 0s) ease-in-out infinite;
    text-shadow: 0 4px 16px currentColor;
}
.firulete--nota::before { content: var(--simbolo, "♪"); }
@keyframes firulete-nota-flotar {
    0%, 100% { transform: translate(-50%, -50%) rotate(var(--giro, -8deg)) translateY(0); opacity: 0.20; }
    50%      { transform: translate(-50%, -50%) rotate(var(--giro, -8deg)) translateY(-30px); opacity: 0.55; }
}

/* ──────── 4. PENTAGRAMA · 5 líneas finas con shimmer lateral ──────── */
.firulete--pentagrama {
    width: calc(var(--escala, 1) * 220px);
    height: calc(var(--escala, 1) * 60px);
    transform: translate(-50%, -50%) rotate(var(--giro, -6deg));
    opacity: 0.30;
    background-image: linear-gradient(
        to bottom,
        transparent 0%, transparent 18%,
        var(--color, var(--bosque-400)) 18%, var(--color, var(--bosque-400)) 19%,
        transparent 19%, transparent 38%,
        var(--color, var(--bosque-400)) 38%, var(--color, var(--bosque-400)) 39%,
        transparent 39%, transparent 58%,
        var(--color, var(--bosque-400)) 58%, var(--color, var(--bosque-400)) 59%,
        transparent 59%, transparent 78%,
        var(--color, var(--bosque-400)) 78%, var(--color, var(--bosque-400)) 79%,
        transparent 79%, transparent 98%,
        var(--color, var(--bosque-400)) 98%, var(--color, var(--bosque-400)) 100%
    );
    -webkit-mask: linear-gradient(90deg, transparent 0%, black 30%, black 70%, transparent 100%);
            mask: linear-gradient(90deg, transparent 0%, black 30%, black 70%, transparent 100%);
    animation: firulete-pentagrama-shimmer 9s var(--retraso, 0s) ease-in-out infinite;
}
@keyframes firulete-pentagrama-shimmer {
    0%, 100% { opacity: 0.10; transform: translate(-50%, -50%) rotate(var(--giro, -6deg)) translateX(-30px); }
    50%      { opacity: 0.40; transform: translate(-50%, -50%) rotate(var(--giro, -6deg)) translateX(30px); }
}

/* ──────── 5. ESTRELLA · ✦ titilando ──────── */
.firulete--estrella {
    font-size: calc(var(--escala, 1) * 24px);
    color: var(--color, var(--oro-300));
    opacity: 0;
    line-height: 1;
    transform: translate(-50%, -50%);
    animation: firulete-estrella-titilar var(--duracion, 4s) var(--retraso, 0s) ease-in-out infinite;
    text-shadow: 0 0 12px currentColor;
}
.firulete--estrella::before { content: "✦"; }
@keyframes firulete-estrella-titilar {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(0deg); }
    50%      { opacity: 0.70; transform: translate(-50%, -50%) scale(1.1) rotate(180deg); }
}

/* ──────── 6. SWOOSH · barra horizontal con gradient cruzando ──────── */
.firulete--swoosh {
    width: calc(var(--escala, 1) * 240px);
    height: 1.5px;
    transform: translate(-50%, -50%) rotate(var(--giro, 0deg));
    background: linear-gradient(90deg, transparent 0%, var(--color, var(--oro-300)) 50%, transparent 100%);
    opacity: 0.45;
    animation: firulete-swoosh-cruzar var(--duracion, 16s) var(--retraso, 0s) ease-in-out infinite;
    box-shadow: 0 0 6px var(--color, var(--oro-300));
}
@keyframes firulete-swoosh-cruzar {
    0%, 100% { opacity: 0; transform: translate(calc(-50% - 80px), -50%) rotate(var(--giro, 0deg)) scaleX(0.6); }
    50%      { opacity: 0.45; transform: translate(calc(-50% + 80px), -50%) rotate(var(--giro, 0deg)) scaleX(1); }
}

/* ──────── 7. GARABATO · forma blob morfeando ──────── */
.firulete--garabato {
    width: calc(var(--escala, 1) * 160px);
    height: calc(var(--escala, 1) * 80px);
    transform: translate(-50%, -50%) rotate(var(--giro, 0deg));
    opacity: 0.30;
}
.firulete--garabato::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--color, var(--oro-300));
    border-color: var(--color, var(--oro-300)) transparent transparent var(--color, var(--oro-300));
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: firulete-garabato-morf var(--duracion, 14s) var(--retraso, 0s) ease-in-out infinite;
}
@keyframes firulete-garabato-morf {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); opacity: 0.20; }
    33%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(120deg); opacity: 0.45; }
    66%      { border-radius: 50% 50% 60% 30% / 30% 70% 40% 70%; transform: rotate(240deg); opacity: 0.35; }
}

/* ──────── 8. CONSTELACIÓN · 4 puntitos titilando en grupo ──────── */
.firulete--constelacion {
    width: calc(var(--escala, 1) * 100px);
    height: calc(var(--escala, 1) * 80px);
    transform: translate(-50%, -50%);
    opacity: 0.5;
}
.firulete--constelacion::before,
.firulete--constelacion::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color, var(--oro-300));
    color: var(--color, var(--oro-300));
    box-shadow:
        0 0 8px currentColor,
        45px -20px 0 0 var(--color, var(--oro-300)),
        -30px 35px 0 0 var(--color, var(--oro-300)),
        50px 30px 0 0 var(--color, var(--oro-300));
    animation: firulete-constelacion-titilar var(--duracion, 6s) var(--retraso, 0s) ease-in-out infinite;
    top: 30%;
    left: 30%;
}
.firulete--constelacion::after {
    animation-delay: calc(var(--retraso, 0s) + 1s);
    top: 60%;
    left: 60%;
    transform: scale(0.7);
}
@keyframes firulete-constelacion-titilar {
    0%, 100% { opacity: 0.20; }
    50%      { opacity: 0.80; }
}

/* Variantes de color (las setea el JS via data-color) */
.firulete[data-color="oro"]    { --color: var(--oro-300); }
.firulete[data-color="bosque"] { --color: var(--bosque-400); }
.firulete[data-color="papel"]  { --color: var(--papel-2); }
.firulete[data-color="ash"]    { --color: var(--ash); }

/* En slides oscuras, "papel" se vuelve blanco suave */
body.theme-dark .firulete[data-color="papel"] { --color: rgba(255, 255, 255, 0.5); }

/* Reduced motion: cortar todas las animaciones */
@media (prefers-reduced-motion: reduce) {
    .firulete,
    .firulete::before,
    .firulete::after { animation: none !important; }
}