/* RESET - Mantenido y mejorado sutilmente */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Transición global más sofisticada para una sensación premium */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transición ligeramente más lenta y con curva para un efecto suave y profesional */
}

/* Font Imports (Sin cambios, son fundamentales) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* BODY (Mantenido, solo se añadió un suave sombreado general y scroll-behavior) */
body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #fbfbfa;
    color: #2c3e50;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Efecto de sombra sutil para dar profundidad a la página */
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
    scroll-behavior: smooth; /* Para un desplazamiento suave en anclas */
}

/* --- TOP BANNER LOGO SECTION (banner-logo) --- */
.banner-logo {
    /* Gradiente con un toque más vibrante y ángulo mejorado */
    background: linear-gradient(145deg, #4b941e, #e7fb73 100%); /* Tonos de verde más ricos */
    padding: 25px 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada y suave */
    z-index: 100;
    position: relative;
    animation: fadeInDown 0.9s ease-out forwards; /* Animación ligeramente más lenta */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 30px;
    padding-right: 30px;
    /* Borde inferior suave para separación */
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* Logo inside the banner-logo */
.logo-banner {
    width: 150px;
    height: auto;
    border-radius: 50%;
    /* Borde de sombra más definido y con un color más integrado */
    box-shadow: 0 0 0 7px rgba(100, 200, 255, 0.3), 0 8px 20px rgba(0, 0, 0, 0.5); /* Borde azul suave y sombra más intensa */
    flex-shrink: 0;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease-out; /* Transición más enfocada */
    position: relative;
    z-index: 2;
    margin-right: 30px;
    /* Animación de entrada sutil para el logo */
    animation: zoomIn 0.8s ease-out 0.2s forwards;
}

.logo-banner:hover {
    transform: scale(1.15) rotate(2deg); /* Un poco más de escala y rotación sutil */
    cursor: pointer;
    box-shadow: 0 0 0 7px rgba(150, 220, 255, 0.5), 0 12px 30px rgba(0, 0, 0, 0.6); /* Sombra más fuerte al hover */
}

/* H1 (Sin cambios, ya que se indica que es sobreescrito) */
h1 {
    text-align: center;
    margin-top: 40px;
    font-size: 2.5rem;
    color: #000000;
    text-transform: uppercase;
}

/* Text inside the banner-logo */
.banner-texto {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 220px);
    max-width: 900px;
    text-align: center;
    color: #fff;
    z-index: 1;
    word-break: break-word;
    hyphens: auto;
    /* Efecto de texto con brillo suave */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    animation: fadeIn 1s ease-out 0.4s forwards; /* Animación de aparición más lenta */
}

.banner-texto h2 {
    font-size: 2.4rem; /* Ligeramente más grande */
    margin-bottom: 8px; /* Pequeño espacio para la legibilidad */
    color: #f7f7f7; /* Blanco casi puro para el texto principal */
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6); /* Sombra más profunda y definida */
    font-weight: 600; /* Un poco más de peso */
    letter-spacing: 0px; /* Ajuste sutil del espaciado */
    line-height: 1.2;
}

.banner-texto p {
    font-size: 1.1rem; /* Ligeramente más grande para mejor lectura */
    font-weight: 300;
    color: #000000; /* Rojo muy pálido para contraste sutil */
    opacity: 0.98; /* Un poco más opaco */
    word-break: break-word;
    hyphens: auto;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Sombra sutil para la descripción */
}

