/* ==========================================================================
   ÁRBOL DEL PROBLEMA - PRESENTACIÓN INTERACTIVA TIPO GENIALLY
   Institución Educativa Bilingüe Awá Técnico Agroindustrial Pianulpi
   Diseño UX/UI Premium: Paleta Natural, Tipografía Ampliada para Sustentación
   ========================================================================== */

:root {
    /* Paleta de Naturaleza & Territorio Awá */
    --color-primary-dark: #143d22;
    --color-primary: #1e5a32;
    --color-primary-light: #2d8249;
    --color-leaf-green: #4caf50;
    --color-leaf-soft: #81c784;
    --color-leaf-bg: #e8f5e9;

    /* Tonos Tierra y Madera */
    --color-wood-dark: #2c1a12;
    --color-wood: #4e342e;
    --color-wood-light: #795548;
    --color-earth-sand: #d7ccc8;

    /* Tonos Neutros Cálidos y Crema */
    --color-bg-base: #0f1c14;
    --color-bg-surface: #172a1e;
    --color-cream-light: #fbf9f4;
    --color-cream-card: #f5f0e6;
    --color-cream-border: #e3d9c8;

    /* Acentos Semánticos */
    --color-accent-gold: #e6b800;
    --color-gold-soft: #fff8e1;
    --color-accent-orange: #d84315;
    --color-accent-red: #c62828;
    --color-red-soft: #ffebee;
    
    /* Tipografías */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-ui: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

    /* Sombras & Efectos */
    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.16);
    --shadow-float: 0 15px 40px rgba(20, 61, 34, 0.25);
    --shadow-glow-green: 0 0 25px rgba(76, 175, 80, 0.4);
    --shadow-glow-gold: 0 0 25px rgba(230, 184, 0, 0.45);
    --shadow-glow-red: 0 0 25px rgba(198, 40, 40, 0.4);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-full: 9999px;

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   RESET Y BASE
   ========================================================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, #1a3824 0%, #0d1e14 60%, #08120c 100%);
    font-family: var(--font-body);
    font-size: 16px;
    color: #2c3e30;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

/* Canvas de Fondo (Partículas y Brisa) */
#natureCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
}

/* ==========================================================================
   BARRA SUPERIOR (GENIALLY TOP BAR)
   ========================================================================== */
.genially-topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: rgba(15, 28, 20, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
}

/* Barra de progreso de la presentación */
.presentation-progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
}

.presentation-progress-fill {
    height: 100%;
    width: 16.66%;
    background: linear-gradient(90deg, #4caf50, #81c784, #ffd54f);
    box-shadow: 0 0 10px rgba(129, 199, 132, 0.7);
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.institution-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(45, 130, 73, 0.25);
    border: 1px solid rgba(76, 175, 80, 0.35);
    padding: 5px 14px;
    border-radius: var(--radius-full);
    color: #a5d6a7;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.topbar-title {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    opacity: 0.9;
    display: none;
}

@media (min-width: 950px) {
    .topbar-title { display: inline-block; }
}

/* Navegación Central */
.topbar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.28);
    padding: 5px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #b0bec5;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
}

.nav-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.nav-btn.active {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(45, 130, 73, 0.4);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    transform: scale(1.06);
}

/* ==========================================================================
   ESCENARIO DE PRESENTACIÓN (SLIDES CONTAINER)
   ========================================================================== */
.presentation-stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding-top: 64px;
    padding-bottom: 54px;
    z-index: 10;
    overflow: hidden;
}

.slide-section {
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    height: calc(100vh - 118px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.96) translateY(15px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.45s;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-section.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: scale(1) translateX(0) translateY(0);
}

/* Transiciones de Diapositivas tipo Deck Presentación */
.slide-section.slide-out-left {
    transform: translateX(-120px) scale(0.94);
    opacity: 0;
}

.slide-section.slide-out-right {
    transform: translateX(120px) scale(0.94);
    opacity: 0;
}

.slide-section.slide-in-right {
    animation: deckSlideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-section.slide-in-left {
    animation: deckSlideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes deckSlideInRight {
    from {
        opacity: 0;
        transform: translateX(120px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes deckSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-120px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Scrollbar personalizado suave */
.slide-section::-webkit-scrollbar {
    width: 6px;
}
.slide-section::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}

/* ==========================================================================
   PANTALLA 1: PORTADA
   ========================================================================== */
.cover-container {
    position: relative;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-glow {
    position: absolute;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.16) 0%, rgba(20, 61, 34, 0) 70%);
    border-radius: 50%;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cover-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 40px;
    align-items: center;
    width: 100%;
}

.cover-content {
    background: rgba(251, 249, 244, 0.96);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding: 38px 44px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.38);
    position: relative;
}

.academic-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tag-dot {
    width: 9px;
    height: 9px;
    background: var(--color-leaf-green);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-leaf-green);
}

.institution-heading {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-wood-dark);
    margin-bottom: 12px;
}

.institution-heading span {
    color: var(--color-primary);
    font-weight: 700;
}

.grade-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #eef7f0;
    border: 1px solid #c8e6c9;
    color: #1b5e20;
    font-size: 0.98rem;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 18px;
    font-weight: 500;
}

.grade-pill strong {
    font-weight: 800;
}

