/* ============================================
   WARJIRO - RESPONSIVE STYLES
   Mobile-First Responsive Design
   ============================================ */

@media screen and (max-width: 768px) and (orientation: portrait) {
    .investigation-page-content {
        flex-direction: column;
    }

    #section-ar {
        flex-direction: column !important;
    }
}

/* ===========================================
           MOBILE PORTRAIT - COMPREHENSIVE FIX
           Video centering, larger buttons, investigation module
           =========================================== */
@media (max-width: 1024px) and (orientation: portrait) {

    /* === VIDEO CENTERING === */
    #section-center {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #section-center .video-wrapper {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-bottom: 80px !important;
        /* Space for controls + subtitles in portrait */
        box-sizing: border-box !important;
    }

    #section-center .video-wrapper video {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* === LARGER BUTTONS === */
    .share-button,
    .return-button {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.6rem !important;
        top: 15px !important;
    }

    .share-button {
        left: 15px !important;
    }

    .return-button {
        right: 15px !important;
    }

    /* === INVESTIGATION MODULE FIX === */
    #section-investigacion .content-box {
        padding: 70px 10px 20px 10px !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    /* Investigation pages - scrollable single column */
    .investigation-page-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.5rem !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 140px) !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Scale down text for mobile - more aggressive */
    .inv-title {
        font-size: 1.1rem !important;
    }

    .inv-subtitle {
        font-size: 0.95rem !important;
    }

    .inv-prose {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    .inv-kicker {
        font-size: 0.55rem !important;
        padding: 0.15rem 0.4rem !important;
    }

    /* Split layout becomes column */
    .inv-split-layout {
        flex-direction: column !important;
        gap: 0.5rem !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .inv-text-panel,
    .inv-visual-panel {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .inv-text-panel {
        padding: 0.5rem !important;
    }

    .inv-visual-panel {
        min-height: 100px !important;
        max-height: 180px !important;
        padding: 0.25rem !important;
    }

    /* Glass panels fit screen */
    .inv-glass-panel {
        max-width: 100% !important;
        padding: 0.5rem !important;
    }

    /* SLIDE 16: Override to match other slides width */
    #inv-page-16 .inv-glass-panel {
        max-width: calc(100vw - 160px) !important;
        width: calc(100vw - 160px) !important;
        margin: 0 auto !important;
    }

    /* Charts scale down aggressively */
    .glass-card-inner {
        max-height: 140px !important;
        overflow: hidden !important;
    }

    .chart-box {
        height: 100px !important;
        max-height: 100px !important;
    }

    /* Tailwind utility overrides for text sizes */
    .investigation-page .text-7xl {
        font-size: 1.5rem !important;
    }

    .investigation-page .text-6xl {
        font-size: 1.2rem !important;
    }

    .investigation-page .text-5xl {
        font-size: 1rem !important;
    }

    .investigation-page .text-4xl {
        font-size: 0.9rem !important;
    }

    .investigation-page .text-3xl {
        font-size: 0.8rem !important;
    }

    .investigation-page .text-2xl {
        font-size: 0.7rem !important;
    }

    .investigation-page .text-xl {
        font-size: 0.65rem !important;
    }

    .investigation-page .text-lg {
        font-size: 0.6rem !important;
    }

    .investigation-page .text-base {
        font-size: 0.55rem !important;
    }

    .investigation-page .text-sm {
        font-size: 0.5rem !important;
    }

    /* Big numbers reduced */
    .investigation-page .big-number {
        font-size: 1.5rem !important;
    }

    /* Grid layouts become single column */
    .investigation-page-content .grid {
        grid-template-columns: 1fr !important;
    }

    /* Navigation buttons */
    .inv-nav-btn {
        width: 36px !important;
        height: 36px !important;
    }

    /* Title overlay adjustment */
    #initial-title {
        font-size: 0.9rem !important;
        top: 8px !important;
    }

    /* Trailer controls - visible at bottom */
    #trailer-controls {
        bottom: 20px !important;
        padding: 8px 16px !important;
    }

    #trailer-controls button {
        font-size: 1.2rem !important;
    }
}

/* Mobile Landscape Enhancements - Widen Content Box */
@media (max-width: 1024px) and (orientation: landscape) {
    .content-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2vh 65px 1vh 65px !important;
        /* Matches button inset */
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    #section-investigacion .content-box {
        padding-top: 1vh !important;
    }

    /* Adjust inv-split-layout to fill the space */
    .inv-split-layout {
        width: 100% !important;
        height: 100% !important;
        border-radius: 12px !important;
        /* Keep radius for inner card */
    }

    /* Investigation Intro - Scrollable paragraph container */
    .inv-intro-scroll {
        max-height: 48vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
        padding: 0 16px 12px 16px !important;
        margin: 0 8px 4px 8px !important;
    }

    .inv-intro-scroll::-webkit-scrollbar {
        width: 4px !important;
    }

    .inv-intro-scroll::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .inv-intro-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 4px !important;
    }

    .inv-intro-scroll p {
        font-size: 8px !important;
        line-height: 1.45 !important;
        margin-bottom: 5px !important;
        color: rgba(255, 255, 255, 0.65) !important;
    }

    .inv-intro-scroll p:last-child {
        margin-bottom: 0 !important;
    }

    /* Etiquetas con tamaño uniforme */
    #section-investigacion .inv-intro-scroll~div span[class*="bg-"] {
        font-size: 6px !important;
        padding: 2px 4px !important;
    }
}