/* --- NAVIGATION (nav-bar) --- */
.nav-bar {
    display: flex;
    justify-content: center;
    gap: 25px;
    /* Gradiente más dinámico */
 background: linear-gradient(100deg, #fbfbfb, #eac368  100%);
    padding: 18px 0;
    flex-wrap: wrap;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* Sombra más fuerte y visible */
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 90;
    border-radius: 0 0 25px 25px; /* Bordes inferiores más pronunciados */
    backdrop-filter: blur(8px); /* Más blur para efecto moderno */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
}

.nav-bar a {
    color: #000000; /* Texto blanco para mayor contraste */
    text-decoration: none;
    font-weight: 600;
    font-size: 1.08rem; /* Ligeramente más grande */
    font-family: 'Poppins', sans-serif;
    padding: 12px 28px; /* Padding ligeramente aumentado */
    border-radius: 35px; /* Bordes más redondeados */
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transición más lenta y suave */
    letter-spacing: 0.8px; /* Más espaciado entre letras */
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Sombra sutil en el texto */
    border: 1px solid transparent; /* Borde transparente inicial */
}

/* Bottom line effect on hover or active */
.nav-bar a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 4px; /* Línea más gruesa */
    background: linear-gradient(90deg, #007bff, #00d4ff); /* Gradiente de azul más vibrante */
    border-radius: 3px; /* Bordes más suaves */
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(-50%);
}

.nav-bar a:hover::after,
.nav-bar a.active::after {
    width: calc(100% - 20px); /* Ligeramente más corta para un efecto flotante */
    left: 50%;
}

/* Styles on hover or active */
.nav-bar a:hover,
.nav-bar a.active {
    background-color: rgba(255, 255, 255, 0.15); /* Fondo blanco semitransparente más pronunciado */
    color: #ff9e9e; /* Texto blanco brillante al hover */
    transform: translateY(-7px) scale(1.02); /* Más elevación y ligero zoom */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.1); /* Sombra más fuerte y un brillo interno */
    border: 1px solid rgba(120, 200, 255, 0.6); /* Borde más visible y con un color más vivo */
    text-shadow: 0 0 8px rgba(220, 189, 189, 0.8); /* Brillo en el texto al hover */
}

/* --- SECCIÓN DE VIDEOS (ESTILOS MEJORADOS PARA CONTROLES) --- */

.page-intro {
    text-align: center;
    padding: 10px 20px;
    margin: 50px auto;
    max-width: 3500px;
    background-color: #e8f5e9;
    border-radius: 15px;
    box-shadow: 0 50px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid #55ff00;
    animation: fadeIn 1s ease-out forwards;
}

.page-intro h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.2rem;
    color: #000000;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    padding-bottom: 10px;
}

/* Caja que contiene los 2 videos */
    .videos-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 25px;
        width: 95%;
        margin: 50px auto;
        background-color:  #4b941e;
        padding: 35px;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(177, 175, 175, 0.1);
        border: 1px solid #eee;
        animation: slideInUp 0.8s ease-out forwards;
    }

    /* Cada "caja" de video individual */
    .video-box {
        flex: 1 1 48%;
        max-width: 48%; /* Limita el ancho en pantallas grandes */
        background-color: #f9f9f9;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(248, 208, 208, 0.1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    }

    .video-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 25px rgba(20, 255, 91, 0.2);
    }

    .video-box h3 {
        text-align: center;
        color: #333;
        margin: 15px 0 10px;
        font-size: 1.8rem;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        font-weight: 600;
    }

    /* Contenedor principal del video, donde se superponen los controles */
    .video-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        background-color: #ffe3e3;
        border-radius: 10px;
        box-shadow: inset 0 0 15px rgba(139, 255, 23, 0.3);
    }

    /* El elemento <video> en sí */
    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1; /* El video debe tener un z-index MENOR que los controles */
    }

    /* Los controles personalizados del video */
    .video-controls {
        position: absolute;
        bottom: 20px; /* Separación del borde inferior del video */
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.9); /* Fondo casi negro y muy opaco */
        padding: 15px 30px; /* Más padding para que el fondo sea más grande */
        border-radius: 50px; /* Bordes bien redondeados */
        display: flex;
        gap: 30px; /* Más espacio entre los botones */
        align-items: center;
        z-index: 1000; /* ¡MUY ALTO! Asegura que esté por encima de todo */
        opacity: 1; /* Asegura que no esté transparente */
        visibility: visible; /* Asegura que no esté oculto */
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: auto; /* Permite que se pueda hacer clic en ellos */
        box-shadow: 0 5px 25px rgba(250, 250, 0, 0.6); /* Sombra fuerte para destacarlos */
        border: 2px solid #eff3ec; /* Borde verde brillante para hacerlos notar */
    }

    /* Estilos para cada botón individual */
    /* Asegúrate de que esta regla para los botones esté presente */


    /* Y esta es CRUCIAL para los iconos FAS/FAB */
    /* A veces, la fuente de Font Awesome necesita ser forzada */
    .video-control-btn i.fas,
    .video-control-btn i.fab { /* Añadí .fab por si usas íconos de marca */
        font-family: "Font Awesome 6 Free" !important; /* ¡FORZA LA FUENTE DE FONT AWESOME! */
        font-weight: 900 !important; /* Para íconos 'solid' como play/pause/volume */
        color: inherit !important; /* Hereda el color del botón padre (el verde chillón) */
        font-size: inherit !important; /* Hereda el tamaño del botón padre (el gigante) */
        display: inline-block !important; /* Asegura que se muestre */
        vertical-align: middle !important; /* Para alineación si hay texto */
    }

    /* Si tu contenedor de video tiene algún overflow:hidden, podría estar cortando los íconos */
    .video-container {
        position: relative; /* Esencial para el posicionamiento absoluto de .video-controls */
        width: 100%; /* O el ancho que tengas */
        padding-bottom: 56.25%; /* Para mantener la proporción 16:9 */
        height: 0; /* Importante para el padding-bottom */
        overflow: visible !important; /* ¡ASEGURA QUE NO HAYA OVERFLOW HIDDEN AQUÍ! */
    }

    /* --- FIN SECCIÓN DE VIDEOS --- */
    .video-container {
        position: relative; /* Necesario para posicionar los controles absolutos */
        width: 100%; /* Ajusta según tu diseño */
        padding-bottom: 56.25%; /* Relación de aspecto 16:9 (altura / ancho) */
        height: 0;
        overflow: hidden; /* Asegura que los videos no se desborden */
        background-color: #000; /* Fondo negro mientras carga el video */
    }

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Para que el video cubra todo el espacio */
    }



    .video-control-btn {
        background: none;
        border: none;
        color: rgb(242, 239, 239);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
        transition: color 0.3s ease;
    }

    .video-control-btn:hover {
        color: #007bff; /* Color al pasar el ratón */
    }

