/* Importar fuente de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* Estilos Generales */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Header */
.main-header {
    background-color: #fff;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 80px; /* Ajusta el tamaño del logo */
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav li {
    margin-left: 30px;
}

.main-nav a {
    color: #555;
    font-weight: 600;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: #2CAEE4; /* Morado */
}

.btn-contact {
    background-color: #8a2be2; /* Morado */
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn-contact:hover {
    background-color: #6a0dad; /* Morado más oscuro */
}

/* --- ESTILOS PARA EL CARRUSEL/SLIDER --- */

.carousel-container {
    /* ** Ocupa el 100% del ancho de la página ** */
    width: 100%;
    /* Altura fija para el banner */
    max-height: 450px;
    overflow: hidden;
    position: relative; /* Clave para posicionar las flechas */
    margin-top: 0; /* Asegura que se pegue al header */
}

.carousel-slide {
    display: flex; /* Coloca las imágenes una al lado de la otra */
    /* Animación suave al cambiar de imagen */
    transition: transform 0.5s ease-in-out;
}

.carousel-slide img {
    /* ** Cada imagen ocupa exactamente el 100% del ancho del contenedor ** */
    min-width: 100%;
    height: 450px; /* Misma altura que el contenedor */
    /* Asegura que la imagen cubra el área sin distorsión */
    object-fit: cover;
}

/* Estilos para las flechas de navegación */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: 0.3s;
    user-select: none;
    z-index: 10;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Hero Section (con imagen de fondo) */
.hero-section {
    background-image: url("/assets/isot.png"); /* Reemplaza con tu imagen PNG */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #333; /* Color de texto que contraste con tu imagen de fondo */
    padding: 100px 0;
    min-height: 500px; /* Ajusta la altura según sea necesario */
    display: flex;
    align-items: center;
}

.hero-content {
    max-width: 600px;
    margin-left: auto; /* Empuja el contenido a la derecha si la imagen está a la izquierda */
    padding-right: 20px; /* Espacio entre el texto y el borde */
    text-align: right; /* Alinea el texto a la derecha */
}

.hero-content h1 {
    font-size: 3em;
    color: #2CAEE4; /* Color morado para el título */
    margin-bottom: 15px;
}

.hero-content p {
    font-size: 1.1em;
    margin-bottom: 25px;
}

.btn-primary {
    background-color: #2CAEE4; /* Morado */
    color: #fff;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #6a0dad; /* Morado más oscuro */
}

/* Content Sections */
.content-section {
    padding: 60px 0;
    text-align: center;
}

.content-section h2 {
    font-size: 2.5em;
    color: #2CAEE4;
    margin-bottom: 30px;
}
/* Content Sections */
.container {
    padding: 60px 0;
    color: black;
    text-align: center;
}
.content-section.light-bg {
    background-color: #f9f9f9;
}

/* Footer */
.main-footer {
    background-color: #333;
    color: #eee;
    padding: 30px 0;
    text-align: center;
    font-size: 0.9em;
}

.main-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links a {
    color: #eee;
    margin-left: 20px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #8a2be2;
}

/* Botones flotantes (WhatsApp y Mensaje) */
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: transparent;
    color: #fff;
    padding: 10px 15px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

.whatsapp-btn img {
    height: 80px;
}

.whatsapp-btn:hover {
    background-color: transparent;
}

.message-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #8a2be2; /* Morado */
    color: #fff;
    padding: 12px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: background-color 0.3s ease;
}

.message-btn img {
    height: 24px;
    filter: invert(1); /* Para iconos blancos */
}

.message-btn:hover {
    background-color: #6a0dad;
}

/* ======================================================= */
/* ====== MEDIA QUERIES PARA DISPOSITIVOS MÓVILES/TABLETS (max-width: 768px) ====== */
/* ======================================================= */
@media screen and (max-width: 768px) {
    
    /* --- HEADER y NAVEGACIÓN --- */
    /* En dispositivos pequeños, apilamos el logo y la navegación */
    .main-header .container {
        flex-direction: column; /* Apila el logo y la navegación */
        text-align: center;
    }

    /* Reducir el tamaño del logo */
    .logo img {
        height: 60px;
        margin-bottom: 10px;
    }
    
    /* La navegación se vuelve vertical y ocupa todo el ancho */
    .main-nav ul {
        flex-direction: column;
        width: 100%;
    }

    .main-nav li {
        margin: 10px 0; /* Espaciado vertical entre ítems */
    }

    /* El botón de contacto se vuelve un bloque para que se vea mejor */
    .btn-contact {
        display: block;
        margin: 15px auto 0; /* Centrar y separar del menú */
        width: 80%;
        max-width: 200px;
    }
    
    /* --- HERO SECTION --- */
    /* Hacemos el hero más compacto y centramos el contenido */
    .hero-section {
        padding: 50px 0;
        min-height: 350px;
        /* Aseguramos que el texto esté centrado si la imagen no domina el fondo */
        background-position: top center; 
    }

    .hero-content {
        max-width: 90%; /* Ocupa casi todo el ancho */
        margin: 0 auto; /* Centrar el contenido */
        padding: 0 10px;
        text-align: center; /* Centrar el texto */
    }

    .hero-content h1 {
        font-size: 2em; /* Reducir tamaño de la fuente del título */
    }
    
    /* --- CARRUSEL --- */
    /* Reducir la altura del carrusel para móviles */
    .carousel-container,
    .carousel-slide img {
        max-height: 250px;
        height: 250px;
    }

    /* Ocultar las flechas del carrusel si se desea en móviles */
    .prev, .next {
        display: none; 
    }

    /* --- FOOTER --- */
    /* Apilar los elementos del footer */
    .main-footer .container {
        flex-direction: column;
    }

    .footer-links {
        margin-top: 10px;
        display: flex; /* Mantener los links en línea horizontalmente */
    }

    .footer-links a {
        margin: 0 10px; /* Reducir el espacio horizontal */
    }
    
    /* --- BOTONES FLOTANTES --- */
    /* Ajustar posición para evitar superposiciones */
    .whatsapp-btn, .message-btn {
        bottom: 10px;
        padding: 8px; /* Reducir padding */
    }

    .whatsapp-btn {
        left: 10px;
    }

    .message-btn {
        right: 10px;
    }

    .whatsapp-btn img {
        height: 60px; /* Reducir el tamaño del icono de WhatsApp */
    }
}