/* Import fonts */
        .section-navigation {
            opacity: 0 !important;
        }

        /* ========================================= */
        /* FIX iOS RADICAL - Prevenir TODO overflow */
        /* ========================================= */
        @supports (-webkit-touch-callout: none) {
            html, body {
                overflow-x: hidden !important;
                max-width: 100vw !important;
                width: 100% !important;
                position: relative !important;
            }
            
            /* Clip todo contenido que sobresalga */
            .testimonio-oculto.mostrar,
            #testimonio-ana-alvarez.mostrar,
            #testimonio-maria-jose.mostrar {
                overflow: hidden !important;
                clip-path: inset(0) !important;
            }
            
            /* FIX iOS: audio-player sin desbordamiento */
            .audio-player {
                width: 100% !important;
                max-width: 100% !important;
            }
            
            .audio-player audio {
                width: 100% !important;
                margin-left: 0 !important;
            }
        }

        /*PROPIEDADES NUEVAS EN CSS */
        
        /* ========================================= */
        /* FONDOS BASE - siempre definidos          */
        /* ========================================= */
        
        /* DESKTOP por defecto (>768px) */
        #inicio-exitosa {
            background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
                url("./ultima-exit.png");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: scroll;
            min-height: 100vh;
        }
        
        /* Evitar que cualquier regla posterior oculte fondos */
        .cover,
        section {
            background-color: transparent;
        }

        /* ========================================= */
        /* FIX CRÍTICO PARA iOS Safari              */
        /* background-attachment: fixed NO funciona */
        /* ========================================= */
        
        /* Método 1: Clase añadida por JavaScript - SOLO cambiar attachment */
        .ios-device .cover,
        .ios-device #inicio-exitosa,
        .ios-device #ocultar-menu2,
        .ios-device #cover-fondo-reportaje {
            background-attachment: scroll !important;
        }
        
        /* Método 2: @supports para iOS (backup) */
        @supports (-webkit-touch-callout: none) {
            /* Solo cambiar attachment a scroll en iOS, NO sobrescribir fondos */
            .cover,
            section,
            main,
            #ocultar-menu2 {
                background-attachment: scroll !important;
                /* CRÍTICO: no poner background-color que pueda sobrescribir la imagen */
            }
            
            /* DESACTIVAR ::before en iOS - causaba fondo gris */
            .cover::before,
            section::before,
            #inicio-exitosa::before {
                content: none !important;
                display: none !important;
            }
            
            /* Asegurar que los elementos de contenido no oculten el fondo */
            .cover-content {
                position: relative;
                z-index: 1;
                background: transparent !important;
            }
        }

        @media (max-width: 768px) {
            #leyenda-exitosa-33 {

                padding: 20px 20px !important;
            }

            /* FIX MÓVIL: Contener testimonios */
            .testimonio-oculto,
            .testimonio-oculto.mostrar,
            .testimonio-content,
            #testimonio-ana-alvarez,
            #testimonio-ana-alvarez.mostrar {
                overflow: hidden !important;
                max-width: 100vw !important;
            }
            
            /* FIX MÓVIL: audio-player sin desbordamiento */
            .audio-player {
                width: 100% !important;
                max-width: 300px !important;
            }
            
            .audio-player audio {
                width: 100% !important;
                margin-left: 0 !important;
            }
            
            /* FIX: exclusivo-container no debe causar overflow */
            .exclusivo-container {
                overflow: hidden !important;
                max-width: 100% !important;
                padding: 20px !important;
            }
            
            /* FIX: personas layout */
            .personas {
                overflow: hidden !important;
            }

            #inicio-exitosa {
                background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(158, 153, 153, 0)),
                    url("./imgs/fotos-para-publicar/responsive-mobile-exit.webp") !important;
                background-position: center center !important;
                background-repeat: no-repeat !important;
                background-size: cover !important;
                background-attachment: scroll !important;
                width: 100% !important;
                min-height: 100vh !important;
                min-height: -webkit-fill-available !important;
            }

            /* Añade también para otras secciones */
            .cover,
            section,
            main,
            #back-responsive-main-1,
            #cover-fondo-reportaje,
            #ocultar-menu2 {
                background-attachment: scroll !important;
                background-size: cover !important;
            }
        }


        /*PROPIEDADES NUEVAS EN CSS */
        /*PROPIEDADES NUEVAS EN CSS */
        /*PROPIEDADES NUEVAS EN CSS */
        /*PROPIEDADES NUEVAS EN CSS */
        /*PROPIEDADES NUEVAS EN CSS */
        /*PROPIEDADES NUEVAS EN CSS */

        /* iPhone / iOS only */
        @supports (-webkit-touch-callout: none) {
            section.cover {
                background-repeat: no-repeat !important;
            }

            /* FIX iOS RADICAL: HTML y BODY sin overflow */
            html, body {
                overflow-x: hidden !important;
                max-width: 100vw !important;
                width: 100% !important;
            }

            /* FIX iOS: Contener testimonios para evitar ensanchamiento de página */
            .testimonio-oculto,
            .testimonio-oculto.mostrar,
            .testimonio-content,
            #testimonio-ana-alvarez,
            #testimonio-maria-jose,
            #testimonio-yovanna-retto,
            #testimonio-alejandra,
            #testimonio-christian-dioses {
                overflow: hidden !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
                contain: paint !important;
            }

            /* FIX iOS AGRESIVO: Aplicar a TODOS los elementos dentro de testimonios */
            .testimonio-oculto *,
            .testimonio-oculto.mostrar *,
            .testimonio-content *,
            #testimonio-ana-alvarez *,
            #testimonio-maria-jose * {
                max-width: 100% !important;
                box-sizing: border-box !important;
                transform: none !important;
            }

            /* FIX iOS: Quitar transforms y márgenes problemáticos */
            .testimonio-oculto .audio-box,
            .testimonio-oculto .audio-caption,
            .testimonio-oculto .badge-llamada,
            .testimonio-oculto .exclusivo-container,
            .testimonio-oculto .personas,
            #testimonio-ana-alvarez .audio-box,
            #testimonio-ana-alvarez .audio-caption,
            #testimonio-ana-alvarez .badge-llamada,
            #testimonio-ana-alvarez .exclusivo-container,
            #testimonio-ana-alvarez .personas,
            #testimonio-maria-jose .audio-box,
            #testimonio-maria-jose .audio-caption,
            #testimonio-maria-jose .badge-llamada,
            #testimonio-maria-jose .exclusivo-container,
            #testimonio-maria-jose .personas {
                transform: none !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
            }

            /* FIX iOS: Todos los wrappers dentro de testimonios */
            .testimonio-oculto .img-vehiculos-wrapper,
            .testimonio-oculto .img-yovanna-wrapper,
            .testimonio-oculto .img-ana-wrapper,
            .testimonio-oculto .img-mariajose-wrapper,
            .testimonio-oculto .img-christian-wrapper,
            .testimonio-content .img-vehiculos-wrapper,
            .testimonio-content .img-yovanna-wrapper,
            .testimonio-content .img-ana-wrapper,
            .testimonio-content .img-mariajose-wrapper,
            .testimonio-content .img-christian-wrapper,
            .testimonio-oculto [class*="-wrapper"],
            .testimonio-content [class*="-wrapper"] {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100% !important;
            }

            /* FIX iOS: image-container full-bleed dentro de testimonios */
            .testimonio-oculto .image-container,
            .testimonio-oculto .image-container.full-bleed,
            .testimonio-oculto .image-container.full-bleed-2,
            .testimonio-oculto .image-container.full-bleed-3,
            .testimonio-content .image-container,
            .testimonio-content .image-container.full-bleed,
            .testimonio-content .image-container.full-bleed-2,
            .testimonio-content .image-container.full-bleed-3 {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            /* FIX iOS: document-item dentro de testimonios */
            .testimonio-oculto .document-item,
            .testimonio-content .document-item {
                width: 100% !important;
                max-width: 100% !important;
            }

            /* FIX iOS: video-wrapper y media-box dentro de testimonios */
            .testimonio-oculto .video-wrapper,
            .testimonio-content .video-wrapper,
            .testimonio-oculto .video-container,
            .testimonio-content .video-container,
            .testimonio-oculto .media-box,
            .testimonio-content .media-box {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin: 20px 0 !important;
            }

            .badge-llamada {
                display: inline-block !important;
                background: white !important;
                color: black !important;
                font-weight: 600 !important;
                font-size: 16px !important;
                padding: 13px 3px !important;
                margin-left: 5% !important;
            }

            /* FIX iOS: audio-box sin transformación que cause overflow */
            .audio-box {
                flex: 1 !important;
                margin-top: -22% !important;
                transform: none !important;
                max-width: 100% !important;
            }

            .info h3 {
                font-size: 26px !important;
                font-weight: 800 !important;
                margin: 0 !important;
                margin-bottom: 4px !important;
                margin-left: 14% !important;
            }

            .cargo {
                display: inline-block !important;
                background: #444 !important;
                padding: 4px 10px !important;
                font-size: 14px !important;
                margin-top: 4px !important;
                margin-left: 8% !important;
            }

            .audio-caption {
                border-radius: 12px !important;
                font-weight: 600 !important;
                font-size: 17px !important;
                text-align: center !important;
                margin-top: -8% !important;
                margin-left: -4% !important;
                line-height: 1.4 !important;
                transform: translateX(5%) !important;
            }

            .audio-player {
                backdrop-filter: blur(0px) !important;

            }

            /* FIX iOS: audio sin desbordamiento */
            .audio-player audio {
                width: 100% !important;
                filter: invert(0) hue-rotate(180deg) !important;
                opacity: 0.95 !important;
                margin-left: 0 !important;
                margin-top: 19% !important;
            }

            img[src*="gif6-lima.gif"] {
                display: none !important;
            }

            /* FIX iOS: video wrapper sin desbordamiento */
            .video-wrapper:has(video source[src*="48-nicolas-camuche-480p.mp4"]) {
                width: 100% !important;
                max-width: 100% !important;
                margin: 20px 0 !important;
                border-radius: 12px !important;
                overflow: hidden !important;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
            }

            img.gif6[src*="nicolas-lucar-lima.gif"] {
                top: 30% !important;
                left: 16% !important;
                width: 187px !important;
                height: auto !important;
                position: absolute !important;
                /* necesario si usas top/left */
            }

            /* .carta-testimonio-1.activa[style*="maria-jose-cieza.webp"] {
                width: calc(99% + 24px) !important;
                margin-left: -1% !important;
                min-height: 89px !important;
            }


            .carta-testimonio-1.activa[style*="ana-alvarez-ps.webp"] {
                width: calc(99% + 24px) !important;
                margin-left: -1% !important;
                min-height: 89px !important;
            }
 */

            #testimonio-ana-alvarez {

                padding: 16%;
            }



            #testimonio-maria-jose {
                padding: 16%;

            }

            .image-container.full-bleed-2 {
                padding: 16%;
            }

        }














        p {
            font-weight: 700;
            /* 100 a 900 */

        }


        /* ======== SOLO TABLETS (600px – 1024px) ======== */
        @media (min-width: 600px) and (max-width: 1024px) {

            .author-photo {
                position: fixed;
                width: 61% !important;
                height: auto;
                left: 48% !important;
                bottom: 0 !important;
                transform: translateX(-50%) translateY(25%);
                object-fit: cover;
                z-index: 9999 !important;
            }









            #inicio-exitosa {
                background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(158, 153, 153, 0)),
                    url('./imgs/responsive-tablet-full.webp') !important;
                background-position: center center !important;
                background-repeat: no-repeat !important;
                background-size: cover !important;
                background-attachment: scroll !important;
                width: 100% !important;
                height: 100vh !important;
            }


            .content-section {
                max-width: 90% !important;
                margin: 0 auto !important;
            }

            .document-item {
                width: 48% !important;
                position: relative !important;
            }
        }


        .imagen-posicionable {
            position: fixed;
            /* Permite posicionamiento libre */
            width: 9%;
            /* Mantiene el tamaño que ya tenías */
            cursor: move;
            /* Indica que se puede mover */

            /* Elimina cualquier espacio alrededor */
            margin: 0;
            padding: 0;
            border: none;

            /* Permite arrastrar sin seleccionar texto/otros elementos */
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;

            /* Posición inicial - puedes cambiarla */
            top: 20%;
            left: 50px;
        }

        p {
            line-height: 1.7rem;
            font-size: 1.05rem;
            display: block;
            font-family: "messina", sans-serif;
        }

        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Importación de fuentes locales MessinaSans */
        @font-face {
            font-family: 'MessinaSans';
            src: url('./fuente/font/MessinaSans-Regular.woff2') format('woff2'),
                url('./fuente/font/MessinaSans-Regular.ttf') format('ttf'),
                url('./fuente/font/MessinaSans-Regular.eot');
            font-weight: 400;
            font-style: normal;
        }

        @font-face {
            font-family: 'MessinaSans';
            src: url('./fuente/font/MessinaSans-RegularItalic.woff2') format('woff2'),
                url('./fuente/font/MessinaSans-RegularItalic.woff') format('woff');
            font-weight: 400;
            font-style: italic;
        }

        @font-face {
            font-family: 'MessinaSans';
            src: url('./fuente/font/MessinaSans-Bold.woff2') format('woff2'),
                url('./fuente/font/MessinaSans-Bold.woff') format('woff');
            font-weight: 700;
            font-style: normal;
        }

        @font-face {
            font-family: 'MessinaSans';
            src: url('./fuente/font/MessinaSans-BoldItalic.woff2') format('woff2'),
                url('./fuente/font/MessinaSans-BoldItalic.woff') format('woff');
            font-weight: 700;
            font-style: italic;
        }

        @font-face {
            font-family: 'MessinaSans';
            src: url('./fuente/font/MessinaSans-Black.woff2') format('woff2'),
                url('./fuente/font/MessinaSans-Black.woff') format('woff');
            font-weight: 900;
            font-style: normal;
        }

        @font-face {
            font-family: 'MessinaSans';
            src: url('./fuente/font/MessinaSans-Light.woff2') format('woff2'),
                url('./fuente/font/MessinaSans-Light.woff') format('woff');
            font-weight: 300;
            font-style: normal;
        }

        @font-face {
            font-family: 'MessinaSans';
            src: url('./fuente/font/MessinaSans-SemiBold.woff2') format('woff2'),
                url('./fuente/font/MessinaSans-SemiBold.woff') format('woff');
            font-weight: 600;
            font-style: normal;
        }

        /* Variables CSS */
        :root {
            --primary: "MessinaSans", sans-serif;
            --primaryLight: "MessinaSans", sans-serif;
            --primaryRegular: "MessinaSans", sans-serif;
            --primarySemiBold: "MessinaSans", sans-serif;
            --primaryBold: "MessinaSans", sans-serif;
            --primaryBlack: "MessinaSans", sans-serif;

            --bg-primary: #000000;
            --bg-secondary: #030303;
            --bg-tertiary: #0a0a0a;
            --text-primary: #e0e0e0;
            --text-secondary: #a0a0a0;
            --accent: #bb86fc;
            --accent-secondary: #03dac6;
            --border: #333333;
            --highlight: #ff4081;


        }

        /* Desactivar TODOS los ::before que puedan cubrir fondos */
        .cover::before,
        #inicio-exitosa::before {
            content: none !important;
            display: none !important;
        }
        
        /* El efecto de pulso se logra con un gradiente en el propio elemento, no con ::before */
        /* Esto evita que iOS cubra la imagen con un fondo gris */

        .cover {
            height: 100vh;
            /* 100% alto del viewport */
            width: 100vw;
            background:
                url('./ultima-exit.png') center center scroll;
            background-size: cover;
            /* la imagen cubre toda la pantalla */
            background-repeat: no-repeat;
            /* evita repeticiones */
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
        }


        html,
        body {
            height: 100%;
            width: 100%;
            line-height: 1.6;
            scroll-behavior: smooth;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            /* FIX: Prevenir scroll horizontal en toda la página */
            overflow-x: hidden;
        }

        /* Header with social icons */
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(18, 18, 18, 0.9);
            z-index: 1000;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
        }

        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--accent);
        }

        .social-icons {
            display: flex;
            gap: 1rem;
        }

        .social-icons a {
            color: var(--text-secondary);
            font-size: 1.2rem;
            transition: color 0.3s ease;
        }

        .social-icons a:hover {
            color: var(--accent);
        }

        /* Cover section */

        .cover-content {
            max-width: 800px;
            z-index: 2;
        }

        strong#resaltado-azul {
            color: #003399;

            background-color: #00339939;
            padding: 0.1em 0.3rgba(0, 4, 255, 0.08);
            border-radius: 4px;
            font-weight: 700;
        }

        strong#resaltado-azul-2 {
            color: #000000;

            /* background-color: #ffc32d; */
            padding: 0.1em 0.3rgba(0, 4, 255, 0.08);
            border-radius: 4px;
            font-weight: 700;
        }





        strong#resaltado-rojo {
            color: #f6adad;
            background-color: #fb010158;
            padding: 0.1em 0.3rgba(0, 4, 255, 0.08);
            border-radius: 4px;
            font-weight: 700;
        }

        strong#resaltado-rojo-2 {
            /* -webkit-text-stroke: 3px #000000;  /* grosor y color del contorno */
            /* font-weight: 900;  */




            background-color: #fb01015c;
            padding: 0.1em 0.3rgba(0, 4, 255, 0.08);
            border-radius: 4px;
            font-weight: 700;
        }



        .testimonial-card .name {

            font-family: 'MessinaSans';

        }


        /* ===== ESTRUCTURA PRINCIPAL ===== */
        :root {
            /* Variables de fuentes */
            --font-primary: 'MessinaSans', sans-serif;
            --font-weight-light: 300;
            --font-weight-regular: 400;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
            --font-weight-black: 900;

            /* Colores principales */
            --bg-primary: #000000;
            --bg-secondary: #030303;
            --bg-tertiary: #0a0a0a;
            --text-primary: #e0e0e0;
            --text-secondary: #a0a0a0;
            --accent-blue: #003399;
            --accent-red: #e50201;
            --accent-yellow: #ffc32d;
            --border: #333333;
        }

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

        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

        body {
            font-family: var(--font-primary);
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* ===== LAYOUT CONTAINERS ===== */
        .container {
            width: 100%;
            max-width: 1500px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .document-item {
            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 16px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: auto;
        }

        .image-container {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .image-container img {
            width: 30%;
            height: 100%;
            object-fit: cover;
            /* mantiene la proporción sin distorsión */
            object-position: center;
            transition: transform 0.4s ease;
        }

        /* AÑADE ESTOS ESTILOS A TU CSS */
        .exitosa-audio-card {
            display: flex;
            align-items: center;
            gap: 20px;
            background: linear-gradient(90deg, #e10000 0%, #ff6600 50%, #0047ff 100%);
            border-radius: 25px;
            padding: 20px 30px;
            color: #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            max-width: 1000px;
            margin: 25px auto;
            flex-wrap: wrap;
        }

        .exitosa-audio-image img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 50%;
            border: 4px solid #fff;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        /* Video wrapper: estilos SOLO para desktop (pantallas grandes) */
        @media (min-width: 769px) {
            .video-wrapper {
                width: 200%;
                max-width: 1379px;
                margin: 46px -279px;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            }

            /* Si quieres que el video también se adapte al nuevo tamaño */
            .video-wrapper {
                width: 166%;
                max-width: 1243px;
                margin: 53px -239px;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            }
        }

        /* Video wrapper: estilos para móvil - SIN desbordamiento */
        @media (max-width: 768px) {
            .video-wrapper {
                width: 100% !important;
                max-width: 100% !important;
                margin: 20px 0 !important;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            }
        }

        .exitosa-audio-content {
            flex: 1;
            min-width: 280px;
        }




        /* Hover estilo Netflix (zoom suave) */

        /* Capa sombreada encima de la imagen */

        /* Ícono triangular estilo Netflix */
        .carta-testimonio-1 .overlay-play {
            position: absolute;
            top: 20%;
            left: 92%;
            width: 70px;
            height: 70px;
            transform: translate(-50%, -50%) rotate(90deg);

            opacity: 1;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* SVG de Play tipo Netflix */
        .carta-testimonio-1 .overlay-play svg {
            width: 100%;
            height: 100%;
            fill: rgb(8, 8, 8);
            opacity: 0.92;
        }

        /* Cuando está activa → desaparecer el overlay + icono */
        .carta-testimonio-1.activa .overlay-dark,
        .carta-testimonio-1.activa .overlay-play {
            opacity: 0;
        }




        .document-item {
            position: relative;
            width: 100%;
        }

        .document-item .image-container {
            position: relative;
        }

        .document-item img {
            width: 100%;
            border-radius: 8px;
        }

        /* Leyenda sobre la imagen (sin afectar la imagen ni el layout) */
        .document-item p {
            position: absolute;
            bottom: 0;
            /* left: 0; */
            width: 100%;
            margin-left: -500px;
            /* margin: 0; */
            padding: 2% 40%;
            color: #fff;
            font-weight: bold;
            text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9);
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95), #000000b8);
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            font-size: 0.95rem;
            pointer-events: none;
            z-index: 2;
            box-sizing: border-box;
        }

        /* Efecto al pasar el mouse (opcional) */
        .document-item:hover p {
            background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
            transition: background 0.3s ease;
        }



        .exitosa-audio-text {
            font-family: 'Roboto', sans-serif;
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 12px;
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 15px;
            text-align: justify;
        }

        .exitosa-player {
            width: 100%;
            border-radius: 20px;
            background: #fff;
        }

        .image-container.full-bleed {
            margin-left: -50px;
            margin-right: -50px;
            width: calc(150% + 100px);
            position: relative;
        }

        .image-container.full-bleed-2 {
            margin-left: -50px;
            margin-right: -50px;
            width: calc(300% + 100px);
            position: relative;
        }

        .image-container.full-bleed-3 {
            margin-left: -50px;
            margin-right: -50px;
            width: calc(250% + 100px);
            position: relative;
        }


        .container-completo-card {
            max-width: 1200px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            margin-bottom: 40px;
            color: #2c3e50;
            font-weight: 600;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }

        .collage-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
        }

        /* Estilo para Karla */
        .card-karla {
            flex: 1;
            min-width: 300px;
            max-width: 500px;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .card-karla:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .karla-img-container {
            height: 81%;
            overflow: hidden;
            position: relative;
        }

        .exclusivo-container {
            background: #000;
            color: #fff;
            padding: 40px;
            font-family: Arial, sans-serif;
        }

        /* LLAMADA TELEFÓNICA ARRIBA */
        .badge-llamada {
            display: inline-block;
            background: white;
            color: black;
            font-weight: 700;
            font-size: 26px;
            padding: 6px 20px;
            margin-bottom: 30px;
        }

        .punto-rojo {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: red;
            border-radius: 50%;
            margin-left: 6px;
        }

        /* CONTENEDOR DOS COLUMNAS */
        .personas {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 20px;
            gap: 40px;
        }

        /* COLUMNA IZQUIERDA */
        .persona img {
            width: 180px;
            border-radius: 6px;
            margin-bottom: 12px;
        }

        .info h3 {
            font-size: 30px;
            font-weight: 900;
            margin: 0;
            line-height: 1.1;
        }

        .cargo {
            display: inline-block;
            background: #444;
            padding: 4px 10px;
            font-size: 15px;
            margin-top: 6px;
            border-radius: 4px;
        }

        /* AUDIO A LA DERECHA */
        .audio-box {
            flex: 1;
        }

        .audio-box audio {
            width: 100%;
            margin-top: 10px;
        }

        /* FRASE ENCIMA DEL AUDIO */
        .audio-caption {
            background: rgba(255, 255, 255, 0.09);
            padding: 10px 14px;
            border-radius: 10px;
            margin-bottom: 10px;
            display: inline-block;
            font-size: 16px;
        }

        .audio-player {
            width: 108%;
            max-width: 399px;
            padding: 20px;
            backdrop-filter: blur(6px);
        }

        /* Quitar estilo feo por defecto del audio */
        .audio-player audio {
            width: 118%;
            filter: invert(0) hue-rotate(180deg);
            opacity: 0.95;
            margin-left: -38%;
            margin-top: 19%;
        }

        /* Hover suave */
        .audio-player:hover {
            transform: translateY(-2px);
            transition: 0.3s ease;
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.45);
        }




        .karla-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .card-karla:hover .karla-img-container img {
            transform: scale(1.05);
        }

        .karla-caption {
            padding: 20px;
            background: linear-gradient(to right, #030303 0%, #000000 100%);
        }

        .karla-caption h3 {
            color: #d35400;
            margin-bottom: 8px;
            font-size: 18px;
        }

        /* Estilo para Yovanna */
        .card-yovanna {
            flex: 1;
            min-width: 300px;
            max-width: 500px;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .card-yovanna:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .yovanna-img-container {
            height: 79%;
            overflow: hidden;
            position: relative;
        }

        .yovanna-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
            filter: brightness(0.95);
        }

        .card-yovanna:hover .yovanna-img-container img {
            transform: scale(1.05);
        }

        .yovanna-caption {
            padding: 26px;
            background: linear-gradient(to right, #030303 0%, #000000 100%);
        }

        .yovanna-caption h3 {
            color: #0f766e;
            margin-bottom: 8px;
            font-size: 18px;
        }


        #carnet-responsive {
            width: calc(150% + -341px);
        }

        /* Responsive */
        @media (max-width: 768px) {

            #leyenda-exitosa-1 {

                padding: -18px 78px !important;
            }

            #carnet-responsive {

                width: calc(160% - 102px) !important;



            }


            #cover5-responsive {
                background-size: cover;
                /* no deformación */
                background-repeat: no-repeat;

                /* 👉 aquí mueves la imagen como quieras */
                background-position: 29% center !important;

                height: 100vh !important;
            }






            .author-photo {
                position: fixed;
                width: 73% !important;
                height: auto;
                left: 46% !important;
                bottom: 0 !important;
                transform: translateX(-50%) translateY(20%);
                object-fit: cover;
                z-index: 9999 !important;
            }

            /* NOTA: Estos estilos ya están definidos arriba en el primer bloque @supports iOS */
            /* Los dejamos comentados para evitar duplicación y problemas de desbordamiento */
            /* 
            .badge-llamada, .audio-box, .info h3, .cargo, .audio-caption, 
            .audio-player, .audio-player audio, .video-wrapper - ya definidos arriba 
            */

            img.gif6[src*="nicolas-lucar-lima.gif"] {
                top: 30% !important;
                left: 16% !important;
                width: 187px !important;
                height: auto !important;
                position: absolute !important;
                /* necesario si usas top/left */
            }

            .carta-testimonio-1.activa[style*="maria-jose-cieza.webp"] {
                width: calc(99% + 24px) !important;
                margin-left: -1% !important;
                min-height: 89px !important;
            }


            .carta-testimonio-1.activa[style*="ana-alvarez-ps.webp"] {
                width: calc(99% + 24px) !important;
                margin-left: -1% !important;
                min-height: 89px !important;
            }


            #testimonio-ana-alvarez {

                padding: 16%;
            }



            #testimonio-maria-jose {
                padding: 16%;

            }

            .image-container.full-bleed-2 {
                padding: 16%;
            }

            .collage-wrapper {
                flex-direction: column;
                align-items: center;
            }

            .card-karla,
            .card-yovanna {
                max-width: 100%;
            }
        }

        .attribution {
            text-align: center;
            margin-top: 40px;
            color: #6c757d;
            font-size: 14px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {


            .carta-testimonio-1 {
                width: calc(115% + 20px) !important;
                margin-left: -10% !important;
                min-height: 25vh !important;
            }
        }

        /* Tablets pequeñas y móviles grandes */
        @media (max-width: 576px) {
            .carta-testimonio-1 {
                width: calc(120% + 20px) !important;
                margin-left: -12% !important;
                min-height: 22vh !important;
            }
        }

        /* Móviles medianos */
        @media (max-width: 480px) {
            .carta-testimonio-1 {
                width: calc(125% + 20px) !important;
                margin-left: -15% !important;
                min-height: 20vh !important;
            }
        }

        /* Móviles pequeños */
        @media (max-width: 375px) {
            .carta-testimonio-1 {
                width: calc(128% + 26px) !important;
                margin-left: -18% !important;
                min-height: 18vh !important;
            }
        }

        /* Para móviles, ajustar los márgenes negativos */
        @media (max-width: 768px) {

            #parrafo-responsive {
                padding: 20px 20px !important;
            }

            /* Estilos base para media-box en móvil (los fixes para testimonios vienen después) */
            .media-box {
                width: 159% !important;
                max-width: 3078px !important;
                margin-left: -62px !important;
            }

            .media-overlay {

                padding: 15px 25px;
                font-size: 14px;

            }

            /* Estilos base para full-bleed en móvil (los fixes para testimonios vienen después) */
            .image-container.full-bleed {
                margin-left: -20px;
                margin-right: -20px;
                width: calc(160% + 10px) !important;
            }

            .image-container.full-bleed-2 {
                margin-left: -50px;
                margin-right: -50px;
                width: calc(142% + 86px) !important;
                position: relative;
            }

            .document-item p {
                padding: -12px 72px !important;

                font-size: 10px !important;

            }



            .image-container img {
                height: auto;
                display: block;
                transition: transform 0.5s ease;
            }


            /* Estilos base para image-container en móvil (los fixes para testimonios vienen después) */
            .image-container {
                width: 140% !important;
                border-radius: 10px;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* FIX: Contener testimonios en móviles para evitar ensanchamiento */
            .testimonio-oculto,
            .testimonio-oculto.mostrar,
            .testimonio-oculto-der,
            .testimonio-oculto-der.mostrar {
                overflow-x: hidden !important;
                max-width: 100% !important;
            }

            /* FIX CRÍTICO: media-box dentro de testimonios - SIN desbordamiento */
            .testimonio-oculto .media-box,
            .testimonio-content .media-box {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin: 20px 0 !important;
            }

            .testimonio-oculto .image-container,
            .testimonio-oculto .image-container.full-bleed,
            .testimonio-oculto .image-container.full-bleed-2,
            .testimonio-oculto .image-container.full-bleed-3,
            .testimonio-content .image-container,
            .testimonio-content .image-container.full-bleed,
            .testimonio-content .image-container.full-bleed-2,
            .testimonio-content .image-container.full-bleed-3 {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            .testimonio-oculto .document-item,
            .testimonio-content .document-item {
                max-width: 100% !important;
                width: 100% !important;
            }

            /* FIX: Contener wrappers de imágenes específicos dentro de testimonios */
            .testimonio-oculto .img-vehiculos-wrapper,
            .testimonio-oculto .img-yovanna-wrapper,
            .testimonio-oculto .img-ana-wrapper,
            .testimonio-oculto .img-mariajose-wrapper,
            .testimonio-oculto .img-christian-wrapper,
            .testimonio-content .img-vehiculos-wrapper,
            .testimonio-content .img-yovanna-wrapper,
            .testimonio-content .img-ana-wrapper,
            .testimonio-content .img-mariajose-wrapper,
            .testimonio-content .img-christian-wrapper {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100% !important;
            }

            /* FIX: Cualquier elemento con 100vw dentro de testimonios */
            .testimonio-oculto [class*="-wrapper"],
            .testimonio-content [class*="-wrapper"] {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100% !important;
            }

            /* FIX: video-wrapper dentro de testimonios */
            .testimonio-oculto .video-wrapper,
            .testimonio-content .video-wrapper,
            .testimonio-oculto .video-container,
            .testimonio-content .video-container {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin: 20px 0 !important;
            }

            /* FIX: media-box dentro de testimonios */
            .testimonio-oculto .media-box,
            .testimonio-content .media-box {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            /* FIX: exclusivo-container y audio dentro de testimonios */
            .testimonio-oculto .exclusivo-container,
            .testimonio-content .exclusivo-container,
            .testimonio-oculto .audio-container,
            .testimonio-content .audio-container {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                box-sizing: border-box !important;
            }
        }






        .media-box {

            width: 172%;
            max-width: 3078px;
            margin-left: -240px;
        }






        .document-item p {
            font-size: 18px;
            line-height: 1.5;
            color: #ffffff;
            text-align: center;
            margin: 0;
        }

        .section {
            width: 100%;
            position: relative;
        }

        .fullscreen-section {
            height: 100vh;
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* ===== COMPONENTES REUTILIZABLES ===== */

        /* Menú lateral */
        .menu {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 70px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 0.6s ease;
            z-index: 1000;
        }

        .home_menu {
            display: flex;
            align-items: center;
            gap: 50px;
            transform: rotate(-90deg);
        }

        .menu a {
            color: #e0e0e0;
            text-decoration: none;
            font-size: 24px;
            letter-spacing: 2px;
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .menu a:hover {
            color: white;
            transform: scale(1.1);
        }

        /* Portadas */
        .cover {
            height: 100vh;
            width: 100vw;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
        }

        .cover-content {
            max-width: 800px;
            padding: 0 20px;
            z-index: 2;
        }

        /* Indicador de scroll */
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
            z-index: 2;
            color: white;
        }


        .foto-testimonio {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
        }

        .testimonio-details {
            flex: 1;
        }

        .btn-abrir {
            margin-top: 10px;
            background: #ff4141;
            color: white;
            border: none;
            padding: 8px 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn-abrir:hover {
            background: #d93636;
        }

        /* Div oculto inicialmente */
        .testimonio-oculto {
            display: none;
            color: #fff;
            padding: 30px;
            /* FIX: Prevenir que el contenido del testimonio ensanche la página */
            overflow-x: hidden;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* FIX: Contener testimonio-content para evitar ensanchamiento */
        .testimonio-content {
            overflow-x: hidden !important;
            max-width: 100% !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        .testimonio-oculto.mostrar {
            display: block;
            animation: aparecer 0.4s ease-in-out;
            overflow-x: hidden;
        }

        /* FIX AGRESIVO: Contener el contenido interno de testimonios */
        .testimonio-oculto *,
        .testimonio-content * {
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        
        /* FIX AGRESIVO: Ningún elemento dentro de testimonios puede tener margin negativo */
        .testimonio-oculto > *,
        .testimonio-content > *,
        .testimonio-oculto .testimonio-content > * {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .testimonio-oculto img,
        .testimonio-content img {
            max-width: 100% !important;
            height: auto;
        }

        .testimonio-oculto p,
        .testimonio-content p {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* FIX: Limitar elementos full-bleed dentro de testimonios para evitar ensanchamiento */
        .testimonio-oculto .image-container.full-bleed,
        .testimonio-oculto .image-container.full-bleed-2,
        .testimonio-oculto .image-container.full-bleed-3,
        .testimonio-content .image-container.full-bleed,
        .testimonio-content .image-container.full-bleed-2,
        .testimonio-content .image-container.full-bleed-3 {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        .testimonio-oculto .document-item,
        .testimonio-content .document-item {
            max-width: 100%;
        }

        /* FIX GLOBAL: video-wrapper y media-box dentro de testimonios (todos los viewports) */
        .testimonio-oculto .video-wrapper,
        .testimonio-content .video-wrapper {
            width: 100% !important;
            max-width: 100% !important;
            margin: 20px 0 !important;
        }

        .testimonio-oculto .media-box,
        .testimonio-content .media-box {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .testimonio-oculto .video-container,
        .testimonio-content .video-container {
            width: 100% !important;
            max-width: 100% !important;
        }

        /* FIX GLOBAL: Todos los wrappers de imágenes dentro de testimonios */
        .testimonio-oculto .img-vehiculos-wrapper,
        .testimonio-oculto .img-yovanna-wrapper,
        .testimonio-oculto .img-ana-wrapper,
        .testimonio-oculto .img-mariajose-wrapper,
        .testimonio-oculto .img-christian-wrapper,
        .testimonio-oculto .img-chats-wrapper,
        .testimonio-oculto .img-lambayeque-wrapper,
        .testimonio-content .img-vehiculos-wrapper,
        .testimonio-content .img-yovanna-wrapper,
        .testimonio-content .img-ana-wrapper,
        .testimonio-content .img-mariajose-wrapper,
        .testimonio-content .img-christian-wrapper,
        .testimonio-content .img-chats-wrapper,
        .testimonio-content .img-lambayeque-wrapper {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        @keyframes aparecer {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

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



        .carta-testimonio-1 {
            width: calc(149% + 151px);
            margin-left: -37%;
            color: white;
            background-image: url(./imgs/fotos-para-publicar/yovanna-retto-testimonio.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 36vh !important;
            position: relative;
            z-index: 1;
        }

        /* Si necesitas un overlay oscuro para mejorar la legibilidad del texto */

        /* Asegura que el contenido interno esté por encima del fondo */
        .testimonio-details {
            position: relative;
            z-index: 2;
            padding: 20px;
            /* Añade espacio alrededor del contenido */
        }

        .testimonio-details {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .foto-testimonio {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
        }

        .texto-testimonio {
            flex: 1;
        }











































        .btn-abrir {
            margin-top: 10px;
            background: #ff4141;
            color: white;
            border: none;
            padding: 8px 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn-abrir:hover {
            background: #d93636;
        }

        /* Contenedor oculto */

        .testimonio-oculto.mostrar {
            display: block;
            animation: aparecer 0.4s ease-in-out;
        }

        @keyframes aparecer {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

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




        /* Tarjetas de s */
        .testimonial-card {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(12px);
            padding: 1.5rem 2rem;
            border-radius: 1rem;
            width: 100%;
            max-width: 550px;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }



        /* Elementos colapsables */
        .collapsible {
            margin-bottom: 1.5rem;
        }

        .collapsible > p {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.9;
            text-align: justify;
            padding: 0 1.5rem;
        }

        .collapsible-header {
            padding: 1rem 1.5rem;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            border-left: 4px solid var(--accent-blue);
        }

        .collapsible-header:hover {
            background: #383838;
        }

        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
            background: var(--bg-secondary);
            border-radius: 0 0 8px 8px;
        }

        .collapsible-content.active {
            max-height: 100%;
        }

        .collapsible-content-inner {
            padding: 1.5rem;
        }

        /* ===== TIPOGRAFÍA ===== */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: var(--font-primary);
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        h1 {
            font-size: 3.5rem;
            font-weight: var(--font-weight-bold);
        }

        h2 {
            font-size: 2.5rem;
            font-weight: var(--font-weight-semibold);
        }

        h3 {
            font-size: 1.8rem;
            font-weight: var(--font-weight-semibold);
        }

        p {
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }

        /* Resaltados de texto */
        .text-highlight-blue {
            color: var(--accent-blue);
            background-color: rgba(0, 51, 153, 0.1);
            padding: 0.1em 0.3em;
            border-radius: 4px;
            font-weight: var(--font-weight-bold);
        }

        .text-highlight-red {
            color: #f6adad;
            background-color: rgba(251, 1, 1, 0.2);
            padding: 0.1em 0.3em;
            border-radius: 4px;
            font-weight: var(--font-weight-bold);
        }

        .text-highlight-yellow {
            color: #000000;
            background-color: rgba(255, 195, 45, 0.3);
            padding: 0.1em 0.3em;
            border-radius: 4px;
            font-weight: var(--font-weight-bold);
        }

        /* ===== MEDIA QUERIES RESPONSIVE ===== */

        /* Tablets */
        @media (max-width: 1024px) {
            .container {
                padding: 0 15px;
            }

            h1 {
                font-size: 2.8rem;
            }

            h2 {
                font-size: 2.2rem;
            }

            .menu {
                width: 60px;
            }

            .home_menu {
                gap: 40px;
            }

            .menu a {
                font-size: 20px;
            }
        }

        /* Móviles grandes */
        @media (max-width: 768px) {
            html {
                font-size: 14px;
            }

            .gorro {
                font-size: 50% !important;
                padding: 10%;
                color: black !important;
            }
        }

        h1 {
            font-size: 2.2rem;
        }

        h2 {
            font-size: 1.8rem;
        }

        .menu {
            width: 50px;
        }

        .home_menu {
            gap: 30px;
        }

        .menu a {
            font-size: 16px;
        }

        .testimonial-card {
            flex-direction: column;
            text-align: center;
            padding: 1rem;
        }

        .cover-content {
            padding: 0 15px;
        }


        /* Móviles pequeños */
        @media (max-width: 480px) {
            html {
                font-size: 13px;
            }

            h1 {
                font-size: 1.8rem;
            }

            h2 {
                font-size: 1.5rem;
            }

            .menu {
                width: 40px;
            }

            .home_menu {
                gap: 20px;
            }

            .menu a {
                font-size: 14px;
                letter-spacing: 1px;
            }

            .cover {
                background-attachment: scroll !important;
            }
        }

        /* Eliminar los br innecesarios del HTML */
        .cover-content br {
            display: none !important;
        }

        /* Paleta de colores Radio Exitosa */
        :root {
            --exitosa-red: #e10000 !important;
            --exitosa-orange: #ff6600 !important;
            --exitosa-blue: #0047ff !important;
            --exitosa-dark: #1a1a1a !important;
            --exitosa-light: #f5f5f5 !important;
            --exitosa-gray: #666666 !important;
        }


        /* Contenedor principal de la línea de tiempo */
        .timeline-container {
            max-width: 1182px !important;
            margin: 0 auto !important;
            padding: 40px 20px !important;
            height: 117vh !important;
            overflow: hidden !important;
            position: relative !important;
        }

        /* Cabecera de la línea de tiempo */
        .timeline-header {
            text-align: center !important;
            margin-bottom: 50px !important;
            color: white !important;
            padding-top: 30px !important;
            opacity: 0 !important;
            transform: translateY(-30px) !important;
            animation: fadeInDown 1s ease-out 0.5s forwards !important;
        }

        .timeline-header h1 {
            font-size: 3rem !important;
            margin-bottom: 15px !important;
            font-weight: 700 !important;
            background: linear-gradient(45deg, var(--exitosa-red), var(--exitosa-orange), var(--exitosa-blue)) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }

        .timeline-header p {
            font-size: 1.2rem !important;
            opacity: 0.8 !important;
            color: var(--exitosa-light) !important;
        }

        /* Línea de tiempo principal - Scroll invisible */
        .timeline {
            position: relative !important;
            padding: 60px 0 !important;
            height: calc(100vh - 200px) !important;
            overflow-y: scroll !important;
            scrollbar-width: none !important;
            /* Firefox */
            -ms-overflow-style: none !important;
            /* IE and Edge */
        }

        .timeline::-webkit-scrollbar {
            display: none !important;
            /* Chrome, Safari and Opera */
        }

        /* Línea central con gradiente Exitosa */
        .timeline::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            bottom: 0 !important;
            left: 50% !important;
            width: 3px !important;
            background: linear-gradient(to bottom,
                    var(--exitosa-red),
                    var(--exitosa-orange),
                    var(--exitosa-blue)) !important;
            transform: translateX(-50%) !important;
            border-radius: 2px !important;
            box-shadow: 0 0 20px rgba(225, 0, 0, 0.3) !important;
        }

        /* Elementos individuales de la línea de tiempo */
        .timeline-item {
            display: flex !important;
            margin-bottom: 80px !important;
            position: relative !important;
            opacity: 0 !important;
            transform: translateX(-100px) !important;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        .timeline-item:nth-child(even) {
            transform: translateX(100px) !important;
        }

        .timeline-item.visible {
            opacity: 1 !important;
            transform: translateX(0) !important;
        }

        /* Años con estilo minimalista */
        .timeline-year {
            position: absolute !important;
            top: -10px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            background: var(--exitosa-dark) !important;
            color: white !important;
            padding: 12px 24px !important;
            border-radius: 25px !important;
            font-weight: 600 !important;
            z-index: 10 !important;
            border: 2px solid var(--exitosa-red) !important;
            box-shadow: 0 4px 15px rgba(225, 0, 0, 0.3) !important;
            font-size: 0.9rem !important;
            transition: all 0.3s ease !important;
        }

        .timeline-year:hover {
            background: var(--exitosa-red) !important;
            transform: translateX(-50%) scale(1.05) !important;
        }

        /* Contenido de cada item */
        .timeline-content {
            display: flex !important;
            width: 100% !important;
            position: relative !important;
            padding-top: 40px !important;
        }

        .timeline-item:nth-child(odd) .timeline-content {
            flex-direction: row !important;
        }

        .timeline-item:nth-child(even) .timeline-content {
            flex-direction: row-reverse !important;
        }

        /* Iconos con animación */
        .timeline-icon {
            flex: 0 0 70px !important;
            height: 70px !important;
            background: linear-gradient(135deg, var(--exitosa-red), var(--exitosa-orange)) !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 8px 25px rgba(225, 0, 0, 0.4) !important;
            z-index: 10 !important;
            position: relative !important;
            margin: 0 20px !important;
            transition: all 0.4s ease !important;
            cursor: pointer !important;
        }

        .timeline-icon:hover {
            transform: scale(1.1) rotate(10deg) !important;
            box-shadow: 0 12px 30px rgba(225, 0, 0, 0.6) !important;
        }

        .timeline-icon i {
            font-size: 1.6rem !important;
            color: white !important;
        }

        /* Tarjetas de contenido */
        .timeline-text {
            flex: 1 !important;
            background: rgba(255, 255, 255, 0.95) !important;
            padding: 25px !important;
            border-radius: 15px !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
            position: relative !important;
            transition: all 0.4s ease !important;
            max-width: 450px !important;
            backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .timeline-text:hover {
            transform: translateY(-8px) !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
        }

        /* Triángulos decorativos */
        .timeline-text::before {
            content: '' !important;
            position: absolute !important;
            top: 30px !important;
            width: 20px !important;
            height: 20px !important;
            background: rgba(255, 255, 255, 0.95) !important;
            transform: rotate(45deg) !important;
            border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .timeline-item:nth-child(odd) .timeline-text::before {
            left: -10px !important;
        }

        .timeline-item:nth-child(even) .timeline-text::before {
            right: -10px !important;
        }

        /* Tipografía */
        .timeline-text h3 {
            color: var(--exitosa-dark) !important;
            margin-bottom: 12px !important;
            font-size: 1.3rem !important;
            font-weight: 700 !important;
            background: linear-gradient(45deg, var(--exitosa-red), var(--exitosa-blue)) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }

        .timeline-text p {
            color: var(--exitosa-gray) !important;
            margin-bottom: 15px !important;
            font-size: 1rem !important;
            line-height: 1.6 !important;
        }

        /* Documentos e imágenes */
        .timeline-documents {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 12px !important;
            margin-top: 15px !important;
        }





        /* Indicador de scroll personalizado */
        .timeline-scroll-indicator {
            position: absolute !important;
            right: 20px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 10px !important;
            opacity: 0.7 !important;
            transition: opacity 0.3s ease !important;
        }

        .timeline-scroll-indicator:hover {
            opacity: 1 !important;
        }

        .scroll-dot {
            width: 8px !important;
            height: 8px !important;
            border-radius: 50% !important;
            background: var(--exitosa-light) !important;
            transition: all 0.3s ease !important;
            cursor: pointer !important;
        }

        .scroll-dot.active {
            background: var(--exitosa-red) !important;
            transform: scale(1.3) !important;
        }

        /* Animaciones */
        @keyframes fadeInDown {
            from {
                opacity: 0 !important;
                transform: translateY(-30px) !important;
            }

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

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1) !important;
            }

            50% {
                transform: scale(1.05) !important;
            }
        }

        /* Efecto de partículas en la línea */
        .timeline::after {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 50% !important;
            width: 3px !important;
            height: 100% !important;
            background: linear-gradient(to bottom,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent) !important;
            transform: translateX(-50%) !important;
            animation: shine 3s ease-in-out infinite !important;
        }

        @keyframes shine {

            0%,
            100% {
                opacity: 0 !important;
            }

            50% {
                opacity: 1 !important;
            }
        }

        /* Responsive para tablets */
        @media (max-width: 1024px) {
            .timeline-container {
                padding: 30px 15px !important;
            }

            .timeline-header h1 {
                font-size: 2.5rem !important;
            }

            .timeline-text {
                max-width: 380px !important;
                padding: 20px !important;
            }

            .timeline-icon {
                flex: 0 0 60px !important;
                height: 60px !important;
                margin: 0 15px !important;
            }
        }

        /* Responsive para móviles */
        @media (max-width: 768px) {
            .timeline::before {
                left: 30px !important;
            }

            .timeline-item {
                flex-direction: column !important;
                margin-bottom: 60px !important;
                transform: translateY(50px) !important;
            }

            .timeline-item.visible {
                transform: translateY(0) !important;
            }

            .timeline-year {
                left: 30px !important;
                transform: translateX(0) !important;
                font-size: 0.8rem !important;
                padding: 10px 18px !important;
            }

            .timeline-content {
                padding-top: 50px !important;
                padding-left: 70px !important;
                flex-direction: row !important;
            }

            .timeline-icon {
                position: absolute !important;
                left: 0 !important;
                top: 40px !important;
                width: 55px !important;
                height: 55px !important;
                margin: 0 !important;
            }

            .timeline-icon i {
                font-size: 1.3rem !important;
            }

            .timeline-text::before {
                display: none !important;
            }

            .timeline-header h1 {
                font-size: 2.2rem !important;
            }

            .timeline-text {
                max-width: none !important;
                margin-left: 0 !important;
                padding: 20px !important;
            }

            .timeline-text h3 {
                font-size: 1.2rem !important;
            }

            .timeline-scroll-indicator {
                display: none !important;
            }
        }

        @media (max-width: 480px) {
            .timeline-container {
                padding: 20px 10px !important;
            }

            .timeline-header h1 {
                font-size: 2rem !important;
            }

            .timeline-header p {
                font-size: 1rem !important;
            }

            .timeline-content {
                padding-left: 60px !important;
            }

            .timeline-icon {
                width: 50px !important;
                height: 50px !important;
            }

            .timeline-icon i {
                font-size: 1.2rem !important;
            }

            .timeline-text {
                padding: 18px !important;
            }

            .timeline-text h3 {
                font-size: 1.1rem !important;
            }
        }

        /* Asegurar que el cover-content ocupe toda la altura */

        @keyframes bounce {

            0%,
            100% {
                transform: translateX(-50%) translateY(0) !important;
            }

            50% {
                transform: translateX(-50%) translateY(10px) !important;
            }
        }

        #CHICLAYO-EXIT {
            background-image: url(./imgs/fotos-para-publicar/fondo.webp);

        }

        #exit-finaldemrd {
            background-image: url(./imgs/fotos-para-publicar/fondo.webp);

        }

        #LIMA {
            background-image: url(./imgs/fotos-para-publicar/fondo.webp);

        }

        #PIURA-EXIT {
            background-image: url(./imgs/fotos-para-publicar/fondo.webp);

        }

        /* ===== ANIMACIONES ===== */
        @keyframes bounce {

            0%,
            100% {
                transform: translateX(-50%) translateY(0);
            }

            50% {
                transform: translateX(-50%) translateY(10px);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        @keyframes floaty {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        /* ===== MEJORAS DE SCROLL SUAVE ===== */
        html {
            scroll-behavior: smooth;
        }

        /* Optimización para dispositivos con reducción de movimiento */
        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ===== MEJORAS ESPECÍFICAS PARA ELEMENTOS EXISTENTES ===== */

        /* Logo animado de provincias */
        #image-loge-provincias {
            width: 55%;
            height: auto;
            margin-top: 50px;
            animation:
                logoEntrance 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards,
                logoGlow 4s ease-in-out 2s infinite alternate,
                logoFloat 6s ease-in-out 3s infinite;
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
            position: relative;
            z-index: 10;
            transform-origin: center;
        }

        /* GIFs flotantes */
        .gif,
        .gif1,
        .gif2,
        .gif3,
        .gif4,
        .gif5,
        .gif6,
        .gif7,
        .gif8,
        .gif9,
        .gif10,
        .gif11 {
            position: absolute;
            border: 3px solid white;
            object-fit: cover;
            filter: brightness(0.9) contrast(1.05);
            opacity: 0.95;
            transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
            animation: floaty 5s ease-in-out infinite;
            opacity: 50%;
            transform: scale(1.15) !important;
        }

        /* Efecto hover para GIFs */
        .gif:hover,
        .gif1:hover,
        .gif2:hover,
        .gif3:hover,
        .gif4:hover,
        .gif5:hover,
        .gif6:hover,
        .gif7:hover,
        .gif8:hover,
        .gif9:hover,
        .gif10:hover,
        .gif11:hover {
            transform: scale(1.18) translateY(-8px);
            z-index: 30;
            opacity: 100%;
            filter: brightness(1.15) contrast(1.2);
            box-shadow: 0 15px 40px rgba(255, 50, 50, 0.6);
        }

        /* ===== MEJORAS DE ACCESIBILIDAD ===== */

        /* Mejora de contraste para texto */


        /* Enfoque para elementos interactivos */
        a:focus,
        button:focus {
            outline: 2px solid var(--accent-blue);
            outline-offset: 2px;
        }

        /* Mejora de legibilidad en fondos complejos */
        .text-on-image {
            background: rgba(0, 0, 0, 0.6);
            padding: 1rem;
            border-radius: 8px;
            backdrop-filter: blur(5px);
        }

        .cover h1 {
            font-size: 3.5rem;
            font-weight: 700;
            font-family: 'MessinaSans';

            margin-bottom: 1.5rem;
            line-height: 1.2;
            animation: fadeInDown 1.5s ease-out;
            color: white;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
        }

        .bajada {
            text-align: center;
        }

        .cover .bajada {
            font-size: 2rem;
            margin-bottom: 2rem;
            animation: fadeInUp 1.5s ease-out 0.5s both;
            color: #000000;

        }

        .author-info {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
            animation: fadeIn 1.5s ease-out 1s both;
        }

        .author-photo {
            position: fixed;
            width: 25%;
            height: auto;
            right: 20px;
            left: auto;
            bottom: 0;
            transform: translateY(25%);
            object-fit: cover;
            z-index: 9999 !important;
        }


        .author-details {
            text-align: left;
        }

        .author-name {
            font-weight: 600;
        }

        .author-social {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.3rem;
        }

        .author-social a {
            color: var(--text-secondary);
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .author-social a:hover {
            color: var(--accent);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
            z-index: 2;
            color: white;
        }

        /* Content Sections */
        .content-section {
            max-width: 900px;
            margin: 0 auto;
        }

        /* Text containers */
        .text-container {
            margin-bottom: 3rem;
            padding: 2rem;
            background: var(--bg-secondary);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            animation: fadeIn 1s ease-out;
            border-left: 4px solid var(--accent);
            transition: all 0.3s ease;
        }

        .text-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
        }

        .text-with-overflow {
            max-height: 200px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        .text-with-overflow.expanded {
            max-height: none;
        }

        .text-with-overflow::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(transparent, var(--bg-secondary));
            transition: all 0.3s ease;
        }

        .text-with-overflow.expanded::after {
            opacity: 0;
        }

        .expand-btn {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: var(--accent);
            color: var(--bg-primary);
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            z-index: 3;
            font-family: inherit;
            font-size: 0.8rem;
            transition: all 0.3s ease;
        }

        .expand-btn:hover {
            background: var(--accent-secondary);
            color: var(--bg-primary);
        }

        .text-normal {
            border-left: 4px solid var(--accent-secondary);
        }

        .gorro {
            font-size: 1.5em;
            line-height: 1.8;
            color: #f0f0f0;
            font-style: normal;
            text-align: center;
        }

        .metadata {
            background: #f0f0f096;
            padding: 1.5rem;
            border-radius: 8px;
            margin: 2rem 0;
            color: var(--text-secondary);
        }

        .author-disclaimer {
            background: rgba(255, 193, 7, 0.1);
            border: 1px solid rgba(255, 193, 7, 0.3);
            border-radius: 8px;
            padding: 1.5rem;
            margin: 2rem 0;
            animation: pulse 2s infinite;
        }

        h2 {
            font-size: 2rem;
            font-weight: 600;
            margin: 2rem 0 1rem 0;
            color: var(--accent);
            border-bottom: 2px solid var(--border);
            padding-bottom: 0.5rem;
        }

        p {
            margin-bottom: 1.5rem;
            text-align: justify;
            font-size: 1.4rem;
            line-height: 1.8;
            font-weight: normal;
        }

        /* Image containers */
        .image-container {
            margin: 2rem 0;
            overflow: hidden;

        }

        .image-container img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }

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

        .image-caption {
            padding: 0.8rem;
            background: var(--bg-tertiary);
            font-size: 1.2rem;
            color: var(--text-secondary);
            text-align: center;
        }

        /* Testimonial sections */
        .testimonial {
            background: var(--bg-tertiary);
            padding: 2rem;
            border-radius: 8px;
            margin: 2rem 0;
            border-left: 4px solid var(--highlight);
            position: relative;
        }

        .testimonial::before {
            content: '"';
            font-size: 4rem;
            color: var(--highlight);
            position: absolute;
            top: 0.5rem;
            left: 1rem;
            opacity: 0.3;
        }

        .testimonial-text {
            font-style: italic;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .testimonial-photo {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }

        .testimonial-details {
            font-size: 0.9rem;
        }

        .testimonial-name {
            font-weight: 600;
            color: var(--accent);
        }

        /* Collapsible sections */
        .collapsible {
            margin-bottom: 1.5rem;
        }

        .collapsible-header {
            background: var(--bg-tertiary);
            padding: 1rem 1.5rem;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            border-left: 4px solid var(--accent);
        }

        .collapsible-header:hover {
            background: #383838;
        }

        .collapsible-header h3 {
            margin: 0;
            font-size: 1.3rem;
            color: var(--text-primary);
        }

        .collapsible-icon {
            transition: transform 0.3s ease;
        }

        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
            background: var(--bg-secondary);
            border-radius: 0 0 8px 8px;
        }

        .collapsible-content.active {
            max-height: 100%;
        }

        .collapsible-content-inner {
            padding: 1.5rem;
        }

        /* Footer */
        .footer {
            background: var(--bg-tertiary);
            padding: 3rem 2rem;
            text-align: center;
            border-top: 1px solid var(--border);
        }

        .footer-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .footer-logo {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.8rem;
            color: var(--accent);
            margin-bottom: 1rem;
        }

        .footer-social {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 1.5rem 0;
        }

        .footer-social a {
            color: var(--text-secondary);
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }

        .footer-social a:hover {
            color: var(--accent);
        }

        .footer-text {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 1.5rem;
        }

        /* Animations */



        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }



        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.2);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {


            .carta-testimonio-1 {
                width: calc(128% + 26px) !important;
                margin-left: -20% !important;
                min-height: 93px !important;
            }


            #parrafo-cover-5 {
                font-size: 1rem !important;
            }

            .cover h1 {
                font-size: 2.5rem;
            }

            .cover .bajada {
                font-size: 1.9rem;
                padding: 10%;
            }

            .content-section {
                padding: 11%;
            }



            .menu {


                height: 104vh !important;
                width: 37px !important;
                transform: scale(0.8) !important;

            }


            .text-container {
                padding: 1.5rem;
            }

            h2 {
                font-size: 1.7rem;
            }

            .header {
                padding: 1rem;
            }

            .author-info {
                flex-direction: column;
                text-align: center;
            }
        }

        /* Solo móviles (hasta 768px) */
        @media (max-width: 768px) {
            #p-22 {

                padding: 20px 61px !important;

            }

            /* GIFs flotantes */
            .gif,
            .gif1,
            .gif2,
            .gif3,
            .gif4,
            .gif5,
            .gif6,
            .gif7,
            .gif8,
            .gif9,
            .gif10,
            .gif11 {
                pointer-events: none !important;
            }

            .gif {
                position: absolute !important;
                top: 5% !important;
                left: 10% !important;
                width: 316px !important;
                height: auto !important;

            }

            .gif1 {
                position: absolute !important;
                top: 3% !important;
                left: 57% !important;
                width: 170px !important;
                height: auto !important;
            }

            .gif2 {
                position: absolute !important;
                top: 10% !important;
                left: 79% !important;
                width: 273px !important;
                height: auto !important;
                opacity: 0 !important;
            }

            .gif7 {
                position: absolute !important;
                top: 25% !important;
                left: 21% !important;
                width: 180px !important;
                height: auto !important;
            }

            .gif8 {
                position: absolute !important;
                top: 27% !important;
                left: 75% !important;
                width: 231px !important;
                height: auto !important;
            }

            .gif9 {
                position: absolute !important;
                top: 9% !important;
                left: 57% !important;
                width: 252px !important;
                height: auto !important;
                opacity: 0 !important;
            }

            .gif10 {
                position: absolute !important;
                top: 66% !important;
                left: 24% !important;
                width: 175px !important;
                height: auto !important;
            }

            .gif11 {
                position: absolute !important;
                top: 87% !important;
                left: 51% !important;
                width: 291px !important;
                height: auto !important;
            }
        }

        #back-responsive-main-1 {
            background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
                url('./imgs/radio-exitsa-san-ruido.png') center center scroll !important;
            background-size: cover !important;
        }


        #cover-fondo-reportaje {
            background: linear-gradient(rgba(0, 0, 0, 0.252), rgba(158, 153, 153, 0.449)),
                url('./imgs/collage-material-audios.png') center center scroll !important;
            background-size: cover !important;

        }



        /* Solo móviles (hasta 768px) */
        @media (max-width: 768px) {
            .gif-piura {
                position: absolute !important;
                top: 4% !important;
                left: 59% !important;
                width: 163px !important;
                height: auto !important;
            }

            /* Aplicar pointer-events: none a elementos que no deben ser clickeables */
            .gif,
            .gif1,
            .gif2,
            .gif3,
            .gif4,
            .gif5,
            .gif6,
            .gif7,
            .gif8,
            .gif9,
            .gif10,
            .gif11,
            .author-photo,
            .cover::before,
            .image-container img,
            .document-item p {
                pointer-events: none;
            }

            /* Mantener el scroll funcional en elementos que necesitan scroll */


            /* Permitir interacción en elementos que deben ser clickeables */



            #inicio-exitosa {
                background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(158, 153, 153, 0)),
                    url("./imgs/fotos-para-publicar/responsive-mobile-exit.webp") !important;
                background-position: center center !important;
                background-repeat: no-repeat !important;
                background-size: cover !important;
                background-attachment: scroll !important;
                width: 100%;
                min-height: 100vh;
            }



            #back-responsive-main-1 {
                background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(158, 153, 153, 0)),
                    url('./imgs/radio-exitsa-san-ruido.png') !important;
                background-position: 40% center !important;
                background-repeat: no-repeat !important;
                background-size: cover !important;
                background-attachment: scroll !important;
                width: 100% !important;
                height: 100vh !important;
            }



            #cover-fondo-reportaje {
                background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(158, 153, 153, 0.447)),
                    url('./imgs/collage-material-audios.png') !important;
                background-position: center center !important;
                background-repeat: no-repeat !important;
                background-size: cover !important;
                background-attachment: scroll !important;
                width: 100% !important;
                height: 100vh !important;
                overflow-y: auto;
                scroll-behavior: smooth;




            }

            .gif {
                position: absolute !important;
                top: 5% !important;
                left: 10% !important;
                width: 316px !important;
                height: auto !important;
            }

            .gif1-piura {
                position: absolute !important;
                top: 35% !important;
                left: 12% !important;
                width: 259px !important;
                height: auto !important;
            }

            .gif2-piura {
                position: absolute !important;
                top: 59% !important;
                left: 22% !important;
                width: 295px !important;
                height: 184px !important;
                opacity: 100 !important;
            }

            .gif5-piura {
                position: absolute !important;
                top: 64% !important;
                left: 18% !important;
                width: 311px !important;
                height: auto !important;
                opacity: 0 !important;

            }

            .gif6-piura {
                position: absolute !important;
                top: 10% !important;
                left: 61% !important;
                width: 200px !important;
                height: auto !important;
                opacity: 100 !important;

            }

            .gif7-piura {
                position: absolute !important;
                top: 79% !important;
                left: 17% !important;
                width: 196px !important;
                height: auto !important;
            }

            .gif8-piura {
                position: absolute !important;
                top: 4% !important;
                left: 10% !important;
                width: 169px !important;
                height: auto !important;
            }

            .gif9-piura {
                position: absolute !important;
                top: 73% !important;
                left: 66% !important;
                width: 180px !important;
                height: auto !important;
                opacity: 100 !important;
            }

            .gif11-piura {
                position: absolute !important;
                top: 27% !important;
                left: 62% !important;
                width: 240px !important;
                height: auto !important;
            }

            #report-metada {
                font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important;
                padding: 3% 1%;
                color: #1a1a1a !important;
                line-height: 1.85 !important;
            }

            #cover-fondo-reportaje .metadata {
                max-width: 95vw !important;
                padding: 1.2rem 0.8rem !important;
            }
        }



        #report-metada {
            color: #1a1a1a;
            text-align: center !important;
            font-style: italic;
            font-size: clamp(1.2rem, 1.8vw, 1.6rem) !important;
            line-height: 2 !important;
            letter-spacing: 0.3px;
        }

        @media (max-width: 480px) {



            /* Nota: Hay dos elementos con clase .gif11 con diferentes valores */
            /* Si necesitas diferenciarlos, considera usar IDs o clases diferentes */


            #parrafo-cover-5 {
                font-size: 1rem !important;
            }



            .cover h1 {
                font-size: 2rem;
            }

            #report-metada {
                font-size: clamp(1rem, 5vw, 1.3rem) !important;
                padding: 4%;
                color: #1a1a1a !important;
                line-height: 1.8 !important;
            }

            #cover-fondo-reportaje .metadata {
                max-width: 96vw !important;
                padding: 1.2rem 1rem !important;
            }

            .gorro {
                font-size: 50% !important;
                padding: 10%;
                color: black !important;

            }

            .cover .bajada {
                font-size: 1.6rem;
                padding: 10%;
            }

            h2 {
                font-size: 1.5rem;
            }

            p {
                font-size: 1rem;
            }

            .collapsible-header {
                padding: 0.8rem 1rem;
            }

            .collapsible-header h3 {
                font-size: 1.1rem;
            }


        }