.paragraph--type--foto-texto {
    display: flex;
    /* Por defecto, el orden es vertical */
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
    padding: 0 4rem;
}

/* background-color eliminado: se gestiona a nivel de tipo de nodo */

/* Los contenedores de texto e imagen ocupan el mismo espacio */
.paragraph--type--foto-texto>.field--name-field-imagen,
.paragraph--type--foto-texto>.field--name-field-texto {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.paragraph--type--foto-texto .field--name-field-imagen img {
    max-width: 100%;
    height: auto;
    display: block;
    
}

/* "Texto Derecha" -> Texto ARRIBA, Imagen ABAJO */
.posicion-texto-derecha-imagen-izquierda {
    flex-direction: row-reverse;
}

/* "Texto Izquierda" -> Texto ARRIBA, Imagen ABAJO */
.posicion-texto-izquierda-imagen-derecha {
    flex-direction: row;
}

/* "Texto Arriba, Imagen Abajo" -> Vuelta al orden normal */
.posicion-texto-abajo-imagen-arriba {
    flex-direction: column-reverse;
}

@media (max-width: 767px) {
    .paragraph--type--foto-texto {
        /* Menos separación en móviles */
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }

    /* "Texto Izquierda" -> Texto ARRIBA, Imagen ABAJO */
    .posicion-texto-izquierda-imagen-derecha {
        flex-direction: column;
    }

    /* "Texto Derecha" -> Imagen ARRIBA, Texto ABAJO */
    .posicion-texto-derecha-imagen-izquierda {
        flex-direction: column-reverse;
    }

    /* "Texto Arriba, Imagen Abajo" -> Le damos la vuelta al orden normal */
    .posicion-texto-abajo-imagen-arriba {
        flex-direction: column-reverse;
    }
}


/* Contenedor con la imagen de fondo */
.paragraph.grid-features {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 0;
    margin-bottom: 4rem;
}

.paragraph.grid-features .field--type-image {
    margin: 0;
}

[data-theme-color="dark"].paragraph.grid-features .field--name-field-descripcion {
    color: #e0e0e0;
}


.grid-features__overlay {
    padding: 80px 0;
}

.grid-features__overlay.with-bg-image {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.grid-features__overlay.with-bg-image p,
.grid-features__overlay.with-bg-image h2 {
    color: #fff;
}

.paragraph--type--foto-texto {
    display: flex;
    /* Por defecto, el orden es vertical */
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
    padding: 0 4rem;
}

/* Los contenedores de texto e imagen ocupan el mismo espacio */
.paragraph--type--foto-texto>.field--name-field-imagen,
.paragraph--type--foto-texto>.field--name-field-texto {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.posicion-texto-derecha-imagen-izquierda .field--type-image img,
.posicion-texto-derecha-imagen-derecha .field--type-image img {
    margin: 0;
}


/* "Texto Derecha" -> Texto ARRIBA, Imagen ABAJO */
.posicion-texto-derecha-imagen-izquierda {
    flex-direction: row-reverse;
}

/* "Texto Izquierda" -> Texto ARRIBA, Imagen ABAJO */
.posicion-texto-izquierda-imagen-derecha {
    flex-direction: row;
}

/* "Texto Arriba, Imagen Abajo" -> Vuelta al orden normal */
.posicion-texto-abajo-imagen-arriba {
    flex-direction: column-reverse;
}

@media (max-width: 767px) {
    .paragraph--type--foto-texto {
        /* Menos separación en móviles */
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }

    /* "Texto Izquierda" -> Texto ARRIBA, Imagen ABAJO */
    .posicion-texto-izquierda-imagen-derecha {
        flex-direction: column;
    }

    /* "Texto Derecha" -> Imagen ARRIBA, Texto ABAJO */
    .posicion-texto-derecha-imagen-izquierda {
        flex-direction: column-reverse;
    }

    /* "Texto Arriba, Imagen Abajo" -> Le damos la vuelta al orden normal */
    .posicion-texto-abajo-imagen-arriba {
        flex-direction: column-reverse;
    }
}

.paragraph--type--grid-item .field--name-field-icono {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paragraph--type--grid-item .field--name-field-icono img {
    max-width: 96px;
    max-height: 96px;
    margin: 0 auto;
    display: block;
}

.field__item .simple-paragraph {
    padding: 0 4rem !important;
}