/* --- Sección Contenedora Principal --- */
.professional-contact-section {
    max-width: 3050px; /* Ancho cómodo para la lectura */
    margin: 60px auto;
    padding: 40px;
    background-color: #ffffff; /* Fondo blanco inmaculado */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra elegante */
    font-family: 'Montserrat', sans-serif; /* Una fuente más moderna y profesional */
    text-align: center; /* Este ya estaba, pero lo mantenemos para el título y descripción de la sección */
    border: 1px solid #e0e6ed; /* Borde muy sutil */
}

/* Si no tienes Montserrat, puedes importarla desde Google Fonts en tu <head>: */
/* <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet"> */

.section-header {
    color: #111111; /* Azul oscuro casi negro, muy formal */
    font-size: 2.8em;
    margin-bottom: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
}

.section-description {
    color: #111111; /* Gris azulado para la descripción */
    font-size: 1.1em;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Contenedor de la Lista de Contactos --- */
.contact-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre cada bloque de contacto */
}

/* --- Bloque de Contacto Individual --- */
.contact-block {
    background-color: #f8faff; /* Fondo muy claro para cada bloque */
    border: 1px solid #dce8f2; /* Borde discreto */
    border-radius: 8px;
    overflow: hidden; /* Asegura que la sombra interna no se salga */
    transition: all 0.3s ease-out; /* Transición suave para todos los cambios */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra suave por defecto */
}

.contact-block:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada al pasar el mouse */
    transform: translateY(-3px); /* Ligera elevación al pasar el mouse */
}