.grade-divider {
    color: #81c784;
}

.cover-badge-topic {
    margin-bottom: 14px;
}

.topic-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #795548;
}

.topic-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 900;
    color: #b71c1c;
    letter-spacing: -0.5px;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(183, 28, 28, 0.15);
}

.project-title-box {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f7f3ec 100%);
    border-left: 6px solid var(--color-leaf-green);
    padding: 18px 24px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: 22px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.quote-symbol {
    position: absolute;
    font-family: var(--font-heading);
    font-size: 3rem;
    color: rgba(76, 175, 80, 0.3);
    line-height: 0;
    top: 18px;
    left: 8px;
}

.quote-close {
    top: auto;
    bottom: -6px;
    left: auto;
    right: 12px;
}

.project-title {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
    color: #222e24;
    padding-left: 14px;
}

.author-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f1f8f3;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    border: 1px solid #d0e7d5;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 3px 8px rgba(20, 61, 34, 0.3);
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-label {
    font-size: 0.85rem;
    color: #556b5a;
    font-weight: 500;
}

.author-name {
    font-family: var(--font-ui);
    font-size: 1.15rem;
    font-weight: 800;
    color: #143d22;
}

.cover-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-primary-explore {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
    color: #ffffff;
    border: none;
    padding: 16px 34px;
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(27, 94, 32, 0.45);
    transition: var(--transition-smooth);
}

.btn-primary-explore:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 36px rgba(27, 94, 32, 0.55);
    background: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
}

.pulse-animation {
    animation: explorePulse 2.5s infinite;
}

@keyframes explorePulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
    70% { box-shadow: 0 0 0 18px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.action-hint {
    font-size: 0.92rem;
    color: #55725e;
    font-weight: 600;
}

/* Stack de imágenes de portada */
.cover-visual {
    position: relative;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-card-stack {
    position: relative;
    width: 330px;
    height: 410px;
}

.stack-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    border: 4px solid #ffffff;
    transition: var(--transition-bounce);
}

.stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-back-2 {
    transform: rotate(10deg) translate(25px, 15px);
    opacity: 0.7;
    z-index: 1;
}

.card-back-1 {
    transform: rotate(-6deg) translate(-20px, 10px);
    opacity: 0.85;
    z-index: 2;
}

.card-main {
    transform: rotate(0deg);
    z-index: 3;
}

.card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(15, 28, 20, 0.92));
    color: #ffffff;
    padding: 22px 18px 16px;
}

.caption-tag {
    font-size: 0.82rem;
    text-transform: uppercase;
    color: #a5d6a7;
    font-weight: 800;
}

.card-caption h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
}

.floating-pill {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 10px 18px;
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 800;
    color: #1b5e20;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.95);
    animation: floatingPill 4s ease-in-out infinite alternate;
}

.pill-1 { top: 25px; left: -20px; animation-delay: 0s; }
.pill-2 { bottom: 75px; right: -20px; animation-delay: 1.2s; color: #b71c1c; }
.pill-3 { top: 75px; right: -15px; animation-delay: 2.4s; color: #e65100; }

@keyframes floatingPill {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-12px) rotate(2deg); }
}


/* ==========================================================================
   PANTALLA 2: ÁRBOL DEL PROBLEMA INTERACTIVO
   ========================================================================== */
.tree-scene-container {
    width: 100%;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.scene-header {
    text-align: center;
    margin-bottom: 6px;
}

.scene-eyebrow {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #81c784;
}

.scene-main-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.instruction-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 6px 20px;
    border-radius: var(--radius-full);
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 700;
    margin-top: 6px;
    animation: gentleGlow 3s infinite alternate;
}

@keyframes gentleGlow {
    0% { border-color: rgba(255, 255, 255, 0.25); }
    100% { border-color: rgba(129, 199, 132, 0.7); box-shadow: 0 0 18px rgba(129, 199, 132, 0.4); }
}

/* Lienzo del Árbol */
.tree-canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: 950px;
    height: 62vh;
    min-height: 420px;
    max-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.master-tree-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efectos en partes del SVG */
.svg-tree-part {
    cursor: pointer;
    transition: all 0.4s ease;
}

.svg-tree-part:hover {
    filter: brightness(1.18) drop-shadow(0 0 15px rgba(255, 255, 255, 0.45));
}

.trunk-core-pulse {
    animation: corePulse 2s ease-in-out infinite alternate;
}