/* Archive layout for portrait only - landscape handled elsewhere */
@media (max-width: 1024px) and (orientation: portrait) {

    /* Ocultar navegación de investigación en portrait */
    .inv-nav-btn,
    #inv-page-indicator,
    #inv-progress-container,
    .inv-bottom-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Portrait blocker is now controlled by JavaScript */
    /* Archive module styles below */
    #section-archivo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #section-archivo .content-box {
        padding: 70px 10px 15px 10px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background: rgba(10, 10, 14, 0.98) !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .archive-layout-container {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        gap: 8px !important;
    }

    /* Fixed Info Panel at Top */
    .archive-info-panel {
        flex: 0 0 auto !important;
        max-height: 90px !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 10px !important;
        padding: 10px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .archive-info-content h3 {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
        color: white !important;
        font-family: 'Teko', sans-serif !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .archive-info-content p {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        max-height: 40px !important;
        overflow-y: auto !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.75) !important;
    }

    /* === SCROLLABLE GRID AREA === */
    .archive-grid-panel-wrapper {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 8px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 10px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    /* When PDF viewer is active, hide the grid */
    .archive-grid-panel-wrapper.with-viewer .archive-grid-panel {
        display: none !important;
    }

    .archive-grid-panel {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-auto-rows: min-content !important;
        gap: 6px !important;
        width: 100% !important;
        padding-bottom: 20px !important;
        align-content: start !important;
    }

    /* Section Headers */
    .archive-section-header {
        grid-column: 1 / -1 !important;
        margin: 4px 0 0 0 !important;
        padding-bottom: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    .archive-section-header h4 {
        font-size: 0.75rem !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ff4444 !important;
        font-family: 'Teko', sans-serif !important;
        text-transform: uppercase !important;
        line-height: 1.1 !important;
    }

    /* Thumbnails - FORCE VISIBILITY */
    .archive-thumbnail {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        aspect-ratio: 1/1 !important;
        width: 100% !important;
        min-height: 70px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    .archive-thumbnail a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .archive-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* PDF PREVIEW CARD STYLE */
    .archive-thumbnail.archive-pdf {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .pdf-thumb-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 8px !important;
        text-align: center !important;
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.25) 100%) !important;
    }

    .pdf-thumb-container i {
        font-size: 1.5rem !important;
        color: #ef4444 !important;
        margin-bottom: 4px !important;
    }

    .pdf-thumb-container span {
        font-size: 0.55rem !important;
        color: white !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    /* === PDF VIEWER - INSIDE GRID WRAPPER (Not fullscreen) === */
    .archive-pdf-viewer {
        display: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(10, 12, 16, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 100 !important;
        flex-direction: column !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .archive-pdf-viewer.active {
        display: flex !important;
    }

    /* PDF Viewer Header - Close button on LEFT to avoid module X button */
    .archive-pdf-viewer-header {
        flex: 0 0 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 12px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        gap: 12px !important;
    }

    /* PDF Close button - positioned FIRST (left side) */
    .archive-pdf-viewer-close {
        order: 0 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(239, 68, 68, 0.3) !important;
        border: 2px solid rgba(239, 68, 68, 0.6) !important;
        border-radius: 8px !important;
        color: #fff !important;
        font-size: 1.1rem !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .archive-pdf-viewer-close:hover,
    .archive-pdf-viewer-close:active {
        background: rgba(239, 68, 68, 0.6) !important;
    }

    .archive-pdf-viewer-header h4 {
        order: 1 !important;
        font-size: 0.85rem !important;
        color: white !important;
        flex: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin: 0 !important;
        font-family: 'Inter', sans-serif !important;
    }

    /* PDF Iframe Container - with scroll containment */
    .archive-pdf-viewer-content {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 8px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #archive-pdf-iframe {
        width: 100% !important;
        height: 100% !important;
        border-radius: 6px !important;
        border: none !important;
        background: #fff !important;
        touch-action: pan-x pan-y pinch-zoom !important;
        overscroll-behavior: contain !important;
    }
}

@media (max-width: 768px) {
    .video-wrapper {
        border-radius: 0;
    }

    .nav-corner,
    .nav-corner.top-left:hover,
    .nav-corner.top-right:hover {
        width: 65px;
        height: 65px;
    }

    .button-content span {
        display: block;
        font-size: 0.4rem;
        opacity: 0.85;
        letter-spacing: 0.3px;
    }

    .button-content i {
        font-size: 1.3rem;
    }

    .nav-corner:hover i {
        transform: scale(1.1);
    }

    .top-left {
        top: 12px;
        left: 12px;
        border-radius: 12px 12px 28px 12px;
    }

    .top-right {
        top: 12px;
        right: 12px;
        border-radius: 12px 12px 12px 28px;
    }

    /* MOBILE AR BUTTON - SHOW AND FIX POSITION */
    .bottom-left {
        display: flex !important;
        /* Show on mobile */
        position: fixed !important;
        bottom: 12px !important;
        left: 12px !important;
        border-radius: 12px 28px 12px 12px !important;
        /* Prevent movement */
        transform: none !important;
        transition: background 0.3s ease, border-color 0.3s ease !important;
    }

    .bottom-left:active {
        transform: scale(0.95) !important;
    }

    .share-button,
    .return-button {
        top: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .return-button {
        right: 20px;
    }

    .share-button {
        left: 20px;
    }

    .content-box {
        padding: 12vh 1vw 2vh;
    }

    .archive-info-panel {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 1rem;
        margin-bottom: 1rem;
        display: flex !important;
    }

    .archive-info-content h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .archive-info-content p {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .archive-grid-panel-wrapper {
        flex: 1 1 auto;
        max-height: none;
        padding: 0 1rem 1rem 1rem;
    }

    .archive-grid-panel {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 5px;
    }

    .archive-section-header h4 {
        font-size: 1rem !important;
    }

    #section-ar {
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
        background-color: #c0c0c0 !important;
        background: #c0c0c0 !important;
    }

    .ar-left-column {
        flex: 0 0 60% !important;
        min-height: 350px !important;
        width: 100% !important;
        padding: 0 !important;
        position: relative;
    }

    .ar-right-column {
        flex: 0 0 40% !important;
        width: 100% !important;
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .ar-right-column .ar-video-wrapper {
        display: block !important;
        width: 100% !important;
        max-height: 25vh !important;
        margin-bottom: 1rem !important;
        border-radius: 8px;
        overflow: hidden;
    }

    .ar-right-column .ar-video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ar-text-content {
        text-align: center;
    }

    .investigation-text {
        max-width: 100%;
        padding-right: 0;
    }

    .investigation-text p {
        font-size: 0.75rem;
        line-height: 1.4;
        margin-bottom: 0.4rem;
    }

    .investigation-pdf {
        max-width: 100%;
        min-height: 40vh;
    }
}

@media (max-width: 480px) {

    .nav-corner,
    .nav-corner.top-left:hover,
    .nav-corner.top-right:hover {
        width: 55px;
        height: 55px;
    }

    .top-left {
        border-bottom-right-radius: 55px;
    }

    .top-right {
        border-bottom-left-radius: 55px;
    }

    .bottom-left {
        border-top-right-radius: 55px;
    }

    .bottom-right {
        border-top-left-radius: 55px;
    }

    .share-button,
    .return-button {
        width: 55px;
        height: 55px;
        font-size: 1.4rem;
        background: rgba(0, 0, 0, 0.6);
    }

    #vr-info-card {
        top: 12vh;
        padding: 20px;
    }

    #vr-info-card h3 {
        font-size: 1.6rem;
    }

    #vr-info-card p {
        font-size: 0.9rem;
    }
}

/* ASYLUM INVESTIGATION STYLES - ECharts Compatible */
.chart-box {
    position: relative;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    min-height: 150px;
    max-height: min(320px, 45vh);
    overflow: visible;
    padding: 4px 0;
    box-sizing: border-box;
}

/* ECharts containers need explicit dimensions */
.chart-box>div {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit;
}

/* SVG elements inside ECharts should be responsive */
.chart-box svg {
    overflow: visible;
}

/* Consistent investigation page widths */
.investigation-page-content>.w-full {
    max-width: 1200px !important;
    width: 100%;
}

/* Force all max-w-* to be consistent */
.investigation-page-content .max-w-4xl,
.investigation-page-content .max-w-5xl,
.investigation-page-content .max-w-6xl {
    max-width: 1200px !important;
    width: 100%;
}

/* SAFE AREA - All investigation pages */
.investigation-page-content {
    max-height: calc(100vh - 180px);
    overflow: hidden;
}

#section-investigacion .glass-card-inner {
    min-height: auto;
    max-height: calc(100vh - 280px);
    overflow: hidden;
}

/* Fix chart container heights for timeline/mechanics/volumen - dynamic sizing */
#page-6 .glass-card-inner,
#page-8 .glass-card-inner,
#page-9 .glass-card-inner {
    max-height: min(360px, calc(100vh - 280px));
    min-height: min(280px, calc(100vh - 320px));
}

.btn-file {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.5rem;
    transition: all 0.2s;
    color: #cbd5e1;
    text-align: left;
    min-height: 50px;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.btn-file::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.05) 30%,
            transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    top: -25%;
    left: -25%;
}

.btn-file:hover::before {
    opacity: 1;
}

.btn-file:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #60a5fa;
    color: white !important;
    transform: translateY(-2px);
    text-shadow: none !important;
}

.glass-card-inner {
    background: rgba(15, 17, 22, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ============================================
           NEO-BRUTALISM INVESTIGATIVE STYLES
           ============================================ */

/* Comparison Cards with Glow Effects */
.comparison-card {
    position: relative;
    background: rgba(15, 17, 22, 0.6);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.comparison-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.comparison-card.card-approved::before {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.1));
}

.comparison-card.card-denied::before {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(239, 68, 68, 0.1));
}

.comparison-card:hover::before {
    opacity: 1;
}

.comparison-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

.comparison-card.card-approved:hover {
    box-shadow:
        0 20px 40px -15px rgba(0, 0, 0, 0.5),
        0 0 30px -5px rgba(16, 185, 129, 0.3);
}

.comparison-card.card-denied:hover {
    box-shadow:
        0 20px 40px -15px rgba(0, 0, 0, 0.5),
        0 0 30px -5px rgba(239, 68, 68, 0.3);
}

/* Glass Card Hover Enhancements */
.glass-card-inner.hover-glow-green {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.glass-card-inner.hover-glow-green:hover {
    box-shadow:
        0 8px 25px -5px rgba(0, 0, 0, 0.3),
        0 0 40px -10px rgba(16, 185, 129, 0.4),
        inset 0 1px 0 rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.glass-card-inner.hover-glow-red {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.glass-card-inner.hover-glow-red:hover {
    box-shadow:
        0 8px 25px -5px rgba(0, 0, 0, 0.3),
        0 0 40px -10px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.glass-card-inner.hover-glow-blue {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.glass-card-inner.hover-glow-blue:hover {
    box-shadow:
        0 8px 25px -5px rgba(0, 0, 0, 0.3),
        0 0 40px -10px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.glass-card-inner.hover-glow-amber {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.glass-card-inner.hover-glow-amber:hover {
    box-shadow:
        0 8px 25px -5px rgba(0, 0, 0, 0.3),
        0 0 40px -10px rgba(245, 158, 11, 0.4),
        inset 0 1px 0 rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

/* Investigative Blockquotes */
.inv-blockquote {
    position: relative;
    padding: 1.25rem 1.5rem 1.25rem 2rem;
    margin: 1.5rem 0;
    background: linear-gradient(135deg, rgba(15, 17, 22, 0.6), rgba(15, 17, 22, 0.3));
    border-radius: 0 12px 12px 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    overflow: hidden;
}

.inv-blockquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #ef4444, #dc2626);
}

.inv-blockquote::after {
    content: '"';
    position: absolute;
    top: -10px;
    left: 10px;
    font-family: 'Georgia', serif;
    font-size: 4rem;
    font-style: normal;
    color: rgba(239, 68, 68, 0.15);
    line-height: 1;
}

.inv-blockquote.quote-green::before {
    background: linear-gradient(to bottom, #10b981, #059669);
}

.inv-blockquote.quote-green::after {
    color: rgba(16, 185, 129, 0.15);
}

.inv-blockquote.quote-blue::before {
    background: linear-gradient(to bottom, #3b82f6, #2563eb);
}

.inv-blockquote.quote-blue::after {
    color: rgba(59, 130, 246, 0.15);
}

.inv-blockquote.quote-warning::before {
    background: linear-gradient(to bottom, #f59e0b, #d97706);
}

.inv-blockquote.quote-warning::after {
    color: rgba(245, 158, 11, 0.15);
}

.inv-blockquote.quote-warning {
    border-left-color: #f59e0b;
}

.inv-blockquote cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Data Highlight Badges */
.data-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.data-badge.badge-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.data-badge.badge-success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.data-badge.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.data-badge.badge-info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

/* Big Number Display (Monospace) */
.big-number {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: opacity 0.3s ease;
}

/* Start hidden in investigation section - will be revealed by animation */
#section-investigacion .big-number {
    opacity: 0;
}

#section-investigacion .big-number.animated {
    opacity: 1;
}

.big-number-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.8;
}

/* Staggered Animation Classes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px -5px currentColor;
    }

    50% {
        box-shadow: 0 0 35px -5px currentColor;
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    opacity: 0;
}

.animate-fade-in-scale {
    animation: fadeInScale 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    opacity: 0;
}

.animate-slide-left {
    animation: slideInLeft 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    opacity: 0;
}

.animate-slide-right {
    animation: slideInRight 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    opacity: 0;
}

/* Stagger delays */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

.delay-600 {
    animation-delay: 0.6s;
}

.delay-700 {
    animation-delay: 0.7s;
}

.delay-800 {
    animation-delay: 0.8s;
}

/* Chart Container Improvements */
.chart-container-neo {
    position: relative;
    background: rgba(15, 17, 22, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    overflow: hidden;
}

.chart-container-neo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
    opacity: 0.7;
}

/* Crosshair cursor for charts */
.chart-box canvas {
    cursor: crosshair;
}

/* Salary Bars Animation */
.salary-bar {
    position: relative;
    transition: all 0.3s ease;
}

.salary-bar:hover {
    filter: brightness(1.15);
    transform: scaleY(1.02);
    transform-origin: bottom;
}

.salary-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Evidence Document Style */
.evidence-card {
    position: relative;
    background: rgba(15, 17, 22, 0.6);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.evidence-card::before {
    content: 'EVIDENCE';
    position: absolute;
    top: -8px;
    left: 12px;
    padding: 2px 8px;
    background: #ef4444;
    color: white;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 3px;
}

.evidence-card:hover {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 20px -5px rgba(239, 68, 68, 0.3);
}

/* Separator Lines */
.separator-neo {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 1.5rem 0;
}

.separator-neo.separator-red {
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.3), transparent);
}

.separator-neo.separator-green {
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent);
}

/* Investigation Side Navigation Buttons - Defined in main styles above */

/* Progress bar for investigation */
.inv-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg,
            #ef4444 0%,
            #f97316 25%,
            #eab308 50%,
            #22c55e 75%,
            #3b82f6 100%);
    transition: width 0.4s ease;
    z-index: 60;
    border-radius: 0 3px 3px 0;
}

/* ============================================
           CREDITS MODAL
           ============================================ */
.credits-modal-overlay {
    position: fixed;
    z-index: 16000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.credits-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.credits-modal-content {
    text-align: center;
    color: #fff;
    max-width: 600px;
    padding: 2rem;
    position: relative;
}

.credits-close-btn {
    position: absolute;
    top: -20px;
    right: -20px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.credits-close-btn:hover {
    opacity: 1;
}

.credits-title {
    font-family: 'Teko', sans-serif;
    font-size: 3.5rem;
    color: #ef4444;
    letter-spacing: 8px;
    margin-bottom: 0.25rem;
}

.credits-subtitle {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.9rem;
    color: #ef4444;
    letter-spacing: 3px;
    margin-bottom: 0.25rem;
}

.credits-teaser {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    color: #ef4444;
    letter-spacing: 4px;
    margin-bottom: 1.5rem;
}

.credits-section {
    margin-bottom: 1rem;
}

.credits-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: lowercase;
    letter-spacing: 2px;
    margin-bottom: 0.2rem;
}

.credits-names {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.85rem;
    color: #ef4444;
    letter-spacing: 1px;
}

.credits-logos {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-family: 'Teko', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
}

@media (max-height: 450px) {
    .credits-modal-content {
        padding: 1rem;
    }

    .credits-title {
        font-size: 2rem;
    }

    .credits-subtitle {
        font-size: 0.65rem;
    }

    .credits-teaser {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .credits-section {
        margin-bottom: 0.5rem;
    }

    .credits-label {
        font-size: 0.5rem;
    }

    .credits-names {
        font-size: 0.6rem;
    }

    .credits-logos {
        margin-top: 1rem;
        gap: 1rem;
        font-size: 0.7rem;
    }
}

/* Portrait blocker styles are now in index.html with video background */

/* ============================================
           MOBILE LANDSCAPE STYLES (max-width: 992px)
           ============================================ */
@media (max-width: 992px) and (orientation: landscape) {

    /* ============================================
               CRITICAL VISIBILITY FIX
               Force canvas-world visible in landscape
               ============================================ */
    #canvas-world {
        visibility: visible !important;
        opacity: 1 !important;
    }

    #experience-wrapper.visible {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Force all sections to have proper backgrounds */
    #section-center {
        background: #000 !important;
    }

    #section-ar {
        background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%) !important;
    }

    #section-archivo {
        background: #201a1a !important;
    }

    #section-vr {
        background: #000 !important;
    }

    #section-investigacion {
        background: #1a1c20 !important;
    }

    /* Ensure model-viewer and A-Frame scene are visible */
    #warjiro-viewer,
    model-viewer {
        display: block !important;
        visibility: visible !important;
        min-height: 200px !important;
    }

    #scene_360,
    #player_360 {
        visibility: visible !important;
        height: 100% !important;
        width: 100% !important;
    }

    /* ============================================
               MOBILE LANDSCAPE - SPLIT SCREEN LAYOUT
               Optimizado para experiencia horizontal sin scroll
               ============================================ */

    /* === VIDEO CENTER - EDGE TO EDGE FILL === */
    #section-center {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
    }

    #section-center .video-wrapper {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #section-center .video-wrapper video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* === GENERAL LAYOUT === */
    .content-box {
        padding: 1vh 2vw 1vh;
        height: 96%;
        max-height: calc(100vh - 4vh);
        border-radius: 10px;
    }

    #initial-title {
        font-size: clamp(1rem, 3vw, 1.6rem);
        top: 0.5vh;
        padding: 0.2rem 0.8rem;
    }

    /* Trailer controls - auto-hide enabled on mobile (same as desktop) */
    #trailer-controls {
        bottom: 15px !important;
        padding: 8px 15px !important;
        /* Note: opacity is controlled by .visible class in JS */
    }

    #trailer-controls.visible {
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
    }

    #trailer-controls button {
        font-size: 1rem !important;
    }

    /* === NAV CORNERS === */
    .nav-corner {
        width: 44px;
        height: 44px;
    }

    .button-content span {
        display: none;
    }

    .button-content i {
        font-size: 1rem;
    }

    .top-left {
        top: 8px;
        left: 8px;
    }

    .top-right {
        top: 8px;
        right: 8px;
    }

    .bottom-left {
        bottom: 8px;
        left: 8px;
    }

    .bottom-right {
        bottom: 8px;
        right: 8px;
    }

    /* === SHARE/RETURN BUTTONS === */
    .share-button,
    .return-button {
        top: 15px;
        width: 55px;
        height: 55px;
        font-size: 1.4rem;
        background: rgba(0, 0, 0, 0.6);
    }

    .share-button {
        left: 15px;
    }

    .return-button {
        right: 15px;
    }

    /* ============================================
               INVESTIGATION NAVIGATION - MOBILE
               Botones laterales más compactos
               ============================================ */
    .inv-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 0.8rem;
        opacity: 0.7;
    }

    .inv-nav-btn.inv-nav-prev {
        left: 8px !important;
        right: auto !important;
    }

    .inv-nav-btn.inv-nav-next {
        right: 8px !important;
        left: auto !important;
    }

    .inv-nav-btn:hover,
    .inv-nav-btn:focus {
        opacity: 1;
    }

    .inv-nav-btn:disabled {
        opacity: 0.15;
    }

    .inv-indicator-bar {
        bottom: 12px;
    }

    .inv-indicator-bar span {
        font-size: 0.7rem;
    }

    .inv-progress-track {
        width: 80px;
    }

    /* ============================================
               SPLIT SCREEN LAYOUT - MODO HORIZONTAL
               Texto izquierda (45%) | Gráfico derecha (55%)
               ============================================ */
    .investigation-article {
        overflow: hidden;
    }

    .investigation-page-content {
        flex-direction: row !important;
        gap: 0.75rem;
        padding: 0.25rem 0;
        max-height: calc(100vh - 90px);
        overflow: hidden;
        align-items: stretch;
    }

    /* Contenedor de texto - Izquierda 45% */
    .investigation-page-content>.w-full,
    .investigation-page-content>div:first-child,
    .investigation-page-content .investigation-text {
        flex: 0 0 45% !important;
        max-width: 45% !important;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0.5rem;
    }

    /* Contenedor gráfico - Derecha 55% */
    .investigation-page-content>div:last-child:not(:first-child),
    .investigation-page-content .investigation-pdf,
    .investigation-page-content .glass-card-inner {
        flex: 0 0 55% !important;
        max-width: 55% !important;
        overflow: hidden;
    }

    /* Para páginas con un solo contenedor centrado */
    .investigation-page-content.items-center.justify-center.flex-col {
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
    }

    .investigation-page-content.items-center.justify-center.flex-col>.w-full.max-w-5xl,
    .investigation-page-content.items-center.justify-center.flex-col>.w-full.max-w-6xl,
    .investigation-page-content.items-center.justify-center.flex-col>.max-w-6xl {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Glass card inner - ajustado para split */
    .glass-card-inner {
        padding: 0.5rem;
        max-height: calc(100vh - 140px);
        min-height: auto !important;
        overflow: hidden;
    }

    /* Dynamic content scaling based on viewport */
    #section-investigacion .content-box {
        max-height: calc(100vh - 15px);
        overflow: hidden;
    }

    /* ============================================
               TYPOGRAPHY - REDUCCIÓN DRÁSTICA PARA LANDSCAPE
               ============================================ */
    .investigation-page .text-7xl {
        font-size: 1.8rem !important;
    }

    .investigation-page .text-6xl {
        font-size: 1.5rem !important;
    }

    .investigation-page .text-5xl {
        font-size: 1.25rem !important;
    }

    .investigation-page .text-4xl {
        font-size: 1.1rem !important;
    }

    .investigation-page .text-3xl {
        font-size: 0.95rem !important;
    }

    .investigation-page .text-2xl {
        font-size: 0.85rem !important;
    }

    .investigation-page .text-xl {
        font-size: 0.75rem !important;
    }

    .investigation-page .text-lg {
        font-size: 0.7rem !important;
    }

    .investigation-page .text-sm {
        font-size: 0.6rem !important;
    }

    .investigation-page .text-xs {
        font-size: 0.55rem !important;
    }

    /* Títulos de sección */
    .investigation-page h2 {
        font-size: 0.9rem !important;
        margin-bottom: 0.3rem !important;
    }

    .investigation-page h2 i {
        font-size: 0.8rem !important;
    }

    /* ============================================
               CHARTS - REDUCCIÓN DE ESCALA
               ============================================ */
    .chart-box {
        max-height: min(120px, 22vh) !important;
        min-height: 80px !important;
        padding: 2px 0;
        overflow: hidden;
    }

    /* Donut charts - Reducido de w-40 a w-24 */
    .investigation-page .w-40.h-40,
    .investigation-page .relative.w-40 {
        width: 60px !important;
        height: 60px !important;
    }

    .investigation-page .w-32.h-32 {
        width: 50px !important;
        height: 50px !important;
    }

    /* ============================================
               PAGE 1: DOS FRENTES - Side by Side
               ============================================ */
    #page-1 h1 {
        font-size: 1.4rem !important;
        line-height: 1.1;
        margin-bottom: 0.3rem !important;
    }

    #page-1 .max-w-sm {
        max-width: 48% !important;
        flex: 1 1 48% !important;
    }

    #page-1 .glass-card-inner {
        padding: 0.4rem !important;
    }

    #page-1 .flex-col.md\:flex-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    #page-1 .gap-6 {
        gap: 0.4rem !important;
    }

    #page-1 .text-xl.md\:text-2xl {
        font-size: 0.65rem !important;
        line-height: 1.2;
    }

    #page-1 .text-lg {
        font-size: 0.6rem !important;
    }

    #page-1 .text-sm {
        font-size: 0.55rem !important;
        line-height: 1.2;
    }

    #page-1 .mb-8 {
        margin-bottom: 0.3rem !important;
    }

    #page-1 .mb-6 {
        margin-bottom: 0.2rem !important;
    }

    #page-1 .mt-8 {
        margin-top: 0.3rem !important;
    }

    #page-1 .flex.flex-col.md\\:flex-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    #page-1 .flex.flex-col.md\\:flex-row>div {
        flex: 1 1 48% !important;
        max-width: 48% !important;
    }

    #page-1 .p-6 {
        padding: 0.4rem !important;
    }

    #page-1 .mb-3 {
        margin-bottom: 0.2rem !important;
    }

    #page-1 .text-2xl {
        font-size: 0.85rem !important;
    }

    /* ============================================
               PAGE 2: DENUNCIA - Split Screen
               ============================================ */
    #page-2 .investigation-page-content {
        flex-direction: row !important;
    }

    #page-2 .investigation-text {
        flex: 0 0 45% !important;
        max-width: 45% !important;
        overflow-y: auto;
    }

    #page-2 .investigation-pdf {
        flex: 0 0 55% !important;
        max-width: 55% !important;
    }

    #page-2 blockquote {
        font-size: 0.75rem;
        margin: 0.3rem 0;
        padding-left: 0.5rem;
    }

    /* ============================================
               PAGE 3: MAGNITUD
               ============================================ */
    #page-3 .grid-cols-3>div {
        padding: 0.3rem !important;
    }

    #page-3 .grid-cols-3 .text-xl {
        font-size: 0.75rem !important;
    }

    #page-3 blockquote {
        font-size: 0.6rem;
        padding-left: 0.4rem;
    }

    #page-3 .chart-box {
        max-height: 110px !important;
    }

    /* ============================================
               PAGE 4: TRAMPA ECONÓMICA
               Layout horizontal con barras compactas
               ============================================ */
    #page-4 .investigation-page-content {
        flex-direction: row !important;
    }

    #page-4 .glass-card-inner {
        padding: 0.5rem !important;
        max-height: calc(100vh - 130px) !important;
    }

    #page-4 .grid.grid-cols-1.md\\:grid-cols-2 {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    /* Contenedor de barras - Izquierda */
    #page-4 .flex.flex-col.items-center.justify-end {
        min-height: 120px !important;
        max-height: 160px !important;
    }

    #page-4 .flex.items-end.justify-center {
        height: 100px !important;
        gap: 0.5rem !important;
    }

    /* Barras individuales - Reducidas */
    #page-4 .flex.items-end .w-16 {
        width: 1.8rem !important;
    }

    #page-4 .flex.flex-col.items-center .text-lg {
        font-size: 0.65rem !important;
        margin-bottom: 0.15rem !important;
    }

    #page-4 .flex.flex-col.items-center .text-xs {
        font-size: 0.45rem !important;
        width: 2.5rem !important;
    }

    /* Altura de barras proporcional */
    #page-4 .bg-gradient-to-t.from-red-800 {
        height: 6px !important;
    }

    #page-4 .bg-gradient-to-t.from-orange-800 {
        height: 15px !important;
    }

    #page-4 .bg-gradient-to-t.from-green-700 {
        height: 100px !important;
    }

    /* Texto explicativo - Derecha */
    #page-4 .flex.flex-col.justify-center.space-y-4 {
        gap: 0.3rem !important;
    }

    #page-4 .text-4xl.md\\:text-5xl {
        font-size: 1.5rem !important;
    }

    #page-4 .p-4.bg-green-500\/10,
    #page-4 .p-3.bg-red-500\/10 {
        padding: 0.4rem !important;
    }

    #page-4 blockquote {
        font-size: 0.6rem !important;
        padding-left: 0.4rem !important;
    }

    /* ============================================
               PAGE 5: FLUJOS - Compacto
               ============================================ */
    #page-5 .glass-card-inner {
        padding: 0.4rem !important;
    }

    #page-5 ul {
        font-size: 0.55rem !important;
    }

    #page-5 .space-y-3 {
        gap: 0.2rem;
    }

    #page-5 .w-16.h-16 {
        width: 2rem !important;
        height: 2rem !important;
    }

    #page-5 .text-3xl {
        font-size: 0.85rem !important;
    }

    /* ============================================
               PAGE 6: CRONOLOGÍA
               ============================================ */
    #page-6 .glass-card-inner {
        min-height: 150px !important;
        max-height: 180px !important;
    }

    #page-6 .absolute.top-4.right-4 {
        display: none !important;
    }

    /* ============================================
               PAGE 7: CONTRASTE
               ============================================ */
    #page-7 .grid {
        gap: 0.4rem !important;
    }

    #page-7 .glass-card-inner {
        padding: 0.4rem !important;
    }

    #page-7 .py-4 {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }

    /* ============================================
               PAGE 8: MECÁNICA
               ============================================ */
    #page-8 .glass-card-inner {
        min-height: 150px !important;
        max-height: 180px !important;
    }

    /* ============================================
               PAGE 9: VOLUMEN
               ============================================ */
    #page-9 .glass-card-inner {
        min-height: 150px !important;
        max-height: 180px !important;
    }

    /* ============================================
               PAGE 10: BARRERAS
               ============================================ */
    #page-10 .grid {
        gap: 0.4rem !important;
    }

    #page-10 .glass-card-inner {
        padding: 0.4rem !important;
    }

    #page-10 .space-y-3,
    #page-10 .space-y-2 {
        gap: 0.15rem;
    }

    /* ============================================
               PAGE 11: SENTENCIA - Donuts Reducidos
               ============================================ */
    #page-11 .grid-cols-3 {
        gap: 0.4rem !important;
    }

    #page-11 .glass-card-inner {
        padding: 0.4rem !important;
    }

    #page-11 .w-40.h-40 {
        width: 56px !important;
        height: 56px !important;
    }

    #page-11 .relative.w-40 {
        width: 56px !important;
        height: 56px !important;
    }

    #page-11 .text-4xl {
        font-size: 0.9rem !important;
    }

    /* ============================================
               PAGE 12: EVIDENCIA DOCUMENTAL
               Grid 4 columnas horizontales
               ============================================ */
    #page-12 .investigation-page-content {
        flex-direction: column !important;
        padding: 0.25rem 0;
    }

    #page-12 .mb-8 {
        margin-bottom: 0.3rem !important;
    }

    #page-12 h2 {
        font-size: 0.9rem !important;
    }

    #page-12 .text-slate-400 {
        font-size: 0.5rem !important;
    }

    #page-12 .grid {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 0.25rem !important;
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
    }

    #page-12 .btn-file {
        height: 50px !important;
        padding: 0.25rem !important;
        border-radius: 6px !important;
    }

    #page-12 .btn-file i {
        font-size: 0.85rem !important;
        margin-bottom: 0.1rem !important;
    }

    #page-12 .btn-file span {
        font-size: 0.4rem !important;
        line-height: 1.1 !important;
    }

    /* ============================================
               INVESTIGATION PDF VIEWER - MOBILE FIX
               Enable scroll, better zoom, touch interactions
               ============================================ */
    #passport-pdf-viewer {
        width: 100% !important;
        height: 100% !important;
        min-height: 180px !important;
        border: none !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y pinch-zoom !important;
        pointer-events: auto !important;
    }

    .inv-visual-panel {
        overflow: visible !important;
        min-height: 0 !important;
    }

    /* PDF container should allow scroll */
    .inv-visual-panel>div:has(#passport-pdf-viewer) {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ============================================
               ARCHIVE SECTION - MOBILE LANDSCAPE SPLIT LAYOUT
               Info panel LEFT (20%), Grid panel RIGHT (80%)
               FULL HEIGHT UTILIZATION - FIXED TO REACH BOTTOM
               ============================================ */
    #section-archivo .content-box {
        padding: 0.5vh 1vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .archive-layout-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        height: calc(100vh - 1vh) !important;
        flex: 1 1 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    /* LEFT PANEL - Info/Description (22% width) */
    .archive-info-panel {
        flex: 0 0 22% !important;
        max-width: 22% !important;
        width: 22% !important;
        height: 100% !important;
        padding: 55px 10px 10px 40px !important;
        /* Más espacio arriba y izquierda para evitar botón share */
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        z-index: 2;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    /* Text for info panel */
    .archive-info-content h3 {
        font-size: 0.85rem !important;
        margin-bottom: 8px !important;
        color: white !important;
        font-family: 'Teko', sans-serif !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
    }

    .archive-info-content p {
        font-size: 0.5rem !important;
        line-height: 1.35 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        overflow-y: visible !important;
        max-height: none !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        /* Sin límite de líneas */
    }

    /* RIGHT PANEL - Grid wrapper (78% width, FULL HEIGHT TO BOTTOM) */
    .archive-grid-panel-wrapper {
        flex: 1 1 78% !important;
        max-width: 78% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0.5rem !important;
        background: rgba(0, 0, 0, 0.25) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* Grid inside: 5 columns for mobile landscape - more compact */
    .archive-grid-panel {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 4px !important;
        padding-bottom: 40px !important;
        align-content: start !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* Improved touch scroll */
        touch-action: pan-y !important;
        scroll-behavior: smooth !important;
    }

    .archive-thumbnail {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        transition: all 0.2s ease !important;
        flex: none !important;
        min-width: 0 !important;
        cursor: pointer !important;
        /* FORCE VISIBILITY */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .archive-thumbnail:hover {
        transform: scale(1.05) !important;
        border-color: rgba(255, 100, 100, 0.5) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    }

    .archive-thumbnail a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .archive-thumbnail:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-2px) !important;
    }

    .archive-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .archive-thumbnail.archive-pdf .pdf-thumb-container {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 5px !important;
        background: rgba(231, 76, 60, 0.05) !important;
    }

    .archive-thumbnail.archive-pdf i {
        font-size: 1.5rem !important;
        color: #e74c3c !important;
    }

    .archive-thumbnail.archive-pdf span {
        font-size: 0.5rem !important;
        text-align: center !important;
        line-height: 1.1 !important;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Embedded PDF Viewer for Mobile Landscape - MODAL OVERLAY */
    .archive-pdf-viewer {
        display: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(10, 12, 16, 0.98) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        z-index: 50 !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .archive-pdf-viewer.active {
        display: flex !important;
    }

    /* Hide grid when viewer is open */
    .archive-grid-panel-wrapper.with-viewer .archive-grid-panel {
        display: none !important;
    }

    .archive-pdf-viewer-header {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 8px 12px !important;
        height: 44px !important;
        min-height: 44px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Close button on left side */
    .archive-pdf-viewer-close {
        order: 0 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(239, 68, 68, 0.3) !important;
        border: 2px solid rgba(239, 68, 68, 0.5) !important;
        border-radius: 6px !important;
        color: #fff !important;
        font-size: 1rem !important;
        cursor: pointer !important;
    }

    .archive-pdf-viewer-header h4 {
        order: 1 !important;
        flex: 1 !important;
        font-size: 0.7rem !important;
        font-family: 'JetBrains Mono', monospace !important;
        color: white !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .archive-pdf-viewer-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .archive-pdf-viewer-content iframe,
    #archive-pdf-iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        border-radius: 4px !important;
        background: #fff !important;
        /* Allow touch interactions for scrolling */
        touch-action: pan-x pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    /* ============================================
               AR SECTION - SPLIT LAYOUT
               Model left (50%), Description right (50%)
               ============================================ */
    #section-ar {
        flex-direction: row !important;
        padding: 0 !important;
        position: relative;
        background-color: #c0c0c0 !important;
        background: #c0c0c0 !important;
    }

    .ar-left-column {
        width: 55% !important;
        height: 100% !important;
        position: relative !important;
        top: unset !important;
        left: unset !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #warjiro-viewer {
        width: 100%;
        height: 100%;
    }

    .ar-right-column {
        display: flex !important;
        width: 45% !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0.8rem 1rem !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 8px) + 8px) !important;
        background: transparent !important;
        overflow-y: auto;
        max-height: 100vh !important;
        box-sizing: border-box !important;
    }

    .ar-right-column h3,
    .ar-right-column p,
    .ar-right-column .ar-audio-label,
    .ar-right-column span,
    .ar-right-column strong {
        color: #1a1a1a !important;
        text-shadow: none !important;
    }

    .ar-right-column .ar-audio-player {
        background: rgba(255, 255, 255, 0.4) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    /* ... rest of styles ... */

    /* In mobile landscape, force the QR area to be HIDDEN and show the mobile AR button instead */
    .ar-right-column .ar-qr-area {
        display: none !important;
    }

    /* Collapse the interaction area container - button will be positioned independently */
    #ar-interaction-area {
        display: contents !important;
    }

    #mobile-ar-button {
        display: inline-flex !important;
        position: relative;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        background: rgba(0, 0, 0, 0.85) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 14px;
        padding: 8px 18px !important;
        font-family: 'Teko', sans-serif;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        align-items: center;
        gap: 6px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
        flex-shrink: 0 !important;
    }



    #mobile-ar-button:hover,
    #mobile-ar-button:active {
        background: rgba(0, 0, 0, 1) !important;
        border-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.05);
    }

    /* ============================================
               VR SECTION
               ============================================ */
    #vr-info-card {
        top: 6vh;
        padding: 12px 16px;
        max-width: 280px;
    }

    #vr-info-card h3 {
        font-size: 1.2rem;
    }

    #vr-info-card p {
        font-size: 0.7rem;
    }

    #controls_360 button {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    /* ============================================
               TRAILER CONTROLS
               ============================================ */
    #trailer-controls {
        /* Float higher on mobile to avoid cut-off */
        bottom: 35px !important;
        bottom: max(35px, env(safe-area-inset-bottom)) !important;
        padding: 6px 12px;
        gap: 8px;
        z-index: 9999 !important;
        /* Force on top */
    }

    #trailer-controls button {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* Hide AR button on desktop */
