/* =============================================================
   Tarjeta de Membresía PMPro — estilos base
   Los valores aquí son los DEFAULTS. Todo se puede sobrescribir
   desde los controles de Elementor.
   ============================================================= */

.tmp-card-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* Cuando la tarjeta es destacada, el wrap se convierte en un MARCO con
   background-image (textura) y padding visible. El interior gris queda
   "anidado" dentro del marco. */
.tmp-card-wrap--destacada {
    padding: 10px;
    background-color: #6e7d2f; /* color sólido fallback */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.tmp-card,
.tmp-card *,
.tmp-card *::before,
.tmp-card *::after {
    box-sizing: border-box;
}

.tmp-card {
    display: flex;
    flex-direction: column;
    background-color: #ebebe6;
    padding: 48px 32px;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* Sin border en la versión destacada — el "marco" lo da el wrap.
   Si el usuario añade un borde opcional desde Elementor, ese sí aplica. */
.tmp-card--destacada {
    border: 0 none;
}

.tmp-card--placeholder {
    background: #f5f5f0;
    border: 2px dashed #c8c8b8;
    color: #777;
    text-align: center;
    padding: 32px;
}

/* Icono */
.tmp-card__icono {
    text-align: center;
    margin-bottom: 20px;
}
.tmp-card__icono img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    object-position: center center;
    display: inline-block;
    max-width: 100%;
}

/* Nombre */
.tmp-card__nombre {
    font-size: 2rem;
    line-height: 1.1;
    margin: 0 0 12px;
    text-align: center;
    color: #1a1a1a;
    font-weight: 700;
}

/* Precio */
.tmp-card__precio {
    font-size: 1.1rem;
    margin: 0 0 32px;
    text-align: center;
    color: #333;
    letter-spacing: 0.05em;
}

/* Lista de beneficios */
.tmp-card__beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    text-align: left;
    flex: 1;
}

.tmp-card__beneficio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

.tmp-card__beneficio + .tmp-card__beneficio {
    margin-top: 12px;
}

.tmp-card__beneficio-check {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1.4;
    color: #a3b13a;
    font-weight: 700;
}

.tmp-card__beneficio-cuerpo {
    flex: 1;
}

.tmp-card__beneficio-titulo {
    font-weight: 700;
    color: #1a1a1a;
}

.tmp-card__beneficio-texto {
    color: #333;
}

/* Botón */
.tmp-card__boton {
    display: inline-block;
    padding: 16px 28px;
    background-color: #a3b13a;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    width: 100%;
    max-width: 100%;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    margin-top: auto;
}

.tmp-card.tmp-card--destacada .tmp-card__boton {
    background-color: #6e7d2f;
}

.tmp-card:not(.tmp-card--destacada) .tmp-card__boton:hover,
.tmp-card.tmp-card--destacada .tmp-card__boton:hover {
    background-color: #8c9a31;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Cuando el widget se mete en columnas: que la tarjeta llene la altura
   para que en una fila de 3 tarjetas se vean parejas. */
.elementor-widget-tarjeta_membresia_pmpro,
.elementor-widget-tarjeta_membresia_pmpro > .elementor-widget-container,
.elementor-widget-tarjeta_membresia_pmpro .tmp-card-wrap {
    height: 100%;
}