nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

body {
    padding-top: 64px; /* Ajusta según la altura de la barra */
}


.color-nav {
    background-color: #e4f0fe !important; /* Naranja profundo */
    
}

nav ul li a.deep-orange-text {
    font-weight: bold;
    background-color: blue; /* Color de fondo tenue */
    padding: 5px 10px;
    border-radius: 5px;
    color: black;
}

.sidenav {
    background-color: #FF5722; /* Color de fondo */
    margin-top: 64px;
    z-index: 5000 !important; /* Asegura que se muestre sobre cualquier otro elemento */
}

.sidenav-overlay {
    z-index: 100 !important; /* Asegura que no bloquee los clics */
    background-color: rgba(0, 0, 0, 0.2) !important; /* Reduce la opacidad */
}

.sidenav a {
    pointer-events: auto !important;
}
@media screen and (min-width: 768px) {
    .brand-logo img {
        margin-left: 150px; /* Solo se aplica en pantallas grandes */
    }
}

@media screen and (max-width: 767px) {
    .brand-logo img {
        margin-left: 0; /* En móviles, el logo queda en su posición original */
    }
}
/*
Hero banner principal 
*/
.final-banner {
    background: linear-gradient(135deg, #007bff, #FF5722);
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    color: white;
    padding: 40px;
    width: 100%;
    overflow: hidden;
    position: relative;
}


.container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Equilibra texto e imágenes */
    width: 100%;
    gap: 60px; /* Aumenta el espacio entre columnas */
}



.image-slider {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}


.banner-content {
    flex: 1.2; /* Aumenta el tamaño del texto */
    max-width: 60%; /* Más ancho */
    text-align: left;
}

.banner-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.banner-text {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.banner-image-container {
    flex: 1; /* Ajusta el tamaño proporcionalmente */
    display: flex;
    justify-content: flex-start; /* Asegura que no estén pegadas a la derecha */
    align-items: center;
    max-width: 50%; /* Evita que se reduzcan demasiado */
}

.animated-banner-img {
    width: 100%;
    max-width: 500px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Animaciones */
.animate-banner {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.5s ease-in-out forwards;
}

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

/* Estilos para el carrusel de imágenes */

.banner-image-container {
    flex: 1;
    display: flex;
    justify-content: center; /* Asegura que las imágenes estén en su lugar */
    align-items: center;
    max-width: 50%;
    height: 400px; /* Asigna altura suficiente para las imágenes */
    overflow: visible; /* Evita cortes */
}
    


.image-slider img {
    position: absolute;
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    
    /* Difumina los bordes para que se mezclen con el fondo */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}



.image-slider img.active {
    opacity: 1;
}

/* Ajuste para móviles */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column; /* Cambia el diseño a formato vertical en móviles */
        align-items: center;
        gap: 20px; /* Espacio entre texto e imágenes */
    }

    .banner-content {
        max-width: 100%;
        text-align: center;
    }

    .banner-image-container {
        max-width: 100%; /* Que ocupe todo el ancho */
        display: flex;
        justify-content: center;
        align-items: center;
        order: 2; /* Mueve el carrusel debajo del texto */
    }

    .image-slider img {
        max-width: 90%; /* Ajuste adecuado en móviles */
    }
}


/*///////////////////////////////////////////
                Nosotros
///////////////////////////////////////////////////*/

.nosotros-section {
    background-color: #e4f0fe; /* Fondo claro y sólido */
    color: #333; /* Texto oscuro para mejor contraste */
    padding: 80px 40px;
    text-align: center;
}

.nosotros-title {
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 40px;
}

.nosotros-item {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Efecto ligero de profundidad */
    margin-bottom: 30px;
    transition: transform 0.3s ease-in-out;
}

.nosotros-item:hover {
    transform: scale(1.03);
}

.nosotros-subtitle {
    font-size: 2rem;
    font-weight: bold;
}

.nosotros-text {
    font-size: 1.3rem;
    margin-top: 10px;
}

.nosotros-values {
    margin-top: 40px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.value-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.value-item span {
    font-size: 2rem;
}

/* Diseño responsivo */
@media screen and (max-width: 768px) {
    .nosotros-title {
        font-size: 2.5rem;
    }

    .nosotros-subtitle {
        font-size: 1.8rem;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }
}


/*////////////////////////////////////////////////*/
.services-section {
    text-align: center;
    padding: 100px 40px;
    background-color: blue; /* Fondo claro */
}

.services-title {
    font-size: 2.8rem;
    font-weight: bold;
    color: #e4f0fe;
    margin-bottom: 20px;
}

.services-description {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 30px;
}

.services-button {
    padding: 12px 24px;
    font-size: 1.2rem;
    color: black;
    background-color: white; /* Color vibrante */
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;
}

.services-button:hover {
    background-color: #E64A19;
}

/* Estilos del modal */
.modal {
    display: none; /* Oculto al inicio */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 30px;
    width: 50%;
    max-width: 500px; /* Limita el ancho */
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    margin: auto; /* Asegura que se mantenga centrado */
}

.close {
    float: right;
    font-size: 2rem;
    cursor: pointer;
}

#searchService {
    width: 80%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
}