@media (min-width: 993px) {
    #mobile-ar-button {
        display: none !important;
    }
}

/* Very small mobile screens */
@media (max-height: 400px) and (orientation: landscape) {
    .content-box {
        padding: 1vh 1.5vw;
    }

    .chart-box {
        max-height: 120px !important;
        min-height: 100px !important;
    }

    .investigation-page .text-5xl {
        font-size: 1.5rem !important;
    }

    .investigation-page .text-4xl {
        font-size: 1.25rem !important;
    }
}

/* ============================================
           GLOBAL TOUCH PREVENTION FOR MOBILE
           Prevent accidental page drags/scrolls
           ============================================ */
@media (max-width: 1024px) {
    body {
        overscroll-behavior: none;
        touch-action: none;
        -webkit-overflow-scrolling: auto;
    }

    /* Allow specific interactions */
    #warjiro-viewer {
        touch-action: pan-x pan-y pinch-zoom !important;
    }

    .archive-grid-panel,
    .archive-grid-panel-wrapper {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #scene_360,
    #player_360 {
        touch-action: pan-x pan-y !important;
    }

    .investigation-page-content {
        touch-action: pan-y !important;
    }

    /* Prevent canvas world drag */
    #canvas-world {
        touch-action: none !important;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Ensure buttons are always on top */
    .share-button,
    .return-button {
        z-index: 9999 !important;
    }
}

