/* ----------------------------- */
/* Bienvenidos                   */
/* ----------------------------- */

.seccion {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #f9f9f9;
}

.bienvenidos-content {
    display: flex;
    gap: 30px;
    border-radius: 10px;
    width: 1130px;
    margin: 0 auto;
}

.bienvenidos-imagen {
    width:325px;
}

.bienvenidos-imagen img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 10px;
}

.bienvenidos-info {
    width:775px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.seccion h1,.seccion h2 {text-align:left;}

/* Lista de ítems */

.items-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom:20px;
}

.items-container .item {
    flex: 1 1 calc(25% - 20px);
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.items-container .item:hover {transform: translateY(-5px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}

.items-container .item i {font-size: 24px;color: #00b4ff;margin-bottom: 10px;}

.items-container .item span {font-size: 16px;color: #050a32;display: block;}

/* Estilos Responsive */

@media (max-width: 1200px) {
    .bienvenidos-content {
        width: 955px;
    }
    .bienvenidos-info {
        width: 640px;
    }
}

@media (max-width: 992px) {
    .bienvenidos-imagen {
        margin: 0 auto;
    }
    .bienvenidos-imagen img {
        width: 100%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 10px;
    }
    .bienvenidos-content {
        flex-direction: column;
        width: 640px;
    }
    .bienvenidos-info {
        width: 640px;
    }
    .bienvenidos-info h1,.bienvenidos-info h2 {text-align:center;}
    .bienvenidos-info p {text-align:justify;}
    
    .items-container .item {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .bienvenidos-content {
        width:480px;
    }
    .bienvenidos-info {
        width:480px;
    }
}

@media (max-width: 480px) {
    .bienvenidos-content {
        width: 320px;
    }
    .bienvenidos-info {
        width: 320px;
    }
}