/**
 * Card template 12: bloques apilados y centrados (foto, título, descripción y botón).
 * Los estilos se acotan a .gpf-card-12 porque la tarjeta se renderiza dentro de la grilla de
 * [gpf_section_services_card], no de la página donde se diseñó el layout original.
 *
 * Las separaciones entre bloques son las que traía el layout: 25px arriba/abajo de la foto,
 * 15px sobre el título, 25px bajo la descripción y 25px arriba/abajo del botón.
 */

.gpf-card-12 {
    display: flex;
}

/* La tarjeta se estira a la altura de la más alta de su fila: así la descripción puede crecer
   y todos los botones quedan a la misma altura aunque los títulos ocupen distinto largo. */
.gpf-card-12.gpf-card-item {
    align-self: stretch;
}

/* Cuerpo de la tarjeta. Se incluye .elementor-element-populated en el selector para ganarle en
   especificidad al <style> que imprime gpf_column, que con un selector descendente alcanza
   también este wrap. */
.gpf-card-12.elementor-column > .elementor-widget-wrap.elementor-element-populated {
    display: flex;
    /* Elementor deja .elementor-widget-wrap en flex-wrap:wrap; en columna eso repartiría los
       bloques en varias columnas al estirarse la tarjeta */
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 12px;
    padding: 0;
}

/* Cada bloque replica una sección del layout: contenedor a lo ancho, contenido centrado
   verticalmente y alineado al inicio, igual que las secciones con align_items="center"
   y justify_content="start". */
.gpf-card-12 .gpf-card-12__block > .elementor-section {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.gpf-card-12 .gpf-card-12__block > .elementor-section > .elementor-container {
    min-height: 0;
    align-items: center;
    justify-content: start;
}

.gpf-card-12 .gpf-card-12__block--media > .elementor-section {
    padding-top: 25px;
    padding-bottom: 25px;
}

.gpf-card-12 .gpf-card-12__block--title > .elementor-section {
    padding-top: 15px;
    padding-bottom: 0;
}

.gpf-card-12 .gpf-card-12__block--text > .elementor-section {
    padding-top: 0;
    padding-bottom: 25px;
}

.gpf-card-12 .gpf-card-12__block--button > .elementor-section {
    padding-top: 25px;
    padding-bottom: 25px;
}

/* El bloque de texto crece para que, con descripciones de distinto largo, los botones de una
   misma fila queden a la misma altura */
.gpf-card-12 .gpf-card-12__block--text {
    flex: 1;
}

/* La celda es el ítem flex del .elementor-container. min-width:0 es lo que permite que la
   imagen se encoja al ancho de la tarjeta: por defecto un ítem flex tiene min-width:auto, que
   en una imagen equivale a su ancho intrínseco, y las fotos anchas se veían más grandes. */
.gpf-card-12 .gpf-card-12__cell {
    width: 100%;
    min-width: 0;
    text-align: center;
}

/* Todas las fotos se recortan al mismo alto y ancho, sin importar su tamaño original.
   El selector va con el prefijo .gpf-card-12 a propósito: Elementor trae `.elementor img{height:auto}`,
   que con una clase + un tipo le gana a un selector de una sola clase y dejaba cada foto con su
   alto natural. */
.gpf-card-12 .gpf-card-12__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 300px;
    border-radius: 0;
    object-fit: cover;
    object-position: center center;
}

.gpf-card-12__title {
    margin: 0;
}

.gpf-card-12__text {
    margin: 0;
}

/* Botón: ancho al contenido y centrado dentro de la tarjeta */
.gpf-card-12 .gpf-card-12__cell--button > .elementor-widget-container {
    margin: 5px;
}

.gpf-card-12 .gpf-card-12__btn.elementor-button {
    width: auto;
    max-width: 100%;
    border-radius: 1px;
    fill: var(--e-global-color-455bc9c, #FFFFFF);
}

/* En tablet el botón pasa a ocupar todo el ancho, como en el layout original */
@media (max-width: 1024px) {
    .gpf-card-12 .gpf-card-12__btn.elementor-button {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .gpf-card-12.gpf-card-item {
        flex: 0 1 100%;
    }

    .gpf-card-12.elementor-column > .elementor-widget-wrap.elementor-element-populated {
        margin: 0 0 20px;
    }

    .gpf-card-12 .gpf-card-12__img {
        height: 240px;
    }
}