/* ============================================
           ULTRA COMPACT: iPhone Landscape (max-height 450px)
           Para dispositivos con altura muy limitada
           iPhone 14 Pro: 932x430px landscape
           ============================================ */
@media (max-height: 450px) and (orientation: landscape) {

    /* === INVESTIGATION HEADER - OCULTAR DUPLICADOS === */
    .inv-header {
        display: none !important;
    }

    /* === SHARE/RETURN BUTTONS - MÁS GRANDES === */
    .share-button,
    .return-button {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
        top: 10px !important;
        background: rgba(0, 0, 0, 0.7) !important;
    }

    .share-button {
        left: 10px !important;
    }

    .return-button {
        right: 10px !important;
    }

    /* === CONTENT BOX - MÁXIMO ESPACIO === */
    .content-box {
        padding: 3px 8px !important;
        height: 100% !important;
        max-height: 100vh !important;
    }

    #section-investigacion .content-box {
        padding-top: 35px !important;
    }

    /* === INVESTIGATION ARTICLES === */
    .investigation-article {
        height: calc(100vh - 10px) !important;
        max-height: calc(100vh - 10px) !important;
        overflow: hidden !important;
    }

    .investigation-page-content {
        max-height: calc(100vh - 80px) !important;
        padding: 0 !important;
        gap: 0.4rem !important;
        overflow: hidden !important;
    }

    /* === GLASS CARDS - ULTRA COMPACTAS === */
    .glass-card-inner {
        padding: 0.25rem 0.4rem !important;
        max-height: calc(100vh - 100px) !important;
        overflow: hidden !important;
    }

    /* === TYPOGRAPHY - INCREASED FOR READABILITY === */
    .investigation-page h1,
    .investigation-page .text-5xl {
        font-size: 1.4rem !important;
        /* Larger */
        line-height: 1.1 !important;
        margin-bottom: 0.2rem !important;
    }

    .investigation-page .text-4xl {
        font-size: 1.2rem !important;
        /* Larger */
    }

    .investigation-page h2,
    .investigation-page .text-3xl {
        font-size: 1rem !important;
        /* Larger */
        margin-bottom: 0.2rem !important;
    }

    .investigation-page .text-2xl {
        font-size: 0.9rem !important;
    }

    .investigation-page .text-xl {
        font-size: 0.8rem !important;
    }

    .investigation-page .text-lg {
        font-size: 0.75rem !important;
    }

    .investigation-page .text-sm,
    .investigation-page .text-xs,
    .investigation-page p {
        font-size: 0.7rem !important;
        /* Much larger for readability */
        line-height: 1.3 !important;
    }

    /* Warning text on footer */
    .investigation-page .text-yellow-400 {
        font-size: 0.6rem !important;
    }

    /* === BADGES/DATA BADGES - NO CORTAR === */
    .data-badge {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.6rem !important;
        white-space: nowrap !important;
    }

    .data-badge .text-lg,
    .data-badge .text-xl,
    .data-badge .text-2xl {
        font-size: 0.8rem !important;
    }

    /* === PAGE 1: DOS FRENTES - TARJETAS LADO A LADO === */
    #page-1 .investigation-page-content {
        flex-direction: column !important;
        gap: 0.2rem !important;
    }

    /* Override for Slide 1 layout to fit larger text */
    #page-1 .flex.flex-col.md\:flex-row {
        flex-direction: row !important;
        /* Force side-by-side */
        gap: 1rem !important;
        align-items: stretch !important;
        height: 100% !important;
    }

    #page-1 .max-w-sm {
        max-width: 48% !important;
        flex: 1 1 48% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #page-1 .glass-card-inner {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0.5rem !important;
    }


    #page-1 .border-l-4 {
        padding: 0.15rem 0.25rem !important;
    }

    #page-1 .p-6 {
        padding: 0.25rem !important;
    }

    #page-1 .text-lg,
    #page-1 .text-xl {
        font-size: 0.5rem !important;
    }

    #page-1 .mb-6,
    #page-1 .mb-8 {
        margin-bottom: 0.1rem !important;
    }

    /* === MERCENARIOS/ASILO BADGES === */
    #page-1 .absolute.-top-3.-right-3,
    #page-1 .absolute.-top-2.-right-2 {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        font-size: 0.35rem !important;
        padding: 0.1rem 0.2rem !important;
    }

    /* === PAGE 2: DENUNCIA === */
    #page-2 .investigation-page-content {
        flex-direction: row !important;
        align-items: stretch !important;
    }

    #page-2 .investigation-text {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        overflow-y: auto !important;
        padding-right: 0.3rem !important;
    }

    #page-2 .investigation-pdf {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    #page-2 h2 {
        font-size: 0.6rem !important;
    }

    #page-2 p {
        font-size: 0.4rem !important;
        line-height: 1.15 !important;
    }

    #page-2 blockquote {
        font-size: 0.45rem !important;
        padding: 0.15rem 0.3rem !important;
        margin: 0.1rem 0 !important;
    }

    /* === PAGE 9: CUBA VS VENEZUELA (And Page 5 Humanitarias) === */
    #page-5 .investigation-page-content,
    #page-9 .investigation-page-content {
        flex-direction: row !important;
        gap: 1rem !important;
    }

    #page-9 .grid.grid-cols-1.md\:grid-cols-2 {
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
        width: 100% !important;
        max-height: 70vh !important;
    }

    /* Page 5 (Tesis) specific */
    #page-5 .max-w-xl {
        max-width: 45% !important;
        flex: 0 0 45% !important;
    }

    #page-5 .glass-card-inner {
        padding: 0.8rem !important;
    }

    /* Page 9 (Venezuela/Cuba) specific */
    #page-9 .col-span-1 {
        flex: 1 !important;
        width: 48% !important;
    }

    #page-9 .glass-card-inner {
        padding: 0.8rem !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* Fix chart overlap */
    #page-9 .text-xl {
        margin-bottom: 0.5rem !important;
    }

    /* === PAGE 8: DIASPORA VS DESTINO === */
    #page-8 .investigation-page-content {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    #page-8 .grid.grid-cols-1.md\:grid-cols-2 {
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
        align-items: center !important;
    }

    /* Map/Pie Chart container */
    #page-8 .col-span-1:nth-child(2) {
        display: flex !important;
        justify-content: center !important;
    }

    /* Reduce chart size slightly on this height */
    #destinyChart,
    #diasporaMap {
        max-height: 180px !important;
    }

    /* === ARCHIVO DOCUMENTAL === */
    #section-archivo .content-box {
        padding: 4px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    #section-archivo h2 {
        display: none !important;
    }

    #section-archivo p {
        font-size: 0.5rem !important;
    }

    .archive-layout-container {
        height: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: row !important;
    }

    .archive-info-panel {
        flex: 0 0 18% !important;
        max-width: 18% !important;
        height: 100% !important;
        overflow-y: auto !important;
    }

    .archive-grid-panel-wrapper {
        flex: 1 1 82% !important;
        max-width: 82% !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .archive-grid-panel {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-auto-rows: min-content !important;
        gap: 5px !important;
    }

    .archive-thumbnail {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 50px !important;
    }

    .archive-thumbnail a {
        border-radius: 6px !important;
    }

    /* === SLIDE 11 & 12 (COMPARISONS & CONCLUSION) === */

    /* Slide 11 (Venezuela vs Cuba Data) & Slide 12 (Conclusion) */
    #page-11 .investigation-page-content,
    #page-12 .investigation-page-content {
        flex-direction: row !important;
        gap: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #page-11 .grid,
    #page-12 .grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
        width: 100% !important;
        max-height: 70vh !important;
    }

    #page-11 .col-span-1,
    #page-12 .col-span-1 {
        flex: 1 !important;
        max-width: 48% !important;
    }

    /* Internal box adjustments */
    #page-11 .p-6,
    #page-12 .p-6 {
        padding: 0.6rem !important;
    }

    #page-11 .text-5xl,
    #page-12 .text-5xl {
        font-size: 1.5rem !important;
    }

    #page-11 .text-sm,
    #page-12 .text-sm {
        font-size: 0.6rem !important;
    }

    /* Make "Humanitarias Concedidas" label smaller to fit */
    #page-12 .text-xl.font-bold.tracking-widest.mt-2 {
        font-size: 0.7rem !important;
        margin-top: 0.2rem !important;
    }

    /* === SUMMARY SLIDE (GANCHO DEL DINERO) === */
    #page-7 .investigation-page-content {
        flex-direction: row !important;
        gap: 1rem !important;
        align-items: stretch !important;
    }

    #page-7 .grid-cols-12 {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
    }

    #page-7 .col-span-4,
    #page-7 .col-span-8 {
        flex: 1 !important;
        max-width: 48% !important;
    }

    #page-7 .glass-card-inner {
        padding: 0.8rem !important;
    }

    /* === FOOTER === */
    .inv-footer {
        position: absolute !important;
        bottom: 8px !important;
        /* Slightly higher */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        padding: 0 !important;
    }

    .inv-footer .h-1 {
        height: 4px !important;
        /* Thicker bar */
    }

    /* === NAV BUTTONS - Very small screens === */
    .inv-nav-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.65rem !important;
    }

    .inv-nav-btn.inv-nav-prev {
        left: 4px !important;
        right: auto !important;
    }

    .inv-nav-btn.inv-nav-next {
        right: 4px !important;
        left: auto !important;
    }

    .inv-indicator-bar {
        bottom: 8px;
    }

    /* === CHARTS === */
    .chart-box {
        max-height: 80px !important;
        min-height: 60px !important;
    }

    /* === DONUTS/CIRCLES === */
    .investigation-page .w-40.h-40,
    .investigation-page .relative.w-40 {
        width: 40px !important;
        height: 40px !important;
    }

    .investigation-page .w-32.h-32 {
        width: 35px !important;
        height: 35px !important;
    }

    /* === ARCHIVO DOCUMENTAL - ULTRA COMPACT === */
    #section-archivo .content-box {
        padding: 4px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    .archive-layout-container {
        height: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
    }

    .archive-info-panel {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 35px 8px 8px 8px !important;
    }

    .archive-grid-panel-wrapper {
        flex: 1 1 80% !important;
        max-width: 80% !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        scroll-behavior: smooth !important;
    }

    .archive-grid-panel {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-auto-rows: min-content !important;
        gap: 4px !important;
        padding: 6px !important;
        padding-bottom: 30px !important;
        /* Espacio para scroll */
    }

    .archive-info-content h3 {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
    }

    .archive-info-content p {
        font-size: 0.5rem !important;
        line-height: 1.35 !important;
        overflow-y: auto !important;
        max-height: calc(100% - 30px) !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        /* Sin límite de líneas */
    }

    .archive-thumbnail {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 50px !important;
        border-width: 1px !important;
    }

    .archive-thumbnail.archive-pdf i {
        font-size: 0.9rem !important;
    }

    .archive-thumbnail.archive-pdf span {
        font-size: 0.35rem !important;
    }

    /* Títulos de sección PEGADOS a los thumbnails */
    .archive-section-header {
        grid-column: 1 / -1 !important;
        margin: 3px 0 0 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
    }

    .archive-section-header h4 {
        font-size: 0.5rem !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* === AR SECTION - ULTRA COMPACT === */
    #section-ar {
        flex-direction: row !important;
        padding: 0 !important;
    }

    #section-ar .content-box {
        padding: 0 !important;
        height: 100% !important;
    }

    .ar-left-column {
        width: 70% !important;
        height: 100% !important;
        padding: 0 !important;
    }

    .ar-right-column {
        width: 30% !important;
        height: 100% !important;
        max-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 6px !important;
        padding-top: 8px !important;
        background: #c0c0c0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .ar-right-column .ar-video-wrapper {
        display: block !important;
        width: 100% !important;
        max-height: 28vh !important;
        margin-bottom: 3px !important;
        border-radius: 4px;
        overflow: hidden;
        flex-shrink: 0 !important;
    }

    .ar-right-column .ar-video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ar-right-column h3 {
        font-size: 0.85rem !important;
        margin: 0 0 2px 0 !important;
        color: #1a1a1a !important;
        flex-shrink: 0 !important;
    }

    .ar-right-column p {
        font-size: 0.6rem !important;
        line-height: 1.15 !important;
        color: #333 !important;
        margin: 0 0 3px 0 !important;
        flex-shrink: 0 !important;
    }

    .ar-right-column .ar-audio-label,
    .ar-right-column span,
    .ar-right-column strong {
        color: #1a1a1a !important;
    }

    /* Hide QR on mobile landscape */
    .ar-qr-area {
        display: none !important;
    }

    /* Remove ar-interaction-area from layout flow */
    #ar-interaction-area {
        display: contents !important;
    }

    /* Audio player ultra compact - no extra margins */
    .ar-audio-player {
        margin: 0 !important;
        padding: 4px !important;
        flex-shrink: 0 !important;
    }

    .ar-audio-player .ar-audio-label {
        font-size: 0.55rem !important;
        margin-bottom: 2px !important;
    }

    .ar-audio-player audio {
        height: 24px !important;
    }

    /* AR text content - no extra spacing */
    .ar-text-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #mobile-ar-button {
        display: inline-flex !important;
        background: #1a1a1a !important;
        color: #fff !important;
        font-size: 0.75rem !important;
        padding: 5px 12px !important;
        margin: 3px auto 0 auto !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    /* === ALL PAGES - PREVENT OVERFLOW === */
    .investigation-page .overflow-hidden {
        overflow: hidden !important;
    }

    .investigation-page .p-4,
    .investigation-page .p-6 {
        padding: 0.2rem !important;
    }

    .investigation-page .mb-4,
    .investigation-page .mb-6,
    .investigation-page .mb-8 {
        margin-bottom: 0.1rem !important;
    }

    .investigation-page .mt-4,
    .investigation-page .mt-6,
    .investigation-page .mt-8 {
        margin-top: 0.1rem !important;
    }

    .investigation-page .gap-4,
    .investigation-page .gap-6 {
        gap: 0.2rem !important;
    }

    /* === INV-PAGE-4: CARNE DE CAÑÓN - Reducir tamaños para landscape === */
    #inv-page-4 .grid.grid-cols-2 {
        gap: 0.4rem !important;
    }

    #inv-page-4 .inv-redacted {
        padding: 0.4rem !important;
    }

    #inv-page-4 .text-3xl {
        font-size: 1.4rem !important;
    }

    #inv-page-4 .text-2xl {
        font-size: 1.1rem !important;
    }

    #inv-page-4 .text-sm {
        font-size: 0.55rem !important;
    }

    #inv-page-4 p[class*="text-"] {
        font-size: 7px !important;
        line-height: 1.3 !important;
    }

    #inv-page-4 i.text-2xl {
        font-size: 1rem !important;
    }

    /* === INV-PAGE-6: COLAPSO - Separar texto del icono, ajustar etiquetas === */
    #inv-page-6 .flex.flex-col {
        gap: 0.4rem !important;
    }

    #inv-page-6 .relative.mb-6 {
        margin-bottom: 0.5rem !important;
    }

    #inv-page-6 .w-40.h-40 {
        width: 60px !important;
        height: 60px !important;
    }

    #inv-page-6 .text-6xl,
    #inv-page-6 .text-7xl {
        font-size: 1.8rem !important;
    }

    #inv-page-6 .grid.grid-cols-3 {
        gap: 0.3rem !important;
        max-width: 100% !important;
    }

    #inv-page-6 .grid.grid-cols-3>div {
        padding: 0.3rem !important;
    }

    /* === INV-PAGE-11: ARMAS Y DEUDA - Reducir tamaño de botones === */
    #inv-page-11 .grid.grid-cols-2,
    #inv-page-11 .grid.grid-cols-4 {
        gap: 0.25rem !important;
    }

    #inv-page-11 .inv-redacted {
        padding: 0.3rem !important;
    }

    #inv-page-11 .text-lg {
        font-size: 0.7rem !important;
    }

    /* Note: Tailwind arbitrary value selectors need escaping */
    #inv-page-11 .text-\[9px\] {
        font-size: 6px !important;
    }

    #inv-page-11 .text-\[8px\] {
        font-size: 5px !important;
    }

    /* === INV-PAGE-17: FUENTES - Permitir scroll interno === */
    #inv-page-17 {
        overflow: hidden !important;
    }

    #inv-page-17 .inv-glass-panel {
        max-height: 90vh !important;
        overflow: hidden !important;
    }

    #inv-page-17 .grid {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        max-height: calc(90vh - 80px) !important;
    }

    #inv-page-17 .file-tile {
        padding: 0.4rem !important;
        gap: 0.4rem !important;
    }

    #inv-page-17 .file-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
    }

    #inv-page-17 .file-name {
        font-size: 0.6rem !important;
    }

    #inv-page-17 .file-meta {
        font-size: 0.5rem !important;
    }
}