/* Estado "abierto" del bloque de contacto */
.contact-block[open] {
    background-color: #eaf3fb; /* Fondo ligeramente más oscuro al abrir */
    border-color: #a7d0fa; /* Borde más visible al abrir */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* --- Encabezado del Bloque (Summary) --- */
.block-header {
    display: flex;
    flex-direction: column; /* Cambiado a columna para centrar el texto fácilmente */
    justify-content: center; /* Centra verticalmente si hay espacio extra */
    align-items: center; /* Centra horizontalmente el contenido */
    padding: 18px 25px;
    cursor: pointer;
    outline: none;
    position: relative;
    user-select: none;
    background: linear-gradient(90deg, #62f083 0%, #e0ffe3 100%); /* Degradado horizontal suave */
    transition: background 0.3s ease-out;
    text-align: center; /* Centra el texto */
}

.contact-block[open] .block-header {
    background: linear-gradient(90deg, #d3e5f7 0%, #c4daef 100%); /* Degradado más intenso al abrir */
    border-bottom: 1px solid #c8d8ea; /* Línea divisoria al abrir */
}

.block-header .main-title {
    font-size: 1.25em;
    color: #000000; /* Color de cargo */
    font-weight: 600;
    margin-bottom: 5px; /* Espacio entre título y nombre */
}

.block-header .person-name {
    font-size: 1.0em;
    color: #4c667a; /* Color de nombre */
    margin-left: 0; /* Ya no es necesario margen lateral */
    font-weight: 500;
    white-space: normal; /* Permitimos que el nombre se rompa si es muy largo */
}

/* Oculta la flecha por defecto y la reemplaza por una personalizada */
.block-header::-webkit-details-marker {
    display: none;
}
.block-header::after {
    content: '\f078'; /* Ícono de Font Awesome para flecha hacia abajo (chevron-down) */
    font-family: 'Font Awesome 5 Free'; /* Familia de fuente de Font Awesome */
    font-weight: 900; /* Necesario para que los iconos de "solid" funcionen */
    font-size: 0.9em;
    color: #a0ebc8; /* Color de la flecha cuando el bloque está cerrado */
    position: absolute; /* Posiciona la flecha en la esquina */
    top: 50%;
    right: 25px;
    transform: translateY(-50%); /* Centra verticalmente */
    transition: transform 0.3s ease-out;
}

.contact-block[open] .block-header::after {
    transform: translateY(-50%) rotate(180deg); /* Rota la flecha hacia arriba al abrir */
    color: #0056b3; /* Cambia el color de la flecha cuando el bloque está abierto */
}


/* --- Contenido Desplegable --- */
.block-content {
    padding: 20px 25px;
    background-color: #ffffff;
    border-top: 1px solid #f0f4f8; /* Línea separadora muy clara */
    animation: fadeInSlide 0.4s ease-out; /* Animación de aparición suave */
    text-align: center; /* Centra el texto dentro del contenido */
}

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

.block-content p {
    margin-bottom: 8px;
    color: #333;
    font-size: 0.95em;
    line-height: 1.5;
}

.block-content p strong {
    color: #2c3e50; /* Resalta las etiquetas */
    font-weight: 600;
}

.block-content .sub-person {
    font-size: 0.9em;
    color: #555;
    margin-left: auto; /* Centra esta sección también */
    margin-right: auto;
    width: fit-content; /* Permite que el margen auto funcione */
    border-left: 2px solid #87f940; /* Pequeña barra visual */
    padding-left: 10px;
    margin-top: 10px;
}

/* --- Botones de Acción de Contacto --- */
.contact-actions {
    margin-top: 20px;
    display: flex;
    gap: 15px; /* Espacio entre los botones */
    flex-wrap: wrap; /* Permite que los botones se envuelvan */
    justify-content: center; /* **Alinea los botones al centro** */
}

.action-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 50px; /* Botones más suaves, tipo píldora */
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 0.9em;
}

.action-button i {
    margin-right: 8px;
    font-size: 1em;
}

.whatsapp-button {
    background-color: #25D366; /* Verde vibrante de WhatsApp */
}

.whatsapp-button:hover {
    background-color: #1DA851;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.messenger-button {
    background-color: #007bff; /* Azul primario de Messenger */
}

.messenger-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}


/* --- Responsividad para Dispositivos Móviles --- */
@media (max-width: 768px) {
    .professional-contact-section {
        padding: 25px 15px;
        margin: 30px auto;
    }

    .section-header {
        font-size: 2.2em;
        letter-spacing: 1px;
    }

    .section-description {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .block-header {
        flex-direction: column; /* Apila título y nombre en móviles */
        align-items: center; /* Centra el contenido en móviles */
        padding: 15px 20px;
        text-align: center; /* Asegura el centrado */
    }

    .block-header .main-title {
        font-size: 1.1em;
        margin-bottom: 5px;
        text-align: center; /* Centra el título en móviles */
    }

    .block-header .person-name {
        font-size: 0.9em;
        margin-left: 0;
        text-align: center; /* Centra el nombre en móviles */
    }

    .block-header::after {
        position: absolute; /* Mantiene la flecha a la derecha superior */
        top: 15px;
        right: 15px;
        transform: translateY(0); /* Resetea para no interferir con top/right */
    }

    .contact-block[open] .block-header::after {
        transform: rotate(180deg); /* Sólo rota en móviles */
    }

    .block-content {
        padding: 15px 20px;
        text-align: center; /* Centra el contenido en móviles */
    }

    .contact-actions {
        flex-direction: column; /* Apila los botones */
        gap: 10px;
        justify-content: center; /* Centra los botones en móviles */
    }

    .action-button {
        width: 100%; /* Botones de ancho completo */
        text-align: center;
        justify-content: center; /* Centra el contenido de los botones */
        font-size: 0.85em;
        padding: 12px 15px;
    }
}
/* --- NUEVA SECCIÓN: Nuestros Valores Banner --- */
.nuestros-valores-banner {
    background-image: url('../img/valores.jpeg'); /* ¡CAMBIA ESTA RUTA A TU IMAGEN! */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 550px; /* Ligeramente más alto para impacto */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #000000;
    text-align: center;
    margin-top: 50px; /* Margen consistente */
    margin-bottom: 50px; /* Margen consistente */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Sombra más pronunciada y suave */
    border-radius: 15px; /* Bordes redondeados para el banner */
    overflow: hidden; /* Asegura que la imagen se vea bien dentro del radio */
    border: 2px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
}

.nuestros-valores-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(196, 221, 71, 0.8); /* Verde más oscuro y opaco */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Efecto de degradado suave sobre el overlay para más profundidad */
    background: linear-gradient(180deg, rgba(0, 128, 0, 0.75), rgba(0, 80, 0, 0.9));
}

.nuestros-valores-banner h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 6rem; /* Título mucho más grande e impactante */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 35px; /* Más espacio */
    text-shadow: 30px 30px 80px rgba(0, 0, 0, 0.6); /* Sombra más dramática */
    letter-spacing: -1px; /* Letras un poco más juntas para un look moderno */
    animation: fadeIn 1s ease-out forwards;
}

