/* ===================================================================== */
        /* -------------- ESTILOS PARA LA BARRA SUPERIOR (HEADER) -------------- */
        /* ===================================================================== */

        /* Contenedor del lado derecho de la barra superior */
        .top-bar-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            background-color: #EAEDED;
        }

        /* Estilos para las imágenes del selector de idioma */
        .top-bar-right .language-selector img {
            max-width: 40px;
            max-height: 40px;
            margin-left: 5px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        /* Contenedor del selector de idioma */
        .language-selector {
            margin-left: 20px;
        }

        /* ============================================================ */
        /* =========== ESTILOS PARA EL CONTENEDOR PRINCIPAL =========== */
        /* ============================================================ */

        /* Contenedor principal con efecto de vidrio esmerilado (glassmorphism) */
        .contenedor-principal {
            display: flex;
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        /* Efecto hover para el contenedor principal - eleva y cambia sombra */
        .contenedor-principal:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
            background-color: rgba(255, 255, 255, 0.95);
        }

        /* Contenedor del logo con efecto de vidrio */
        .logo-contenedor {
            flex: 0 0 250px;
            padding-right: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Logo con borde circular y efecto de relieve */
        .logo-contenedor img {
            max-width: 100%;
            height: auto;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
                        inset 0 2px 4px rgba(255, 255, 255, 0.2);
            transition: all 0.4s ease;
        }

        /* Efecto hover para el logo - escala y rota ligeramente */
        .logo-contenedor img:hover {
            transform: scale(1.05) rotate(-2deg);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        /* Contenedor de texto con todos los párrafos en cursiva */
        .texto-contenedor {
            flex: 1;
            padding: 0.5rem;
            position: relative;
            font-style: italic;
        }

        /* Línea decorativa con efecto de degradado vertical */
        .texto-contenedor::before {
            content: "";
            position: absolute;
            left: -1rem;
            top: 10%;
            bottom: 10%;
            width: 2px;
            background: linear-gradient(to bottom, 
                      transparent, 
                      rgba(224, 169, 109, 0.6), 
                      transparent);
        }

        /* Estilos para los párrafos */
        .texto-contenedor p {
            margin-bottom: 1.4rem;
            line-height: 1.5;
            color: #444;
            font-size: 1rem;
            text-align: justify;
            hyphens: auto;
            letter-spacing: 0.2px;
        }

        /* Primer párrafo con estilo diferenciado */
        .texto-contenedor p:first-child {
            font-weight: 400;
            color: #333;
        }

        /* Último párrafo con efecto de cierre */
        .texto-contenedor p:last-child {
            margin-bottom: 0;
            position: relative;
            padding-right: 1.5rem;
        }

        /* ========================================== */
        /* =========== ESTILOS PARA VIDEO =========== */
        /* ========================================== */

        /* 
          Contenedor para el video y controles
          Técnica de padding-bottom para mantener relación de aspecto:
          - padding-bottom: 40% = relación de aspecto personalizada (ajustar este valor)
          - En móviles usamos valores más altos para mejor visualización
        */
        .video-container {
            position: relative;
            width: 90%;
            margin: 2rem auto;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            
            /* NUEVO: Técnica para controlar altura manteniendo relación de aspecto */
            height: 0;
            padding-bottom: 25%; /* Ajusta este valor para cambiar la altura (40% = relación personalizada) */
        }

        /* Estilos para el elemento de video - posición absoluta para llenar el contenedor */
        #miVideo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border: 2px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform: translateZ(0);
            backdrop-filter: blur(4px);
        }

        /* Efecto hover para el video - escala sutil y cambia sombra */
        #miVideo:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
            transform: scale(1.01);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* Estilo para pantalla completa */
        #miVideo:fullscreen {
            border-radius: 0;
            background: #000;
            object-fit: contain; /* Asegura que el video se vea completo en pantalla completa */
        }

        /* CONTROLES PERSONALIZADOS - se posicionan absolutamente sobre el video */
        .video-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 10; /* Asegura que los controles estén sobre el video */
        }

        /* Mostrar controles al pasar el ratón por el contenedor */
        .video-container:hover .video-controls {
            opacity: 1;
        }

        /* Botones de control de video - estilo circular semitransparente */
        .video-controls button {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Efecto hover para botones - se hacen más visibles y crecen ligeramente */
        .video-controls button:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
        }

        /* Barra de progreso - usa la propiedad accent-color para personalización */
        .video-controls input[type="range"] {
            flex: 1;
            accent-color: #ff5500;
            height: 4px;
            cursor: pointer;
        }

        /* Contenedor específico para control de audio */
        .audio-control {
            position: relative;
        }

        /* Tooltip para el botón de audio - aparece al pasar el ratón */
        .audio-control .tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        /* Mostrar tooltip al pasar sobre el control de audio */
        .audio-control:hover .tooltip {
            opacity: 1;
        }

        /* ============================================= */
        /* ========== ESTILOS PARA FUNDADORES ========== */
        /* ============================================= */

        /* Sección de fundadores - contenedor principal */
        .fundadores {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        /* Variables CSS ajustables para espaciado y interlineado */
        :root {
            --interlineado-titulo: 1.1;
            --interlineado-subtitulo: 1.2;
            --interlineado-texto: 1.3;
            --interlineado-datos: 1.2;
            --espaciado-parrafos: 0.7rem;
        }

        /* Contenedor de cada fundador - diseño flexible con espacio entre elementos */
        .fundador {
            display: flex;
            align-items: center;
            margin-bottom: 4rem;
            gap: 3rem;
        }

        /* Contenedor de imagen circular para fundadores - tamaño fijo y efectos */
        .fundador-imagen {
            flex: 0 0 300px;
            height: 300px;
            margin: 0;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            border: 5px solid #fff;
            background: #fff;
            position: relative;
            transition: all 0.3s ease;
        }

        /* Efecto hover para imagen de fundador - eleva y aumenta sombra */
        .fundador-imagen:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        /* Estilo para la foto del fundador - cubre todo el contenedor */
        .fundador-foto {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform 0.5s ease;
        }

        /* Efecto hover para la foto - zoom sutil al pasar el ratón */
        .fundador-imagen:hover .fundador-foto {
            transform: scale(1.05);
        }

        /* Contenido del fundador - ocupa el espacio restante */
        .fundador-contenido {
            flex: 1;
        }

        /* Encabezado del fundador - con borde inferior decorativo */
        .fundador-header {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #e0c9a6;
        }

        /* Nombre del fundador - estilo destacado con subrayado */
        .fundador-nombre {
            font-size: 2.2rem;
            font-weight: bold;
            margin: 0 0 0.5rem 0;
            color: #333;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 6px;
            line-height: var(--interlineado-titulo);
        }

        /* Subtítulo del fundador - estilo italic y color más suave */
        .fundador-subtitulo {
            font-size: 1.4rem;
            font-weight: normal;
            font-style: italic;
            margin: 0.5rem 0;
            color: #555;
            line-height: var(--interlineado-subtitulo);
        }

        /* Datos del fundador - texto secundario más pequeño */
        .fundador-datos {
            font-size: 1rem;
            color: #777;
            margin: 0.5rem 0 0 0;
            line-height: var(--interlineado-datos);
        }

        /* Descripción del fundador - texto justificado con interlineado variable */
        .fundador-descripcion {
            color: #444;
            line-height: var(--interlineado-texto);
            text-align: justify;
        }

        /* Párrafos de descripción - margen inferior variable */
        .fundador-descripcion p {
            margin: 0 0 var(--espaciado-parrafos) 0;
            font-size: 1rem;
        }

        /* Estilo específico para el segundo fundador (texto izquierda, foto derecha) */
        .fundador:nth-child(2) {
            flex-direction: row;
        }

        .fundador:nth-child(2) .fundador-imagen {
            order: 2;
        }

        .fundador:nth-child(2) .fundador-contenido {
            order: 1;
        }

        /* Efectos específicos para cada fundador - diferentes colores de borde */
        .fundador:nth-child(1) .fundador-imagen {
            border-color: #8b5a2b;
        }

        .fundador:nth-child(2) .fundador-imagen {
            border-color: #6b8e23;
        }

        .fundador:nth-child(3) .fundador-imagen {
            border-color: #4682b4;
        }

        /* ==================================================== */
        /* --------- MEDIA QUERIES PARA DISPOSITIVOS ---------- */
        /* ==================================================== */

        /* Tablets y dispositivos medianos (900px) */
        @media (max-width: 900px) {
            /* Ajustes para fundadores en tablets - cambia a columna */
            .fundador,
            .fundador:nth-child(2) {
                flex-direction: column;
                gap: 2rem;
            }
            
            .fundador-imagen,
            .fundador:nth-child(2) .fundador-imagen {
                order: 0;
            }
            
            .fundador-contenido,
            .fundador:nth-child(2) .fundador-contenido {
                order: 0;
            }
            
            /* Reduce el tamaño de la imagen en tablets */
            .fundador-imagen {
                flex: 0 0 250px;
                height: 250px;
            }
            
            /* Ajusta tamaños de texto para tablets */
            .fundador-nombre {
                font-size: 1.8rem;
            }
            
            .fundador-subtitulo {
                font-size: 1.2rem;
            }
            
            /* Ajustes de interlineado para tablet */
            :root {
                --interlineado-texto: 1.3;
                --espaciado-parrafos: 1rem;
            }
            
            /* Ajuste específico para el contenedor de video en tablets */
            .video-container {
                width: 95%;
                padding-bottom: 50%; /* Mayor altura en tablets */
            }
        }

        /* Tablets en vertical y móviles grandes (768px) */
        @media (max-width: 768px) {
            /* Ajustes para el contenedor principal en móviles - cambia a columna */
            .contenedor-principal {
                flex-direction: column;
                padding: 1.8rem;
                margin: 1.5rem;
                backdrop-filter: blur(5px);
            }
            
            .logo-contenedor {
                padding-right: 0;
                padding-bottom: 1.8rem;
                margin-bottom: 1.8rem;
                position: relative;
            }
            
            /* Línea decorativa horizontal en móviles - reemplaza la vertical */
            .logo-contenedor::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 20%;
                right: 20%;
                height: 1px;
                background: linear-gradient(to right, 
                          transparent, 
                          rgba(224, 169, 109, 0.6), 
                          transparent);
            }
            
            /* Oculta la línea decorativa vertical en móviles */
            .texto-contenedor::before {
                display: none;
            }
            
            /* Ajustes de texto para móviles */
            .texto-contenedor p {
                font-size: 1rem;
                line-height: 1.8;
                text-align: left;
            }
            
            /* Reduce el tamaño del logo en móviles */
            .logo-contenedor img {
                max-width: 180px;
            }
            
            /* Ajustes para video en móviles */
            .video-container {
                width: 95%;
                padding-bottom: 56.25%; /* Relación 16:9 estándar para móviles */
            }
            
            /* Mostrar controles permanentemente en móviles - mejor usabilidad */
            .video-controls {
                opacity: 1;
                padding: 10px;
            }
            
            /* Botones más grandes para mejor usabilidad táctil */
            .video-controls button {
                width: 44px;
                height: 44px;
            }
        }

        /* Móviles pequeños (480px) */
        @media (max-width: 480px) {
            /* Efecto de aparición suave para móviles */
            .contenedor-principal {
                animation: fadeInUp 0.6s ease-out;
                margin: 1rem;
                padding: 1.5rem;
            }
            
            /* Animación de entrada para el contenedor principal */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            /* Reduce aún más el logo en móviles pequeños */
            .logo-contenedor img {
                max-width: 150px;
            }
            
            /* Ajustes de texto para móviles pequeños */
            .texto-contenedor p {
                font-size: 0.95rem;
            }
            
            /* Ajustes para fundadores en móviles pequeños */
            .fundador-imagen {
                flex: 0 0 180px;
                height: 180px;
            }
            
            .fundador-nombre {
                font-size: 1.4rem;
            }
            
            .fundador-subtitulo {
                font-size: 1rem;
            }
            
            .fundador-datos {
                font-size: 0.9rem;
            }
            
            .fundador-descripcion p {
                font-size: 0.9rem;
            }
            
            /* Ajustes para controles de video en móviles pequeños */
            .video-controls {
                padding: 8px;
            }
            
            .video-controls button {
                width: 40px;
                height: 40px;
            }
            
            /* Barra de progreso más alta para mejor interacción táctil */
            .video-controls input[type="range"] {
                height: 6px;
            }
            
            /* Ajuste específico para el video en móviles pequeños */
            .video-container {
                padding-bottom: 60%; /* Relación ligeramente más alta para móviles pequeños */
            }
        }

        /* Orientación landscape para móviles */
        @media (max-height: 500px) and (orientation: landscape) {
            /* Ajustes para el contenedor principal en landscape - vuelve a fila */
            .contenedor-principal {
                flex-direction: row;
                padding: 1.5rem;
            }
            
            .logo-contenedor {
                flex: 0 0 120px;
                padding-right: 1rem;
                padding-bottom: 0;
                margin-bottom: 0;
            }
            
            /* Oculta la línea horizontal en landscape */
            .logo-contenedor::after {
                display: none;
            }
            
            /* Muestra la línea vertical en landscape */
            .texto-contenedor::before {
                display: block;
                left: -0.5rem;
            }
            
            /* Ajustes de texto para landscape */
            .texto-contenedor p {
                font-size: 0.9rem;
                line-height: 1.4;
            }
            
            /* Ajustes para video en landscape */
            .video-container {
                width: 100%;
                padding-bottom: 40%; /* Mantiene relación similar a desktop */
            }
        }

        /* Mejoras de accesibilidad para modo alto contraste */
        @media (prefers-contrast: high) {
            .contenedor-principal {
                border: 2px solid #000;
            }
            
            .texto-contenedor p {
                font-weight: 600;
            }
        }

        /* Mejoras para reducir movimiento en dispositivos */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            
            .contenedor-principal {
                animation: none;
            }
        }

        /* Safe Area Insets para dispositivos con notch */
        @supports(padding: max(0px)) {
            .contenedor-principal {
                padding-left: max(1rem, env(safe-area-inset-left));
                padding-right: max(1rem, env(safe-area-inset-right));
            }
            
            /* Ajustar controles de video para notch */
            .video-controls {
                padding-bottom: max(12px, env(safe-area-inset-bottom));
            }
        }

        /* Mejoras de touch para dispositivos móviles */
        @media (hover: none) {
            .video-controls {
                opacity: 1; /* Controles siempre visibles en dispositivos táctiles */
            }
            
            /* Tamaño mínimo para elementos táctiles (accesibilidad) */
            .video-controls button {
                min-width: 44px;
                min-height: 44px;
            }
        }

        /* Optimizaciones para Safari iOS */
        @supports (-webkit-touch-callout: none) {
            .contenedor-principal {
                -webkit-backdrop-filter: blur(8px); /* Soporte para backdrop-filter en Safari */
            }
            
            /* Corrección para renderizado de video en iOS */
            #miVideo {
                -webkit-mask-image: -webkit-radial-gradient(white, black);
            }
        }