/* ============================================
           VISUAL POLISH - DESKTOP/TABLET TYPOGRAPHY & LAYOUT - INCREASED SIZES & TIGHTER
           ============================================ */
@media (min-width: 993px) {

    /* GLOBAL TYPOGRAPHY BOOST */
    .investigation-page h1,
    .investigation-page .text-5xl,
    .investigation-page .text-4xl {
        font-size: 2.8rem !important;
        /* SIGNIFICANTLY LARGER */
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }

    .investigation-page h2,
    .investigation-page .text-3xl {
        font-size: 2rem !important;
    }

    .investigation-page .text-2xl {
        font-size: 1.5rem !important;
    }

    .investigation-page p,
    .investigation-page .text-lg,
    .investigation-page li {
        font-size: 1.15rem !important;
        /* Readable body text */
        line-height: 1.6 !important;
    }

    .investigation-page blockquote {
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
    }

    /* --- SLIDE 1: DOS FRENTES (Tighten Layout) --- */
    #page-1 .investigation-page-content {
        justify-content: center !important;
        gap: 2rem !important;
        /* Reduce massive gaps */
    }

    #page-1 .flex.flex-col.md\:flex-row {
        align-items: center !important;
        /* Center vertically */
        gap: 3rem !important;
    }

    #page-1 .max-w-2xl {
        padding-right: 0 !important;
    }

    /* Make image column fill better */
    #page-1 .max-w-sm {
        scale: 1.1;
        /* Slight boost to image area */
    }

    /* --- SLIDE 7: GANCHO DEL DINERO (Scale Graphics) --- */
    #page-7 .glass-card-inner {
        padding: 2.5rem !important;
    }

    /* Scale up chart contents */
    #chartIngresos {
        transform: scale(1.05);
        transform-origin: center center;
    }

    /* --- SLIDE 8: GRAN ÉXODO (Fix Small Map/Pie) --- */
    /* Scale up the graphic column */
    #page-8 .col-span-6 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        transform: scale(1.15) !important;
        /* MAKE IT BIGGER */
        transform-origin: center center !important;
    }

    /* --- SLIDE 3: PASAPORTES - PDF VIEWER MÁS ANCHO --- */
    #inv-page-3 .inv-split-layout {
        grid-template-columns: 35% 65% !important;
    }

    #inv-page-3 .pdf-viewer-container {
        min-height: 350px !important;
        height: calc(100% - 60px) !important;
    }

    #inv-page-3 #passport-pdf-iframe {
        min-height: 320px !important;
    }

    /* === SLIDE 16: BIBLIOTECA - DESKTOP - Mismo ancho que inv-split-layout === */
    #inv-page-16 .inv-glass-panel {
        max-width: calc(100% - 20px) !important;
        width: calc(100% - 20px) !important;
        margin: 0 auto !important;
    }
}

