/* Contenedor principal (La Ventana Invisible) */
.carrusel-contenedor {
    position: relative;
    max-width: 800px; /* Ancho máximo en computadoras */
    width: 100%;      /* Fluido en celulares */
    height: 450px;    /* Altura fija para mantener consistencia */
    margin: 40px auto;
    border-radius: 12px;
    overflow: hidden; /* ¡CLAVE!: Recorta y oculta todo lo que se salga de este cuadro */
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* La tira larga que se va a mover de izquierda a derecha */
.carrusel-tira {
    display: flex; /* Alinea las imágenes horizontalmente una al lado de la otra */
    width: 600%;   /* Como tenemos 3 imágenes, la tira mide 3 veces el ancho del contenedor */
    height: 100%;
    transition: transform 0.5s ease-in-out; /* Transición suave para el desplazamiento */
}

/* Estilos individuales para cada imagen */
.carrusel-img {
    width: calc(100%/6); /* Cada imagen ocupa exactamente un sesto del espacio total de la tira */
    
/* Evita que el navegador comprima o deforme la imagen si el espacio cambia */
    flex-shrink: 0;
    height: 100%;
    object-fit: cover; /* Recorta la imagen proporcionalmente para que llene el espacio sin deformarse */
    
}

/* Botones de navegación flotantes */
.btn-carrusel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente los botones */
    background-color: rgba(255, 255, 255, 0.7);
    color: #333;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.2s;
    z-index: 10;
}

.btn-carrusel:hover {
    background-color: rgba(255, 255, 255, 0.95);
}

.btn-carrusel:active {
    transform: translateY(-50%) scale(0.9); /* Efecto de click */
}

/* Posicionamiento individual de los botones */
.prev { left: 15px; }
.next { right: 15px; }

/* ==========================================
   Ajuste Responsivo para Móviles
   ========================================== */
@media (max-width: 600px) {
    .carrusel-contenedor {
        height: 280px; /* Reducimos la altura en celulares para que no ocupe toda la pantalla */
    }
    .btn-carrusel {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* ==========================================
   ESTILO PARA LOS 4 PÁRRAFOS DEL PRINCIPIO
   ========================================== */
.texto-inicial p {
    /* 1. Modificá acá el tamaño del texto (por ejemplo a 1.2rem que son unos 19px) */
    font-size: 1.2rem !important; 
    
    /* 2. Modificá acá el color que quieras (Azul corporativo oscuro) */
    color: #2c3e50 !important;          
    font-weight: bold;
    /* 3. Ajustes de centrado y legibilidad */
    text-align: center;      
    max-width: 800px;        
    margin: 0 auto 12px auto; /* Centra los bloques y separa un párrafo del siguiente */
    padding: 0 20px;         
}