/* -------------------------------------
    ESTILOS PAGINA QUIENES SOMOS - INICIO
    ------------------------------------- */

/* CSS Completo - Opción 12: CSS Transición Más Rápida (1s) - VERSION COMPLETA - PROPORCIONES 60-40 + LETRA "N" NEGRA */
/* Estilos Generales - Blanco y Negro - OPACIDAD AÑADIDA - OPCIÓN 12 TRANSICION MAS RAPIDA (1s) - VERSION COMPLETA */
.quienes-somos-container {
    font-family: 'TuFuentePrincipal', sans-serif; /* Reemplaza 'TuFuentePrincipal' */
    color: #000000; /* Texto principal en NEGRO PURO */
    line-height: 1.6;
    background-color: #FFFFFF; /* Fondo general BLANCO PURO */
}

.main-header {
    background-color: #000000; /* Fondo negro base */
    color: #FFFFFF;
    padding: 0; /*  PADDING VERTICAL CERO - Para que ocupe toda la altura vertical */
    display: grid; /* Maquetación GRID para columnas */
    grid-template-columns: 5.55fr 4.45fr; /* MODIFICADO - COLUMNAS:  Proporción 60% izquierda (texto) 40% derecha (carrusel) - VERSION COMPLETA */
    gap: 50px; /* Espacio entre columnas */
    align-items: stretch; /*  ALINEACIÓN VERTICAL EN STRETCH - Para que las columnas se estiren a la altura del header */
    min-height: 100vh; /*  ALTURA MÍNIMA AL 100% del VIEWPORT - Para que ocupe toda la altura de la ventana */
    overflow: hidden; /* IMPORTANTE: Para que el carrusel no se desborde horizontalmente */
    position: relative; /* Para posicionamiento absoluto de imágenes del carrusel */
}

.header-text-column {
    padding: 100px 20px 100px 20px; /*  RESTAURADO PADDING VERTICAL en la columna de TEXTO para espaciado interno */
    padding-right: 30px; /* Espacio a la derecha del texto en la columna izquierda */
    margin-right: -190px; /*  MODIFICADO - MARGEN NEGATIVO DERECHO - Superposición del título sobre carrusel. Ajusta este valor - VERSION COMPLETA */
    position: relative; /*  NECESARIO para el Z-index si quieres ajustar la superposición en profundidad */
    z-index: 10; /*  OPCIONAL - Ajusta el Z-index si quieres controlar la profundidad de la superposición */
}

.header-gallery-column {
    padding-left: 0; /*  ELIMINADO PADDING IZQUIERDO en columna GALERÍA -  Para que ocupe todo el borde izquierdo del header */
    padding-right: 0; /*  ELIMINADO PADDING DERECHO en columna GALERÍA - Para que ocupe todo el borde derecho del header */
    text-align: center; /* Centrar la galería en su columna */
    position: relative; /* Necesario para posicionar las imágenes del carrusel */
    overflow: hidden; /* IMPORTANTE: Recorta las imágenes que se desbordan fuera del contenedor */
    height: 100vh; /* ALTURA AL 100% del VIEWPORT -  Para que ocupe toda la altura vertical */
    z-index: 5; /* OPCIONAL - Z-index para la columna del carrusel, por si quieres ajustar la profundidad de superposición. Valor menor que el texto. */
}


.main-header h1 {
    font-size: 6.5em; /* Título GIGANTE - elemento visual principal */
    font-weight: bold;
    letter-spacing: -4px; /* Espaciado entre letras aún más negativo para títulos enormes */
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1; /* MODIFICADO - LINE-HEIGHT A 1 - VERSION COMPLETA */
    opacity: 0.38; /* MODIFICADO - OPACIDAD A 0.38 - VERSION COMPLETA */
    color: #fff; /* MODIFICADO - COLOR A BLANCO - VERSION COMPLETA */
}

.main-header p {
    font-size: 1.35em;
    opacity: 0.80; /* MODIFICADO - OPACIDAD A 0.80 - VERSION COMPLETA */
    max-width: 80%; /* Limita el ancho del párrafo en la columna izquierda */
}


/* Estilos del Carrusel  - MODIFICADO - VISIBILIDAD IMAGEN 3 SOLUCIÓN - VERSION COMPLETA */
.header-gallery {
    display: block; /* Cambia a block para el carrusel */
    position: relative; /* Para posicionamiento absoluto de imágenes dentro del carrusel */
    width: 100%; /* Ancho completo del contenedor */
    height: 100%; /* Alto completo del contenedor - IMPORTANTE */
}

