/* Estilos para la sección de misión y visión */
.mission {
    padding: 80px 20px;
    background-color: #F6BB5C;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: #333;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.section-title:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #964508;
}

.mission-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    margin-bottom: 60px; /* Espacio entre los contenedores de misión y visión */
}

/* Eliminar margen inferior del contenedor de visión */
.mission-container:last-child {
    margin-bottom: 0;
}

/* Misión: texto a la izquierda, imagen a la derecha en desktop */
.mission-block {
    flex-direction: row; /* Texto izquierda, imagen derecha */
}

/* Visión: imagen a la izquierda, texto a la derecha en desktop */
.vision-container {
    flex-direction: row; /* Mantener dirección normal para vision (imagen izquierda, texto derecha) */
}

.mission-subtitle {
    font-size: 1.8rem;
    color: #964508;
    margin-bottom: 20px;
    position: relative;
}

.mission-subtitle:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: #964508;
}

.mission-text {
    flex: 1;
    min-width: 300px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

.mission-text.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.mission-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.mission-slider {
    flex: 1;
    min-width: 300px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
    transition-delay: 0.3s;
}

.mission-slider.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    height: 400px; /* Altura fija para el contenedor */
}

.slide {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio */
    transition: opacity 0.5s ease;
}

/* Estilo específico para la segunda imagen - se ajustará desde arriba */
.slider-container img:nth-child(2) {
    object-position: top; /* Ajusta la imagen desde la parte superior */
}

.slide.active {
    display: block;
}

.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dot.active {
    background: #964508;
}

/* Estilos específicos para la visión */
.vision-text {
    transition-delay: 0.3s; /* Retraso en animación para texto de visión */
    order: 2; /* Colocar el texto en segundo lugar */
}

.vision-slider {
    transition-delay: 0s; /* Sin retraso para el slider de visión */
    order: 1; /* Colocar el slider en primer lugar */
}

/* Mostrar inicialmente todos los elementos */
.mission-block, .vision-container, .mission-text, .mission-slider {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .mission {
        padding: 50px 15px;
    }
    
    .section-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .mission-container {
        flex-direction: column;
        margin-bottom: 40px;
    }
    
    .vision-container {
        flex-direction: column; /* En móvil, mantener el orden vertical normal */
    }
    
    /* Orden en móvil para que sea texto-imagen en ambos casos */
    .vision-text {
        order: 1; /* Primer elemento (texto) */
    }
    
    .vision-slider {
        order: 2; /* Segundo elemento (imagen) */
    }
    
    .mission-subtitle {
        font-size: 1.5rem;
    }
    
    .mission-description {
        font-size: 1rem;
    }
}