/* Ensure specific chart labels are readable */
.echarts-tooltip {
    font-size: 0.8rem !important;
}

/* ============================================
   INVESTIGATION SLIDES - COMPREHENSIVE FIX
   Fix margins, text truncation, and layout
   ============================================ */

/* Safe lateral margins for ALL investigation pages */
.investigation-page {
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
}

.investigation-page>div {
    max-width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
}

/* Mobile landscape - extra padding for navigation buttons */
@media (max-width: 1200px) and (orientation: landscape) {
    .investigation-page {
        padding-left: 70px !important;
        padding-right: 70px !important;
    }

    .investigation-page-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ============================================
   SLIDE 4: DESECHABLES EN EL FRENTE - SPECIFIC FIX
   Fix the 60% CIVILES / 40% MILITARES cards
   ============================================ */

/* The main grid container for the two cards */
#inv-page-4 .grid.grid-cols-2 {
    gap: 0.75rem !important;
    max-width: 100% !important;
    padding: 0 10px !important;
}

/* Each stat card (60% and 40%) */
#inv-page-4 .grid.grid-cols-2>div {
    padding: 0.75rem !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* The percentage numbers (60%, 40%) */
#inv-page-4 .text-3xl {
    font-size: clamp(1.4rem, 4vw, 2rem) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* The labels (CIVILES, MILITARES) */