.header-gallery img {
    position: absolute; /* Posicionamiento absoluto para apilar imágenes */
    top: 0;
    left: 0;
    width: 100%; /* Ancho completo del contenedor */
    height: 100%; /* Alto completo del contenedor - IMPORTANTE: Ocupar todo el espacio */
    object-fit: cover; /* Recorta y centra la imagen para llenar el contenedor */
    /* border-radius: 8px;  ELIMINADO - BORDE REDONDEADO - VERSION COMPLETA */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Sombra suave en imágenes - NEGRO */
    opacity: 0; /* Inicialmente TODAS transparentes */
    transition: opacity 1s ease-in-out; /* Transición de fundido suave */
    z-index: 0; /* Inicialmente DETRÁS */
}


/* Animación del Carrusel (CSS Keyframes) - MODIFICADA - ANIMACIÓN SIMPLIFICADA - VERSION COMPLETA */
@keyframes carousel-fade-simplificado { /* Nombre de animación MODIFICADO */
    0% { opacity: 0; z-index: 0; } /* Imagen INVISIBLE y DETRÁS al inicio */
    15% { opacity: 1; z-index: 1; } /* Imagen VISIBLE y DELANTE del 15% al 45% (duración visible 30%) */
    45% { opacity: 1; z-index: 1; } /* Mantiene visible */
    60% { opacity: 0; z-index: 0; } /* Imagen INVISIBLE y DETRÁS del 60% al 90% */
    90% { opacity: 0; z-index: 0; } /* Mantiene invisible */
    100% { opacity: 0; z-index: 0; } /* Imagen INVISIBLE al final del ciclo */
}


/* Aplica la animación a cada imagen - MODIFICADO - ANIMACIÓN SIMPLIFICADA y DURACIÓN AJUSTADA - VERSION COMPLETA */
/* Asumiendo 3 imágenes -  Duración total 9s (3s por imagen) - ANIMACIÓN SIMPLIFICADA */
.header-gallery img:nth-child(1) { animation: carousel-fade-simplificado 9s 0s infinite; } /* 9s total, inicio inmediato */
.header-gallery img:nth-child(2) { animation: carousel-fade-simplificado 9s 3s infinite; } /* 9s total, inicio con 3s de retraso */
.header-gallery img:nth-child(3) { animation: carousel-fade-simplificado 9s 6s infinite; } /* 9s total, inicio con 6s de retraso */
/* Si tienes más o menos imágenes, ajusta el número de `nth-child` y los `delay` en la animación */


.section {
    padding: 100px 20px; /* Aumenta padding vertical de secciones */
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px; /* Aumenta el espacio entre columnas */
}

.text-container {
    flex: 1.5;
    padding-right: 50px; /* Aumenta espacio a la derecha del texto */
}

.image-container {
    flex: 1;
    text-align: center;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 15px; /* Bordes más redondeados */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada - NEGRO */
    transition: transform 0.3s ease-in-out; /* Transición suave al hacer hover */
    filter: grayscale(0%); /* Asegura que las imágenes a color no se vean en blanco y negro por defecto (puedes cambiar a grayscale(100%) si quieres imágenes en blanco y negro) */
}

.image-container img:hover {
    transform: scale(1.05); /* Ligeramente más grande al hacer hover */
}


/* Estilos de las Secciones Individuales - Blanco y Negro - OPACIDAD AÑADIDA - VERSION COMPLETA */

/* Estilos base para TODAS las secciones (excepto header) - VERSION UNIFICADA HOVER */
.section:not(.main-header) {
    transition-property: background-color, color; /* Propiedades con transición - VERSION CSS CORREGIDO */
    transition-duration: 0.70s, 0.70s;             /* DURACIÓN REDUCIDA A 1s (aprox. 30% menos) - VERSION TRANSICION MAS RAPIDA */
    transition-timing-function: ease-in-out, ease-in-out; /* Función de suavizado - VERSION CSS CORREGIDO */
    background-color: #FFFFFF; /* Fondo BLANCO por defecto - VERSION UNIFICADA HOVER */
}

.section:not(.main-header) h2,
.section:not(.main-header) p {
    color: #000000; /* Color de TEXTO (por defecto para h2 y p) - VERSION UNIFICADA HOVER - INICIALMENTE NEGRO */
    font-size: 1.35em;
}

.section:not(.main-header) p {
    color: #FFFFFF; /* Color de DESCRIPCION (p) - VERSION UNIFICADA HOVER - INICIALMENTE BLANCO (SOBREESCRIBE regla anterior para p) */
    font-size: 1.25em;
}


/* Estilos HOVER para TODAS las secciones (excepto header) - VERSION UNIFICADA HOVER */
.section:not(.main-header):hover {
    background-color: #000000; /* Fondo NEGRO en HOVER - VERSION UNIFICADA HOVER */
}

.section:not(.main-header):hover h2,
.section:not(.main-header):hover p {
    color: #FFFFFF !important; /* Color de TEXTO (h2 y p) en HOVER: BLANCO - VERSION UNIFICADA HOVER - !important para asegurar precedencia */
    font-size: 1.35em;
}