@keyframes corePulse {
    0% { opacity: 0.15; }
    100% { opacity: 0.38; fill: #e53935; }
}

.root-node-glow {
    animation: rootPulse 1.8s infinite alternate;
}

@keyframes rootPulse {
    0% { r: 5; opacity: 0.5; }
    100% { r: 9; opacity: 1; filter: drop-shadow(0 0 8px #8bc34a); }
}

/* ZONAS INTERACTIVAS FLOTANTES (HOTSPOTS) */
.tree-interactive-zone {
    position: absolute;
    z-index: 20;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tree-interactive-zone:hover {
    transform: scale(1.08);
}

/* Posiciones de las 3 zonas */
.zone-effects {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.zone-effects:hover {
    transform: translateX(-50%) scale(1.08);
}

.zone-problem {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.zone-problem:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.zone-causes {
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
}

.zone-causes:hover {
    transform: translateX(-50%) scale(1.08);
}

/* Tarjeta / Hotspot Genially */
.zone-hotspot {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border: 2.5px solid rgba(255, 255, 255, 0.9);
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.38);
    transition: all 0.3s ease;
    min-width: 320px;
}

.zone-hotspot:hover {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.48);
    border-color: #ffffff;
}

.hotspot-emoji {
    font-size: 2.2rem;
}

.hotspot-content {
    display: flex;
    flex-direction: column;
}

.hotspot-tag {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #795548;
}

.hotspot-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    color: #143d22;
}

.hotspot-desc {
    font-size: 0.92rem;
    color: #4a5e4f;
    margin-top: 3px;
    font-weight: 500;
}

.hotspot-arrow {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--color-primary);
    background: #eef7f0;
    padding: 8px 14px;
    border-radius: var(--radius-full);
}

/* Variaciones de Hotspots */
.gold-ring {
    border-color: #ffcdd2;
    background: rgba(255, 245, 245, 0.97);
}
.gold-ring .hotspot-tag { color: #c62828; }
.gold-ring .hotspot-title { color: #b71c1c; font-size: 1.45rem; }
.gold-ring .hotspot-arrow { color: #c62828; background: #ffebee; }

.green-ring {
    border-color: #c8e6c9;
    background: rgba(245, 255, 247, 0.97);
}
.green-ring .hotspot-tag { color: #2e7d32; }
.green-ring .hotspot-title { color: #1b5e20; }
.green-ring .hotspot-arrow { color: #2e7d32; background: #e8f5e9; }

/* Barra Rápida Inferior */
.tree-quick-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
}

.quick-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--radius-full);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: var(--transition-fast);
}

.quick-nav-pill:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
}

.pill-gold {
    background: linear-gradient(135deg, rgba(230, 184, 0, 0.35), rgba(255, 143, 0, 0.25));
    border-color: rgba(255, 215, 64, 0.6);
    color: #fff9c4;
}

.pill-gold:hover {
    background: linear-gradient(135deg, rgba(230, 184, 0, 0.55), rgba(255, 143, 0, 0.45));
}


/* ==========================================================================
   PANTALLAS DE DETALLE (CAUSAS, PROBLEMA CENTRAL, EFECTOS)
   ========================================================================== */
.detail-scene-container {
    width: 100%;
    max-width: 1300px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.detail-header {
    text-align: center;
    position: relative;
    margin-bottom: 14px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 6px 18px;
    border-radius: var(--radius-full);
    margin-bottom: 8px;
}

.badge-green { background: #2e7d32; color: #e8f5e9; }
.badge-red { background: #c62828; color: #ffebee; }
.badge-orange { background: #e65100; color: #fff3e0; }
.badge-gold { background: #f57f17; color: #fffde7; }

.detail-title {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    line-height: 1.1;
}

.detail-subtitle {
    font-size: 1.1rem;
    color: #c8e6c9;
    max-width: 800px;
    margin: 6px auto 0;
    font-weight: 500;
}

/* Botón Volver al Árbol en cabecera */
.btn-return-tree {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: var(--radius-full);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: var(--transition-fast);
}

.btn-return-tree:hover {
    background: #ffffff;
    color: #143d22;
    transform: translateY(-50%) scale(1.04);
}

.btn-return-icon {
    display: inline-block;
    transform: rotate(180deg);
}

/* Grid de Tarjetas (Causas / Efectos) */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: auto 0;
    align-items: stretch;
}

.detail-card {
    background: rgba(251, 249, 244, 0.97);
    backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(30px);
}

/* Animación de entrada de las tarjetas */
.slide-section.active .detail-card {
    animation: cardEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--card-delay, 0.1s);
}

@keyframes cardEntrance {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.42);
}

.cause-card:hover {
    border-color: #81c784;
}

.effect-card:hover {
    border-color: #ffb74d;
}

.card-number-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #2e7d32;
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    z-index: 2;
}

.effect-badge {
    background: #e65100;
}

.card-visual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 8px;
}

.card-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.effect-circle {
    background: #fff3e0;
    color: #e65100;
}

.card-image-thumb {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    border: 2px solid #ffffff;
}

.card-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-image-thumb:hover img {
    transform: scale(1.15);
}

.zoom-badge {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 0.72rem;
    padding: 2px 5px;
    border-radius: 4px;
}

.card-body {
    padding: 12px 22px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-type-tag {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 800;
    color: #795548;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.card-main-text {
    font-family: var(--font-heading);
    font-size: 1.32rem;
    font-weight: 900;
    line-height: 1.35;
    color: #15291b;
    margin-bottom: 12px;
}

.card-context-note {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #425245;
    margin-top: auto;
    font-weight: 500;
}

.card-footer-anchor {
    background: #eef5ef;
    padding: 10px 22px;
    border-top: 1px solid #e0ede2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.effect-anchor {
    background: #fdf5ed;
    border-top-color: #fae4cf;
}

.anchor-line {
    width: 14px;
    height: 4px;
    background: #2e7d32;
    border-radius: 2px;
}

.effect-anchor .anchor-line {
    background: #e65100;
}

.anchor-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #3b5a43;
    font-family: var(--font-ui);
}


/* ==========================================================================
   PANTALLA 4: SHOWCASE HERO PROBLEMA CENTRAL
   ========================================================================== */
.problem-hero-layout {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 32px;
    align-items: center;
    margin: auto 0;
}

.problem-main-card {
    position: relative;
    background: linear-gradient(145deg, #fffafa 0%, #fff1f0 100%);
    border-radius: var(--radius-lg);
    padding: 38px 42px;
    border: 2px solid #ffcdd2;
    box-shadow: 0 22px 55px rgba(198, 40, 40, 0.28);
    overflow: hidden;
}

.problem-card-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(229, 57, 53, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.problem-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.problem-pulse-badge {
    background: #c62828;
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    box-shadow: 0 0 14px rgba(198, 40, 40, 0.55);
}

.problem-target-label {
    font-size: 0.95rem;
    color: #8c2a2a;
    font-weight: 700;
}

.problem-body {
    position: relative;
    padding: 12px 0;
    margin-bottom: 22px;
}

.quote-accent {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: rgba(198, 40, 40, 0.25);
    line-height: 0.5;
}

.quote-right {
    text-align: right;
    margin-top: 12px;
}

.problem-statement-text {
    font-family: var(--font-heading);
    font-size: 1.95rem;
    font-weight: 900;
    line-height: 1.35;
    color: #b71c1c;
    text-align: center;
    text-shadow: 0 2px 8px rgba(183, 28, 28, 0.12);
}

.problem-context-pillars {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    background: rgba(255, 255, 255, 0.85);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    border: 1px solid #ffebee;
}

.pillar-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.pillar-icon {
    font-size: 1.6rem;
}

.pillar-text strong {
    display: block;
    font-size: 0.92rem;
    color: #333333;
    font-family: var(--font-ui);
    font-weight: 800;
}

.pillar-text span {
    font-size: 0.88rem;
    color: #555555;
    line-height: 1.35;
    font-weight: 500;
}

.pillar-divider {
    width: 1px;
    height: 45px;
    background: #e0e0e0;
}

/* Panel Fotográfico de Evidencias */
.problem-visual-panel {
    background: rgba(251, 249, 244, 0.95);
    backdrop-filter: blur(14px);
    border-radius: var(--radius-lg);
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
}

.visual-panel-title {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 800;
    color: #143d22;
    margin-bottom: 16px;
}

.dual-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.evidence-photo-box {
    position: relative;
    height: 185px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    border: 2px solid #ffffff;
}

.evidence-photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.evidence-photo-box:hover img {
    transform: scale(1.1);
}

.evidence-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
    color: #ffffff;
    font-size: 0.85rem;
    padding: 12px 10px 8px;
    text-align: center;
    font-weight: 700;
}


/* ==========================================================================
   PANTALLA 6: SÍNTESIS INTEGRADA & GALERÍA
   ========================================================================== */
.summary-scene-container {
    width: 100%;
    max-width: 1300px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.summary-header {
    text-align: center;
    margin-bottom: 12px;
}

.summary-title {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 900;
    color: #ffffff;
}

.summary-subtitle {
    font-size: 1.05rem;
    color: #e0f2f1;
    font-weight: 500;
}

.summary-content-grid {
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 26px;
    margin: auto 0;
}

.summary-schema-box, .summary-gallery-box {
    background: rgba(251, 249, 244, 0.97);
    backdrop-filter: blur(14px);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
}

.box-heading {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: #143d22;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.schema-level {
    border-radius: var(--radius-md);
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
}

.level-effects { background: #fff8f0; border-color: #ffe0b2; }
.level-problem { background: #fff5f5; border-color: #ffcdd2; }
.level-causes { background: #f3faf4; border-color: #c8e6c9; }

.level-tag {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.tag-orange { background: #e65100; color: #ffffff; }
.tag-red { background: #c62828; color: #ffffff; }
.tag-green { background: #2e7d32; color: #ffffff; }

.schema-list {
    list-style: none;
    margin-top: 8px;
}

.schema-list li {
    font-size: 0.95rem;
    line-height: 1.45;
    color: #222e24;
    margin-bottom: 6px;
}

.problem-highlight-box {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 900;
    color: #b71c1c;
    line-height: 1.35;
    margin-top: 8px;
    text-align: center;
}

.schema-connector {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #795548;
    font-family: var(--font-ui);
    padding: 4px 0;
}

/* Galería de 9 fotos */
.gallery-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.gallery-counter {
    background: #e8f5e9;
    color: #1b5e20;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.gallery-thumbnails-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.gallery-item {
    position: relative;
    height: 70px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid #d7ccc8;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.15);
}

.item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 61, 34, 0.65);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-item:hover .item-overlay {
    opacity: 1;
}

.original-schema-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #efebe9 0%, #e0d7d3 100%);
    border: 1.5px solid #bcaaa4;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.original-schema-trigger:hover {
    transform: translateY(-2px);
    background: #e6deda;
}

.trigger-text {
    display: flex;
    flex-direction: column;
}

.trigger-text strong {
    font-size: 0.92rem;
    color: #3e2723;
    font-weight: 800;
}

.trigger-text span {
    font-size: 0.82rem;
    color: #5d4037;
    font-weight: 500;
}

.trigger-badge {
    background: #4e342e;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: var(--radius-full);
}

/* Footer de la Síntesis */
.summary-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 28, 20, 0.75);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8f5e9;
    font-size: 0.92rem;
}

.footer-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.footer-actions {
    display: flex;
    gap: 12px;
}


/* ==========================================================================
   BOTONES DE NAVEGACIÓN Y PASOS EN PANTALLAS INTERNAS
   ========================================================================== */
.detail-navigation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 28, 20, 0.65);
    backdrop-filter: blur(10px);
    padding: 10px 22px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 12px;
}

.nav-step-btn {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
}

.nav-step-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

.nav-step-btn.primary {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
    border-color: #81c784;
}

.nav-step-btn.primary:hover {
    background: linear-gradient(135deg, #388e3c, #2e7d32);
    box-shadow: 0 0 18px rgba(76, 175, 80, 0.5);
}

.step-indicator-dots {
    display: flex;
    gap: 10px;
}

.step-indicator-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transition: var(--transition-fast);
}

.step-indicator-dots .dot.active {
    background: #81c784;
    box-shadow: 0 0 12px #81c784;
    transform: scale(1.25);
}


/* ==========================================================================
   BARRA DE NAVEGACIÓN INFERIOR (GENIALLY SLIDE CONTROLS)
   ========================================================================== */
.genially-bottom-controls {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(15, 28, 20, 0.88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 5px 16px;
    border-radius: var(--radius-full);
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.slide-nav-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.slide-nav-arrow:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.1);
}

.slide-counter-pill {
    color: #e0e0e0;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1px;
}

#currentSlideNum {
    color: #81c784;
}


/* ==========================================================================
   MODAL DE FOTOGRAFÍAS & DIAGRAMA ORIGINAL (Z-INDEX 3000 PARA QUEDAR SIEMPRE POR ENCIMA)
   ========================================================================== */
.photo-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 3000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 24px;
}

.photo-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.photo-modal-content {
    position: relative;
    max-width: 950px;
    width: 100%;
    background: #172a1e;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 3005;
}

.photo-modal-backdrop.active .photo-modal-content {
    transform: scale(1);
}

.photo-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: rgba(0, 0, 0, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 2.2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3010;
    transition: var(--transition-fast);
}

.photo-modal-close:hover {
    background: #c62828;
    border-color: #c62828;
    transform: scale(1.1);
}

.photo-modal-frame {
    width: 100%;
    max-height: 72vh;
    overflow: hidden;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-modal-frame img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
}

.photo-modal-caption {
    padding: 18px 24px;
    color: #e8f5e9;
    font-size: 1.05rem;
    font-weight: 600;
    background: #172a1e;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Estilos de Diapositiva 6: Causalidad y Galería Expandibles */
.box-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.box-expand-pill {
    background: #e8f5e9;
    color: #1b5e20;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px solid #c8e6c9;
}

.summary-schema-box {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.summary-schema-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
    border-color: #81c784;
}

.schema-level {
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.schema-level:hover {
    transform: scale(1.02);
}

.level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-expand-hint {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}


.card-expand-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(20, 61, 34, 0.08);
    color: var(--color-primary);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    border-top: 1px dashed rgba(46, 125, 50, 0.25);
    transition: var(--transition-fast);
}

.detail-card {
    cursor: pointer;
}

.detail-card:hover .card-expand-prompt {
    background: var(--color-primary);
    color: #ffffff;
}

.expand-prompt-center {
    margin-top: 14px;
    border-radius: var(--radius-sm);
    border-top: none;
    background: rgba(198, 40, 40, 0.1);
    color: #b71c1c;
}

.problem-main-card:hover .expand-prompt-center {
    background: #b71c1c;
    color: #ffffff;
}

/* ==========================================================================
   MODAL / DIAPOSITIVA DE TARJETA EN PANTALLA COMPLETA (SPOTLIGHT MODE)
   ========================================================================== */
.card-spotlight-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 18, 12, 0.94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.4s;
    padding: 24px;
}

.card-spotlight-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.card-spotlight-container {
    position: relative;
    max-width: 1220px;
    width: 100%;
    max-height: 90vh;
    background: rgba(251, 249, 244, 0.98);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-spotlight-backdrop.active .card-spotlight-container {
    transform: scale(1) translateY(0);
}

/* Barra superior del spotlight */
.spotlight-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: #172a1e;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.spotlight-badge {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    background: var(--color-primary-light);
    color: #ffffff;
    padding: 4px 16px;
    border-radius: var(--radius-full);
}

.spotlight-badge.badge-effects {
    background: #e65100;
}

.spotlight-badge.badge-problem {
    background: #c62828;
}

.spotlight-counter-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spotlight-counter-label {
    font-size: 0.85rem;
    color: #a5d6a7;
    font-weight: 500;
}

.spotlight-counter {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

.spotlight-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
}

.spotlight-close-btn:hover {
    background: #c62828;
    border-color: #c62828;
    transform: scale(1.05);
}

/* Cuerpo de la Diapositiva Ampliada */
.spotlight-body {
    display: grid;
    grid-template-columns: 1.25fr 0.95fr;
    gap: 34px;
    padding: 30px 36px;
    align-items: center;
    overflow-y: auto;
    flex: 1;
}

.spotlight-text-col {
    display: flex;
    flex-direction: column;
}

.spotlight-category-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.spotlight-category-icon {
    font-size: 1.4rem;
}

.spotlight-category {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 800;
    color: #795548;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.spotlight-title {
    font-family: var(--font-heading);
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 1.28;
    color: #15291b;
    margin-bottom: 18px;
}

.spotlight-desc-box {
    background: #f0f7f2;
    border-left: 5px solid var(--color-primary);
    padding: 16px 20px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: 20px;
}

.desc-box-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.spotlight-desc {
    font-size: 1.12rem;
    line-height: 1.55;
    color: #2e3830;
    font-weight: 500;
}

.spotlight-anchor-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f5e9;
    color: #1b5e20;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    width: fit-content;
    border: 1px solid #c8e6c9;
}

/* Columna multimedia de la diapositiva ampliada */
.spotlight-media-col {
    display: flex;
    justify-content: center;
}

.spotlight-image-container {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 340px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    border: 3px solid #ffffff;
    cursor: pointer;
}

.spotlight-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.spotlight-image-container:hover img {
    transform: scale(1.08);
}

.spotlight-img-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
}

.spotlight-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(15, 28, 20, 0.92));
    color: #ffffff;
    font-size: 0.88rem;
    padding: 20px 16px 10px;
    font-weight: 600;
    text-align: center;
}

/* Barra de navegación inferior del spotlight */
.spotlight-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: #eef5ef;
    border-top: 1px solid #dce8df;
}

