/* Reset */
body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Evita el scroll horizontal */
}

/* Estilos comunes para títulos */
.section-title,
.third-section-title,
.fourth-section-title,
.fifth-section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #007271;
    /* Verde actualizado */
    margin-bottom: 40px;
    text-align: center;
}

.third-section-title {
    color: #ffffff;
}

/* Sección Principal */
.main-section {
    height: 100vh;
    background: url('/img/1.webp') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.logo {
    width: 450px;
    height: auto;
    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

.tagline {
    margin-top: 20px;
    font-size: 3rem;
    color: white;
    font-style: italic;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.tagline::before {
    content: "ENERGÍA, SUSTENTABILIDAD";
    display: block;
}

.tagline::after {
    content: "Y EXPERIENCIA";
    display: block;
    margin-top: 10px;
}

.section-transition {
    height: 400px;
    background: linear-gradient(180deg, #007271 0%, #ffffff 100%);
}

/* Segunda Sección */
.second-section {
    background: #ffffff;
    padding: 10px 20px 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.section-description {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: #555555;
    text-align: center;
    margin-bottom: 40px;
    max-width: 800px;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 60px 40px;
    justify-items: center;
    width: 100%;
    max-width: 900px;
}

.card {
    background: #007271;
    /* Nuevo color */
    border-radius: 15px;
    padding: 20px;
    color: white;
    width: 75%;
    max-width: 320px;
    position: relative;
    text-align: justify;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    border: 1px solid #007271;
}

.card-image-container {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid #007271;
    padding: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.left {
    left: -110px;
    border-radius: 15px 0 0 15px;
}

.right {
    right: -110px;
    border-radius: 0 15px 15px 0;
}

.card-image {
    width: 90%;
    height: auto;
}

/* Tercera Sección */
.third-section {
    background: #007271;
    /* Verde claro actualizado */
    padding: 60px 20px;
    color: #ffffff;
    text-align: center;
}

.third-section-images {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.third-section-image {
    width: calc(20% - 40px);
    min-width: 200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.third-section-image img {
    width: 100%;
    height: auto;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.third-section-image p {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #ffffff;
    margin-top: 10px;
}

/* Cuarta y Quinta Sección Fondo */
.fourth-five-section-background {
    background: linear-gradient(160deg, #ffffff 40%, #00727057 40%);
}

/* --- ESTILOS ACTUALIZADOS PARA SLIDER DE PROFESIONALES --- */

/* Contenedor principal de la sección */
.fourth-section {
    position: relative;
    height: auto; /* Altura automática para adaptarse al contenido */
    padding: 80px 0; /* Espaciado vertical */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Evita que los elementos se salgan */
}

.curriculum-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

/* Contenedor que recorta el slider */
.curriculum-container {
    width: 100%;
    overflow: hidden; /* Oculta las tarjetas que no se ven */
}

/* Contenedor que se mueve (scroll) */
.curriculum-scroll {
    display: flex;
    transition: transform 0.5s ease-in-out;
    cursor: grab; /* Indica que se puede arrastrar */
}

.curriculum-card {
    flex: 0 0 100%;
    width: 100%; /* Ocupa el 100% del contenedor para el cálculo de JS */
    max-width: 800px;
    box-sizing: border-box;
    padding: 40px;
    margin: 0 40px; /* Margen horizontal para centrar y separar */
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #007271;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.curriculum-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #007271;
    margin-bottom: 10px;
    text-align: center;
}

.curriculum-card h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    color: #00796b;
    /* Un verde intermedio */
    margin-bottom: 20px;
    text-align: center;
}

.curriculum-card p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: #555555;
    max-width: 700px;
    text-align: justify;
}

/* Estilo para las flechas de navegación */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 114, 113, 0.7);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
    transition: background-color 0.3s ease;
    display: none; /* Ocultas por defecto, se muestran en @media */
}

.slider-arrow:hover {
    background-color: #005f5f;
}

.prev-arrow {
    left: 30px;
}

.next-arrow {
    right: 30px;
}

/* Contenedor para los puntos de navegación */
.slider-dots {
    text-align: center;
    padding-top: 20px;
}

/* Estilo de cada punto */
.dot {
    display: inline-block;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Estilo del punto activo */
.dot.active {
    background-color: #007271;
}


/* --- Media Queries y Estilos Responsivos --- */

@media (min-width: 769px) {
    /* Mostrar flechas solo en pantallas grandes */
    .slider-arrow {
        display: block;
    }
}

@media (max-width: 768px) {
    .curriculum-card {
        width: 85vw; /* Ocupa el 85% del ancho de la vista */
        padding: 20px;
        margin: 0 7.5vw; /* Centra la tarjeta */
    }

    .curriculum-card h3 {
        font-size: 1.5rem;
    }

    .curriculum-card h4 {
        font-size: 1.2rem;
    }

    .curriculum-card p {
        font-size: 1rem;
    }
}


/* Quinta Sección */
.fifth-section {
    padding: 100px 20px;
    text-align: center;
    color: white;
}

.fifth-section-title {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.brands-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.brand-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.brand-logo {
    max-width: 220px;
    transition: transform 0.3s ease;
}

.brand-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.brand-logo:hover {
    transform: scale(1.1);
}

@media (max-width: 1200px) {
    .brand-logo {
        max-width: 180px;
    }
}

@media (max-width: 768px) {
    .brand-row {
        flex-direction: column;
        align-items: center;
    }

    .brand-logo {
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .brand-logo {
        max-width: 120px;
    }
}

/* Sixth Section (Sección de Contacto) */
.sixth-section {
    padding: 50px 20px;
    background-color: rgb(240, 240, 240);
    text-align: center;
}

.contact-container {
    max-width: 600px;
    margin: 0 auto;
}

.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #007271;
    margin-bottom: 30px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #333;
    text-align: left;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box; /* Añadido para consistencia */
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #007271;
    outline: none;
}

.contact-submit {
    background-color: #007271;
    color: #ffffff;
    border: none;
    padding: 15px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-submit:hover {
    background-color: #005f5f;
}


/* Footer Section */
.footer-section {
    --tw-bg-opacity: 1;
    background-color: rgb(61 61 61 / var(--tw-bg-opacity));
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.footer-logo {
    max-width: 150px;
    margin-bottom: 20px;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #00b5ad;
}

.footer-contact {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- ESTILO PARA EL BOTÓN DEL FOOTER --- */

.footer-button {
    display: inline-block;
    background-color: #007271; /* Color principal de tu web */
    color: #ffffff;
    padding: 12px 25px;
    margin-top: 20px; /* Espacio para separarlo del texto de arriba */
    border-radius: 5px;
    text-decoration: none; /* Quita el subrayado del enlace */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.footer-button:hover {
    background-color: #005f5f; /* Un tono más oscuro al pasar el mouse */
    color: #ffffff;
}

/* Footer Bottom */
.footer-bottom {
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(40 40 40 / var(--tw-bg-opacity));
    padding: 10px 0;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    text-align: center;
}

/* Línea fina debajo del footer */
.footer-bottom-line {
    height: 1px;
    width: 100%;
    background-color: #404040;
}

/* --- MEJORAS PARA DISPOSITIVOS MÓVILES --- */

@media (max-width: 768px) {

    /* 1. Ajuste del Título Principal (Sección 1) */
    .tagline {
        font-size: 1.8rem; /* Reducimos el tamaño de la fuente para que no se corte */
        padding: 10px 15px; /* Un poco más de espacio lateral */
    }

    /* También ajustamos el logo para que no sea tan grande en móviles */
    .logo {
        width: 300px;
    }


    /* 2. Ajustes en la Sección "¿Quiénes Somos?" (Sección 2) */
    
    /* Ocultamos los íconos de los costados */
    .card-image-container {
        display: none;
    }

    /* Convertimos el contenedor de tarjetas a una sola columna */
    .card-container {
        grid-template-columns: 1fr; /* Una sola columna para apilar las tarjetas */
        grid-gap: 30px; /* Reducimos la distancia vertical entre tarjetas */
        width: 100%;
        padding: 0 10px; /* Evitamos que el contenido toque los bordes de la pantalla */
        box-sizing: border-box;
    }

    /* Hacemos las tarjetas más grandes y legibles */
    .card {
        width: 90%; /* Las tarjetas ocuparán el 90% del ancho disponible */
        max-width: 450px; /* Les damos un máximo más generoso */
        margin: 0 auto; /* Las centramos */
        padding: 25px;
        text-align: left; /* El texto justificado puede verse mal en móviles, lo alineamos a la izquierda */
    }
}