/* Sección Historia - ESTILOS ESPECÍFICOS ELIMINADOS - VERSION UNIFICADA HOVER */
/* Sección Expansión - ESTILOS ESPECÍFICOS ELIMINADOS - VERSION UNIFICADA HOVER */
/* Sección Equipo - ESTILOS ESPECÍFICOS ELIMINADOS - VERSION UNIFICADA HOVER */
/* Sección Contacto - ESTILOS ESPECÍFICOS ELIMINADOS - VERSION UNIFICADA HOVER */


/* Sección Historia - TÍTULOS (h2) - SE MANTIENEN SIN CAMBIOS EN HOVER */
.historia-section {
    /* background-color: #FFFFFF;  ELIMINADO - VERSION UNIFICADA HOVER */
    color: #000000; /* Texto principal en NEGRO PURO (ANTES BLANCO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA NEGRO */
}

.historia-section h2 {
    font-size: 2.8em; /* Título de sección grande y destacado */
    font-weight: bold;
    margin-bottom: 30px; /* Mayor margen inferior */
    /* color: #000000; ELIMINADO - VERSION UNIFICADA HOVER */ /* Título de sección en NEGRO PURO (ANTES BLANCO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA NEGRO */
    text-transform: uppercase; /* Título en mayúsculas */
    letter-spacing: -0.5px; /* Espaciado entre letras negativo sutil */
    opacity: 0.98; /* OPACIDAD APLICADA A TITULOS DE SECCION */
}


/* Sección Expansión */
.expansion-section {
    background-color: #FFFFFF; /* Fondo BLANCO PURO (ANTES NEGRO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA BLANCO */
    color: #000000; /* Texto en NEGRO PURO (ANTES BLANCO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA NEGRO */
    direction: rtl; /* Invierte el orden */
}

.expansion-section .content-wrapper {
    direction: ltr; /* Reestablece la dirección del contenido */
}

.expansion-section h2 {
    font-size: 2.8em;
    font-weight: bold;
    margin-bottom: 30px;
    /* color: #FFFFFF; ELIMINADO - VERSION UNIFICADA HOVER */ /* Título de sección en BLANCO PURO (ANTES NEGRO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA BLANCO */
    text-transform: uppercase; /* Título en mayúsculas */
    letter-spacing: -0.5px;
    opacity: 0.98; /* OPACIDAD APLICADA A TITULOS DE SECCION */
}


/* Sección Equipo */
.equipo-section {
    background-color: #FFFFFF; /* Fondo BLANCO PURO (ANTES NEGRO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA BLANCO */
    text-align: center; /* Centrar el contenido */
    color: #000000; /* Texto principal en NEGRO PURO (ANTES BLANCO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA NEGRO */
}

.equipo-section h2 {
    font-size: 3.0em; /* Título aún más grande y llamativo */
    font-weight: bold;
    margin-bottom: 40px; /* Mayor margen inferior */
    /* color: #000000; ELIMINADO - VERSION UNIFICADA HOVER */ /* Título de sección en NEGRO PURO (ANTES BLANCO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA NEGRO */
    text-transform: uppercase; /* Título en mayúsculas */
    letter-spacing: -1px; /* Espaciado entre letras negativo mayor */
    opacity: 0.98; /* OPACIDAD APLICADA A TITULOS DE SECCION */
}


/* Sección Contacto */
.contacto-section {
    background-color: #FFFFFF; /* Fondo BLANCO PURO (ANTES NEGRO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA BLANCO */
    color: #000000; /* Texto principal en NEGRO PURO (ANTES BLANCO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA NEGRO */
    padding-bottom: 120px; /* Mayor padding inferior */
}

.contacto-section h2 {
    text-align: center;
    font-size: 2.8em;
    font-weight: bold;
    margin-bottom: 50px; /* Margen inferior aún mayor */
    /* color: #000000; ELIMINADO - VERSION UNIFICADA HOVER */ /* Título de sección en NEGRO PURO (ANTES BLANCO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA NEGRO */
    text-transform: uppercase; /* Título en mayúsculas */
    letter-spacing: -0.5px;
    opacity: 0.98; /* OPACIDAD APLICADA A TITULOS DE SECCION */
}

.contacto-section p { /* Añadido selector para parrafos de Contacto section, para ser consistentes */
    opacity: 0.95; /* Opacidad para párrafos en la sección de contacto también, si aplica */
    color: #000000; /* Texto en NEGRO PURO (ANTES BLANCO) - VERSION UNIFICADA HOVER - INICIALMENTE YA ERA NEGRO */
    font-size: 1.25em;
}


.contact-form {
    max-width: 700px; /* Ancho máximo del formulario */
    margin: 0 auto;
}

.form-group {
    margin-bottom: 30px; /* Mayor margen inferior entre campos */
}