#inv-page-4 .text-sm {
    font-size: clamp(0.5rem, 1.5vw, 0.75rem) !important;
    white-space: nowrap !important;
}

/* THE DESCRIPTION PARAGRAPHS - THIS IS KEY */
#inv-page-4 p.text-\[10px\],
#inv-page-4 .grid.grid-cols-2 p {
    font-size: clamp(8px, 1.2vw, 11px) !important;
    line-height: 1.4 !important;
    /* REMOVE line-clamp to show full text */
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-height: none !important;
    /* Allow wrapping */
    white-space: normal !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

/* Icons in the cards */
#inv-page-4 i.text-2xl {
    font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
    flex-shrink: 0 !important;
}

/* Coordinator bar */
#inv-page-4 .bg-gray-900\/50 {
    padding: 0.5rem 1rem !important;
    margin: 0 10px !important;
}

#inv-page-4 .bg-gray-900\/50 span {
    font-size: clamp(8px, 1.2vw, 11px) !important;
    white-space: normal !important;
    line-height: 1.3 !important;
}

/* ============================================
   GENERAL FIXES FOR ALL INVESTIGATION SLIDES
   ============================================ */

/* Remove truncation from paragraph text in investigation */
.investigation-page p {
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    display: block !important;
}

/* Ensure text can wrap properly */
.investigation-page .inv-prose,
.investigation-page .leading-relaxed {
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Glass cards should allow content to show */
.investigation-page .rounded-xl,
.investigation-page .rounded-lg {
    overflow: visible !important;
}

/* Mobile portrait - more compact */
@media (max-width: 1024px) and (orientation: portrait) {
    .investigation-page {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #inv-page-4 .grid.grid-cols-2 {
        gap: 0.5rem !important;
    }

    #inv-page-4 .grid.grid-cols-2>div {
        padding: 0.5rem !important;
    }

    #inv-page-4 p.text-\[10px\],
    #inv-page-4 .grid.grid-cols-2 p {
        font-size: 7px !important;
        line-height: 1.3 !important;
        /* Allow 4 lines on mobile portrait */
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

/* ============================================
   PDF VIEWER BUTTON STYLES
   ============================================ */
.pdf-open-button {
    transition: all 0.3s ease;
}

.pdf-open-button:hover {
    background: rgba(0, 0, 0, 0.9) !important;
}

.pdf-open-button:hover span:last-child {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

/* Hide PDF link on desktop where button is more visible */
@media (min-width: 1025px) {
    #passport-pdf-link {
        opacity: 0.6;
    }

    #passport-pdf-link:hover {
        opacity: 1;
    }
}

/* ============================================
   UNIFORM MARGINS FOR ALL INVESTIGATION SLIDES
   Mobile landscape - ensure content doesn't touch edges
   ============================================ */

