/* estilos-sobre-nosotros.css */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    overflow-y: auto; /* Asegura que permita scroll */
}

main {
    padding-top: 80px; /* Ajusta según la altura de tu encabezado */
    min-height: 100vh; /* Asegura que el contenido siempre ocupe al menos la altura de la ventana */
}

.encabezado {
    position: sticky; /* Mantén el encabezado visible mientras haces scroll */
    top: 0;
    z-index: 1000;
    background-color: var(--oscuro);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilo para la sección de "Nosotros" */
.seccion-nosotros {
    position: relative;
    height: 20vh; /* Altura ajustable */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url('/assets/img/termo3.png'); /* Reemplaza con la ruta de tu imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}

.seccion-nosotros::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen para resaltar el texto */
    z-index: 1;
}

.contenido-nosotros {
    position: relative;
    z-index: 2; /* Asegura que el texto esté por encima de la capa oscura */
}

.contenido-nosotros h1 {
    font-size: 4rem; /* Tamaño ajustable */
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}

/* Estilo para el texto debajo de la imagen */
.texto-nosotros {
    padding: 2rem;
    text-align: justify;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333;
}

/* Sección de Nosotros con imagen grande y descripción */
.detalle-nosotros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    padding: 2rem 0;
}

.imagen-nosotros img {
    width: 100%;
    max-width: 600px; /* Ajusta según el tamaño de la imagen */
    height: auto;
    border-radius: 8px;
}

.texto-nosotros {
    flex: 1;
    text-align: left;
    padding: 0 1rem;
}

.texto-nosotros h2 {
    font-size: 2.5rem;
    color: #003366; /* Azul como en el ejemplo */
    margin-bottom: 1rem;
    border-left: 4px solid #003366;
    padding-left: 1rem;
}

.texto-nosotros p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.btn-contacto {
    display: inline-block;
    padding: 0.8rem 2rem;
    background-color: transparent;
    border: 2px solid #003366; /* Botón con borde azul */
    color: #003366;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.btn-contacto:hover {
    background-color: #003366;
    color: #ffffff;
}

/* Estilo para el cuadro azul detrás de la imagen */
.cuadro-azul {
    position: relative;
    display: inline-block;
    padding: 10px; /* Ajusta el espacio alrededor de la imagen */
    background-color: #003366; /* Azul como en el ejemplo */
}

.cuadro-azul img {
    display: block;
    width: 100%;
    height: auto;
    border: 5px solid white; /* Borde blanco alrededor de la imagen (opcional) */
}

