/* fppd-features-container */
.fppd-features-container {
    padding: 3rem 0; /* Espaciado interno */
}

.fppd-section-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: inherit; /* Hereda el color de texto del contenedor principal */
    margin-bottom: 3rem;
}

/* Contenedor de cada característica */
.fppd-feature-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Separador sutil entre características */
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.fppd-feature-item:last-child {
    border-bottom: none; /* Eliminar borde en la última característica */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Imagen de la característica */
.fppd-feature-image {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho disponible en su columna */ 
    object-fit: cover; /* Recorta la imagen para que encaje sin distorsionar */
    border-radius: 12px; /* Bordes redondeados */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Texto de la característica */
.fppd-feature-text-content {
    /* Alineación de texto por defecto */
    text-align: left;
    line-height: 1.6;
    font-size: 1rem;
}

/* Alternar orden de imagen/texto en desktop para crear un efecto zigzag */
@media (min-width: 768px) {
    .fppd-feature-item-reverse {
        flex-direction: row-reverse; /* Cambia el orden de las columnas */
    }
    .fppd-feature-item-reverse .col-md-4 { /* Columna de la imagen a la derecha */
        order: 2;
        padding-left: 1.5rem; /* Ajuste de espaciado */
        padding-right: 1.5rem;
    }
    .fppd-feature-item-reverse .col-md-8 { /* Columna del texto */
        order: 1; /* Mueve la columna del texto a la izquierda */
        padding-right: 1.5rem; /* Ajuste de espaciado */
        padding-left: 1.5rem;
    }

    /* Ajustes para texto y imagen cuando la imagen está a la izquierda (por defecto) */
    .fppd-feature-item .col-md-4 { /* Columna de la imagen a la izquierda */
        padding-left: 1.5rem; /* Ajuste de espaciado */
        padding-right: 1.5rem;
    }
    .fppd-feature-item .col-md-8 { /* Columna del texto */
        padding-left: 1.5rem; /* Ajuste de espaciado */
        padding-right: 1.5rem;
    }
}


/* Responsive: En móvil la imagen arriba, el texto abajo */
@media (max-width: 767.98px) {
    .fppd-feature-item .col-12,
    .fppd-feature-item .col-md-4,
    .fppd-feature-item .col-md-8 {
        order: unset !important; /* Deshacer el orden para que Bootstrap maneje la pila */
    }

    .fppd-feature-item-reverse .fppd-feature-text-content {
        text-align: left; /* Restablecer alineación del texto en móvil */
    }

    .fppd-feature-item .col-md-4,
    .fppd-feature-item .col-md-8,
    .fppd-feature-item-reverse .col-md-4,
    .fppd-feature-item-reverse .col-md-8 {
        padding-left: 1rem; /* Ajustar padding en móvil */
        padding-right: 1rem;
    }

    .fppd-feature-image {
        max-width: 200px; /* Ajustar tamaño de imagen en móvil */
        height: 200px;
    }
}