#carouselExample {
    width: 100%;  /* Asegura que el carrusel ocupe todo el ancho disponible */
    margin: 0;
    padding: 0;
}

.carousel-inner {
    width: 100%;  /* Asegura que el contenedor interno ocupe todo el ancho */
}

.carousel-inner img {
    width: 100%;  /* Asegura que las imágenes ocupen todo el ancho */
    height: 400px;  /* Fija la altura del carrusel */
    object-fit: cover;  /* Hace que las imágenes cubran todo el área sin deformarse */
    display: block;  /* Elimina espacios debajo de las imágenes */
}




/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .carousel-inner img {
        height: 40vh;  /* Ajusta la altura del carrusel para pantallas más pequeñas */
    }
}


.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 25px 35px;  /* Aumentamos el tamaño del botón */
    font-size: 40px;  /* Hacemos que el ícono sea más grande */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;  /* Centra el ícono dentro del botón */
    align-items: center;  /* Asegura que el ícono esté centrado verticalmente */
}

.whatsapp-btn:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

/* Asegurándonos de que el ícono de WhatsApp esté correctamente alineado y más grande */
.whatsapp-btn i {
    font-size: 50px;  /* Aumentamos aún más el tamaño del ícono */
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    .whatsapp-btn {
        padding: 15px 25px;  /* Reduce el tamaño del botón en pantallas más pequeñas */
        font-size: 30px;  /* Ajusta el tamaño del ícono */
    }

    .whatsapp-btn i {
        font-size: 35px;  /* Ajusta el tamaño del ícono dentro del botón */
    }

    /* Ajustes para las imágenes dentro del carrusel */
    .carousel-inner img {
        height: 40vh;  /* Ajusta la altura del carrusel */
    }

    /* Ajustes para las imágenes en la sección de experiencia */
    .experience-section img {
        width: 100%;
        height: auto;  /* Ajusta la altura proporcionalmente */
    }

    /* Ajustes para los textos en la sección de experiencia */
    .experience-text {
        font-size: 16px;  /* Ajusta el tamaño de la fuente */
        width: 90%;  /* Hace el contenedor de texto más pequeño */
    }

    .experience-text h2 {
        font-size: 24px;  /* Ajusta el tamaño del título */
    }

    .experience-text p {
        font-size: 14px;  /* Ajusta el tamaño del párrafo */
    }

    /* Sección de contacto */
    .contacto-seccion {
        padding: 20px;
    }

    .contacto-seccion p, 
    .contacto-seccion ul {
        margin: 5px 0;  /* Menos margen para dispositivos móviles */
        font-size: 14px;  /* Ajusta el tamaño del texto */
    }
}

/* Sección de experiencia */
.experience-section {
    position: relative;
    text-align: center;
    color: white;
    overflow: hidden; /* Evita que el contenido se desborde */
}

.experience-section img {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho */
    height: 300px; /* Ajusta la altura de la imagen */
    object-fit: cover; /* Asegura que la imagen se recorte de manera proporcional */
    display: block; /* Asegura que no haya espacio debajo de la imagen */
}

.experience-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el texto */
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    padding: 20px;
    border-radius: 10px;
    font-size: 18px;
    width: 80%;
    max-width: 90%; /* Limita el ancho máximo para pantallas pequeñas */
    box-sizing: border-box; /* Incluye el padding dentro del ancho */
}

.experience-text h2 {
    font-size: 36px;
    margin-bottom: 10px;
    word-wrap: break-word; /* Asegura que el texto largo se ajuste a la pantalla */
}

.experience-text p {
    font-size: 18px;
    margin: 0;
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
    .experience-section img {
        height: 200px; /* Ajusta la altura en pantallas más pequeñas */
    }

    .experience-text {
        font-size: 16px; /* Ajusta el tamaño del texto */
        width: 90%; /* Hace el contenedor de texto más pequeño */
    }

    .experience-text h2 {
        font-size: 24px; /* Reduce el tamaño del título */
    }

    .experience-text p {
        font-size: 14px; /* Ajusta el tamaño del párrafo */
    }
}


/* Sección de contacto */
.contacto-seccion {
    background-color: #007bff;
    color: white;
    height: 100vh; /* Ocupar toda la altura de la ventana */
    display: flex;
    flex-direction: column; /* Elementos en columna */
    justify-content: center; /* Centrar verticalmente */
    align-items: center; /* Centrar horizontalmente */
    text-align: center; /* Alinear texto al centro */
    padding: 20px;
    margin: 0; /* Eliminar márgenes por si acaso */
}

.contacto-seccion p, 
.contacto-seccion ul {
    margin: 10px 0; /* Espaciado entre elementos */
    line-height: 1.5;
}

.contacto-seccion ul {
    list-style-type: none; /* Quitar puntos en la lista */
    padding-left: 0;
}