@media (max-width: 1200px) and (orientation: landscape) {

    /* All investigation pages get consistent padding */
    .investigation-page {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }

    /* All content containers inside */
    .investigation-page>div,
    .investigation-page .max-w-5xl,
    .investigation-page .max-w-4xl,
    .investigation-page .max-w-6xl,
    .investigation-page .w-full {
        max-width: calc(100vw - 180px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Grid layouts */
    .investigation-page .grid {
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Split layouts */
    .inv-split-layout {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 1rem !important;
    }

    /* Ensure navigation buttons have space */
    #inv-prev-btn {
        left: 10px !important;
    }

    #inv-next-btn {
        right: 10px !important;
    }

    /* === SLIDE 4: FIX - Move content up, reduce sizes === */
    #inv-page-4>div {
        padding-top: 5px !important;
        gap: 0.2rem !important;
        justify-content: flex-start !important;
    }

    #inv-page-4 .inv-kicker {
        margin-bottom: 0.1rem !important;
        font-size: 0.5rem !important;
    }

    #inv-page-4 .inv-subtitle {
        font-size: 1.2rem !important;
        margin-bottom: 0.2rem !important;
    }

    #inv-page-4 .inv-prose {
        font-size: 0.65rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.2 !important;
    }

    #inv-page-4 .grid.grid-cols-2 {
        gap: 0.4rem !important;
        margin-bottom: 0.2rem !important;
    }

    #inv-page-4 .grid.grid-cols-2>div {
        padding: 0.4rem !important;
    }

    #inv-page-4 .text-3xl {
        font-size: 1.1rem !important;
    }

    #inv-page-4 .text-sm {
        font-size: 0.5rem !important;
    }

    #inv-page-4 .grid.grid-cols-2 p {
        font-size: 6px !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    #inv-page-4 i.text-2xl {
        font-size: 0.8rem !important;
    }

    #inv-page-4 .bg-gray-900\/50 {
        padding: 0.25rem 0.5rem !important;
        margin-top: 0.2rem !important;
    }

    #inv-page-4 .bg-gray-900\/50 span {
        font-size: 6px !important;
    }

    #inv-page-4 .mt-2 {
        margin-top: 0.2rem !important;
        font-size: 6px !important;
    }

    /* === SLIDE 3: PDF VIEWER - MOSTRAR VISTA PREVIA EN MÓVIL === */
    /* Layout más ancho para el visor de PDF */
    #inv-page-3 .inv-split-layout {
        grid-template-columns: 35% 65% !important;
    }

    #inv-page-3 .inv-visual-panel {
        align-items: stretch !important;
        width: 100% !important;
        padding: 0.5rem !important;
    }

    #inv-page-3 .pdf-viewer-container {
        min-height: 180px !important;
        height: calc(100% - 50px) !important;
        width: 100% !important;
        background: rgba(26, 26, 46, 1) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    #inv-page-3 #passport-pdf-fallback {
        width: 100% !important;
        min-height: 150px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Iframe del PDF - visible en móvil con altura máxima */
    #inv-page-3 #passport-pdf-iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: 180px !important;
        border: none !important;
        display: block !important;
        background: #1a1a2e !important;
    }

    #inv-page-3 #passport-pdf-wrapper {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Ocultar loading cuando el iframe está cargado */
    #inv-page-3 #pdf-loading {
        display: none !important;
    }

    /* Botón de ver completo - más visible */
    #inv-page-3 #passport-pdf-link {
        margin-top: 0.5rem !important;
        font-size: 0.6rem !important;
        padding: 0.4rem 0.8rem !important;
        background: rgba(239, 68, 68, 0.2) !important;
        border-color: rgba(239, 68, 68, 0.4) !important;
    }

    /* === SLIDE 16: BIBLIOTECA - MOBILE OPTIMIZED === */
    #inv-page-16 .inv-glass-panel {
        width: calc(100vw - 180px) !important;
        max-width: calc(100vw - 180px) !important;
        height: 85vh !important;
        max-height: 85vh !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0.5rem !important;
    }

    #inv-page-16 .grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        height: auto !important;
        padding-bottom: 60px !important;
        align-content: start !important;
    }

    #inv-page-16 .file-tile {
        padding: 0.4rem !important;
        min-height: 0 !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    #inv-page-16 .file-icon {
        width: 1.8rem !important;
        height: 1.8rem !important;
        font-size: 0.9rem !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #inv-page-16 .file-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        /* Fix text truncation */
    }

    #inv-page-16 .file-name {
        font-size: 0.55rem !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #inv-page-16 .file-meta {
        font-size: 0.45rem !important;
        margin-top: 1px !important;
        opacity: 0.6 !important;
    }

    /* Hide redundant elements if necessary */
    #inv-page-16 .col-span-full {
        display: none !important;
        /* Hide section dividers to save space if needed, or style small */
    }
}

/* ============================================
   ARCHIVE MODULE - FIX FOR MOBILE LANDSCAPE
   ============================================ */

@media (max-width: 1200px) and (orientation: landscape) {

    /* Info panel - compact */
    /* Info panel - FIXED: Full height for sidebar */
    .archive-info-panel {
        max-height: 100% !important;
        height: 100% !important;
        padding: 10px !important;
        margin-bottom: 0 !important;
        overflow-y: auto !important;
    }

    .archive-info-content h3 {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
    }

    .archive-info-content p {
        font-size: 0.65rem !important;
        line-height: 1.25 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Grid - scroll enabled */
    .archive-grid-panel-wrapper {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px !important;
        overscroll-behavior: contain !important;
    }

    /* Grid - 4 columns, smaller thumbnails */
    /* Grid - 4 columns, smaller thumbnails, TIGHTER GAP */
    .archive-grid-panel {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-auto-rows: min-content !important;
        gap: 2px !important;
        align-content: start !important;
        padding-bottom: 8px !important;
    }

    /* Section headers - tight to content */
    .archive-section-header {
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
    }

    .archive-section-header h4 {
        font-size: 0.6rem !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* Thumbnails - smaller */
    .archive-thumbnail {
        min-height: 45px !important;
        max-height: 80px !important;
    }

    /* PDF thumbnails */
    .pdf-thumb-container i {
        font-size: 0.9rem !important;
        margin-bottom: 2px !important;
    }

    .pdf-thumb-container span {
        font-size: 0.35rem !important;
    }
}

/* ============================================
   PDF VIEWER BUTTON - VISIBLE STYLING
   ============================================ */

.pdf-open-button {
    background: linear-gradient(135deg, rgba(40, 40, 50, 0.98) 0%, rgba(60, 60, 70, 0.98) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.pdf-open-button:hover {
    background: linear-gradient(135deg, rgba(50, 50, 60, 1) 0%, rgba(70, 70, 80, 1) 100%) !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
}

/* ============================================
   DESKTOP: PDF VIEWER - RESPONSIVE Y MÁS GRANDE
   El panel PDF ocupa más espacio proporcionalmente
   ============================================ */
@media (min-width: 1025px) {

    /* Inv-page-3 (La Letra Pequeña) - Layout optimizado para PDF */
    #inv-page-3 .inv-split-layout {
        display: flex !important;
        flex-direction: row !important;
        gap: 2rem !important;
        width: 100% !important;
        max-width: 1400px !important;
        height: calc(100vh - 120px) !important;
        padding: 1rem 2rem !important;
    }

    #inv-page-3 .inv-text-panel {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        padding-right: 1rem !important;
    }

    #inv-page-3 .inv-visual-panel {
        flex: 1 1 65% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: calc(100vh - 140px) !important;
    }

    /* PDF Viewer Container - Máximo espacio */
    #inv-page-3 .pdf-viewer-container {
        flex: 1 !important;
        min-height: 400px !important;
        max-height: none !important;
        height: 100% !important;
    }

    #inv-page-3 #passport-pdf-wrapper {
        width: 100% !important;
        height: 100% !important;
    }

    #inv-page-3 #passport-pdf-iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: 500px !important;
    }
}

/* ============================================
   MOBILE LANDSCAPE: TIPOGRAFÍAS MEJORADAS
   Mayor legibilidad en la investigación
   ============================================ */
@media (max-width: 992px) and (orientation: landscape) {

    /* Títulos más grandes y legibles */
    .inv-subtitle {
        font-size: clamp(1.4rem, 4vw, 2rem) !important;
        line-height: 1.1 !important;
    }

    .inv-kicker {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.5rem !important;
        letter-spacing: 0.5px !important;
    }

    /* Texto principal más legible */
    .inv-prose {
        font-size: clamp(0.85rem, 2vw, 1.1rem) !important;
        line-height: 1.4 !important;
    }

    /* Cards y badges */
    .inv-evidence-badge {
        font-size: 0.55rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Buttons tabs */
    .pdf-tab {
        font-size: 0.6rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    /* Link de abrir PDF */
    #passport-pdf-link {
        font-size: 0.65rem !important;
        padding: 0.4rem 0.8rem !important;
    }

    /* Elementos redacted más legibles */
    .inv-redacted .text-sm {
        font-size: 0.8rem !important;
    }

    .inv-redacted .text-xs {
        font-size: 0.65rem !important;
    }

    /* Estadísticas y números grandes */
    .big-number,
    .investigation-page .text-4xl,
    .investigation-page .text-5xl {
        font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    }

    /* Texto en cards */
    .glass-card-inner p {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
    }

    /* Botones de navegación más grandes */
    .inv-nav-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
    }

    /* PDF panel más grande en landscape móvil */
    #inv-page-3 .inv-visual-panel {
        flex: 1 1 60% !important;
        min-height: 200px !important;
    }

    #inv-page-3 .inv-text-panel {
        flex: 0 0 40% !important;
    }

    #inv-page-3 #passport-pdf-iframe {
        min-height: 200px !important;
    }

    /* Mejor espaciado general */
    .investigation-page-content {
        padding: 0.5rem 1rem !important;
    }
}