.valores-list {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Más espacio entre las filas de valores */
}

.valores-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #fffefe;
    font-size: 1.6rem; /* Valores un poco más grandes */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Sombra sutil en los valores */
}

.valores-list li {
    position: relative;
    padding: 0 20px; /* Más espacio a los lados */
    white-space: nowrap;
    /* Añadir animación de brillo sutil o aparecer */
    animation: slideInUp 0.9s ease-out forwards; /* Cada valor aparecerá */
    opacity: 0; /* Inicialmente oculto para la animación */
}

/* Retraso de animación para cada elemento li */
.valores-list li:nth-child(1) { animation-delay: 0.1s; }
.valores-list li:nth-child(2) { animation-delay: 0.3s; }
.valores-list li:nth-child(3) { animation-delay: 0.5s; }
.valores-list li:nth-child(4) { animation-delay: 0.7s; }
.valores-list li:nth-child(5) { animation-delay: 0.9s; }
.valores-list li:nth-child(6) { animation-delay: 1.0s; }
/* Añadir más si tienes más valores */

/* Separador de punto central */
.valores-list li:not(:last-child)::after {
    content: '•';
    position: absolute;
    right: -7px; /* Ajusta la posición */
    color: rgba(255, 255, 255, 0.7); /* Punto ligeramente transparente */
    font-size: 1.6rem;
}