.spotlight-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid #c8d8cc;
    color: #143d22;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 8px 22px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
}

.spotlight-nav-btn:hover {
    background: #e0eee2;
    border-color: #a5d6a7;
    transform: translateY(-2px);
}

.spotlight-nav-btn.primary {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(30, 90, 50, 0.35);
}

.spotlight-nav-btn.primary:hover {
    background: linear-gradient(135deg, #388e3c, #1b5e20);
    box-shadow: 0 6px 20px rgba(30, 90, 50, 0.45);
}

.spotlight-dots {
    display: flex;
    gap: 10px;
}

.spot-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c8d8cc;
    cursor: pointer;
    transition: var(--transition-fast);
}

.spot-dot.active {
    background: var(--color-primary);
    transform: scale(1.3);
    box-shadow: 0 0 10px var(--color-primary);
}

.spotlight-keyboard-hint {
    text-align: center;
    background: #172a1e;
    color: #c8e6c9;
    font-size: 0.8rem;
    padding: 5px;
    font-family: var(--font-ui);
    font-weight: 600;
}

/* ==========================================================================
   SISTEMA RESPONSIVO COMPLETO
   Estrategia: Media queries aditivas que nunca tocan reglas de escritorio.
   Breakpoints: 1024px (tablet), 768px (móvil), 480px (móvil pequeño)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET: 1024px y menor
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Topbar: reducir labels en tablets */
    .nav-btn {
        font-size: 0.85rem;
        padding: 5px 10px;
        gap: 4px;
    }

    /* Portada: reducir a 2 columnas balanceadas */
    .cover-grid {
        grid-template-columns: 1fr 0.65fr;
        gap: 24px;
    }

    .cover-content {
        padding: 26px 30px;
    }

    .topic-title {
        font-size: 2.1rem;
    }

    .project-title {
        font-size: 1.05rem;
    }

    /* Árbol: reducir hotspot min-width */
    .zone-hotspot {
        min-width: 260px;
        padding: 10px 18px;
    }

    .hotspot-title {
        font-size: 1.18rem;
    }

    /* Cards: 2 columnas en tablet */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* Problema: reducir tamaño del texto */
    .problem-statement-text {
        font-size: 1.65rem;
    }

    .problem-hero-layout {
        gap: 22px;
    }

    /* Síntesis: columnas un poco más equilibradas */
    .summary-content-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    /* Spotlight: 1 columna desde tablet */
    .spotlight-body {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px 28px;
    }

    .spotlight-title {
        font-size: 1.75rem;
    }

    .spotlight-desc {
        font-size: 1.02rem;
    }

    .spotlight-image-container {
        height: 240px;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   MÓVIL: 768px y menor
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* ── TOPBAR MÓVIL ─────────────────────────────────────────── */
    .genially-topbar {
        height: 54px;
        padding: 0 12px;
        gap: 8px;
    }

    /* Ajustar slide section al nuevo topbar de 54px */
    .slide-section {
        top: 54px;
        height: calc(100vh - 54px - 50px);
    }

    /* Ocultar badge de institución completo en móvil */
    .institution-badge {
        display: none;
    }

    /* Ocultar título del topbar en móvil */
    .topbar-title {
        display: none;
    }

    /* Nav central: scroll horizontal, ocultar labels de texto */
    .topbar-nav {
        flex: 1;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
        padding: 4px 6px;
        justify-content: flex-start;
    }

    .topbar-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-btn {
        scroll-snap-align: start;
        flex-shrink: 0;
        padding: 6px 10px;
        gap: 4px;
        font-size: 0;   /* ocultar texto del label */
        min-width: 40px;
        min-height: 40px;
        justify-content: center;
    }

    .nav-btn .nav-icon {
        font-size: 1.25rem;
    }

    /* Botones de acción: sólo uno visible en móvil */
    #btnAudioToggle {
        display: none;
    }

    .action-btn {
        width: 36px;
        height: 36px;
    }

    /* ── PORTADA MÓVIL ────────────────────────────────────────── */
    .cover-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Ocultar pila de fotos decorativa en móvil */
    .cover-visual {
        display: none;
    }

    .cover-container {
        padding: 0 4px;
        align-items: flex-start;
    }

    .cover-content {
        padding: 20px 20px 22px;
        border-radius: var(--radius-md);
    }

    .academic-tag {
        font-size: 0.78rem;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .institution-heading {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    .grade-pill {
        font-size: 0.82rem;
        gap: 6px;
        padding: 5px 12px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .grade-location {
        display: none;   /* solo mostrar Grado en móvil */
    }

    .topic-title {
        font-size: 1.8rem;
    }

    .project-title-box {
        padding: 14px 16px;
        margin-bottom: 14px;
    }

    .project-title {
        font-size: 0.98rem;
        padding-left: 10px;
        line-height: 1.45;
    }

    .author-card {
        padding: 8px 12px;
        gap: 10px;
        margin-bottom: 16px;
    }

    .author-name {
        font-size: 1rem;
    }

    .cover-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .btn-primary-explore {
        padding: 13px 26px;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }

    .action-hint {
        font-size: 0.82rem;
    }

    /* ── ÁRBOL INTERACTIVO MÓVIL ──────────────────────────────── */
    .tree-scene-container {
        padding: 0 4px;
        gap: 6px;
    }

    .scene-main-title {
        font-size: 1.55rem;
    }

    .scene-eyebrow {
        font-size: 0.78rem;
        letter-spacing: 1px;
    }

    .instruction-banner {
        font-size: 0.88rem;
        padding: 5px 14px;
    }

    .tree-canvas-wrapper {
        height: 42vh;
        min-height: 260px;
    }

    /* Hotspots compactados para móvil */
    .zone-hotspot {
        min-width: 200px;
        padding: 8px 14px;
        gap: 10px;
        border-radius: var(--radius-md);
    }

    .hotspot-emoji {
        font-size: 1.6rem;
    }

    .hotspot-title {
        font-size: 1rem;
    }

    .hotspot-desc {
        display: none;  /* ocultar descripción para ahorrar espacio */
    }

    .hotspot-arrow {
        font-size: 0.82rem;
        padding: 5px 10px;
        white-space: nowrap;
    }

    .tree-quick-bar {
        gap: 8px;
        margin-top: 6px;
    }

    .quick-nav-pill {
        font-size: 0.85rem;
        padding: 8px 14px;
        gap: 6px;
    }

    /* ── DIAPOSITIVAS DE DETALLE (CAUSAS / EFECTOS) MÓVIL ─────── */
    .detail-scene-container {
        gap: 12px;
        padding: 0 2px;
    }

    .detail-header {
        margin-bottom: 8px;
        position: static;   /* quitar relative para btn-return */
    }

    /* Quitar posición absoluta al botón volver en móvil */
    .btn-return-tree {
        position: static;
        transform: none;
        margin-top: 8px;
        display: inline-flex;
        font-size: 0.85rem;
        padding: 7px 16px;
    }

    .detail-title {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .detail-subtitle {
        font-size: 0.95rem;
    }

    /* Cards: 1 columna en móvil */
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 0;
    }

    /* Hacer las cards horizontales en móvil para mejor uso del espacio */
    .detail-card {
        flex-direction: row;
        align-items: stretch;
        min-height: auto;
    }

    .card-visual-header {
        flex-direction: row;
        padding: 14px 16px 6px;
    }

    .card-body {
        padding: 8px 16px 14px;
    }

    .card-main-text {
        font-size: 1.12rem;
        margin-bottom: 8px;
    }

    .card-context-note {
        font-size: 0.88rem;
    }

    .card-expand-prompt {
        font-size: 0.78rem;
        padding: 5px 10px;
    }

    /* Botones de navegación entre diapositivas */
    .detail-navigation-bar {
        padding: 8px 14px;
        gap: 8px;
    }

    .nav-step-btn {
        font-size: 0.82rem;
        padding: 7px 14px;
    }

    /* ── PROBLEMA CENTRAL MÓVIL ───────────────────────────────── */
    .problem-hero-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .problem-main-card {
        padding: 22px 22px;
    }

    .problem-statement-text {
        font-size: 1.28rem;
        line-height: 1.4;
    }

    .problem-context-pillars {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Ocultar divisores verticales entre pillars */
    .pillar-divider {
        display: none;
    }

    .problem-visual-panel {
        display: none;  /* priorizar el texto del problema en móvil */
    }

    .problem-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
    }

    .quote-accent {
        font-size: 2.5rem;
    }

    /* ── SÍNTESIS (SLIDE 6) MÓVIL ─────────────────────────────── */
    .summary-content-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .summary-title {
        font-size: 1.55rem;
    }

    .summary-subtitle {
        font-size: 0.92rem;
    }

    .summary-schema-box,
    .summary-gallery-box {
        padding: 16px 18px;
    }

    .box-heading {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    /* Ocultar pill de expansión en móvil para no sobrecargar */
    .box-expand-pill {
        display: none;
    }

    .schema-list li {
        font-size: 0.9rem;
    }

    .problem-highlight-box {
        font-size: 1rem;
    }

    /* Footer síntesis: apilado en móvil */
    .summary-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 12px 16px;
    }

    .footer-meta {
        font-size: 0.82rem;
    }

    .footer-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ── BARRA INFERIOR MÓVIL ─────────────────────────────────── */
    .genially-bottom-controls {
        gap: 10px;
        padding: 4px 14px;
    }

    .slide-nav-arrow {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .slide-counter-pill {
        font-size: 0.88rem;
    }

    /* ── MODAL FOTOGRÁFICO MÓVIL ──────────────────────────────── */
    .photo-modal-backdrop {
        padding: 12px;
    }

    .photo-modal-content {
        border-radius: var(--radius-md);
    }

    .photo-modal-frame {
        max-height: 60vh;
    }

    .photo-modal-frame img {
        max-height: 60vh;
    }

    .photo-modal-caption {
        font-size: 0.92rem;
        padding: 12px 16px;
    }

    /* ── SPOTLIGHT MODAL MÓVIL ────────────────────────────────── */
    .card-spotlight-backdrop {
        padding: 10px 8px;
        align-items: flex-start;
        padding-top: 60px;
    }

    .card-spotlight-container {
        max-height: calc(100vh - 70px);
        border-radius: var(--radius-md);
    }

    /* Topbar del spotlight compacto */
    .spotlight-topbar {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .spotlight-badge {
        font-size: 0.78rem;
        padding: 3px 10px;
        letter-spacing: 0.5px;
    }

    .spotlight-counter-label {
        display: none;
    }

    .spotlight-counter {
        font-size: 0.88rem;
    }

    .spotlight-close-btn {
        padding: 5px 12px;
        font-size: 0.82rem;
        gap: 5px;
    }

    .close-text {
        display: none;
    }

    .close-icon::before {
        content: "✕ Cerrar";
        font-size: 0.82rem;
    }

    /* Cuerpo del spotlight: 1 columna */
    .spotlight-body {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
        overflow-y: auto;
    }

    .spotlight-category {
        font-size: 0.82rem;
    }

    .spotlight-title {
        font-size: 1.28rem;
        margin-bottom: 12px;
    }

    .spotlight-desc-box {
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .spotlight-desc {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .spotlight-anchor-tag {
        font-size: 0.82rem;
        padding: 5px 12px;
    }

    /* Imagen del spotlight: más compacta en móvil */
    .spotlight-image-container {
        height: 185px;
        max-width: 100%;
    }

    /* Barra de navegación inferior del spotlight */
    .spotlight-bottom-nav {
        padding: 10px 16px;
    }

    .spotlight-nav-btn {
        font-size: 0.85rem;
        padding: 8px 16px;
        min-height: 44px;
    }

    /* Ocultar hint de teclado en móvil (no tienen teclado físico) */
    .spotlight-keyboard-hint {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   MÓVIL PEQUEÑO: 480px y menor
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

    /* Topbar aún más compacto */
    .genially-topbar {
        height: 50px;
    }

    .slide-section {
        top: 50px;
        height: calc(100vh - 50px - 46px);
    }

    .nav-btn {
        min-width: 36px;
        min-height: 36px;
    }

    .nav-btn .nav-icon {
        font-size: 1.1rem;
    }

    /* Portada */
    .topic-title {
        font-size: 1.55rem;
    }

    .institution-heading {
        font-size: 1.05rem;
    }

    .project-title {
        font-size: 0.92rem;
    }

    .btn-primary-explore {
        font-size: 0.95rem;
        padding: 12px 20px;
    }

    /* Árbol */
    .scene-main-title {
        font-size: 1.3rem;
    }

    .tree-canvas-wrapper {
        height: 36vh;
        min-height: 220px;
    }

    .zone-hotspot {
        min-width: 170px;
        padding: 7px 12px;
        gap: 8px;
    }

    .hotspot-emoji {
        font-size: 1.35rem;
    }

    .hotspot-title {
        font-size: 0.92rem;
    }

    .hotspot-arrow {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    /* Cards */
    .detail-title {
        font-size: 1.3rem;
    }

    .card-main-text {
        font-size: 1rem;
    }

    .card-context-note {
        font-size: 0.82rem;
    }

    /* Problema */
    .problem-statement-text {
        font-size: 1.1rem;
    }

    .problem-main-card {
        padding: 16px 16px;
    }

    /* Síntesis */
    .summary-title {
        font-size: 1.3rem;
    }

    .schema-list li {
        font-size: 0.85rem;
    }

    /* Spotlight */
    .spotlight-title {
        font-size: 1.1rem;
    }

    .spotlight-desc {
        font-size: 0.88rem;
    }

    .spotlight-image-container {
        height: 155px;
    }

    .spotlight-nav-btn {
        font-size: 0.78rem;
        padding: 7px 12px;
    }

    /* Barra inferior */
    .genially-bottom-controls {
        gap: 8px;
        padding: 3px 12px;
    }

    .slide-nav-arrow {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}