.card-offer {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    width: 100%;
    height: 100%; /* solo si necesitas forzar que se estire */
    color: #E2E2E2;
    box-sizing: border-box;
    gap: 18px;
    justify-content: center;
    background: none;
    cursor: pointer;

    /* si deseas eliminar fondo por defecto */
    border: none;
    /* si deseas quitar borde nativo */
}

.card-offer:focus {
    outline: none;
}

.card-offer.current {
    pointer-events: none; /* Desactiva eventos para la tarjeta actual */
    cursor: default;
}

/* Izquierda: nombre */
.card-offer-left {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    width: 100%;
    gap: 18px;
        height: 100%;

}


/* Derecha: precio, nota y flecha */
.card-offer-right {
    flex: 1 1 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.card-offer-price {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}


.price-main {
    font-size: 16px;
    font-weight: 700;
}

.price-unit {
    color: #E2E2E2;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 114.286% */
}

.card-offer-note {
    color: #E2E2E2;
    font-family: Raleway;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
}

/* Divider con SVG */
.card-offer-divider {
    width: 1px;
    align-self: stretch; /* ¡Clave para ocupar el alto completo en flex! */
    flex-shrink: 0;
}

/* Flecha */
.card-offer-arrow {
    font-size: 20px;
}

.card-offer-arrow.arrow-mobile {
    display: none;
}

/* Planes con gradientes */
.card-offer.performance {
    background: linear-gradient(90deg, #415C13 0%, #1B1C18 100%);
    color: #D9FDA8;
}

.card-offer.casual {
    background: linear-gradient(90deg, #4E4639 0%, #1B1C18 100%);
    color: #D4B894;
}

.card-offer.ultimate {
    background: linear-gradient(90deg, #604D0F 0%, #1B1C18 100%);
    color: #FFE375;
}

/* Colores específicos por plan */
.card-offer.performance .card-offer-divider {
    background-color: #D9FDA8;
}

.card-offer.casual .card-offer-divider {
    background-color: #D4B894;
}

.card-offer.ultimate .card-offer-divider {
    background-color: #FFE375;
}

.card-offer.casual .feature-icon {
    color: #D4B894;
}

.card-offer.performance .feature-icon {
    color: #D9FDA8;
}

.card-offer.ultimate .feature-icon {
    color: #FFE375;
}

.card-offer.selection {   
    padding: 16px;

}

.selection .card-offer-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.selection .price-main {
    text-align: center;
    font-family: Montserrat;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 32px */
}

.top-features {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: flex-start;
    gap: 8px;
}

.top-feature-item {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    border-radius: 100px;

}

.bottom-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.top-feature-text {
    color: #1B1C18;
    text-align: center;
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 12px */
}


.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ddd;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
}

.feature-icon {
    flex-shrink: 0;
}

.feature-text {
    flex: 1;
}

.top-feature-item {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
/* Planes con gradientes */
.top-feature-item.performance {
    background: linear-gradient(90deg, #D9FDA8 0%, #94DA32 100%);
}

.top-feature-item.casual {
    background: linear-gradient(90deg, #D4B894 0%, #A88F6C 100%);
}

.top-feature-item.ultimate {
    background: linear-gradient(90deg, #FFE375 0%, #FFB800 100%);
}

@media (max-width: 1023px) {
  

    .card-offer {
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        align-items: flex-start;
    }

    .card-offer-left {
        flex-direction: row;
        gap: 0;
        justify-content: space-between;
    }
    
    .card-offer-name {
        font-size: 16px;
    }


    .price-main {
        font-size: 14px;
    }

    .price-unit {
        font-size: 12px;
    }


    .card-offer-arrow.arrow-mobile {
        display: block;
    }

    .card-offer-arrow.arrow-desktop {
        display: none;
    }

    .card-offer.selection {
        flex-direction: column;
        gap: 16px;
    }

    .card-offer.selection .card-offer-left {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .card-offer.selection .card-offer-name{
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
    }
    /* SOLO oculta en versiones normales */
    .card-offer:not(.selection) .card-offer-divider {
        display: none;
    }
    .card-offer.selection .card-offer-divider {
        width: 100%;
        height: 1px;
    }

    .feature-text {
        font-family: Raleway;
        font-size: 12px;
        font-style: normal;
        line-height: 14px; /* 116.667% */
        letter-spacing: 0.4px;
    }

    .top-feature-text {
        font-size: 10px;
    }
  }