#service-list {
    list-style: none;
    padding: 0;
}

#service-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 1.2rem;
    cursor: pointer;
}

#service-list li:hover {
    background-color: #f8f8f8;
}



/* Complemento modal de unete a tandasalud*/

#join-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px; /* 🔥 Aumentamos el ancho */
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}
#join-modal .modal-content {
    text-align: center;
}

#join-modal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

.fields {
    display: block;
}

input, textarea, select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

button {
    background: #007bff;
    color: white;
    padding: 12px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

button:hover {
    background: #0056b3;
}

/* Diseño responsivo */
@media screen and (max-width: 768px) {
    .modal-content {
        width: 90%;
    }
}

/*//////////////////Formulario /////////////////////////////////////////*/
.info-section {
    text-align: center;
    padding: 60px 40px;
    background-color: #f4f4f4;
}

.info-title {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 20px;
}

.info-description {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
}

#info-form {
    max-width: 500px;
    margin: auto;
    text-align: left;
}

label {
    font-size: 1rem;
    font-weight: bold;
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    color: white;
    background-color: #007bff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

button:hover {
    background-color: #0056b3;
}

.form-status {
    margin-top: 15px;
    font-weight: bold;
    color: green;
}

/*////////////////// simula /////////*/
.steps-section {
    text-align: center;
    padding: 60px 40px;
    background-color: blue;
}

.steps-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 30px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 800px;
    margin: auto;
}

.step {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    background-color: #f4f4f4;
    transition: transform 0.3s;
}

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

.step img {
    width: 150px;
    margin-bottom: 10px;
}

.step h3 {
    font-size: 1.5rem;
    font-weight: bold;
}

.step p {
    font-size: 1.2rem;
    color: #555;
}

/* Diseño responsivo */
@media screen and (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}
/*///////////////Pie de pagina ////////////////*/
.footer {
    background: linear-gradient(to right, #1e3c72, #2a5298);
    color: white;
    padding: 60px 20px;
    text-align: center;
}
.footer-logo {
    display: block; /* Asegura que se trate como un bloque separado */
    margin: 0 auto 15px; /* Centra horizontalmente */
    width: 140px; /* Tamaño adecuado */
    margin-bottom: 0;
}

.footer-column:first-child {
    display: flex;
    flex-direction: column;
    align-items: center; /* 🔥 Asegura que todo esté centrado */
    text-align: center;
}
.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: start; /* 🔥 Alinea los títulos en la parte superior */
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1100px;
    margin: auto;
}

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-column h3 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid white;
    padding-bottom: 15px;
    text-align: center; /* 🔥 Alineación más elegante */
}

.footer-column ul {
    list-style: none;
    padding: 0;
    text-align: center;
    margin-left: 45px;
    margin-top: 50px;
}

.footer-column ul li {
    margin: 10px 0;
}

.footer-column ul li a {
    color: #f0f0f0;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.footer-column ul li a:hover {
    color: #ffd700;
    transform: translateX(5px);
}

/* 🌟 Estilo para el formulario de suscripción */
.footer-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#subscribe-email {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

button {
    padding: 12px 20px;
    background-color: #f0f0f0;
    color: black;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

button:hover {
    background-color: #ffcc00;
    box-shadow: 0 4px 15px rgba(255, 255, 0, 0.5);
}

/* ⚡ Diseño responsivo */
@media screen and (max-width: 768px) {
    .footer-grid {
        flex-direction: column; /* 🔥 Las columnas estarán una debajo de otra */
        align-items: center; /* 📌 Centra todos los elementos */
        gap: 20px; /* 🔄 Reduce la separación excesiva */
        text-align: center;
    }

    .footer-column {
        width: 90%; /* 🔥 Ajusta el ancho para que no quede tan disperso */
        max-width: 400px; /* 📌 Evita que se vea demasiado ancho */
    }

    .footer-column ul {
        margin-left: 0; /* 🔥 Elimina el margen que provoca desalineación */
        margin-top: 20px; /* 🔄 Reduce la separación en móviles */
    }

    .footer-logo {
        width: 120px; /* 📌 Ajusta el tamaño del logo en móviles */
    }
}