.imagen-nosotros {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

/* Contenedor para las tarjetas */
.mision-vision {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    margin: 3rem 0;
    flex-wrap: wrap; /* Permite que se ajusten en dispositivos pequeños */
}

/* Estilo general de las tarjetas */
.tarjeta {
    flex: 1;
    max-width: 500px; /* Aumenta el ancho máximo de las tarjetas */
    min-height: 250px; /* Asegura que todas las tarjetas tengan la misma altura mínima */
    padding: 3rem; /* Más espacio interno */
    border-radius: 8px;
    color: white;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

/* Estilo para la tarjeta de Visión */
.vision {
    background-color: #12a8ee; /* Rojo */
}

/* Estilo para la tarjeta de Misión */
.mision {
    background-color: #003366; /* Azul */
}

/* Título de las tarjetas */
.tarjeta h3 {
    font-size: 2rem; /* Fuente más grande para el título */
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-weight: bold;
}

/* Texto de las tarjetas */
.tarjeta p {
    font-size: 1.4rem; /* Fuente más grande para el texto */
    line-height: 1.8;
}

/* Sección "Por qué elegirnos" */
.porque-elegirnos {
    margin: 4rem 0;
    text-align: center;
    font-family: Arial, sans-serif;
}

.porque-elegirnos h2 {
    font-size: 2.5rem;
    color: #003366;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

/* Contenedor principal */
.contenido-elegirnos {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 2rem;
    align-items: center;
}

.contenido-elegirnos .imagen img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Razones */
.razones {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.razon {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #e8f4fc;
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 1.2rem;
    color: #003366;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s; /* Animación al pasar el mouse */
}

/* Razones */
.razones {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-left: 2rem; /* Añade espacio desde la izquierda para separarlas de la imagen */
}

.razon {
    position: relative; /* Asegura que los números estén relacionados con este contenedor */
    display: flex;
    align-items: center;
    background-color: #e8f4fc;
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 1.2rem;
    color: #003366;
    overflow: visible; /* Permite que los números sean visibles fuera del contenedor */
    transition: background-color 0.3s, color 0.3s; /* Animación al pasar el mouse */
}

/* Números circulares fuera del rectángulo */
.razon span {
    position: absolute;
    left: -30px; /* Asegura que el círculo se vea completamente fuera */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1; /* Asegura que los números estén por encima de otros elementos */
}

/* Animación al pasar el mouse */
.razon:hover {
    background-color: #007bff;
    color: white;
}

.razon:hover span {
    background-color: white;
    color: #007bff;
    transition: background-color 0.3s, color 0.3s;
}

/* Sección Nuestros Valores */
.valores {
    text-align: center;
    margin: 4rem 0;
    font-family: Arial, sans-serif;
}

.valores h2 {
    font-size: 2.8rem; /* Título un poco más grande */
    color: #003366;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.contenedor-valores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Tarjetas más grandes */
    gap: 1.5rem; /* Menor espacio entre tarjetas */
    justify-items: center;
    align-items: center;
}

.valor {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    width: 350px; /* Ancho más grande */
    height: 230px; /* Altura más grande */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.valor img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen se ajuste sin deformarse */
}

.texto-valor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 1.6rem; /* Texto ligeramente más grande */
    font-weight: bold;
    text-transform: uppercase;
    padding: 1rem;
    text-align: center;
    transition: background 0.3s ease-in-out;
}

.valor:hover {
    transform: scale(1.05);
}

.valor:hover .texto-valor {
    background: rgba(0, 0, 0, 0.8);
}

/* Sección Nuestros Clientes */
.clientes {
    text-align: center;
    margin: 4rem 0;
    font-family: Arial, sans-serif;
}

.clientes h2 {
    font-size: 2.8rem;
    color: #003366;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

/* Contenedor del carrusel */
.swiper-container {
    width: 100%;
    max-width: 900px; /* Ajusta según el diseño */
    margin: 0 auto;
    position: relative;
}

/* Estilo de cada slide */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    max-height: 400px; /* Aumenté la altura del slide */
    height: auto;
}

/* Estilo para las imágenes */
.swiper-slide img {
    width: 100%;
    height: 200px; /* Altura incrementada */
    max-width: 350px; /* Ancho máximo ajustado */
    object-fit: contain; /* Asegura que la imagen no se deforme */
    border-radius: 4px;
}

/* Controles de navegación */
.swiper-button-next,
.swiper-button-prev {
    color: #003366;
}

.swiper-pagination {
    bottom: 10px;
}

/* Ajustes para el pie de página */
.pie-pagina {
    margin-top: 5rem;
    background-color: rgb(20, 20, 20);
    padding: 5rem 0; /* Ajustamos para centrar el contenido */
    width: 100%; /* Asegura que ocupe todo el ancho */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
}

/* Centrar y limitar el contenido del pie de página */
.contenedor-piepagina {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Diseño en columnas adaptables */
    gap: 2rem; /* Espaciado entre columnas */
    max-width: 1200px; /* Define un ancho máximo */
    margin: 0 auto; /* Centra el contenido */
    padding: 0 2rem; /* Añade espacio horizontal interno */
}

/* Estilo de cada bloque de información */
.info {
    text-align: center;
    color: var(--blanco);
}

/* Estilo de los títulos dentro de los bloques */
.info h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: #fff;
}

/* Estilo de los párrafos dentro de los bloques */
.info p {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

/* Iconos de redes sociales */
.redes-pie i {
    font-size: 2rem;
    margin: 0 0.5rem;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s;
}

.redes-pie i:hover {
    color: #00d9ff; /* Cambia el color al pasar el mouse */
}

/* Campos de entrada y botón en "Noticias" */
.info input[type="email"],
.info input[type="submit"] {
    display: block;
    margin: 0.5rem auto;
    padding: 0.8rem;
    border-radius: 5px;
    border: none;
    width: 90%;
}

.info input[type="submit"] {
    background-color: #00d9ff;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.info input[type="submit"]:hover {
    background-color: #008fb3;
}

/* Ajustes del footer */
.footer {
    text-align: center;
    background-color: rgb(50, 50, 50); /* Fondo oscuro */
    color: var(--blanco);
    padding: 2rem;
    font-size: 1.6rem;
    width: 100%; /* Ocupa todo el ancho */
    box-sizing: border-box;
}



/* Sección Nuestros Proyectos */
.proyectos {
    text-align: center;
    margin: 4rem 0;
    font-family: Arial, sans-serif;
    background-color: transparent; /* Elimina el fondo azul del título */
    padding: 2rem 1rem;
}

.proyectos h2 {
    font-size: 3.5rem; /* Título más grande */
    margin-bottom: 2rem;
    color: #003366; /* Azul oscuro */
    text-transform: uppercase;
    font-weight: bold;
}

/* Carrusel de Proyectos */
.swiper-container-proyectos {
    width: 100%;
    max-width: 1800px; /* Ancho incrementado para estirar horizontalmente */
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* Oculta las tarjetas que no están visibles */
}

/* Estilo de las tarjetas (slides) con fondo de imagen */
.swiper-container-proyectos .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background-image: url('/assets/img/tarjeta.png'); /* Reemplaza con la ruta de tu imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
    background-position: center; /* Centra la imagen en el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    color: rgba(250, 249, 253, 0.959);
    min-height: 550px; /* Aumenta la altura */
    max-width: 1200px; /* Aumenta el ancho */
    margin: 0 auto; /* Centra la tarjeta */
    
}


/* Contenido del Proyecto */
.swiper-container-proyectos .contenido-proyecto {
    text-align: left;
    flex: 1;
    padding: 2rem;
}

.swiper-container-proyectos .contenido-proyecto h3 {
    font-size: 5rem; /* Título del proyecto más grande */
    margin-bottom: 2.5rem;
    color: rgba(98, 216, 236, 0.911);
}

.swiper-container-proyectos .contenido-proyecto p {
    font-size: 2.5rem; /* Texto de descripción más grande */
    color: #f0f0f0;
}

/* Estilo del Video */
.swiper-container-proyectos .video-proyecto {
    flex: 1;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-container-proyectos .video-proyecto iframe {
    width: 100%;
    max-width: 600px; /* Mantiene el ancho del video */
    height: 340px; /* Mantiene la altura del video */
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Ajuste para las tarjetas en pantallas pequeñas */
@media (max-width: 768px) {
    .swiper-container-proyectos .swiper-slide {
        flex-direction: column; /* Apila el contenido */
        text-align: center;
        min-height: 600px; /* Ajusta la altura mínima */
    }

    .swiper-container-proyectos .contenido-proyecto {
        width: 100%;
    }

    .swiper-container-proyectos .video-proyecto iframe {
        max-width: 100%;
        height: auto; /* Ajusta la altura proporcionalmente */
    }
}

/* Ajusta la posición de los puntos de navegación */
.swiper-pagination {
    position: absolute;
    bottom: -20px; /* Mueve los puntos más abajo */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 12px; /* Espaciado entre los puntos */
}

.swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background-color: #003366; /* Color de los puntos */
    opacity: 0.5;
    transition: opacity 0.3s, transform 0.3s;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.5); /* Aumenta el tamaño del punto activo */
}