/* ======================================================= */
/* ESTILOS AVANZADOS PARA EL RECUADRO DE DESCRIPCIÓN (clase 'valores1') */
/* ======================================================= */
.valores1 {
    /* Fondo: Degradado suave para un aspecto moderno */
    background: linear-gradient(135deg, #f8f8f8, #e8f5e9); /* De gris muy claro a verde pálido */
    padding: 45px 60px; /* Más padding para un respiro visual */
    margin: 60px auto; /* Centrado y con más espacio vertical */
    max-width: 95%; /* Se extiende casi todo el ancho de la pantalla */
    border-radius: 15px; /* Bordes ligeramente más redondeados */

    /* Sombra más sofisticada */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra más grande y difusa */

    /* Borde sutil */
    border: 1px solid rgba(0, 0, 0, 0.08); /* Borde muy fino y casi invisible */

    /* Transición general para todos los efectos */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición más suave y con "rebote" */

    text-align: center; /* Centra el contenido del recuadro */

    /* Animación de entrada (opcional, pero da un toque avanzado) */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSlideUp 0.8s forwards ease-out;
    animation-delay: 0.2s; /* Un pequeño retraso para que aparezca después del contenido principal */
}

/* Efecto al pasar el ratón (hover) - más pronunciado */
.valores1:hover {
    transform: translateY(-8px); /* Elevación más notoria */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Sombra mucho más intensa */
    border-color: #4CAF50; /* Un borde verde primario al pasar el ratón */
    background: linear-gradient(135deg, #f0fff0, #d9ead3); /* Degradado más claro al hover */
}

/* Estilos para el H1 con el texto largo */
.valores1 h1 {
    font-family: 'Roboto', sans-serif; /* Fuente legible */
    font-size: 1.25rem; /* Tamaño de fuente ligeramente más grande para impacto */
    color: #333; /* Color de texto oscuro para alto contraste */
    line-height: 1.8; /* Mayor espacio entre líneas para mejor lectura */
    max-width: 90%; /* Limita el ancho del texto para evitar líneas demasiado largas */
    margin: 0 auto; /* Centra el bloque de texto */
    text-align: center; /* Texto alineado al centro */
    font-weight: 700; /* Negrita más fuerte para destacar */
    letter-spacing: 0.5px; /* Ligeramente más espaciado entre letras */
    text-transform: uppercase; /* Todo en mayúsculas */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05); /* Sombra de texto un poco más visible */
}

/* Animación de entrada */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ======================================================= */
/* MEDIA QUERIES PARA RESPONSIVIDAD (ajustadas para el nuevo diseño) */
/* ======================================================= */
@media (max-width: 992px) {
    .valores1 {
        padding: 40px 50px;
        margin: 50px auto;
        max-width: 90%; /* Ajuste para que no sea demasiado ancho en tablets */
    }
    .valores1 h1 {
        font-size: 1.15rem;
        line-height: 1.7;
    }

    /* Ajustes para el video en tablets */
    .video-box {
        max-width: 100%; /* Permite que ocupe todo el ancho en tablets */
    }
}

@media (max-width: 768px) {
    .valores1 {
        padding: 30px 35px;
        margin: 40px auto;
        border-radius: 10px;
    }
    .valores1 h1 {
        font-size: 1.05rem;
        line-height: 1.6;
        max-width: 95%; /* Permite que el texto ocupe más espacio en móviles */
    }

    /* Ajustes específicos para el banner-logo en tablets */
    .banner-logo {
        padding: 20px 0;
    }
    .logo-banner {
        width: 120px;
        margin-right: 20px;
    }
    .banner-texto {
        width: calc(100% - 180px);
    }
    .banner-texto h2 {
        font-size: 2rem;
    }
    .banner-texto p {
        font-size: 1rem;
    }

    /* Ajustes para el nav-bar en móviles grandes */
    .nav-bar {
        flex-direction: column;
        gap: 15px;
        padding: 15px 15px;
        border-radius: 0;
    }
    .nav-bar a {
        width: calc(100% - 30px); /* Ocupa casi todo el ancho */
        font-size: 1.1rem;
        padding: 12px 0;
    }
    .nav-bar a::after {
        width: 70%; /* Línea de abajo más ancha */
    }

    /* Ajustes generales para secciones en móviles grandes */
    .videos-row, .mision-vision, .carteras {
        flex-direction: column; /* Apilar elementos */
        gap: 30px;
        margin: 40px auto;
        padding: 25px;
    }
    .video-box, .mision, .vision {
        flex: 1 1 100%; /* Ocupar todo el ancho */
        max-width: 100%; /* Asegura que ocupe el ancho completo */
    }
    /* Ajustes para los controles del video en 768px */
    .video-controls {
        bottom: 10px;
        padding: 8px 15px;
        gap: 15px;
    }
    .video-control-btn {
        font-size: 1.8rem; /* Íconos un poco más pequeños en móviles pero aún visibles */
        padding: 6px;
    }

    .nuestros-valores-banner {
        height: auto;
        padding: 50px 0;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .nuestros-valores-overlay {
        justify-content: flex-start;
    }
    .nuestros-valores-banner h2 {
        font-size: 2.5rem;
        margin-bottom: 20px;
        line-height: 1.2;
    }
    .valores-list {
        gap: 12px;
        padding: 0 20px;
    }
    .valores-list ul {
        font-size: 1.1rem;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }
    .valores-list li {
        padding: 0;
        white-space: normal;
        text-align: center;
    }
    .valores-list li:not(:last-child)::after {
        content: none; /* Eliminar el punto en móviles para evitar superposición */
    }

    /* Ajustes específicos para el banner-logo en móviles */
    .banner-logo {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px 0;
    }
    .logo-banner {
        width: 90px;
        margin-right: 0;
        margin-bottom: 15px;
    }
    .banner-texto {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 0 15px;
    }
    .banner-texto h2 {
        font-size: 1.8rem;
    }
    .banner-texto p {
        font-size: 0.9rem;
    }

    h1 {
        font-size: 2rem;
        margin-top: 30px;
    }
}

/* Ajustes para móviles pequeños */
@media (max-width: 480px) {
    .valores1 {
        padding: 25px 25px;
        margin: 30px auto;
        max-width: 95%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    .valores1:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    }
    .valores1 h1 {
        font-size: 0.95rem;
        line-height: 1.5;
        font-weight: 700;
    }

    .nuestros-valores-banner h2 {
        font-size: 1.8rem;
    }
    .valores-list ul {
        font-size: 0.95rem;
        gap: 5px;
    }

    .nav-bar a {
        font-size: 1rem;
    }

    .footer-contenido {
        padding: 0 15px;
        gap: 20px;
    }
    .footer-seccion {
        padding: 15px;
    }
    .redes-soc .footer-social-link {
        font-size: 1.6em;
        width: 44px;
        height: 44px;
    }

    .banner-logo {
        padding: 10px 0;
    }
    .logo-banner {
        width: 70px;
        margin-bottom: 10px;
    }
    .banner-texto h2 {
        font-size: 1.5rem;
    }
    .banner-texto p {
        font-size: 0.8rem;
    }

    h1 {
        font-size: 1.8rem;
        margin-top: 25px;
    }

    /* Ajustes de controles de video para móviles muy pequeños */
    .video-controls {
        bottom: 5px;
        padding: 5px 10px;
        gap: 10px;
        border-radius: 30px;
    }
    .video-control-btn {
        font-size: 1.5rem; /* Aseguramos que se vean bien incluso en los más pequeños */
        padding: 4px;
    }
}


/* Large screens (desktop) - Min-width 993px - Ajustes para pantallas más grandes */
@media (min-width: 993px) {
    /* Aquí puedes añadir estilos para pantallas grandes si deseas un diseño más extendido,
       pero sin alterar la estructura base de tus elementos. */
}

/* Animations (Mantienen la funcionalidad, pero se pueden refinar las curvas si es necesario) */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-70px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1200px 0;
    }
    100% {
        background-position: 1200px 0;
    }
}