.form-group label {
    display: block;
    font-size: 1.2em;
    margin-bottom: 10px; /* Mayor margen inferior para etiquetas */
    color: #FFFFFF; /* Etiqueta en BLANCO PURO */
    font-weight: 600; /* Etiqueta en semibold */
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px; /* Mayor padding en campos */
    border: 2px solid #CCCCCC; /* Borde en GRIS CLARO MEDIO */
    border-radius: 8px; /* Bordes más redondeados */
    font-size: 1.1em;
    font-family: inherit;
    background-color: #FFFFFF; /* Fondo de campos en BLANCO PURO */
    color: #000000; /* Texto de campos en NEGRO PURO */
    transition: border-color 0.3s ease; /* Transición suave en el borde */
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #000000; /* Borde NEGRO al enfocar */
    outline: none; /* Elimina el outline predeterminado al enfocar */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2); /* Sombra sutil al enfocar - NEGRO */
}


.form-group textarea {
    resize: vertical;
    min-height: 150px; /* Altura mínima del textarea */
}

.contact-form button {
    background-color: #FFFFFF; /* Botón en BLANCO PURO */
    color: #000000; /* Texto del botón en NEGRO PURO */
    padding: 16px 40px; /* Padding mayor en el botón */
    border: none;
    border-radius: 10px; /* Bordes más redondeados en el botón */
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease-in-out; /* Transiciones suaves */
    font-weight: bold;
    letter-spacing: 0.5px; /* Espaciado entre letras en el botón */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* Sombra en el botón - NEGRO */
}

.contact-form button:hover {
    background-color: #DDDDDD; /* Botón en GRIS CLARO al hacer hover */
    color: #000000; /* Texto del botón en NEGRO PURO al hacer hover */
    transform: translateY(-2px); /* Ligeramente elevado al hacer hover */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hacer hover - NEGRO */
}

.contact-form button:active {
    transform: translateY(0); /* Vuelve a la posición original al hacer clic */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Sombra más suave al hacer clic - NEGRO */
}


/* Diseño Responsive - Cambios para el carrusel en columnas - VERSION COMPLETA */
@media (max-width: 768px) {
    .main-header {
        display: block; /* Vuelve a display block en móvil - apila columnas */
        text-align: center; /* Centra el texto en móvil */
        padding: 80px 20px; /* Reduce padding vertical en móvil */
        min-height: auto; /* Altura automática en móvil */
    }

    .header-text-column {
        padding-right: 0; /* Elimina padding columnas en móvil */
        padding-left: 0;
        margin-right: 0; /* Elimina margen negativo en móvil -  vuelve a diseño apilado */
    }

    .header-gallery-column {
        padding-left: 0; /* Elimina padding columnas en móvil */
        padding-right: 0;
        height: 300px; /* Reduce altura del carrusel en móvil para que no ocupe demasiado espacio vertical */
    }

    .main-header h1 {
        font-size: 4.0em; /* Reduce tamaño del título en móvil */
        letter-spacing: -2px; /* Reduce espaciado en móvil */
        opacity: 0.38; /* MODIFICADO - OPACIDAD A 0.38 EN MOVIL - VERSION COMPLETA */
        line-height: 1; /* MODIFICADO - LINE-HEIGHT A 1 EN MOVIL - VERSION COMPLETA */
    }

    .main-header p {
        max-width: 95%; /* Párrafo ocupa más ancho en móvil */
        opacity: 0.80; /* MODIFICADO - OPACIDAD A 0.80 EN MOVIL - VERSION COMPLETA */
    }


    .section {
        padding: 60px 20px; /* Reduce padding vertical de secciones en móvil */
    }

    .historia-section h2,
    .expansion-section h2,
    .equipo-section h2,
    .contacto-section h2 {
        font-size: 2.4em; /* Reduce tamaño de títulos de sección en móvil */
        margin-bottom: 25px; /* Reduce margen inferior de títulos de sección en móvil */
    }

    .equipo-section p,
    .contacto-section p {
        max-width: 95%; /* Ancho máximo de párrafos en móvil */
    }

    .contact-form {
        max-width: 95%; /* Ancho máximo de formulario en móvil */
    }
}

/* Estilo específico para la letra "N" en NEGRO - VERSION COMPLETA */
.letra-n-negra {
    color: #000; /* Color NEGRO PURO (mantenemos el color negro) */
    text-shadow:
        -1px -1px 5px #FFFFFF,  /* Sombra arriba-izquierda */
        1px -1px 5px #FFFFFF,     /* Sombra arriba-derecha */
        -1px 1px 5px #FFFFFF,     /* Sombra abajo-izquierda */
        1px 1px 5px #FFFFFF;      /* Sombra abajo-derecha */
}
/* -------------------------------------
    ESTILOS PAGINA QUIENES SOMOS - FIN
    ------------------------------------- */