/* --- PROFESSIONAL FOOTER STYLES --- */
.footer {
    width: 100%;
    background: linear-gradient(145deg, #4b941e, #e7fb73);
    color: #000000;
    padding: 70px 0;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 -100px 300px rgba(123, 123, 123, 0.5);
    overflow: hidden;
    border-top: 30px solid rgba(0, 0, 0, 0.2);
}

.footer-contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-seccion {
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
}

.footer-seccion:hover {
    transform: translateY(-10px) scale(1.01);
    background-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.footer h3,
.footer h4 {
    font-family: 'Montserrat', sans-serif;
    color: #000000;
    margin-bottom: 25px;
    font-weight: 700;
    border-bottom: 3px solid #7dd0ed;
    padding-bottom: 15px;
    letter-spacing: 0.8px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.footer .sub-logo {
    text-align: left;
}

.footer .sub-logo p {
    font-size: 0.95em;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.imagen {
    text-align: center;
    padding-top: 15px;
}

.imagen img {
    max-width: 180px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 2px solid rgba(7, 7, 7, 0.1);
}

.imagen img:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.footer-link,
.footer-social-link {
    display: block;
    text-decoration: none;
    color: #1c1c1c;
    margin-bottom: 15px;
    font-size: 1em;
    font-weight: 400;
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    padding-left: 8px;
    position: relative;
}

.footer-link::before,
.footer-social-link::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #8df802;
    transition: transform 0.3s ease;
    font-weight: bold;
}

.footer-link:hover::before,
.footer-social-link:hover::before {
    transform: translateX(5px);
}


.footer-link:hover,
.footer-social-link:hover {
    color: #ffffff;
    transform: translateX(10px);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.preguntas-freq ul,
.datos-gnr ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.horarios h4 {
    margin-top: 25px;
    margin-bottom: 10px;
}

.horarios p {
    font-size: 0.95em;
    color: #000000;
    margin-bottom: 0;
}

.info-contact .box {
    margin-bottom: 15px;
}

.info-contact p {
    font-size: 0.95em;
    color: #000000;
    margin-bottom: 5px;
}

.info-contact p:last-child {
    font-weight: 500;
    color: #000000;
}

.redes-soc {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    justify-content: center;
}

.redes-soc .footer-social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #000000;
    font-size: 1.8em;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.redes-soc .footer-social-link:hover {
    background-color: #000000;
    color: #ffffff;
    transform: translateY(-5px) rotate(5deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.redes-soc .footer-social-link::before {
    content: none;
}

.footer-bottom {
    text-align: center;
    padding: 30px 20px 15px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-bottom p {
    font-size: 0.9em;
    color: #000000;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.contact-photo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #4a90e2;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: block;
}
.block-content img.contact-photo {
  display: block;  /* Hace que la imagen se comporte como un bloque */
  margin: 0 auto;  /* Centra la imagen horizontalmente con márgenes automáticos */
}
/* 1. Estilos Base para todos los botones de acción */
/* (Aseguran que el texto y el ícono estén bien alineados y tengan un buen tamaño) */
.contact-actions {
    /* Centra el botón horizontalmente dentro de su contenedor */
    display: flex;
    justify-content: center;
    margin-top: 15px;
    padding-bottom: 10px; /* Espacio debajo del botón antes de cerrar el bloque */
}

.action-button {
    display: inline-flex; /* Permite alinear el ícono y el texto */
    align-items: center;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    color: #ffffff; /* Color de texto blanco */
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Espacio entre el ícono (el sobre) y el texto */
.action-button i {
    margin-right: 8px;
}

/* 2. Estilos Específicos para el Botón de Correo Electrónico */
/* (Un azul moderno para la acción de email) */
.email-button {
    background-color: #007bff; /* Azul primario */
    border: 1px solid #007bff;
}

/* Efecto al pasar el mouse (hover) */
.email-button:hover {
    background-color: #0056b3; /* Azul más oscuro */
    border-color: #0056b3;
    transform: translateY(-1px); /* Efecto de "levantamiento" */
}

/* Opcional: Estilo para asegurar que el icono del sobre es visible */
.email-button .fa-envelope {
    font-size: 16px; /* Ajusta el tamaño del ícono si es necesario */
}
.banner-logo {
  background: linear-gradient(to right, #4CAF50, #C6E377);
  padding: 15px 20px;
}

.banner-contenido {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.logo-banner {
  width: 90px;
  height: auto;
  border-radius: 50%;
}

.banner-texto h1 {
  font-size: 1.8rem;
  color: #000;
  text-align: center;
  margin: 0;
  font-weight: bold;
}

/* -------- NAV -------- */
.nav-bar {
  background: linear-gradient(to right, #fff, #f1c27d);
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: 0.3s;
  padding: 6px 10px;
  border-radius: 6px;
}

.nav-links a:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Botón hamburguesa */
.menu-toggle {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #000;
  position: absolute;
  right: 15px;
}

/* -------- RESPONSIVO -------- */
@media (max-width: 768px) {
  .banner-contenido {
    flex-direction: column;
    text-align: center;
  }

  .banner-texto h1 {
    font-size: 1.3rem;
    line-height: 1.3;
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    width: 100%;
    padding: 15px;
    border-top: 2px solid #ccc;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    text-align: center;
    width: 100%;
  }
}